vue+element ui实现表单组件的封装

效果图：
在这里插入图片描述
在这里插入图片描述

主要是使用vue + elmentUi 的from的基础上进行封装
在这里插入图片描述

使用改组件，是需要自定义从父组件传入一下字段表单字段

export const topicTypeMainTaskEdit: any = new Map([// 主任务可编辑状态['feasibleInstructions', // 督办件[{value: 'documentNum',formKey: ['documentNum'],rules: [{ required: true, message: '请输入办文编号', trigger: 'blur' },{ min: 0, max: 30, message: '办文编号字数长度超过限制' }],label: '办文编号',class: 'half-item',type: 'text',maxlength: 30},{value: 'taskTitle',formKey: ['taskTitle'],rules: [{ required: true, message: '请输入任务标题', trigger: 'blur' },{ min: 0, max: 300, message: '任务标题字数长度超过限制' }],label: '任务标题',class: 'half-item-all',isMate: true, // 填写时是否和关联任务的相应的字段匹配type: 'text',maxlength: 300},{value: 'taskSourceId',formKey: {value: 'taskSourceId',label: 'taskSource'},rules: [{ required: true, message: '请选择事项类型', trigger: 'change' }],hasSlot: {key: 'taskSource',label: '事项类型管理',type: 'managementMatters'},slotKey: 'taskSource',label: '事项类型',type: 'select',list: 'itemTypeList',options: () => JSON.parse(localStorage.getItem('store')).firstLevelTask.itemTypeData.filter(res => { return res.dicStatus * 1 === 1 })},{value: 'mainLeaderId',formKey: {value: 'mainLeaderId',label: 'mainLeader'},label: '批示领导',hasSlot: {key: 'mainLeader',label: '批示领导管理',type: 'managementMatters'},slotKey: 'mainLeader',type: 'select',multiple: true,list: 'leaderOptions',options: () => JSON.parse(localStorage.getItem('store')).firstLevelTask.mainLeaderData.filter(res => { return res.dicStatus * 1 === 1 })},{value: 'indicationTime',formKey: ['indicationTime'],label: '批示时间',class: 'half-item',type: 'date',noLimitCurrentDate: true // false为限制不能选当天以前的日期},{value: 'itemClaim',formKey: ['itemClaim'],rules: [{ min: 0, max: 300, message: '省领导批示内容字数长度超过限制' }],label: '省领导批示内容',class: '',type: 'textarea',showWordLimit: true,maxlength: 300,rows: 4},{value: 'workRequire',formKey: ['workRequire'],rules: [{ min: 0, max: 300, message: '领导跟批情况字数长度超过限制' }],label: '领导跟批情况',class: '',type: 'textarea',showWordLimit: true,maxlength: 300,rows: 4},{value: 'documentUrl',formKey: ['documentUrl'],// rules: [//   { required: true, message: '请输入相关公文', trigger: 'blur' }// ],label: '相关公文',class: 'half-item',type: 'text',maxlength: 300},// {//   value: 'documentUrl',//   label: '相关公文',//   formKey: ['documentUrl', 'mainDeptId', 'mainUnitId'],//   type: 'authPanel',//   authPanelType: 'department',//   deptArray: [],//   multiple: true// },{value: 'taskContent',formKey: ['taskContent'],rules: [{ required: true, message: '请输入任务描述', trigger: 'blur' },{ min: 0, max: 800, message: '任务描述字数长度超过限制' }],label: '任务描述',class: '',type: 'textarea',showWordLimit: true,isMate: true, // 填写时是否和关联任务的相应的字段匹配maxlength: 800,rows: 4},{value: 'mainUnitName',rules: [{ required: true, message: '请选择主办处室', trigger: 'blur' }],label: '主办处室',formKey: ['mainUnitName', 'mainDeptId', 'mainUnitId'],type: 'authPanel',authPanelType: 'department',deptArray: [],multiple: true,linkage: 'mainUnitName',fn: (data: any, formData: any) => {let interrupt = falseconst departId = Array.isArray(data) && data.map(item => {return item.departId})formData && formData.forEach(i => {if (i.key === 'assistUnitNames') {i.deptArray.forEach(j => {if (departId.indexOf(j.departId) > -1) {interrupt = trueMessage({message: `${j.name}不能同时作为主办、会办处室`,type: 'error'})}})}})return {interrupt}}},{value: 'assistUnitNames',label: '会办处室',formKey: ['assistUnitNames', 'assistDeptIds', 'assistUnitIds'],type: 'authPanel',authPanelType: 'department',deptArray: [],multiple: true,linkage: 'assistUnitNames',fn: (data: any, formData: any) => {let interrupt = falseconst departId = Array.isArray(data) && data.map(item => {return item.departId})formData && formData.forEach(i => {if (i.key === 'mainUnitName') {i.deptArray.forEach(j => {if (departId.indexOf(j.departId) > -1) {interrupt = trueMessage({message: `${j.name}不能同时作为主办、会办处室`,type: 'error'})}})}})return {interrupt}}},{value: 'leaderId',formKey: {value: 'leaderId',label: 'leader'},rules: [{ required: true, message: '请选择分管领导', trigger: 'change' }],label: '分管领导',hasSlot: {key: 'leader',label: '分管领导管理',type: 'managementMatters'},slotKey: 'leader',type: 'select',multiple: true,list: 'leaderOptions',options: () => JSON.parse(localStorage.getItem('store')).firstLevelTask.leaderData.filter(res => { return res.dicStatus * 1 === 1 })},{value: 'supervisionCycle',formKey: ['cycleType', 'supervisionCycle', 'supervisionCycleIds', 'firstSubmitTime'],rules: [{ required: true, message: '请选择报送时间' }],label: '报送时间',class: 'half-item',type: 'deliveryTime'},{value: 'limitDate',formKey: ['limitDate'],label: '办结期限',class: 'half-item',type: 'date'},{value: 'peopleArray',formKey: ['sendCopys', 'sendCopysId', 'sendCopysDeptId'],label: '抄送人员',type: 'authPanel',authPanelType: 'people',deptArray: [],multiple: true,hasSameDataDefaultProps: { isSame: 'complexId', parentId: 'departId', childrenId: 'userId' }}]],['keyWork', // 重点工作[{value: 'taskTitle',formKey: ['taskTitle'],rules: [{ required: true, message: '请输入任务标题', trigger: 'blur' },{ min: 0, max: 300, message: '任务标题字数长度超过限制' }],label: '任务标题',type: 'text',maxlength: 300},{value: 'workRequire',formKey: ['workRequire'],rules: [{ min: 0, max: 500, message: '描述字数长度超过限制' }],label: '描述',type: 'textarea',showWordLimit: true,maxlength: 500,rows: 4},{value: 'taskSourceId',formKey: {value: 'taskSourceId',label: 'taskSource'},rules: [{ required: true, message: '请选择事项类型', trigger: 'change' }],hasSlot: {key: 'taskSource',label: '事项类型管理',type: 'managementMatters'},slotKey: 'taskSource',label: '事项类型',type: 'select',list: 'itemTypeList',options: () => JSON.parse(localStorage.getItem('store')).firstLevelTask.itemTypeData.filter(res => { return res.dicStatus * 1 === 1 })},// {//   value: 'documentUrl',//   label: '相关公文',//   formKey: ['documentUrl'],//   type: 'authPanel',//   authPanelType: 'department',//   deptArray: [],//   multiple: true// },{value: 'documentUrl',formKey: ['documentUrl'],label: '相关公文',class: 'half-item',type: 'text',maxlength: 300},{value: 'peopleArray',formKey: ['sendCopys', 'sendCopysId', 'sendCopysDeptId'],label: '抄送人员',type: 'authPanel',authPanelType: 'people',deptArray: [],multiple: true,hasSameDataDefaultProps: { isSame: 'complexId', parentId: 'departId', childrenId: 'userId' }}]]
])

然后先初始化表单字段的数据

const getTopicTypeData = this.topicTypeData.length > 0 ? this.topicTypeData : topicTypeData[this.topicTypeDataKey].get(this.otherTask || this.topicType)// const getTopicTypeData = this.topicTypeData.length > 0 ? this.topicTypeData : topicTypeData[this.topicTypeDataKey].get(this.topicType || this.otherTask)this.topicTypeMainTask = [...getTopicTypeData.map(item => {return { ...item, type: item.type === 'text' ? 'input' : item.type, isEdit: !item.disabled, key: item.value, value: '', options: typeof item.options === 'function' ? item.options() : item.options || '' }}), { key: 'fileJson', type: 'upload', value: '' }]this.topicTypeMainTask.forEach(item => {// if (item.type === 'authPanel' && item.authPanelType === 'people') {if (item.type === 'authPanel' && item.authPanelType === 'people' && !item.mixedData) {item.deptArray = this.taskData.sendCopysId ? this.resestPeopleArray(this.taskData.sendCopysId, this.taskData.sendCopys, this.taskData.sendCopysDeptId) : []item.value = this.taskData[item.key]} else if (item.type === 'authPanel' && (item.authPanelType === 'department' || (item.mixedData === true && item.authPanelType === 'people'))) {// else if (item.type === 'authPanel' && item.authPanelType === 'department') {if (item.disabled && typeof item.disabled === 'function') {item.disabled = item.disabled(!!(this.taskData.status && this.taskData.status === '4'))}item.deptArray = this.resestDeptArr(item.formKey)item.value = this.taskData[item.key]} else if (item.type === 'deliveryTime') {item.deliveryTime = {supervisionCycleIds: this.taskData.supervisionCycleIds,cycleType: this.taskData.cycleType,supervisionCycle: this.taskData.supervisionCycle,firstSubmitTime: this.taskData.firstSubmitTime}item.value = this.taskData[item.key]} else if (item.type === 'select') {if (this.topicType === 'coordinatingCommittee' && item.key === 'meetingTypeId') {item.value = '1'} else {if (item.multiple) {item.value = (this.taskData[item.key] && this.taskData[item.key].split(',')) || []} else {item.value = this.taskData[item.key]}}} else if (item.type === 'upload') {item.value = this.taskData[item.key] ? this.taskData[item.key] : '[]'} else {item.value = this.taskData[item.key]}})

这些字段都是存在在一个新ts文件中，如果对象有值，根据不用的表单类型进行赋值回显，没有的话就是空

表单组件中传入的值代表的意思
 props: {isShowSearchBtn: { // 是否显示查询按钮type: Boolean,default: true},labelPosition: { // 表单文本标题的位置type: String,default: 'right'},labelWidth: { // 表单文本标题的宽度type: String,default: ''},formItemWidth: {type: String,default: '100%'},setStyle: {type: Object,default: () => {return {}}},updateModel: {type: Object,default: () => {return {}}},isRules: { // 是否要校验type: Boolean,default: true},rules: { // 校验规则type: Object,default: () => {return {}}},formData: { // 表单数据type: Array,default: () => {return []}},inline: { // 是否是行内type: Boolean,default: true},flexWrap: {type: Boolean,default: false}, // 控制表单是否换行justifyContent: { // 布局type: String,default: 'space-between'}, // 表单布局风格noCheck: {type: Boolean,default: true},pickerOptions: { // 时间日期表单的时间限制type: Object,default: () => {return {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7}}}}},

如果表单数据对象遍历中出现slotKey，代表这个字段是使用插槽
在这里插入图片描述

在父组件中使用插槽，然后将根据不用字段显示不同的内容
在这里插入图片描述

表单组件里面的表单类型
<el-formref="formRef":inline="inline":model="model":rules="isRules ? rules : {}":label-position="labelPosition":label-width="labelWidth":style="{'flex-wrap': flexWrap ? 'nowrap' : 'wrap', 'justify-content' : justifyContent}"><el-form-itemv-for="(item,i) in formData":key="'form'+i":class="item.type + '-form'":label="item.label":prop="item.key":rules="isRules ? item.rules : []":error="item.success ? '' : item.message":style="{width: item.width ? item.width : formItemWidth, ...item.style }"><!-- 插槽 --><template v-if="item.slotKey"><slot :name="item.slotKey" :row="item" /></template><template v-else><!-- 输入框 --><el-inputv-if="item.type === 'input'"v-model="model[item.key]":disabled="!item.isEdit":maxlength="item.maxlength":show-word-limit="item.showWordLimit":placeholder="item.placeholder || '请输入'"@blur="handleBlur(item)"/><!-- 文本框 --><el-inputv-else-if="item.type === 'textarea'"v-model="model[item.key]":disabled="!item.isEdit":maxlength="item.maxlength":show-word-limit="item.showWordLimit"type="textarea":rows="3":placeholder="item.placeholder || '请输入'"@blur="handleBlur(item)"/><!-- 下拉框 --><el-selectv-else-if="item.type === 'select'"v-model="model[item.key]":disabled="!item.isEdit":multiple="item.multiple":placeholder="item.placeholder || '请选择'"@change="(val) => updateDeptArray(val, item)"><el-option v-for="(option, j) in item.options" :key="'option'+j" :label="option.label" :value="option.value" /></el-select><!-- 输入框（可以过滤） --><el-autocompletev-else-if="item.type === 'autocomplete'"v-model="model[item.key]":fetch-suggestions="(a,b) => querySearch(a,b,item.options)":placeholder="item.placeholder || '请输入'"@select="(val) => handleSelect(val, item)"/><!-- 单选框 --><el-radio-group v-else-if="item.type === 'radio'" v-model="model[item.key]"><el-radio v-for="(option, z) in item.options" :key="'option'+z" :label="option.value">{{ option.label }}</el-radio></el-radio-group><!-- 日期 --><el-date-pickerv-else-if="item.type === 'date'":key="'datePicker' + i"v-model="model[item.key]":picker-options="!item.noLimitCurrentDate && pickerOptions"type="date":placeholder="item.placeholder || '请选择'"value-format="yyyy-MM-dd"format="yyyy-MM-dd"/><!-- 日期时间 --><el-date-pickerv-else-if="item.type === 'daterange'":key="'daterangePicker' + i"v-model="model[item.key]":picker-options="!item.noLimitCurrentDate && pickerOptions"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"format="yyyy-MM-dd"/><!-- 数字 --><el-input-numberv-else-if="item.type === 'inputNumber'"v-model="model[item.key]":min="1"/><!-- 报送时间 --><div v-else-if="item.type === 'deliveryTime'" class="module-timeInput" @click="showSubMission"><el-input v-model="model[item.key]" :disabled="!item.isEdit" :placeholder=" item.placeholder || '请选择报送时间'" readonly /></div><!-- 单位或者人员组织构架 --><auth-panelv-else-if="item.type === 'authPanel'":auth-panel-params="item.params":mixed-data="item.mixedData":disabled="item.disabled":type="item.authPanelType":dept-array="item.deptArray":has-same-data-default-props="item.hasSameDataDefaultProps":multiple="item.multiple":stage-single="item.stageSingle":select-all="true"@update:deptArray="(val) => updateDeptArray(val, item)"/><!-- <auth-panel v-else-if="item.type === 'authPanel'" :disabled="!item.isEdit" :type="item.authPanelType" :dept-array="item.deptArray" :has-same-data-default-props="item.hasSameDataDefaultProps" :multiple="item.multiple" :select-all="true" @update:deptArray="(val) => updateDeptArray(val, item)" /> --><!-- 文件上传 --><template v-else-if="item.type === 'upload'"><el-form-item label=""><div class="group-item"><div class="exportFiles"><upload :file-data="fileList" @changeFile="getFileList" /> <!--:file-type="fileFormat"--></div></div><file-list v-for="file in fileList" :key="file.fileId" :file="file" :file-operate-btn="['eyes', 'closeBg']" @remove-file="removeFile" /></el-form-item></template></template></el-form-item><el-form-item><template v-if="isShowSearchBtn"><el-button type="primary" size="middle" @click="submitForm('formRef')">查询</el-button><el-button plain @click="resetForm('formRef')">重置</el-button></template><slot name="btnList" /></el-form-item></el-form>

完整代码

<template><div class="form" :style="setStyle"><el-formref="formRef":inline="inline":model="model":rules="isRules ? rules : {}":label-position="labelPosition":label-width="labelWidth":style="{'flex-wrap': flexWrap ? 'nowrap' : 'wrap', 'justify-content' : justifyContent}"><el-form-itemv-for="(item,i) in formData":key="'form'+i":class="item.type + '-form'":label="item.label":prop="item.key":rules="isRules ? item.rules : []":error="item.success ? '' : item.message":style="{width: item.width ? item.width : formItemWidth, ...item.style }"><!-- 插槽 --><template v-if="item.slotKey"><slot :name="item.slotKey" :row="item" /></template><template v-else><!-- 输入框 --><el-inputv-if="item.type === 'input'"v-model="model[item.key]":disabled="!item.isEdit":maxlength="item.maxlength":show-word-limit="item.showWordLimit":placeholder="item.placeholder || '请输入'"@blur="handleBlur(item)"/><!-- 文本框 --><el-inputv-else-if="item.type === 'textarea'"v-model="model[item.key]":disabled="!item.isEdit":maxlength="item.maxlength":show-word-limit="item.showWordLimit"type="textarea":rows="3":placeholder="item.placeholder || '请输入'"@blur="handleBlur(item)"/><!-- 下拉框 --><el-selectv-else-if="item.type === 'select'"v-model="model[item.key]":disabled="!item.isEdit":multiple="item.multiple":placeholder="item.placeholder || '请选择'"@change="(val) => updateDeptArray(val, item)"><el-option v-for="(option, j) in item.options" :key="'option'+j" :label="option.label" :value="option.value" /></el-select><!-- 输入框（可以过滤） --><el-autocompletev-else-if="item.type === 'autocomplete'"v-model="model[item.key]":fetch-suggestions="(a,b) => querySearch(a,b,item.options)":placeholder="item.placeholder || '请输入'"@select="(val) => handleSelect(val, item)"/><!-- 单选框 --><el-radio-group v-else-if="item.type === 'radio'" v-model="model[item.key]"><el-radio v-for="(option, z) in item.options" :key="'option'+z" :label="option.value">{{ option.label }}</el-radio></el-radio-group><!-- 日期 --><el-date-pickerv-else-if="item.type === 'date'":key="'datePicker' + i"v-model="model[item.key]":picker-options="!item.noLimitCurrentDate && pickerOptions"type="date":placeholder="item.placeholder || '请选择'"value-format="yyyy-MM-dd"format="yyyy-MM-dd"/><!-- 日期时间 --><el-date-pickerv-else-if="item.type === 'daterange'":key="'daterangePicker' + i"v-model="model[item.key]":picker-options="!item.noLimitCurrentDate && pickerOptions"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"format="yyyy-MM-dd"/><!-- 数字 --><el-input-numberv-else-if="item.type === 'inputNumber'"v-model="model[item.key]":min="1"/><!-- 报送时间 --><div v-else-if="item.type === 'deliveryTime'" class="module-timeInput" @click="showSubMission"><el-input v-model="model[item.key]" :disabled="!item.isEdit" :placeholder=" item.placeholder || '请选择报送时间'" readonly /></div><!-- 单位或者人员组织构架 --><auth-panelv-else-if="item.type === 'authPanel'":auth-panel-params="item.params":mixed-data="item.mixedData":disabled="item.disabled":type="item.authPanelType":dept-array="item.deptArray":has-same-data-default-props="item.hasSameDataDefaultProps":multiple="item.multiple":stage-single="item.stageSingle":select-all="true"@update:deptArray="(val) => updateDeptArray(val, item)"/><!-- <auth-panel v-else-if="item.type === 'authPanel'" :disabled="!item.isEdit" :type="item.authPanelType" :dept-array="item.deptArray" :has-same-data-default-props="item.hasSameDataDefaultProps" :multiple="item.multiple" :select-all="true" @update:deptArray="(val) => updateDeptArray(val, item)" /> --><!-- 文件上传 --><template v-else-if="item.type === 'upload'"><el-form-item label=""><div class="group-item"><div class="exportFiles"><upload :file-data="fileList" @changeFile="getFileList" /> <!--:file-type="fileFormat"--></div></div><file-list v-for="file in fileList" :key="file.fileId" :file="file" :file-operate-btn="['eyes', 'closeBg']" @remove-file="removeFile" /></el-form-item></template></template></el-form-item><el-form-item><template v-if="isShowSearchBtn"><el-button type="primary" size="middle" @click="submitForm('formRef')">查询</el-button><el-button plain @click="resetForm('formRef')">重置</el-button></template><slot name="btnList" /></el-form-item></el-form><!--报送周期组件--><submission-dialog ref="submissionDialog" :sub-mission-data="subMissionData" @confirm="confirmMission" /></div>
</template>
<script>
import authPanel from '@/components/authPanel/index.vue'
import submissionDialog from '@/components/Dialog/submissionDialog.vue'
import upload from '@/components/UploadCom/index.vue'
import fileList from '@/components/fileList/index.vue'
export default {name: 'InitForm',components: { authPanel, upload, fileList, submissionDialog },props: {isShowSearchBtn: { // 是否显示查询按钮type: Boolean,default: true},labelPosition: { // 表单文本标题的位置type: String,default: 'right'},labelWidth: { // 表单文本标题的宽度type: String,default: ''},formItemWidth: {type: String,default: '100%'},setStyle: {type: Object,default: () => {return {}}},updateModel: {type: Object,default: () => {return {}}},isRules: { // 是否要校验type: Boolean,default: true},rules: { // 校验规则type: Object,default: () => {return {}}},formData: { // 表单数据type: Array,default: () => {return []}},inline: { // 是否是行内type: Boolean,default: true},flexWrap: {type: Boolean,default: false}, // 控制表单是否换行justifyContent: { // 布局type: String,default: 'space-between'}, // 表单布局风格noCheck: {type: Boolean,default: true},pickerOptions: { // 时间日期表单的时间限制type: Object,default: () => {return {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7}}}}},data() {return {model: {},fileList: [],linkageDataKey: {},subMissionData: { // 报送时间回显的参数格式supervisionCycleIds: '',cycleType: '',firstSubmitTime: '',supervisionCycle: ''},defaultProps: { // 初始化表单key值value: 'value', // 表单显示的值authPanel: 'list' // 获取选择单位/选择人员所选择的对象值}}},watch: {updateModel: {handler(newV) {if (newV) {this.model[Object.keys(newV)[0]] = newV[Object.keys(newV)[0]]}},deep: true}},created() {this.init()},methods: {init() {this.formData.forEach(item => {!item.defaultProps && (item.defaultProps = this.defaultProps)if (item.type === 'deliveryTime') {this.subMissionData = item.deliveryTime ? item.deliveryTime : this.subMissionData}if (item.linkage) {this.linkageDataKey[item.linkage] = this.formData.find(data => {return data.key === item.linkage})const linkageType = Array.isArray(this.linkageDataKey[item.linkage].value)if ((linkageType && this.linkageDataKey[item.linkage].value.length > 0) || (!linkageType && this.linkageDataKey[item.linkage].value)) {if (item.fn(this.linkageDataKey[item.linkage].value).then) {item.fn(this.linkageDataKey[item.linkage].value).then(() => {this.$set(this.model, item.key, Array.isArray(item.value) ? item.value.map(String) : item.value)})} else {this.$set(this.model, item.key, Array.isArray(item.value) ? item.value.map(String) : item.value)}}} else {this.$set(this.model, item.key, item.value)// if (item.type === 'select' && item.multiple) {//   if (item.value && item.value.length > 0) {//     this.$set(this.model, item.key, item.value)//   } else {//     this.$set(this.model, item.key, [])//     if (!item.message) {//       this.$nextTick(() => {//         this.$refs['formRef'].clearValidate([item.key])//       })//     }//   }// } else {//   this.$set(this.model, item.key, item.value)// }// this.model[item.key] = item.value}if (item.type === 'upload') {this.fileList = item.value ? JSON.parse(item.value) : []}})},// 清除校验// clearRules(value) {//   this.$nextTick(() => {//     if (value) {//       this.$refs['formRef'].clearValidate([value])//     } else {//       this.$refs['formRef'].resetFields()//     }//   })// },querySearch(queryString, cb, options) {const option = options || []cb(option.filter(item => {return item.value.indexOf(queryString) > -1}))},handleSelect(val, data) {data.formKey.forEach(item => {if (item.indexOf('Id') > -1) {this.$set(this.model, item, val.id)} else {this.$set(this.model, item, val.value)}})},submitForm(formEl) {if (!formEl) returnthis.$emit('submit', this.model)},resetForm(formEl) {if (!formEl) returnthis.$refs[formEl].resetFields()this.$emit('reset', this.model)},getTreeSelectData(data) {this.$set(this.model, 'treeSelectData', data)},updateDeptArray(data, formItem) {let interrupt = false // 是否中断赋值formItem.type === 'authPanel' && this.$set(this.model, formItem.key, data.map(item => { return item.name }).join(','))this.$refs.formRef.clearValidate(formItem.key)this.formData.forEach(item => {if (item.linkage === formItem.key) {interrupt = item.fn(data, this.formData).interrupt}if (item.type === 'authPanel' && item.key === formItem.key && !interrupt) {item.deptArray = data}})if (!interrupt) {this.$emit('update:formData', this.formData)}},async getFormData(callback) {if (!this.$refs.formRef) returnconst initFormData = this.initSaveFormData(JSON.parse(JSON.stringify(this.formData)))let data = {}await this.$refs.formRef.validate((valid) => {const errmsg = '验证不通过'if (valid) {data = callback ? callback({ data: initFormData, valid: true }) : { data: initFormData, valid: true }} else {data = { valid: false }}})return data// if (noCheck) {//   return this.checkFormData(callback, initFormData)// }},getFormDataNoCheck(callback) { // 获取数据不需要校验if (!this.$refs.formRef) returnconst initFormData = this.initSaveFormData(JSON.parse(JSON.stringify(this.formData)))this.$refs.formRef.clearValidate()return (callback ? callback({ data: initFormData, valid: true }) : { data: initFormData, valid: true })},initSaveFormData(initFormData) {Object.keys(this.model).forEach(modelKey => {initFormData.forEach(formData => {if (formData.key === modelKey) {if (formData.key === 'supervisionCycle') {formData.deliveryTime = this.subMissionData}formData[formData.defaultProps.value] = this.model[modelKey]}})})return initFormData},// 显示报送周期showSubMission() {this.$refs.submissionDialog.showVisilie()},// 回显周期数据confirmMission(callData) {this.$set(this.model, 'supervisionCycle', callData['supervisionCycle'])Object.keys(this.subMissionData).forEach(item => {this.$set(this.subMissionData, item, callData[item])})},getFileList(fileList) {this.fileList = fileList.map((item, index) => {return {source: item.source || '',fileId: item.fileId,fileName: item.name,name: item.name,fileSize: item.fileSize,sort: index + 1,suffixName: item.iconType}})this.$set(this.model, 'fileJson', JSON.stringify(this.fileList))},removeFile(data) {this.fileList = this.fileList.filter(item => {return item.fileId !== data.fileId})this.$set(this.model, 'fileJson', JSON.stringify(this.fileList))},// 输入框失去焦点handleBlur(data) {if (data.isMate) {console.log('1440', data, this.model[data.key], this.formData)this.$emit('getMatched', data, this.model, this.formData)}}}
}
</script><style lang="scss" scoped>// .el-form{//   padding: 27px 16px 9px;// }.form{::v-deep .el-autocomplete{width: 100%;}::v-deep .el-form-item{&:last-of-type{margin-right: 0;}}::v-deep .el-form--inline{display: flex;justify-content: space-between;}::v-deep .el-form--inline{.el-form-item{display: flex;margin-right: 0;}}::v-deep .el-tag{line-height: initial;}::v-deep .el-form-item__content{width: 100%;flex: 1}::v-deep .el-date-editor.el-input, ::v-deep .el-date-editor.el-input__inner{width: inherit;}}.el-select{width: 100%;}.hint{margin-left: 6px;}// .dialogObj-text-box {//   margin-left: 12px;//   min-width: 60px;//   &:hover {//     color: #1a8af9;//     cursor: pointer;//   }// }</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/786595.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

云计算面临的威胁

云计算面临的威胁

目录 一、概述 二、威胁建模分析 2.1 威胁建模的概念 2.2 威胁建模起到的作用 2.3 威胁建模的流程 2.3.1 威胁建模流程图 2.3.2 威胁建模流程内容 2.3.2.1 绘制数据流图 2.3.2.2 威胁识别与分析 2.3.2.2.1 STRIDE威胁分析方法论 2.3.2.3 制定消减措施 2.3.2.3.1 消减…
阅读更多...
景联文科技提供高质量医疗健康AI大模型数据

景联文科技提供高质量医疗健康AI大模型数据

医疗行业是典型的知识和技术密集型行业&#xff0c;其发展水平直接关系到国民健康和生命质量。 医疗健康AI大模型&#xff0c;作为人工智能的一个分支&#xff0c;能够通过学习大量的数据来生成新的数据实例&#xff0c;在医药研发、医学影像、医疗文本分析等都有广泛的应用前景…
阅读更多...
项目管理计划

项目管理计划

《项目管理计划》 1.项目背景说明 2.项目目标和范围 3.项目组织架构 4.项目进度管理办法 5.项目沟通管理 6.项目风险管理 软件开发全套资料包获取进主页或文末个人名片直接获取。
阅读更多...
Flutter Web 的未来，Wasm Native 即将到来

Flutter Web 的未来，Wasm Native 即将到来

早在去年 Google I/O 发布 Flutter 3.10 的时候就提到过&#xff0c; Flutter Web 的未来会是 Wasm Native &#xff0c;当时 Flutter 团队就表示&#xff0c;Flutter Web 的定位不是设计为通用 Web 的框架&#xff0c;类似的 Web 框架现在有很多&#xff0c;而 Flutter 的定位…
阅读更多...
containerd配置HTTP私仓

containerd配置HTTP私仓

文章目录 1. &#x1f6e0;️ 基础环境配置2. &#x1f433; Docker安装3. &#x1f6a2; 部署Harbor&#xff0c;HTTP访问4. &#x1f4e6; 部署ContainerD5. &#x1f504; 修改docker配置文件&#xff0c;向harbor中推入镜像6. 配置containerd6.1. 拉取镜像验证6.2. 推送镜像…
阅读更多...
网络原理 - HTTP / HTTPS(1)——http请求

网络原理 - HTTP / HTTPS(1)——http请求

目录 一、认识HTTP协议 理解 应用层协议 二、fiddler的安装以及介绍 1、fiddler的安装 2、fiddler的介绍 三、HTTP 报文格式 1、http的请求 2、http的响应 五、认识URL 六、关于URL encode 一、认识HTTP协议 HTTP 全称为&#xff1a;“超文本传输协议”&#xff0c;是…
阅读更多...
好物分享：FPGA实现SDI视频编解码的方案设计汇总

好物分享：FPGA实现SDI视频编解码的方案设计汇总

目录 1、前言2、专用芯片方案2.1、GS2971FPGA的图像采集 设计方案2.2、GS2971FPGA的图像采集图像缩放 设计方案2.3、GS2971FPGA的图像采集纯verilog图像缩放纯verilog视频拼接 设计方案2.4、GS2971FPGA的图像采集HLS图像缩放Video Mixer视频拼接 设计方案2.5、GS2971FPGA的图像…
阅读更多...
C++初阶:5.STL简介(了解)

C++初阶:5.STL简介(了解)

STL简介&#xff08;了解&#xff09; 一.什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 二. STL的版本 原始版本 Alexander Stepan…
阅读更多...
算法设计课第二周（分治 芯片测试）

算法设计课第二周（分治 芯片测试）

实验2 芯片测试算法设计 一、【实验目的】 &#xff08;1&#xff09;理解分治策略的设计思想&#xff1b; &#xff08;2&#xff09;熟悉将伪码转换为可运行的程序的方法&#xff1b; &#xff08;3&#xff09;能够根据算法的要求设计具体的实例。 二、【实验内容】 有…
阅读更多...
【教学类-09-06】20240401细线迷宫图01+箭头图片（A4横版一页-1份横版）

【教学类-09-06】20240401细线迷宫图01+箭头图片（A4横版一页-1份横版）

作品展示 作品展示 word模板 重点说明 代码展示 批量制作细线条的迷宫图(A4横板一面一份横版)图片加箭头图片 作者&#xff1a; 1、落难Coder https://blog.csdn.net/u014297502/article/details/124839912 2、AI对话大师、 3、阿夏 作者&#xff1a;2024年4月3日 numint(input…
阅读更多...
构建第一个ArkTS应用（Stage模型）

构建第一个ArkTS应用（Stage模型）

创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Servi…
阅读更多...
2024年04月IDE流行度最新排名

2024年04月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年04月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…
阅读更多...
【面试八股总结】传输控制协议TCP（一）

【面试八股总结】传输控制协议TCP（一）

一、什么是TCP协议 TCP是传输控制协议Transmission Control Protocol TCP 是面向连接的、可靠的、基于字节流的传输层通信协议。 面向连接的&#xff1a;每条TCP连接杜只能有两个端点&#xff0c;每一条TCP连接只能是点对点的&#xff08;一对一&#xff09;可靠的&#xff1a…
阅读更多...
产品经理与产品原型

产品经理与产品原型

点击下载《产品经理与产品原型》 1. 前言 互联网产品经理在向技术部门递交产品策划方案时，除了详尽的需求阐述，一份清晰易懂的产品原型设计方案同样不可或缺。一份出色的原型设计，不仅能促进前期的深入讨论，更能让美工和开发人员更直观地理解产品特性，进而优化工作流程，…
阅读更多...
Flutter iOS上架指南

Flutter iOS上架指南

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…
阅读更多...
NoSQL之 Redis配置

NoSQL之 Redis配置

目录 关系数据库与非关系型数据库 关系型数据库&#xff1a; ●非关系型数据库 关系型数据库和非关系型数据库区别&#xff1a; &#xff08;1&#xff09;数据存储方式不同 &#xff08;2&#xff09;扩展方式不同 对事务性的支持不同 非关系型数据库产生背景 Redis简介…
阅读更多...
Python：百度AI开放平台——OCR图像文字识别应用

Python：百度AI开放平台——OCR图像文字识别应用

一、注册百度AI开放平台 使用百度AI服务的步骤为&#xff1a; 注册&#xff1a;注册成为百度AI开放平台开发者&#xff1b;创建AI应用&#xff1a;在百度API开放平台上创建相关类型的的AI应用&#xff0c;获得AppID、API Key和Secret Key&#xff1b;调用API&#xff1a;调用…
阅读更多...
渗透测试：数据库UDF提权（linux）

渗透测试：数据库UDF提权（linux）

目录 开头: 1.UDF提权简介&#xff1a; 1.1共享库文件(UDF文件)指定目录&#xff1a; 版本特征&#xff1a; 操作系统版本&#xff1a; 2.靶场UDF提权复现 提权前提 1.要有一个高权限的MySQL的账号 ​编辑 2.MySQL的权限配置secure_file_priv为空 3.必须有存放UDF文件的…
阅读更多...
抖音快手直播录屏+无水印下载视频V3.6

抖音快手直播录屏+无水印下载视频V3.6

抖音快手直播录屏无水印下载视频更新最新版本V3.6 下载&#xff1a;https://download.csdn.net/download/m0_66047725/88978976 更多资源下载&#xff1a;关注我。
阅读更多...
Stable Diffusion WebUI 附加功能/图片放大（Extras）：单张图片/批量处理/从目录进行批量处理

Stable Diffusion WebUI 附加功能/图片放大（Extras）：单张图片/批量处理/从目录进行批量处理

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 篇文章主要讲解 Stable Diffusion WebUI 的附加功能/图片放大&#xff08;Extras&#xff09;的使用&#xff0c;主要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023