|
|
@@ -1,85 +1,107 @@
|
|
|
<template>
|
|
|
<!-- 上传 -->
|
|
|
<el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
|
|
- <el-row :gutter="15">
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item prop="code" label="证照编号">
|
|
|
- <el-input
|
|
|
- placeholder="请输入"
|
|
|
- v-model="form.code"
|
|
|
- disabled
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item prop="type" label="证件类型">
|
|
|
- <DictSelection v-model="form.type" dictName="证件类型"></DictSelection>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item prop="status" label="状态">
|
|
|
- <DictSelection v-model="form.status" dictName="规则状态"></DictSelection>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item prop="holder" label="持证人">
|
|
|
- <el-input
|
|
|
- placeholder="请输入"
|
|
|
- v-model="form.holder"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item label="颁发时间">
|
|
|
- <el-date-picker
|
|
|
- style="width:100%"
|
|
|
- v-model="form.enactorTime"
|
|
|
- type="date"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- placeholder="选择日期"
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item prop="type" label="证件类型">
|
|
|
+ <DictSelection
|
|
|
+ v-model="form.type"
|
|
|
+ dictName="证件类型"
|
|
|
+ ></DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item prop="code" label="证照编号">
|
|
|
+ <el-input placeholder="请输入" v-model="form.code"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item label="等级:" prop="level">
|
|
|
+ <el-select style="width: 100%" v-model="form.level" filterable>
|
|
|
+ <el-option
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="(item, index) in levelOptions"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
- <el-form-item prop="date" label="有效期至">
|
|
|
- <el-date-picker
|
|
|
- style="width:100%"
|
|
|
- v-model="form.date"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- :default-time="['00:00:00', '23:59:59']"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
|
|
|
- <el-form-item prop="imageObj" label="证照图片">
|
|
|
- <fileUpload
|
|
|
- v-model="form.imageObj"
|
|
|
- module="main"
|
|
|
- :showLib="true"
|
|
|
- :limit='1'
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
|
|
|
- <el-form-item prop="remark" label="备注">
|
|
|
- <el-input
|
|
|
- placeholder="请输入"
|
|
|
- v-model="form.remark"
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- :resize="`none`"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item prop="status" label="状态">
|
|
|
+ <DictSelection
|
|
|
+ v-model="form.status"
|
|
|
+ dictName="规则状态"
|
|
|
+ ></DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item prop="holder" label="持证人">
|
|
|
+ <el-input
|
|
|
+ v-model="form.holder"
|
|
|
+ clearable
|
|
|
+ readonly
|
|
|
+ placeholder="请选择"
|
|
|
+ @click.native="openStaffSelection"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item label="颁发时间">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="form.enactorTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="选择日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
|
|
|
+ <el-form-item prop="date" label="有效期至">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="form.date"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ :default-time="['00:00:00', '23:59:59']"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
|
|
|
+ <el-form-item prop="imageObj" label="证照图片">
|
|
|
+ <fileUpload
|
|
|
+ v-model="form.imageObj"
|
|
|
+ module="main"
|
|
|
+ :showLib="true"
|
|
|
+ :limit="1"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
|
|
|
+ <el-form-item prop="remark" label="备注">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ :resize="`none`"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <staffSelection
|
|
|
+ ref="staffSelection"
|
|
|
+ @confirm="confirmStaffSelection"
|
|
|
+ ></staffSelection>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button size="small" @click="submit" type="primary">提 交</el-button>
|
|
|
<el-button size="small" @click="close">关 闭</el-button>
|
|
|
@@ -88,34 +110,65 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { saveOrEdit , getPhotoInfo } from '@/api/documentManagement';
|
|
|
+ import staffSelection from './staffSelection.vue';
|
|
|
+ import { saveOrEdit, getPhotoInfo } from '@/api/documentManagement';
|
|
|
import fileUpload from '@/components/upload/fileUpload';
|
|
|
import imgUpload from '@/components/upload/imgUpload';
|
|
|
- import { getCode } from '@/api/ruleManagement/matter'
|
|
|
+ import { getCode } from '@/api/ruleManagement/matter';
|
|
|
export default {
|
|
|
components: {
|
|
|
fileUpload,
|
|
|
- imgUpload
|
|
|
+ imgUpload,
|
|
|
+ staffSelection
|
|
|
},
|
|
|
//注册组件
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
const defaultForm = {
|
|
|
- code:'',
|
|
|
- date:[],
|
|
|
- imageObj:[]
|
|
|
+ code: '',
|
|
|
+ holder: '',
|
|
|
+ holderId: '',
|
|
|
+ date: [],
|
|
|
+ imageObj: []
|
|
|
};
|
|
|
return {
|
|
|
dialogVisible: false,
|
|
|
+ levelOptions: [
|
|
|
+ {
|
|
|
+ label: '初级',
|
|
|
+ value: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '中级',
|
|
|
+ value: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '高级',
|
|
|
+ value: '3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
rules: {
|
|
|
- code: [{ required: true, trigger: 'blur', message: '请输入证照编号' }],
|
|
|
- type: [{ required: true, trigger: 'change' , message: '请选择证件类型'}],
|
|
|
- date: [{ required: true, trigger: 'change', message: '请选择有效期' }],
|
|
|
- holder: [{ required: true, trigger: 'blur', message: '请输入持证人' }],
|
|
|
- status: [{ required: true, trigger: 'change', message: '请选择状态' }],
|
|
|
- imageObj: [{ required: true, trigger: 'change' , message: '请选择证照图片'}]
|
|
|
+ code: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入证照编号' }
|
|
|
+ ],
|
|
|
+ // level: [{ required: true, trigger: 'change', message: '选择等级' }],
|
|
|
+ type: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择证件类型' }
|
|
|
+ ],
|
|
|
+ date: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择有效期' }
|
|
|
+ ],
|
|
|
+ holder: [
|
|
|
+ { required: true, trigger: 'change', message: '请输入持证人' }
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择状态' }
|
|
|
+ ],
|
|
|
+ imageObj: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择证照图片' }
|
|
|
+ ]
|
|
|
},
|
|
|
- form: {...defaultForm },
|
|
|
- title:"新增"
|
|
|
+ form: { ...defaultForm },
|
|
|
+ title: '新增'
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -124,78 +177,88 @@
|
|
|
return this.$store.state.theme.styleResponsive;
|
|
|
}
|
|
|
},
|
|
|
- created () {},
|
|
|
+ created() {},
|
|
|
methods: {
|
|
|
- open (row) {
|
|
|
+ //选择负责人
|
|
|
+ confirmStaffSelection(data) {
|
|
|
+ console.log(data);
|
|
|
+ this.form.holderId = data.map((item) => item.id).join(',');
|
|
|
+ this.form.holder = data.map((item) => item.name).join(',');
|
|
|
+ this.$forceUpdate();
|
|
|
+ console.log(this.form);
|
|
|
+ },
|
|
|
+ openStaffSelection() {
|
|
|
+ this.$refs.staffSelection.open([]);
|
|
|
+ },
|
|
|
+ open(row) {
|
|
|
this.$refs.form && this.$refs.form.clearValidate();
|
|
|
this.dialogVisible = true;
|
|
|
- if(row){
|
|
|
- this.title = '修改'
|
|
|
- this.getInfo(row.id)
|
|
|
- }else{
|
|
|
- this.title = '新增'
|
|
|
- this.$refs.form.resetFields()
|
|
|
- this.form = {...this.defaultForm};
|
|
|
- this.getOrderCode()
|
|
|
+ if (row) {
|
|
|
+ this.title = '修改';
|
|
|
+ this.getInfo(row.id);
|
|
|
+ } else {
|
|
|
+ this.title = '新增';
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.form = { ...this.defaultForm };
|
|
|
+ this.getOrderCode();
|
|
|
}
|
|
|
},
|
|
|
- async getOrderCode () {
|
|
|
+ async getOrderCode() {
|
|
|
const data = await getCode('license_code');
|
|
|
this.$set(this.form, 'code', data);
|
|
|
},
|
|
|
|
|
|
- async getInfo(id){
|
|
|
- const data = await getPhotoInfo(id)
|
|
|
+ async getInfo(id) {
|
|
|
+ const data = await getPhotoInfo(id);
|
|
|
this.form = {
|
|
|
...data,
|
|
|
- date:[data.validityStartTime,data.validityEndTime]
|
|
|
- }
|
|
|
- this.$set(this.form,'imageObj',[data.fileObj])
|
|
|
+ date: [data.validityStartTime, data.validityEndTime]
|
|
|
+ };
|
|
|
+ this.$set(this.form, 'imageObj', [data.fileObj]);
|
|
|
},
|
|
|
|
|
|
- close(){
|
|
|
- this.dialogVisible = false
|
|
|
- // this.$refs.form.resetFields()
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // this.$refs.form.resetFields()
|
|
|
},
|
|
|
|
|
|
- submit(){
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (!valid) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.loading = true;
|
|
|
- if(this.form.date?.length){
|
|
|
- this.form.validityStartTime = this.form.date[0];
|
|
|
- this.form.validityEndTime = this.form.date[1];
|
|
|
- }
|
|
|
- if(this.form.imageObj.length){
|
|
|
- this.form.fileObj = this.form.imageObj[0]
|
|
|
- }
|
|
|
- const data = {
|
|
|
- ...this.form,
|
|
|
- fileId:this.form.fileObj.id
|
|
|
- };
|
|
|
- delete data.date
|
|
|
- delete data.imageObj
|
|
|
- saveOrEdit(data)
|
|
|
- .then((msg) => {
|
|
|
- this.loading = false;
|
|
|
- this.$message.success(msg);
|
|
|
- this.dialogVisible = false;
|
|
|
- this.$emit('success');
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ if (this.form.date?.length) {
|
|
|
+ this.form.validityStartTime = this.form.date[0];
|
|
|
+ this.form.validityEndTime = this.form.date[1];
|
|
|
+ }
|
|
|
+ if (this.form.imageObj.length) {
|
|
|
+ this.form.fileObj = this.form.imageObj[0];
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ ...this.form,
|
|
|
+ fileId: this.form.fileObj.id
|
|
|
+ };
|
|
|
+ delete data.date;
|
|
|
+ delete data.imageObj;
|
|
|
+ saveOrEdit(data)
|
|
|
+ .then((msg) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success(msg);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$emit('success');
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .el-form-item{
|
|
|
- margin-bottom:20px!important;
|
|
|
- }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+ }
|
|
|
</style>
|