| | |
| | | <template> |
| | | <j-modal |
| | | :title="title" |
| | | :width="1200" |
| | | :visible="visible" |
| | | :confirmLoading="confirmLoading" |
| | | switchFullscreen |
| | | @ok="handleOk" |
| | | @cancel="handleCancel" |
| | | cancelText="关闭"> |
| | | <j-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen |
| | | @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> |
| | | <a-spin :spinning="spinning"> |
| | | <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
| | | <a-row :gutter="24"> |
| | |
| | | <a-col :span="8"> |
| | | <a-form-model-item prop="maintenancePeriod" label="保养周期"> |
| | | <a-input-number v-model="model.maintenancePeriod" placeholder="请输入保养周期" :min="1" :precision="0" |
| | | :disabled="model.maintenanceCategory=='POINT_INSPECTION'||model.maintenanceCategory=='SECOND_MAINTENANCE'" |
| | | style="width: 100%"/> |
| | | </a-form-model-item> |
| | | </a-col> |
| | |
| | | </a-row> |
| | | |
| | | <a-row :gutter="24"> |
| | | <j-vxe-table |
| | | ref="editableDetailTable" |
| | | :rowNumber="true" |
| | | :rowSelection="true" |
| | | :bordered="true" |
| | | :alwaysEdit="true" |
| | | :toolbar="true" |
| | | :toolbarConfig="detail.toolbarConfig" |
| | | keep-source |
| | | :height="300" |
| | | :loading="detail.loading" |
| | | :dataSource="detail.dataSource" |
| | | :columns="detail.columns" |
| | | style="margin-top: 8px;"> |
| | | <template v-slot:itemPart="props"> |
| | | <a-textarea v-model="props.row.itemPart" allowClear @blur="$refs.editableDetailTable.validateTable()" |
| | | :placeholder="!Boolean(model.maintenanceCategory)?'请选择保养分类':'请输入部位'" :rows="1" |
| | | autoSize :disabled="!Boolean(model.maintenanceCategory)"/> |
| | | <a-tabs :active-key="activeTabKey" v-if="model.maintenanceCategory" @change="handleTabChange"> |
| | | <!--点检--> |
| | | <template v-if="model.maintenanceCategory=='POINT_INSPECTION'"> |
| | | <a-tab-pane tab="日点检" key="1" forceRender> |
| | | <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="300" |
| | | :dataSource="detail.dayInspectionList" :columns="detail.inspectionColumns"/> |
| | | </a-tab-pane> |
| | | <a-tab-pane tab="周点检" key="2" forceRender> |
| | | <j-vxe-table ref="editableDetailTable2" rowNumber rowSelection bordered alwaysEdit toolbar |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="300" |
| | | :dataSource="detail.weekInspectionList" :columns="detail.inspectionColumns"/> |
| | | </a-tab-pane> |
| | | </template> |
| | | |
| | | <template v-slot:itemCategory="props"> |
| | | <j-dict-select-tag v-model="props.row.itemCategory" :dict-code="encodedDictCode" |
| | | @change="$refs.editableDetailTable.validateTable()" |
| | | :placeholder="!Boolean(model.maintenanceCategory)?'请选择保养分类':'请选择项保养分类'" |
| | | :disabled="!Boolean(model.maintenanceCategory)"/> |
| | | <!--二保--> |
| | | <template v-if="model.maintenanceCategory=='SECOND_MAINTENANCE'"> |
| | | <a-tab-pane tab="操作工" key="1" forceRender> |
| | | <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="300" |
| | | :dataSource="detail.operatorMaintenanceList" :columns="detail.secondMaintenanceColumns"/> |
| | | </a-tab-pane> |
| | | <a-tab-pane tab="维修工" key="2" forceRender> |
| | | <j-vxe-table ref="editableDetailTable2" rowNumber rowSelection bordered alwaysEdit toolbar |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="300" |
| | | :dataSource="detail.repairerMaintenanceList" :columns="detail.secondMaintenanceColumns"/> |
| | | </a-tab-pane> |
| | | </template> |
| | | </j-vxe-table> |
| | | |
| | | <!--三保--> |
| | | <template v-if="model.maintenanceCategory=='THIRD_MAINTENANCE'"> |
| | | <a-tab-pane tab="三保" key="1"> |
| | | <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="300" |
| | | :dataSource="detail.thirdMaintenanceList" :columns="detail.thirdMaintenanceColumns"/> |
| | | </a-tab-pane> |
| | | </template> |
| | | </a-tabs> |
| | | </a-row> |
| | | </a-form-model> |
| | | </a-spin> |
| | |
| | | }, |
| | | confirmLoading: false, |
| | | spinning: false, |
| | | activeTabKey: '1', |
| | | validatorRules: { |
| | | standardName: [ |
| | | { required: true, message: '请输入规范名称', trigger: 'change' } |
| | |
| | | upgrade: '/eam/maintenanceStandard/upgrade' |
| | | }, |
| | | detail: { |
| | | loading: false, |
| | | dataSource: [], |
| | | columns: [ |
| | | dayInspectionList: [], |
| | | weekInspectionList: [], |
| | | operatorMaintenanceList: [], |
| | | repairerMaintenanceList: [], |
| | | thirdMaintenanceList: [], |
| | | inspectionColumns: [ |
| | | { |
| | | title: 'ID', |
| | | key: 'id', |
| | |
| | | align: 'center', |
| | | placeholder: '请输入项目序号', |
| | | width: 150, |
| | | validateRules: [ |
| | | { required: true, message: '请输入项目序号' }, |
| | | { unique: true, message: '项目序号不能重复' } |
| | | ] |
| | | }, |
| | | { |
| | | title: '部位', |
| | | key: 'itemPart', |
| | | type: JVXETypes.slot, |
| | | slotName: 'itemPart', |
| | | placeholder: '请输入部位', |
| | | align: 'center', |
| | | validateRules: [{ handler: this.itemPartValidate }] |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | key: 'itemCategory', |
| | | type: JVXETypes.slot, |
| | | slotName: 'itemCategory', |
| | | align: 'center', |
| | | validateRules: [{ handler: this.itemCategoryValidate }] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | |
| | | placeholder: '请输入保养项目', |
| | | type: JVXETypes.textarea, |
| | | align: 'center', |
| | | validateRules: [ |
| | | { required: true, message: '请输入保养项目' } |
| | | ] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | }, |
| | | { |
| | | title: '保养规范或要求', |
| | |
| | | placeholder: '请输入保养规范或要求', |
| | | type: JVXETypes.textarea, |
| | | align: 'center', |
| | | validateRules: [ |
| | | { required: true, message: '请输入保养规范或要求' } |
| | | ] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | } |
| | | ], |
| | | defaultColumns: [ |
| | | secondMaintenanceColumns: [ |
| | | { |
| | | title: 'ID', |
| | | key: 'id', |
| | |
| | | align: 'center', |
| | | placeholder: '请输入项目序号', |
| | | width: 150, |
| | | validateRules: [ |
| | | { required: true, message: '请输入项目序号' }, |
| | | { unique: true, message: '项目序号不能重复' } |
| | | ] |
| | | }, |
| | | { |
| | | title: '部位', |
| | | key: 'itemPart', |
| | | type: JVXETypes.slot, |
| | | slotName: 'itemPart', |
| | | placeholder: '请输入部位', |
| | | align: 'center', |
| | | validateRules: [{ handler: this.itemPartValidate }] |
| | | }, |
| | | { |
| | | title: '保养项分类', |
| | | key: 'itemCategory', |
| | | type: JVXETypes.slot, |
| | | slotName: 'itemCategory', |
| | | align: 'center', |
| | | validateRules: [{ handler: this.itemCategoryValidate }] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | }, |
| | | { |
| | | title: '保养项目', |
| | |
| | | placeholder: '请输入保养项目', |
| | | type: JVXETypes.textarea, |
| | | align: 'center', |
| | | validateRules: [ |
| | | { required: true, message: '请输入保养项目' } |
| | | ] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | } |
| | | ], |
| | | thirdMaintenanceColumns: [ |
| | | { |
| | | title: 'ID', |
| | | key: 'id', |
| | | type: JVXETypes.hidden |
| | | }, |
| | | { |
| | | title: '保养规范或要求', |
| | | key: 'itemDemand', |
| | | placeholder: '请输入保养规范或要求', |
| | | title: 'standardId', |
| | | key: 'standardId', |
| | | type: JVXETypes.hidden |
| | | }, |
| | | { |
| | | title: '保养部位', |
| | | key: 'itemPart', |
| | | type: JVXETypes.textarea, |
| | | slotName: 'itemPart', |
| | | align: 'center', |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | }, |
| | | { |
| | | title: '保养内容', |
| | | key: 'itemName', |
| | | placeholder: '请输入${title}', |
| | | type: JVXETypes.textarea, |
| | | align: 'center', |
| | | validateRules: [ |
| | | { required: true, message: '请输入保养规范或要求' } |
| | | ] |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | }, |
| | | { |
| | | title: '验收标准', |
| | | key: 'itemDemand', |
| | | placeholder: '请输入${title}', |
| | | type: JVXETypes.textarea, |
| | | align: 'center', |
| | | validateRules: [{ required: true, message: '请输入${title}' }] |
| | | } |
| | | ], |
| | | toolbarConfig: { |
| | |
| | | } |
| | | } |
| | | }, |
| | | |
| | | watch: { |
| | | 'model.maintenanceCategory': { |
| | | handler(val) { |
| | | if (val) { |
| | | if (val != 'THIRD_MAINTENANCE') this.detail.columns = [...this.detail.defaultColumns.filter(item => item.key != 'itemPart')] |
| | | else this.detail.columns = [...this.detail.defaultColumns.filter(item => item.key != 'itemCategory')] |
| | | } |
| | | else this.detail.columns = [...this.detail.defaultColumns] |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | encodedDictCode() { |
| | | let suffix |
| | | if (!Boolean(this.model.maintenanceCategory) || this.model.maintenanceCategory === 'THIRD_MAINTENANCE') return |
| | | else suffix = this.model.maintenanceCategory.split('_')[1] |
| | | |
| | | const dictCode = `sys_dict_item,item_text,item_value,item_value like '%${suffix}' and dict_id='1940598438685134850'` |
| | | return encodeURIComponent(dictCode) |
| | | } |
| | | }, |
| | | methods: { |
| | | // 主页面点击新增后触发 |
| | | add() { |
| | | this.resetData() |
| | | this.model = {} |
| | | this.visible = true |
| | | this.editable = true |
| | | this.upgradeFlag = false |
| | | this.detail.dataSource = [] |
| | | }, |
| | | |
| | | /** |
| | |
| | | * @param record 主页面列表行记录 |
| | | */ |
| | | edit(record) { |
| | | this.resetData() |
| | | this.model = Object.assign({}, record) |
| | | this.visible = true |
| | | this.editable = false |
| | | this.upgradeFlag = false |
| | | this.detail.dataSource = [] |
| | | this.loadDetail(record.id) |
| | | }, |
| | | |
| | |
| | | * @param record 主页面列表行记录 |
| | | */ |
| | | upgrade(record) { |
| | | this.resetData() |
| | | this.model = Object.assign({}, record) |
| | | this.visible = true |
| | | this.editable = false |
| | | this.upgradeFlag = true |
| | | this.detail.dataSource = [] |
| | | this.loadDetail(record.id) |
| | | }, |
| | | |
| | | //加载详情数据 |
| | | loadDetail(standardId) { |
| | | this.spinning = true |
| | | getAction(this.url.detail, { standardId }) |
| | | .then(res => { |
| | | if (res.success) { |
| | | switch (this.model.maintenanceCategory) { |
| | | case 'POINT_INSPECTION': |
| | | this.detail.dayInspectionList = res.result.filter(item => item.itemCategory == 'DAY_INSPECTION') |
| | | this.detail.weekInspectionList = res.result.filter(item => item.itemCategory == 'WEEK_INSPECTION') |
| | | break |
| | | case 'SECOND_MAINTENANCE': |
| | | this.detail.operatorMaintenanceList = res.result.filter(item => item.itemCategory == 'OPERATOR_MAINTENANCE') |
| | | this.detail.repairerMaintenanceList = res.result.filter(item => item.itemCategory == 'REPAIRER_MAINTENANCE') |
| | | break |
| | | case 'THIRD_MAINTENANCE': |
| | | this.detail.thirdMaintenanceList = res.result.filter(item => !Boolean(item.itemCategory)) |
| | | break |
| | | default: |
| | | } |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | |
| | | * @param value 保养分类值 |
| | | */ |
| | | handleMaintenanceCategoryChange(value) { |
| | | delete this.model.maintenancePeriod |
| | | switch (value) { |
| | | case 'THIRD_MAINTENANCE': |
| | | this.model.periodUnit = '年' |
| | | if (this.activeTabKey != '1') this.activeTabKey = '1' |
| | | break |
| | | case 'SECOND_MAINTENANCE': |
| | | this.model.periodUnit = '月' |
| | | this.model.maintenancePeriod = 6 |
| | | break |
| | | case 'POINT_INSPECTION': |
| | | this.model.periodUnit = '天' |
| | | this.model.maintenancePeriod = 1 |
| | | break |
| | | default: |
| | | delete this.model.periodUnit |
| | | } |
| | | |
| | | const tableData = this.$refs.editableDetailTable.getTableData() |
| | | tableData.forEach(item => { |
| | | if (value !== 'THIRD_MAINTENANCE') delete item.itemPart |
| | | delete item.itemCategory |
| | | }) |
| | | |
| | | this.detail.dataSource = [...tableData] |
| | | this.$refs.editableDetailTable.validateTable() |
| | | if (this.model.maintenancePeriod) this.$refs.form.clearValidate('maintenancePeriod') |
| | | }, |
| | | |
| | | /** |
| | | * 保养部位校验 |
| | | * @param cellValue 输入值 |
| | | * @param callback 回调函数 |
| | | */ |
| | | itemPartValidate({ cellValue }, callback) { |
| | | if (this.model.maintenanceCategory === 'THIRD_MAINTENANCE') { |
| | | if (cellValue) callback(true) |
| | | else callback(false, '请选择${title}') |
| | | } else { |
| | | callback(true) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 保养项分类校验 |
| | | * @param cellValue 输入值 |
| | | * @param callback 回调函数 |
| | | */ |
| | | itemCategoryValidate({ cellValue }, callback) { |
| | | if (this.model.maintenanceCategory === 'THIRD_MAINTENANCE') { |
| | | callback(true) |
| | | } else { |
| | | if (cellValue) callback(true) |
| | | else callback(false, '请选择${title}') |
| | | } |
| | | async handleTabChange(tabKey) { |
| | | let errMap = await this.$refs['editableDetailTable' + this.activeTabKey].validateTable() |
| | | if (errMap) return |
| | | this.activeTabKey = tabKey |
| | | }, |
| | | |
| | | // 提交事件 |
| | | async handleOk() { |
| | | // 保养分类为空时不校验明细 |
| | | if (this.model.maintenanceCategory) { |
| | | // 校验当下tab下的表格是否为空 |
| | | let tableData = this.$refs['editableDetailTable' + this.activeTabKey].getTableData() |
| | | if (tableData.length == 0) { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: '当前保养明细不能为空' |
| | | }) |
| | | return |
| | | } |
| | | |
| | | // 校验当前tab下的表格校验规则 |
| | | let errMap = await this.$refs['editableDetailTable' + this.activeTabKey].validateTable() |
| | | if (errMap) return false |
| | | |
| | | // 校验另一tab保养明细表格是否为空(三保无需) |
| | | if (this.model.maintenanceCategory != 'THIRD_MAINTENANCE') { |
| | | if (this.activeTabKey == '1') tableData = this.$refs.editableDetailTable2.getTableData() |
| | | else tableData = this.$refs.editableDetailTable1.getTableData() |
| | | |
| | | if (tableData.length == 0) { |
| | | this.activeTabKey = this.activeTabKey == '1' ? '2' : '1' |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: '当前保养明细不能为空' |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | } |
| | | |
| | | const that = this |
| | | let errMap = await that.$refs.editableDetailTable.validateTable() |
| | | if (errMap) return false |
| | | // 触发表单验证 |
| | | this.$refs.form.validate(valid => { |
| | | if (valid) { |
| | | let tableData = that.$refs.editableDetailTable.getTableData() |
| | | let removeData = that.$refs.editableDetailTable.getDeleteData() |
| | | that.model.tableDetailList = [...tableData] |
| | | that.model.removeDetailList = [...removeData] |
| | | |
| | | let tableData1 = that.$refs.editableDetailTable1.getTableData() |
| | | let tableData2 = [] |
| | | let currentTabItemMaintenanceList = [] |
| | | if (this.model.maintenanceCategory != 'THIRD_MAINTENANCE') { |
| | | tableData2 = that.$refs.editableDetailTable2.getTableData() |
| | | if (this.model.maintenanceCategory == 'POINT_INSPECTION') currentTabItemMaintenanceList = ['DAY_INSPECTION', 'WEEK_INSPECTION'] |
| | | else currentTabItemMaintenanceList = ['OPERATOR_MAINTENANCE', 'REPAIRER_MAINTENANCE'] |
| | | } |
| | | if (currentTabItemMaintenanceList.length != 0) { |
| | | tableData1 = tableData1.map(item => { |
| | | return { |
| | | ...item, |
| | | itemCategory: currentTabItemMaintenanceList[0] |
| | | } |
| | | }) |
| | | tableData2 = tableData2.map(item => { |
| | | return { |
| | | ...item, |
| | | itemCategory: currentTabItemMaintenanceList[1] |
| | | } |
| | | }) |
| | | } |
| | | that.model.tableDetailList = [...tableData1, ...tableData2] |
| | | that.confirmLoading = that.spinning = true |
| | | let httpUrl = '' |
| | | let method = '' |
| | |
| | | }) |
| | | }, |
| | | |
| | | resetData() { |
| | | this.activeTabKey = '1' |
| | | this.detail.dayInspectionList = [] |
| | | this.detail.weekInspectionList = [] |
| | | this.detail.operatorMaintenanceList = [] |
| | | this.detail.repairerMaintenanceList = [] |
| | | this.detail.thirdMaintenanceList = [] |
| | | }, |
| | | |
| | | handleCancel() { |
| | | this.close() |
| | | }, |
| | |
| | | this.$emit('close') |
| | | this.visible = false |
| | | this.$refs.form.clearValidate() |
| | | }, |
| | | |
| | | //加载详情数据 |
| | | loadDetail(standardId) { |
| | | this.spinning = true |
| | | this.detail.dataSource = [] |
| | | if (standardId) { |
| | | getAction(this.url.detail, { standardId }) |
| | | .then(res => { |
| | | if (res.success) { |
| | | this.detail.dataSource = [...res.result] |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | } |
| | | } |
| | | |
| | | } |