src/views/eam/maintenance/modules/EamSecondMaintenanceBatchOrderModal.vue
@@ -1,17 +1,25 @@
<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
                   :toolbarConfig="detail.toolbarConfig" keep-source :height="500"
                   :dataSource="detail.dataSource" :columns="detail.columns">
        <!--统一编码-->
        <template v-slot:equipmentId="props">
          <maintenance-equipment-select placeholder="请输入统一编码或名称搜索" v-model="props.row.equipmentId"
                                        maintenanceCategory="SECOND_MAINTENANCE" :allowClear="false"
                                        @autocompleteForm="autocompleteForm($event,props.row)"/>
        </template>
      <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"/>
@@ -22,6 +30,14 @@
          <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"/>
@@ -29,58 +45,43 @@
</template>
<script>
  import { postAction } 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: { EamSecondMaintenanceBatchOrderDetailModal, 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: '工单号',
              key: 'orderNum',
              align: 'center',
              type: JVXETypes.inputNumber,
              disabled: true,
              placeholder: '${title}系统自动生成',
              width: 200
            },
            {
              title: '统一编码',
              key: 'equipmentId',
              key: 'equipmentCode',
              align: 'center',
              type: JVXETypes.slot,
              slotName: 'equipmentId',
              width: 300,
              validateRules: [
                { required: true, message: '请输入${title}或名称搜索' },
                { unique: true, message: '${title}不能重复' }
              ]
              type: JVXETypes.normal,
              width: 150
            },
            {
              title: '规范名称',
              key: 'standardName',
              align: 'center',
              type: JVXETypes.normal,
              width: 200
              width: 300
            },
            {
              title: '保养日期',
@@ -103,47 +104,141 @@
              key: 'remark',
              align: 'center',
              type: JVXETypes.textarea,
              placeholder: '请输入备注',
              width: 300
              placeholder: '请输入备注'
            },
            {
              title: '操作',
              align: 'center',
              type: JVXETypes.slot,
              width: 150,
              slotName: 'action',
              fixed: 'right'
              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()
      },
      // 获取设备结构树
      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)
      },
      autocompleteForm(selectObj, record) {
        this.$set(record, 'standardName', selectObj.standardName)
        this.$set(record, 'standardId', selectObj.id)
        this.$set(record, 'equipmentId', selectObj.equipmentId)
        this.$set(record, 'maintenancePeriod', selectObj.maintenancePeriod)
        this.$refs.editableDetailTable.validateTable()
      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() {