<template>
|
<j-modal :title="title" :visible="visible" :confirmLoading="confirmLoading" fullscreen
|
:mask-closable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
|
<a-spin :spinning="spinning">
|
<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, postAction } from '@/api/manage'
|
import { JVXETypes } from '@comp/jeecg/JVxeTable'
|
import EamSecondMaintenanceBatchOrderDetailModal from './EamSecondMaintenanceBatchOrderDetailModal'
|
|
export default {
|
name: 'EamSecondMaintenanceBatchOrderModal',
|
components: { EamSecondMaintenanceBatchOrderDetailModal },
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
confirmLoading: false,
|
spinning: false,
|
treeDataSource: [],
|
checkedKeys: [],
|
expandedKeys: [],
|
selectedKeys: [],
|
url: {
|
batchAdd: '/eam/secondMaintenanceOrder/batchAdd',
|
getDeviceTree: '/eam/secondMaintenanceOrder/BatchTreeStructure'
|
},
|
detail: {
|
dataSource: [],
|
columns: [
|
{
|
title: '统一编码',
|
key: 'equipmentCode',
|
align: 'center',
|
type: JVXETypes.normal,
|
width: 150
|
},
|
{
|
title: '规范名称',
|
key: 'standardName',
|
align: 'center',
|
type: JVXETypes.normal,
|
width: 300
|
},
|
{
|
title: '保养日期',
|
key: 'maintenanceDate',
|
align: 'center',
|
type: JVXETypes.slot,
|
width: 200,
|
slotName: 'maintenanceDate',
|
validateRules: [{ required: true, message: '请选择${title}' }]
|
},
|
{
|
title: '保养周期',
|
key: 'maintenancePeriod',
|
align: 'center',
|
type: JVXETypes.normal,
|
width: 150
|
},
|
{
|
title: '备注',
|
key: 'remark',
|
align: 'center',
|
type: JVXETypes.textarea,
|
placeholder: '请输入备注'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
type: JVXETypes.slot,
|
width: 150,
|
slotName: 'action'
|
}
|
]
|
}
|
}
|
},
|
methods: {
|
add() {
|
this.visible = true
|
this.checkedKeys = this.detail.dataSource = []
|
this.queryTreeData()
|
},
|
|
// 获取设备结构树
|
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
|
})
|
},
|
|
/**
|
* 预览设备规范明细
|
* @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 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 {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = this.spinning = false
|
})
|
},
|
|
handleCancel() {
|
this.close()
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-select-dropdown-menu {
|
text-align: left;
|
}
|
</style>
|
