src/views/eam/maintenance/modules/EamSecondMaintenanceBatchOrderModal.vue
@@ -1,145 +1,279 @@
<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() {
@@ -154,3 +288,9 @@
    }
  }
</script>
<style scoped lang="less">
  /deep/ .ant-select-dropdown-menu {
    text-align: left;
  }
</style>