| | |
| | | <a-spin :spinning="confirmLoading"> |
| | | <j-form-container :disabled="formDisabled"> |
| | | <!-- 主表单区域 --> |
| | | <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> |
| | | <a-form-model |
| | | ref="form" |
| | | :model="model" |
| | | :rules="validatorRules" |
| | | slot="detail" |
| | | > |
| | | <a-row> |
| | | <a-col :span="12" > |
| | | <a-form-model-item label="计划单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num"> |
| | | <a-input v-model="model.num" placeholder="请输入计划单号" ></a-input> |
| | | <a-col :span="12"> |
| | | <a-form-model-item |
| | | label="计划单号" |
| | | :labelCol="labelCol" |
| | | :wrapperCol="wrapperCol" |
| | | prop="num" |
| | | > |
| | | <a-input |
| | | v-model="model.num" |
| | | placeholder="请输入计划单号" |
| | | ></a-input> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | <a-col :span="12" > |
| | | <a-form-model-item label="计划单类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type"> |
| | | <a-col :span="12"> |
| | | <a-form-model-item |
| | | label="计划单类型" |
| | | :labelCol="labelCol" |
| | | :wrapperCol="wrapperCol" |
| | | prop="type" |
| | | > |
| | | <j-dict-select-tag |
| | | allow-clear |
| | | placeholder="请选择计划单类型" |
| | | :triggerChange="true" |
| | | dictCode="maintenance_type" |
| | | v-model="model.type" |
| | | v-model="model.type" |
| | | /> |
| | | </a-form-model-item> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form-model> |
| | | </j-form-container> |
| | | <!-- 子表单区域 --> |
| | | <a-tabs v-model="activeKey" @change="handleChangeTabs"> |
| | | <a-tab-pane tab="保养计划明细" :key="refKeys[0]" :forceRender="true"> |
| | | <!-- 子表单区域 --> |
| | | <a-tabs |
| | | v-model="activeKey" |
| | | @change="handleChangeTabs" |
| | | > |
| | | <a-tab-pane |
| | | tab="保养计划明细" |
| | | :key="refKeys[0]" |
| | | :forceRender="true" |
| | | > |
| | | <j-vxe-table |
| | | keep-source |
| | | :ref="refKeys[0]" |
| | |
| | | bordered |
| | | :alwaysEdit="true" |
| | | :toolbarConfig='toolbarConfig' |
| | | > |
| | | > |
| | | <template slot='toolbarPrefix'> |
| | | <a-button type='primary' @click='standardSelect' :disabled="formDisabled" icon="plus">设备-保养标准 |
| | | <a-button |
| | | type='primary' |
| | | @click='standardSelect' |
| | | :disabled="formDisabled" |
| | | icon="plus" |
| | | >设备-保养标准 |
| | | </a-button> |
| | | </template> |
| | | </j-vxe-table> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | <standard-select @selectionRows='selectionRows' ref='standardSelectModel' ></standard-select> |
| | | <standard-select |
| | | @selectionRows='selectionRows' |
| | | ref='standardSelectModel' |
| | | ></standard-select> |
| | | </a-spin> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import { getAction } from '@/api/manage' |
| | | import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js' |
| | | import { JVXETypes } from '@/components/jeecg/JVxeTable' |
| | | import { getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js' |
| | | import { validateDuplicateValue } from '@/utils/util' |
| | | import JFormContainer from '@/components/jeecg/JFormContainer' |
| | | import StandardSelect from './StandardSelect' |
| | | import { duplicateCheck } from '@/api/api' |
| | | import dayjs from 'dayjs' |
| | | import { getAction } from '@/api/manage' |
| | | import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js' |
| | | import { JVXETypes } from '@/components/jeecg/JVxeTable' |
| | | import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js' |
| | | import { validateDuplicateValue } from '@/utils/util' |
| | | import JFormContainer from '@/components/jeecg/JFormContainer' |
| | | import StandardSelect from './StandardSelect' |
| | | import { duplicateCheck } from '@/api/api' |
| | | import dayjs from 'dayjs' |
| | | |
| | | export default { |
| | | name: 'EquipmentMaintenancePlanForm', |
| | | mixins: [JVxeTableModelMixin], |
| | | components: { |
| | | JFormContainer, |
| | | StandardSelect, |
| | | dayjs |
| | | }, |
| | | data() { |
| | | return { |
| | | toolbarConfig: { |
| | | export default { |
| | | name: 'EquipmentMaintenancePlanForm', |
| | | mixins: [JVxeTableModelMixin], |
| | | components: { |
| | | JFormContainer, |
| | | StandardSelect, |
| | | dayjs |
| | | }, |
| | | data() { |
| | | return { |
| | | toolbarConfig: { |
| | | // prefix 前缀;suffix 后缀 |
| | | slot: ['prefix', 'suffix'], |
| | | // add 新增按钮;remove 删除按钮;clearSelection 清空选择按钮 |
| | | btn: ['remove', 'clearSelection'] |
| | | }, |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 }, |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 }, |
| | | }, |
| | | model:{ |
| | | }, |
| | | // 新增时子表默认添加几行空数据 |
| | | addDefaultRowNum: 0, |
| | | validatorRules: { |
| | | num: [ |
| | | }, |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 }, |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 }, |
| | | }, |
| | | model: { |
| | | }, |
| | | // 新增时子表默认添加几行空数据 |
| | | addDefaultRowNum: 0, |
| | | validatorRules: { |
| | | num: [ |
| | | { required: true, message: '请输入编码!' }, |
| | | { min: 1, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }, |
| | | { validator: this.validateNum }, |
| | | ], |
| | | type: [ |
| | | type: [ |
| | | { required: true, message: '请选择计划单类型!' }, |
| | | ], |
| | | }, |
| | | refKeys: ['equipmentMaintenancePlanDetail', ], |
| | | tableKeys:['equipmentMaintenancePlanDetail', ], |
| | | activeKey: 'equipmentMaintenancePlanDetail', |
| | | // 保养计划明细 |
| | | equipmentMaintenancePlanDetailTable: { |
| | | loading: false, |
| | | dataSource: [ |
| | | ], |
| | | columns: [ |
| | | }, |
| | | refKeys: ['equipmentMaintenancePlanDetail',], |
| | | tableKeys: ['equipmentMaintenancePlanDetail',], |
| | | activeKey: 'equipmentMaintenancePlanDetail', |
| | | // 保养计划明细 |
| | | equipmentMaintenancePlanDetailTable: { |
| | | loading: false, |
| | | dataSource: [ |
| | | ], |
| | | columns: [ |
| | | { |
| | | title: '保养标准id', |
| | | key: 'standardId', |
| | | type: JVXETypes.hidden, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align:'center', |
| | | width:"230px", |
| | | }, |
| | | { |
| | | title: '保养标准', |
| | | key: 'standardNum', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align:'center', |
| | | width:"230px", |
| | | }, |
| | | { |
| | | title: '设备统一编码', |
| | | key: 'equipmentNum', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align:'center', |
| | | width:"230px", |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | key: 'equipmentName', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align:'center', |
| | | width:"230px", |
| | | }, |
| | | { |
| | | title: '设备型号', |
| | | key: 'model', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align:'center', |
| | | width:"230px", |
| | | }, |
| | | { |
| | | title: '计划开始时间', |
| | | key: 'planStartTime', |
| | | type: JVXETypes.datetime, |
| | | placeholder: '请输入${title}', |
| | | align:'center', |
| | | width:"250px", |
| | | validateRules: [ |
| | | { |
| | | required: true, // 必填 |
| | | message: '请输入${title}' // 显示的文本 |
| | | }, |
| | | { |
| | | handler({ cellValue, row, column }, callback, target) { |
| | | var start = dayjs(cellValue); |
| | | var end = dayjs(row.planEndTime); |
| | | if (!start.isBefore(end)) { |
| | | callback(false, '结束时间需滞后于开始时间') // false = 未通过,可以跟自定义提示 |
| | | } else { |
| | | callback(true) // true = 通过验证 |
| | | } |
| | | }, |
| | | message: '${title}默认提示' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | title: '计划结束时间', |
| | | key: 'planEndTime', |
| | | type: JVXETypes.datetime, |
| | | placeholder: '请输入${title}', |
| | | align:'center', |
| | | width:"250px", |
| | | validateRules: [ |
| | | { |
| | | required: true, // 必填 |
| | | message: '请输入${title}' // 显示的文本 |
| | | }, |
| | | { |
| | | handler({ cellValue, row, column }, callback, target) { |
| | | var start = dayjs(row.planStartTime); |
| | | var end = dayjs(cellValue); |
| | | if (!start.isBefore(end)) { |
| | | callback(false, '结束时间需滞后于开始时间') // false = 未通过,可以跟自定义提示 |
| | | } else { |
| | | callback(true) // true = 通过验证 |
| | | } |
| | | }, |
| | | message: '${title}默认提示' |
| | | } |
| | | ] |
| | | }, |
| | | ] |
| | | }, |
| | | url: { |
| | | add: "/eam/equipmentMaintenancePlan/add", |
| | | edit: "/eam/equipmentMaintenancePlan/edit", |
| | | queryById: "/eam/equipmentMaintenancePlan/queryById", |
| | | equipmentMaintenancePlanDetail: { |
| | | list: '/eam/equipmentMaintenancePlan/listEquipmentMaintenancePlanDetailByMainId' |
| | | title: '保养标准id', |
| | | key: 'standardId', |
| | | type: JVXETypes.hidden, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align: 'center', |
| | | width: "230px", |
| | | }, |
| | | } |
| | | } |
| | | }, |
| | | props: { |
| | | //表单禁用 |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | required: false |
| | | } |
| | | }, |
| | | computed: { |
| | | formDisabled(){ |
| | | return this.disabled |
| | | { |
| | | title: '保养标准', |
| | | key: 'standardNum', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align: 'center', |
| | | width: "230px", |
| | | }, |
| | | { |
| | | title: '设备统一编码', |
| | | key: 'equipmentNum', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align: 'center', |
| | | width: "230px", |
| | | }, |
| | | { |
| | | title: '设备名称', |
| | | key: 'equipmentName', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align: 'center', |
| | | width: "230px", |
| | | }, |
| | | { |
| | | title: '设备型号', |
| | | key: 'model', |
| | | type: JVXETypes.normal, |
| | | placeholder: '请输入${title}', |
| | | defaultValue: '', |
| | | align: 'center', |
| | | width: "230px", |
| | | }, |
| | | { |
| | | title: '计划开始时间', |
| | | key: 'planStartTime', |
| | | type: JVXETypes.datetime, |
| | | placeholder: '请输入${title}', |
| | | align: 'center', |
| | | width: "250px", |
| | | validateRules: [ |
| | | { |
| | | required: true, // 必填 |
| | | message: '请输入${title}' // 显示的文本 |
| | | }, |
| | | { |
| | | handler({ cellValue, row, column }, callback, target) { |
| | | var start = dayjs(cellValue); |
| | | var end = dayjs(row.planEndTime); |
| | | if (!start.isBefore(end)) { |
| | | callback(false, '结束时间需滞后于开始时间') // false = 未通过,可以跟自定义提示 |
| | | } else { |
| | | callback(true) // true = 通过验证 |
| | | } |
| | | }, |
| | | message: '${title}默认提示' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | title: '计划结束时间', |
| | | key: 'planEndTime', |
| | | type: JVXETypes.datetime, |
| | | placeholder: '请输入${title}', |
| | | align: 'center', |
| | | width: "250px", |
| | | validateRules: [ |
| | | { |
| | | required: true, // 必填 |
| | | message: '请输入${title}' // 显示的文本 |
| | | }, |
| | | { |
| | | handler({ cellValue, row, column }, callback, target) { |
| | | var start = dayjs(row.planStartTime); |
| | | var end = dayjs(cellValue); |
| | | if (!start.isBefore(end)) { |
| | | callback(false, '结束时间需滞后于开始时间') // false = 未通过,可以跟自定义提示 |
| | | } else { |
| | | callback(true) // true = 通过验证 |
| | | } |
| | | }, |
| | | message: '${title}默认提示' |
| | | } |
| | | ] |
| | | }, |
| | | ] |
| | | }, |
| | | }, |
| | | created () { |
| | | }, |
| | | methods: { |
| | | addBefore(){ |
| | | this.equipmentMaintenancePlanDetailTable.dataSource=[] |
| | | }, |
| | | getAllTable() { |
| | | let values = this.tableKeys.map(key => getRefPromise(this, key)) |
| | | return Promise.all(values) |
| | | }, |
| | | /** 调用完edit()方法之后会自动调用此方法 */ |
| | | editAfter() { |
| | | this.$nextTick(() => { |
| | | }) |
| | | // 加载子表数据 |
| | | if (this.model.id) { |
| | | let params = { planId: this.model.id } |
| | | this.requestSubTableData(this.url.equipmentMaintenancePlanDetail.list, params, this.equipmentMaintenancePlanDetailTable) |
| | | } |
| | | }, |
| | | //校验所有一对一子表表单 |
| | | validateSubForm(allValues){ |
| | | return new Promise((resolve,reject)=>{ |
| | | Promise.all([ |
| | | ]).then(() => { |
| | | resolve(allValues) |
| | | }).catch(e => { |
| | | if (e.error === VALIDATE_FAILED) { |
| | | // 如果有未通过表单验证的子表,就自动跳转到它所在的tab |
| | | this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index] |
| | | } else { |
| | | console.error(e) |
| | | } |
| | | }) |
| | | }) |
| | | url: { |
| | | add: "/eam/equipmentMaintenancePlan/add", |
| | | edit: "/eam/equipmentMaintenancePlan/edit", |
| | | queryById: "/eam/equipmentMaintenancePlan/queryById", |
| | | equipmentMaintenancePlanDetail: { |
| | | list: '/eam/equipmentMaintenancePlan/listEquipmentMaintenancePlanDetailByMainId' |
| | | }, |
| | | /** 整理成formData */ |
| | | classifyIntoFormData(allValues) { |
| | | let main = Object.assign(this.model, allValues.formValue) |
| | | return { |
| | | ...main, // 展开 |
| | | equipmentMaintenancePlanDetailList: allValues.tablesValue[0].tableData, |
| | | } |
| | | }, |
| | | validateError(msg){ |
| | | this.$message.error(msg) |
| | | }, |
| | | standardSelect() { |
| | | getNum: '/eam/sysIdentity/getNumNew' |
| | | } |
| | | } |
| | | }, |
| | | props: { |
| | | //表单禁用 |
| | | disabled: { |
| | | type: Boolean, |
| | | default: false, |
| | | required: false |
| | | } |
| | | }, |
| | | computed: { |
| | | formDisabled() { |
| | | return this.disabled |
| | | }, |
| | | }, |
| | | created() { |
| | | }, |
| | | methods: { |
| | | addBefore() { |
| | | this.equipmentMaintenancePlanDetailTable.dataSource = [] |
| | | this.getSeq() |
| | | }, |
| | | getAllTable() { |
| | | let values = this.tableKeys.map(key => getRefPromise(this, key)) |
| | | return Promise.all(values) |
| | | }, |
| | | /** 调用完edit()方法之后会自动调用此方法 */ |
| | | editAfter() { |
| | | this.$nextTick(() => { |
| | | }) |
| | | // 加载子表数据 |
| | | if (this.model.id) { |
| | | let params = { planId: this.model.id } |
| | | this.requestSubTableData(this.url.equipmentMaintenancePlanDetail.list, params, this.equipmentMaintenancePlanDetailTable) |
| | | } |
| | | }, |
| | | //校验所有一对一子表表单 |
| | | validateSubForm(allValues) { |
| | | return new Promise((resolve, reject) => { |
| | | Promise.all([ |
| | | ]).then(() => { |
| | | resolve(allValues) |
| | | }).catch(e => { |
| | | if (e.error === VALIDATE_FAILED) { |
| | | // 如果有未通过表单验证的子表,就自动跳转到它所在的tab |
| | | this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index] |
| | | } else { |
| | | console.error(e) |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | /** 整理成formData */ |
| | | classifyIntoFormData(allValues) { |
| | | let main = Object.assign(this.model, allValues.formValue) |
| | | return { |
| | | ...main, // 展开 |
| | | equipmentMaintenancePlanDetailList: allValues.tablesValue[0].tableData, |
| | | } |
| | | }, |
| | | validateError(msg) { |
| | | this.$message.error(msg) |
| | | }, |
| | | standardSelect() { |
| | | let ids = [] |
| | | let tableData = this.$refs.equipmentMaintenancePlanDetail.getTableData() |
| | | for (let i = 0; i < tableData.length; i++) { |
| | |
| | | var equipmentMaintenancePlanDetail = {} |
| | | if (tableStr.indexOf(data[i].id) == -1) { |
| | | equipmentMaintenancePlanDetail = { |
| | | standardId:data[i].id, |
| | | standardId: data[i].id, |
| | | standardNum: data[i].num, |
| | | equipmentNum:data[i].equipmentNum, |
| | | equipmentName:data[i].equipmentName, |
| | | model:data[i].equipmentModel, |
| | | planId:this.model.id, |
| | | equipmentNum: data[i].equipmentNum, |
| | | equipmentName: data[i].equipmentName, |
| | | model: data[i].equipmentModel, |
| | | planId: this.model.id, |
| | | } |
| | | } |
| | | addRows.push(equipmentMaintenancePlanDetail) |
| | |
| | | }) |
| | | }, |
| | | |
| | | |
| | | } |
| | | getSeq() { |
| | | getAction(this.url.getNum, { type: 'MaintenancePlan', length: 4 }).then(res => { |
| | | if (res.success) { |
| | | this.model.num = res.result |
| | | } |
| | | }) |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |