| | |
| | | <template> |
| | | <j-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen centered |
| | | <j-modal :title="title" :visible="visible" :confirmLoading="confirmLoading" fullscreen |
| | | :mask-closable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> |
| | | <a-spin :spinning="spinning"> |
| | | <j-vxe-table ref="editableDetailTable" rowNumber rowSelection bordered alwaysEdit toolbar @added="addNewRow" |
| | | :toolbarConfig="detail.toolbarConfig" keep-source :height="500" |
| | | :dataSource="detail.dataSource" :columns="detail.columns"/> |
| | | <a-row :gutter="48"> |
| | | <a-col :span="6"> |
| | | <a-tabs default-active-key="1"> |
| | | <a-tab-pane tab="设备结构树" key="1"> |
| | | <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" |
| | | :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys" |
| | | @expand="onExpand" @select="handleTreeNodeSelect"> |
| | | </a-tree> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | </a-col> |
| | | |
| | | <a-col :span="18"> |
| | | <a-tabs default-active-key="1"> |
| | | <a-tab-pane tab="设备明细" key="1"> |
| | | <j-vxe-table ref="editableDetailTable" rowNumber rowSelection bordered alwaysEdit keep-source |
| | | :height="500" :dataSource="detail.dataSource" :columns="detail.columns" |
| | | @selectRowChange="handleTableSelectRowChange"> |
| | | <!-- 保养日期--> |
| | | <template v-slot:maintenanceDate="props"> |
| | | <a-date-picker v-model="props.row.maintenanceDate" value-format="YYYY-MM-DD" :allow-clear="false"/> |
| | | </template> |
| | | |
| | | <!-- 操作--> |
| | | <template v-slot:action="props"> |
| | | <a :disabled="!props.row.equipmentId" @click="handlePreviewDetail(props.row.standardId)">预览明细</a> |
| | | </template> |
| | | </j-vxe-table> |
| | | </a-tab-pane> |
| | | |
| | | <a-date-picker slot="tabBarExtraContent" type="primary" value-format="YYYY-MM-DD" :allowClear="false" |
| | | @change="handleBatchSetDate"/> |
| | | </a-tabs> |
| | | </a-col> |
| | | </a-row> |
| | | |
| | | </a-spin> |
| | | |
| | | <eam-second-maintenance-batch-order-detail-modal ref="detailModal"/> |
| | | </j-modal> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getAction, httpAction } from '@/api/manage' |
| | | import MaintenanceEquipmentSelect from '@views/eam/equipment/modules/MaintenanceEquipmentSelect.vue' |
| | | import { getAction, postAction } from '@/api/manage' |
| | | import { JVXETypes } from '@comp/jeecg/JVxeTable' |
| | | import EamSecondMaintenanceBatchOrderDetailModal from './EamSecondMaintenanceBatchOrderDetailModal' |
| | | |
| | | export default { |
| | | name: 'EamSecondMaintenanceBatchOrderModal', |
| | | components: { MaintenanceEquipmentSelect }, |
| | | components: { EamSecondMaintenanceBatchOrderDetailModal }, |
| | | data() { |
| | | return { |
| | | title: '操作', |
| | | visible: false, |
| | | confirmLoading: false, |
| | | spinning: false, |
| | | treeDataSource: [], |
| | | checkedKeys: [], |
| | | expandedKeys: [], |
| | | selectedKeys: [], |
| | | url: { |
| | | batchAdd: '/eam/secondMaintenanceOrder/batchAdd' |
| | | batchAdd: '/eam/secondMaintenanceOrder/batchAdd', |
| | | getDeviceTree: '/eam/secondMaintenanceOrder/BatchTreeStructure' |
| | | }, |
| | | detail: { |
| | | dataSource: [], |
| | | columns: [ |
| | | { |
| | | title: 'ID', |
| | | key: 'id', |
| | | type: JVXETypes.hidden |
| | | }, |
| | | { |
| | | title: '工单号', |
| | | dataIndex: 'orderNum', |
| | | align: 'center', |
| | | type: JVXETypes.inputNumber, |
| | | disabled: true, |
| | | placeholder: '工单号系统自动生成' |
| | | }, |
| | | { |
| | | title: '统一编码', |
| | | dataIndex: 'equipmentId', |
| | | key: 'equipmentCode', |
| | | align: 'center', |
| | | type: JVXETypes.slot, |
| | | slotName: 'equipmentId' |
| | | type: JVXETypes.normal, |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '规范名称', |
| | | dataIndex: 'standardName', |
| | | key: 'standardName', |
| | | align: 'center', |
| | | type: JVXETypes.input, |
| | | disabled: true, |
| | | placeholder: '选择设备后自动带出' |
| | | type: JVXETypes.normal, |
| | | width: 300 |
| | | }, |
| | | { |
| | | title: '保养日期', |
| | | dataIndex: 'maintenanceDate', |
| | | key: 'maintenanceDate', |
| | | align: 'center', |
| | | type: JVXETypes.date |
| | | type: JVXETypes.slot, |
| | | width: 200, |
| | | slotName: 'maintenanceDate', |
| | | validateRules: [{ required: true, message: '请选择${title}' }] |
| | | }, |
| | | { |
| | | title: '保养周期', |
| | | dataIndex: 'maintenancePeriod', |
| | | key: 'maintenancePeriod', |
| | | align: 'center', |
| | | type: JVXETypes.inputNumber, |
| | | defaultValue: '6' |
| | | type: JVXETypes.normal, |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: '备注', |
| | | key: 'remark', |
| | | align: 'center', |
| | | type: JVXETypes.textarea, |
| | | placeholder: '请输入备注' |
| | | }, |
| | | { |
| | | title: '操作', |
| | | align: 'center', |
| | | type: JVXETypes.slot, |
| | | width: 150, |
| | | slotName: 'action' |
| | | } |
| | | ], |
| | | toolbarConfig: { |
| | | // prefix 前缀;suffix 后缀 |
| | | slot: ['prefix', 'suffix'], |
| | | // add 新增按钮;remove 删除按钮;clearSelection 清空选择按钮 |
| | | btn: ['add', 'remove', 'clearSelection'] |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | add() { |
| | | //初始化默认值 |
| | | this.model = { maintenancePeriod: 6 } |
| | | this.visible = true |
| | | this.editable = true |
| | | this.detail.operatorMaintenanceList = this.detail.repairerMaintenanceList = [] |
| | | this.checkedKeys = this.detail.dataSource = [] |
| | | this.queryTreeData() |
| | | }, |
| | | |
| | | addNewRow({ row }) { |
| | | console.log('row', row) |
| | | row.maintenancePeriod = 6 |
| | | this.$refs.editableDetailTable.updateData() |
| | | // 获取设备结构树 |
| | | queryTreeData() { |
| | | this.spinning = true |
| | | this.treeDataSource = [] |
| | | getAction(this.url.getDeviceTree) |
| | | .then(res => { |
| | | if (res.success) { |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(this.treeDataSource) |
| | | this.expandedKeys = this.allTreeKeys |
| | | } else { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | this.spinning = false |
| | | }) |
| | | }, |
| | | |
| | | autocompleteForm(selectObj) { |
| | | this.$set(this.model, 'standardName', selectObj.standardName) |
| | | this.$set(this.model, 'standardId', selectObj.id) |
| | | this.$set(this.model, 'equipmentId', selectObj.equipmentId) |
| | | if (!this.model.id) this.loadStandardDetail(selectObj.id) |
| | | /** |
| | | * 预览设备规范明细 |
| | | * @param standardId |
| | | */ |
| | | handlePreviewDetail(standardId) { |
| | | this.$refs.detailModal.visible = true |
| | | this.$refs.detailModal.loadStandardDetail(standardId) |
| | | }, |
| | | |
| | | onExpand(expandedKeys) { |
| | | this.expandedKeys = expandedKeys |
| | | this.autoExpandParent = false |
| | | }, |
| | | |
| | | async onCheck(value, obj) { |
| | | this.$refs.editableDetailTable.clearValidate() |
| | | this.checkedKeys = value |
| | | const childNodesList = obj.checkedNodes.filter(item => item.data.props.equipmentId).map(item => { |
| | | return { |
| | | ...item.data.props.dataRef, |
| | | id: item.data.props.dataRef.key, |
| | | equipmentId: item.data.props.dataRef.key, |
| | | equipmentCode: item.data.props.dataRef.equipmentId, |
| | | standardId: item.data.props.dataRef.maintenanceStandardId, |
| | | standardName: item.data.props.dataRef.maintenanceStandardName, |
| | | maintenancePeriod: 6 |
| | | } |
| | | }) |
| | | |
| | | if (childNodesList.length === 0) { |
| | | this.detail.dataSource = [] |
| | | return |
| | | } |
| | | console.log('childNodesList', childNodesList) |
| | | |
| | | if (childNodesList.length > this.detail.dataSource.length) { |
| | | childNodesList.forEach(childNode => { |
| | | if (!(this.detail.dataSource.map(item => item.id).includes(childNode.id))) this.detail.dataSource.push(childNode) |
| | | }) |
| | | console.log('detail+++++++++++', this.detail.dataSource) |
| | | } else { |
| | | const deleteList = [] |
| | | this.detail.dataSource.map(item => item.id).forEach(item => { |
| | | if (!(childNodesList.map(childNode => childNode.id).includes(item))) deleteList.push(item) |
| | | }) |
| | | |
| | | deleteList.forEach(deleteItem => { |
| | | this.detail.dataSource.splice(this.detail.dataSource.findIndex(item => item.id === deleteItem), 1) |
| | | }) |
| | | |
| | | console.log('deleteList', deleteList) |
| | | console.log('detail----------', this.detail.dataSource) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 点击树节点时触发 |
| | | * @param selectedKeys |
| | | * @param event |
| | | */ |
| | | handleTreeNodeSelect(selectedKeys, event) { |
| | | event.node.$el.childNodes[1].click() |
| | | }, |
| | | |
| | | /** |
| | | * 递归树数据展开所有节点 |
| | | * @param data |
| | | */ |
| | | generateList(data) { |
| | | for (let i = 0; i < data.length; i++) { |
| | | const node = data[i] |
| | | const key = node.key |
| | | this.allTreeKeys.push(key) |
| | | if (node.children) { |
| | | this.generateList(node.children) |
| | | } |
| | | } |
| | | }, |
| | | |
| | | handleBatchSetDate(value) { |
| | | this.detail.dataSource.forEach((item, index, self) => { |
| | | if (this.selectedKeys.includes(item.id)) this.$set(item, 'maintenanceDate', value) |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 表格多选框发生改变时触发 |
| | | * @param {selectedRowIds} 表格中已选择的ID列表 |
| | | */ |
| | | handleTableSelectRowChange({ selectedRowIds }) { |
| | | this.selectedKeys = selectedRowIds |
| | | console.log('selectedKeys', this.selectedKeys) |
| | | }, |
| | | |
| | | async handleOk() { |
| | | const that = this |
| | | // 触发表单验证 |
| | | this.$refs.form.validate(valid => { |
| | | if (valid) { |
| | | that.confirmLoading = that.spinning = true |
| | | let httpUrl = '' |
| | | let method = '' |
| | | if (!this.model.id) { |
| | | httpUrl += this.url.add |
| | | method = 'post' |
| | | const requests = this.$refs.editableDetailTable.getTableData() |
| | | if (requests.length == 0) { |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: '请至少新增一条记录' |
| | | }) |
| | | return |
| | | } |
| | | |
| | | const errMap = await this.$refs.editableDetailTable.validateTable() |
| | | if (errMap) return |
| | | |
| | | this.confirmLoading = this.spinning = true |
| | | postAction(this.url.batchAdd, requests) |
| | | .then((res) => { |
| | | if (res.success) { |
| | | this.$notification.success({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | this.$emit('ok') |
| | | this.close() |
| | | } else { |
| | | httpUrl += this.url.edit |
| | | method = 'put' |
| | | this.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | httpAction(httpUrl, this.model, method) |
| | | .then((res) => { |
| | | if (res.success) { |
| | | that.$notification.success({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | that.$emit('ok') |
| | | that.close() |
| | | } else { |
| | | that.$notification.warning({ |
| | | message: '消息', |
| | | description: res.message |
| | | }) |
| | | } |
| | | }) |
| | | .finally(() => { |
| | | that.confirmLoading = that.spinning = false |
| | | }) |
| | | } else { |
| | | return false |
| | | } |
| | | }) |
| | | }) |
| | | .finally(() => { |
| | | this.confirmLoading = this.spinning = false |
| | | }) |
| | | }, |
| | | |
| | | handleCancel() { |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | /deep/ .ant-select-dropdown-menu { |
| | | text-align: left; |
| | | } |
| | | </style> |