1、用户管理页面表单填写界面新增选择设备功能 2、避免命名冲突，更改原选择设备组件名称为selectDeviceDrawer，用户管理页面选择设备组件...

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

1、用户管理页面表单填写界面新增选择设备功能
2、避免命名冲突，更改原选择设备组件名称为selectDeviceDrawer，用户管理页面选择设备组件名称为selectDeviceModal

 src/views/mdc/base/modules/HolidayManagement/HolidayManagementModal.vue

@@ -36,7 +36,7 @@
      </a-form>
    </a-spin>
    <holiday-management-modal-list ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></holiday-management-modal-list>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -53,11 +53,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'HolidayManagementModal',
    components: { SelectDeviceModal, HolidayManagementModalList},
    components: { SelectDeviceDrawer, HolidayManagementModalList},
    props: {},
    data() {
      return {
@@ -185,10 +185,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementModal.vue

@@ -47,7 +47,7 @@
      </a-form>
    </a-spin>
    <!--<torqueconfiguration-modal-list ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></torqueconfiguration-modal-list>-->
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -64,11 +64,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'TorqueconfigurationModal',
    components: { SelectDeviceModal, TorqueconfigurationModalList},
    components: { SelectDeviceDrawer, TorqueconfigurationModalList},
    props: {},
    data() {
      return {
@@ -213,10 +213,10 @@
      //   // })
      // },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentId') ? this.form.getFieldValue('equipmentId').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentId') ? this.form.getFieldValue('equipmentId').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationModal.vue

@@ -40,7 +40,7 @@
        </a-row>
      </a-form>
    </a-spin>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -57,11 +57,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'TorqueconfigurationModal',
    components: { SelectDeviceModal },
    components: { SelectDeviceDrawer },
    props: {},
    data() {
      return {
@@ -198,10 +198,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerModal.vue

@@ -43,7 +43,7 @@
        </a-row>
      </a-form>
    </a-spin>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -59,11 +59,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'UnplannedDowntimemManagerModal',
    components: { SelectDeviceModal,JDate},
    components: { SelectDeviceDrawer,JDate},
    props: {},
    data() {
      return {
@@ -200,10 +200,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysismain.vue

@@ -61,7 +61,7 @@
      <!-- table区域-end -->
    </div>

    <selectDeviceModal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"></selectDeviceModal>
    <SelectDeviceDrawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"></SelectDeviceDrawer>
  </div>
</template>

@@ -84,7 +84,7 @@
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
  import api from '@/api/mdc'
  import selectDeviceModal from '../../../../system/modules/SelectDeviceModal.vue'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer.vue'

  export default {
    name: 'comparativeAnalysismain',
@@ -98,7 +98,7 @@
      JInput,
      JDate,
      JEllipsis,
      selectDeviceModal
      SelectDeviceDrawer
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
    data() {
@@ -438,10 +438,10 @@
      // },
      deviceSearch() {
        console.log('触发')
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.queryParam.equipmentId.split(',')
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.queryParam.equipmentId.split(',')
      },

      /**

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarModel.vue

@@ -44,7 +44,7 @@
        </a-form>
      </a-spin>
      <device-calend-list-model ref="deviceRepairListModel" @sendSelectionRows="getDeviceRows"></device-calend-list-model>
      <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
      <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
    </a-modal>
  </div>
</template>
@@ -63,11 +63,11 @@
  } from '@/api/api'

  import Calendar from 'vue-calendar-component';
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'ShiftInfoModel',
    components: { SelectDeviceModal, DeviceCalendListModel,Calendar},
    components: { SelectDeviceDrawer, DeviceCalendListModel,Calendar},
    props: {},
    data() {
      return {
@@ -241,10 +241,10 @@
        this.value = value;
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentId') ? this.form.getFieldValue('equipmentId').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentId') ? this.form.getFieldValue('equipmentId').split(',') : []
      },
      getDeviceRows(val) {
        console.log("========",val);

 src/views/mdc/base/modules/deviceRepair/DeviceRepairModel.vue

@@ -74,7 +74,7 @@
        <!--</a-row>-->
      </a-form>
    </a-spin>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -91,11 +91,11 @@
    duplicateCheck
  } from '@/api/api'
  import Vue from 'vue'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'DeviceRepairModel',
    components: { SelectDeviceModal, JDate },
    components: { SelectDeviceDrawer, JDate },
    props: {
      equipmentId: {
        type: String
@@ -273,10 +273,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/mdcPassRate/mdcPassRateModal.vue

@@ -39,7 +39,7 @@
        </a-row>
      </a-form>
    </a-spin>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-modal>
</template>

@@ -55,11 +55,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'mdcPassRateModal',
    components: { SelectDeviceModal},
    components: { SelectDeviceDrawer},
    props: {},
    data() {
      return {
@@ -196,10 +196,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationModal.vue

@@ -44,7 +44,7 @@
        </a-row>
      </a-form>
    </a-spin>
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'选择设备'"/>

  </a-modal>
</template>
@@ -61,11 +61,11 @@
  import {
    duplicateCheck
  } from '@/api/api'
  import SelectDeviceModal from '../../../../system/modules/SelectDeviceModal'
  import SelectDeviceDrawer from '../../../../system/modules/SelectDeviceDrawer'

  export default {
    name: 'MdcStandardProcessDurationModal',
    components: { SelectDeviceModal },
    components: { SelectDeviceDrawer },
    props: {},
    data() {
      return {
@@ -210,10 +210,10 @@
        // })
      },
      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = this.form.getFieldValue('equipmentIds') ? this.form.getFieldValue('equipmentIds').split(',') : []
      },
      //级联框onChange事件
      // onChange(value) {

 src/views/system/WorkshopSignageManagement.vue

@@ -150,14 +150,14 @@
    <!-- è¡¨å•åŒºåŸŸ -->
    <workshop-modal ref="modalForm" @ok="modalFormOk"></workshop-modal>
    <!--新增车间-->
    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'添加已有设备'"></select-device-modal>
    <select-device-drawer ref="selectDeviceDrawer" @selectFinished="selectOK" :title="'添加已有设备'"></select-device-drawer>
    <!--已有设备-->
  </a-row>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, postAction, getAction } from '@/api/manage'
import SelectDeviceModal from './modules/SelectDeviceModal'
import SelectDeviceDrawer from './modules/SelectDeviceDrawer'
import WorkshopModal from './modules/WorkshopModal'
import { filterObj } from '@/utils/util'
import moment from 'moment'
@@ -166,7 +166,7 @@
  name: 'WorkshopSignageManagement',
  mixins: [JeecgListMixin],
  components: {
    SelectDeviceModal,
    SelectDeviceDrawer,
    WorkshopModal,
    moment,
  },
@@ -475,11 +475,11 @@
      if (this.currentWorkshopId == '') {
        this.$message.error('请选择一个车间!')
      } else {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = []
        this.$refs.selectDeviceModal.expandAll()
        this.$refs.selectDeviceDrawer.visible = true
        this.$refs.selectDeviceDrawer.selectedRowKeys = []
        this.$refs.selectDeviceDrawer.selectedRows = []
        this.$refs.selectDeviceDrawer.checkedKeys = []
        this.$refs.selectDeviceDrawer.expandAll()
      }
    },


 src/views/system/modules/SelectDeviceDrawer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,225 @@
<template>
  <a-drawer
    :title="title"
    :visible="visible"
    width="650"
    @ok="handleOk"
    @close="handleCancel"
  >

    <a-spin :spinning="loading">
      <!-- showLine -->
      <a-form>
        <a-form-item label="车间层级：">
          <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
                  :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                  @expand="onExpand">
          </a-tree>
        </a-form-item>
      </a-form>

    </a-spin>


    <div class="drawer-bottom-button">
      <a-dropdown
        style="float: left"
        :trigger="['click']"
        placement="topCenter"
      >
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
          <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
        </a-menu>
        <a-button>
          æ ‘操作
          <a-icon type="up"/>
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">关闭</a-button>
      </a-popconfirm>
      <a-button
        @click="handleOk"
        type="primary"
      >确定
      </a-button>
    </div>

  </a-drawer>
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import BaseTree from '@/views/mdc/common/BaseTree'
  import DepartTree from '@/views/mdc/base/modules/DepartList/DepartListTree/DepartTree'
  import { mapActions } from 'vuex'

  export default {
    name: 'SelectDeviceDrawer',
    components: {
      BaseTree, DepartTree
    },
    props: {
      editDisable: {
        type: Boolean,
        default() {
          return true
        }
      },
      title: {
        type: String
      }
    },
    data() {
      return {
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        checkedKeys: [],
        url: {
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        },
        dataList: [],
        allTreeKeys: [],
        visible: false,
        dataSource: []
      }
    },
    created() {
      this.queryTreeData()
      this.closeAll()
    },
    methods: {
      ...mapActions(['QueryProduction']),
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      queryTreeData() {
        this.loading = true
        this.cardLoading = true
        this.QueryProduction().then(res => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.getTreeDataSouce(res.result)
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            console.log('treeDataSource', this.treeDataSource)
            this.expandedKeys = this.allTreeKeys
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },

      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
          const key = node.key
          const title = node.title
          this.dataList.push({
            key,
            title: title
          })
          this.allTreeKeys.push(key)
          if (node.children) {
            this.generateList(node.children)
          }
        }
      },

      getTreeDataSouce(data) {
        data.forEach(item => {
          if (item.children && item.children.length > 0) {
            this.getTreeDataSouce(item.children)
          }
          item.key = item.equipmentId ? item.equipmentId : item.key
          item.value = item.equipmentId ? item.equipmentId : item.value
        })
      },
      expandAll() {
        this.expandedKeys = this.allTreeKeys
      },
      closeAll() {
        this.expandedKeys = ['-1']
      },
      refreshTree() {
        this.queryTreeData()
      },
      onCheck(value, obj) {
        this.checkedKeys = value
        console.log('obj,', obj)
        this.deviceNodes = obj.checkedNodes.filter(item => item.data.props.equipmentId).map(item => item.data.props.equipmentId)
        console.log(this.deviceNodes)
      },
      handleCancel() {
        this.visible = false
      },
      handleOk() {
        this.$emit('selectFinished', this.deviceNodes)
        this.visible = false
      }

    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal {
    /*transform-origin: 337px 50px;*/
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .drawer-bottom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>

 src/views/system/modules/SelectDeviceModal.vue

@@ -1,65 +1,26 @@
<template>
  <div>
    <a-drawer
      :title="title"
      :visible="visible"
      width="650"
      @ok="handleOk"
      @close="handleCancel"
    >
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >

      <!--&lt;!&ndash; æŸ¥è¯¢åŒºåŸŸ &ndash;&gt;-->
      <!--<div class="table-page-search-wrapper">-->
      <!--<a-form layout="inline" @keyup.enter.native="searchQuery">-->
      <!--<a-row :gutter="24">-->
    <a-spin :spinning="loading">
      <!-- showLine -->
      <a-form>
        <a-form-item label="车间层级：">
          <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
                  :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                  @expand="onExpand">
          </a-tree>
        </a-form-item>
      </a-form>

      <!--<a-col :span="10">-->
      <!--<a-form-item label="设备名称">-->
      <!--<a-input placeholder="请输入设备名称" v-model="queryParam.equipmentName"></a-input>-->
      <!--</a-form-item>-->
      <!--</a-col>-->
      <!--<a-col :span="8">-->
      <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
      <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
      <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
      <!--</span>-->
      <!--</a-col>-->
    </a-spin>

      <!--</a-row>-->
      <!--</a-form>-->
      <!--</div>-->
      <!--&lt;!&ndash; table区域-begin &ndash;&gt;-->
      <!--<div>-->
      <!--<a-table-->
      <!--size="small"-->
      <!--bordered-->
      <!--rowKey="equipmentId"-->
      <!--:columns="columns1"-->
      <!--:dataSource="dataSource1"-->
      <!--:pagination="ipagination"-->
      <!--:loading="loading"-->
      <!--:scroll="{ y: 240 }"-->
      <!--:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}"-->
      <!--@change="handleTableChange">-->
      <!--</a-table>-->
      <!--</div>-->
      <!--&lt;!&ndash; table区域-end &ndash;&gt;-->

      <a-spin :spinning="loading">
        <!-- showLine -->
        <a-form>
          <a-form-item label="车间层级：">
            <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
                    :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                    @expand="onExpand">
            </a-tree>
          </a-form-item>
        </a-form>

      </a-spin>


      <div class="drawer-bottom-button">
    <template slot="footer">
      <div>
        <a-dropdown
          style="float: left"
          :trigger="['click']"
@@ -84,14 +45,12 @@
        >确定
        </a-button>
      </div>
    </template>

    </a-drawer>
  </div>
  </a-modal>
</template>

<script>
  // import { filterObj } from '@/utils/util'
  // import { getAction } from '@/api/manage'
  import {
    getAction,
    postAction,
@@ -99,7 +58,6 @@
  } from '@/api/manage'
  import BaseTree from '@/views/mdc/common/BaseTree'
  import DepartTree from '@/views/mdc/base/modules/DepartList/DepartListTree/DepartTree'
  import { mapActions } from 'vuex'

  export default {
    name: 'SelectDeviceModal',
@@ -115,122 +73,83 @@
      },
      title: {
        type: String
      },
      selectedProduction: {
        type: String
      }
    },
    data() {
      return {
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        checkedKeys: [],
        url: {
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
          getDeviceTree: '/mdc/mdcEquipment/loadTreeListByProductionIds'
        },
        selectedWorkshopIds: '',
        dataList: [],
        allTreeKeys: [],
        visible: false,
        dataSource: []

        // names: [],
        // placement: 'right',
        // description: '',
        // // æŸ¥è¯¢æ¡ä»¶
        // queryParam: {},
        // // è¡¨å¤´
        // columns1: [
        //   {
        //     title: '#',
        //     dataIndex: '',
        //     key: 'rowIndex',
        //     width: 50,
        //     align: 'center',
        //     customRender: function(t, r, index) {
        //       return parseInt(index) + 1
        //     }
        //   },
        //   {
        //     title: '设备编号',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentId'
        //   },
        //   {
        //     title: '设备名称',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentName'
        //   },
        //   {
        //     title: '设备类型',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'equipmentType'
        //   },
        //   {
        //     title: '驱动类型',
        //     align: 'center',
        //     width: 100,
        //     dataIndex: 'driveType'
        //   }
        // ],
        // //数据集
        // dataSource1: [],
        // dataSource2: [],
        // // åˆ†é¡µå‚æ•°
        // ipagination: {
        //   current: 1,
        //   pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        //   showTotal: (total, range) => {
        //     return range[0] + '-' + range[1] + ' å…±' + total + '条'
        //   },
        //   showQuickJumper: true,
        //   showSizeChanger: true,
        //   total: 0
        // },
        // loading: false,
        // selectedRowKeys: [],
        // selectedRows: [],
        // url: {
        //   list: '/mdc/mdcEquipment/list'
        // },
        // activeKey: '1',
        // isDepartType: ''
      }
    },
    created() {
      // this.loadData()
      this.queryTreeData()
      this.closeAll()
    },
    methods: {
      ...mapActions(['QueryProduction']),

      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      queryTreeData() {
      queryTreeData(value) {
        // this.loading = true
        // this.cardLoading = true
        // this.QueryProduction().then(res => {
        //   if (res.success) {
        //     this.dataList = []
        //     this.allTreeKeys = []
        //     this.getTreeDataSouce(res.result)
        //     this.treeDataSource = res.result
        //     this.generateList(this.treeDataSource)
        //     console.log('treeDataSource', this.treeDataSource)
        //     this.expandedKeys = this.allTreeKeys
        //   } else {
        //     this.$message.warn(res.message)
        //   }
        // }).finally(() => {
        //   this.loading = false
        //   this.cardLoading = false
        // })
        this.loading = true
        this.cardLoading = true
        this.QueryProduction().then(res => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.getTreeDataSouce(res.result)
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            console.log('treeDataSource', this.treeDataSource)
            this.expandedKeys = this.allTreeKeys
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        this.selectedWorkshopIds = value
        getAction(this.url.getDeviceTree, { ids: value })
          .then(res => {
            console.log('res===============', res)
            if (res.success) {
              this.dataList = []
              this.allTreeKeys = []
              this.getTreeDataSouce(res.result)
              this.treeDataSource = res.result
              this.generateList(this.treeDataSource)
              console.log('treeDataSource', this.treeDataSource)
              this.expandedKeys = this.allTreeKeys
            } else {
              this.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            this.$notification.error({
              message: '消息',
              description: err.message
            })
          })
          .finally(() => {
            this.loading = false
          })
      },

      generateList(data) {
@@ -265,7 +184,7 @@
        this.expandedKeys = ['-1']
      },
      refreshTree() {
        this.queryTreeData()
        this.queryTreeData(this.selectedWorkshopIds)
      },
      onCheck(value, obj) {
        this.checkedKeys = value
@@ -280,81 +199,6 @@
        this.$emit('selectFinished', this.deviceNodes)
        this.visible = false
      }

      // add() {
      //   this.visible = true
      // },
      // loadData(arg) {
      //   //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      //   if (arg === 1) {
      //     this.ipagination.current = 1
      //   }
      //   var params = this.getQueryParams()//查询条件
      //   getAction(this.url.list, params).then((res) => {
      //     if (res.success) {
      //       this.dataSource1 = res.result.records
      //       this.ipagination.total = res.result.total
      //     }
      //   })
      // },
      // getQueryParams() {
      //   var param = Object.assign({}, this.queryParam, this.isorter)
      //   param.field = this.getQueryField()
      //   param.pageNo = this.ipagination.current
      //   param.pageSize = this.ipagination.pageSize
      //   return filterObj(param)
      // },
      // getQueryField() {
      //   //TODO å­—段权限控制
      // },
      // onSelectAll(selected, selectedRows, changeRows) {
      //   if (selected === true) {
      //     for (var a = 0; a < changeRows.length; a++) {
      //       this.dataSource2.push(changeRows[a])
      //     }
      //   } else {
      //     for (var b = 0; b < changeRows.length; b++) {
      //       this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1)
      //     }
      //   }
      //   // console.log(selected, selectedRows, changeRows);
      // },
      // onSelect(record, selected) {
      //   console.log(this.selectedRowKeys)
      //   if (selected === true) {
      //     this.dataSource2.push(record)
      //   } else {
      //     var index = this.dataSource2.indexOf(record)
      //     //console.log();
      //     if (index >= 0) {
      //       this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
      //     }
      //   }
      // },
      // onSelectChange(selectedRowKeys, selectedRows) {
      //   console.log('selectedRowKeys', selectedRowKeys)
      //   this.selectedRowKeys = selectedRowKeys
      //   this.selectionRows = selectedRows
      // },
      // onClearSelected() {
      //   this.selectedRowKeys = []
      //   this.selectionRows = []
      // },
      // handleDelete: function(record) {
      //   this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
      // },
      // handleTableChange(pagination, filters, sorter) {
      //   //分页、排序、筛选变化时触发
      //   console.log(sorter)
      //   //TODO ç­›é€‰
      //   if (Object.keys(sorter).length > 0) {
      //     this.isorter.column = sorter.field
      //     this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      //   }
      //   this.ipagination = pagination
      //   this.loadData()
      // },


    }
  }

 src/views/system/modules/UserModal.vue

@@ -130,7 +130,8 @@
            @back="backDepartInfo"
            :backDepart="true"
            :treeOpera="true"
          >></j-select-depart>
          >>
          </j-select-depart>
        </a-form-model-item>

        <!--车间分配-->
@@ -148,6 +149,17 @@
            :treeProductOpera="true"
          ></j-select-production>
        </a-form-model-item>

        <a-form-model-item
          label="选择设备"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          v-show="!productionDisabled"
        >
          <a-input-search :readOnly="true" v-model="model.equipmentIds" @search="deviceSearch" enter-button
                          placeholder="请选择设备" :disabled="!model.selectedProduction"/>
        </a-form-model-item>

        <a-form-model-item
          label="班组分配"
          :labelCol="labelCol"
@@ -289,476 +301,518 @@
        @click="handleSubmit"
        type="primary"
        :loading="confirmLoading"
      >提交</a-button>
      >提交
      </a-button>
    </div>

    <select-device-modal ref="selectDeviceModal" @selectFinished="selectOK" :title="'选择设备'"/>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { getAction } from '@/api/manage'
import { addUser, editUser, queryUserRole, queryall } from '@/api/api'
import { disabledAuthFilter } from "@/utils/authFilter"
import { duplicateCheck } from '@/api/api'
import JSelectProduction from '../../../components/jeecgbiz/JSelectProduction'
import { mapActions } from 'vuex'
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import moment from 'moment'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { getAction } from '@/api/manage'
  import { addUser, editUser, queryUserRole, queryall } from '@/api/api'
  import { disabledAuthFilter } from '@/utils/authFilter'
  import { duplicateCheck } from '@/api/api'
  import JSelectProduction from '../../../components/jeecgbiz/JSelectProduction'
  import { mapActions } from 'vuex'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import SelectDeviceModal from './SelectDeviceModal'

export default {
  name: "UserModal",
  components: {
    JSelectProduction
  },
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      productionDisabled: false, //是否是我的车间调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: "", //保存用户id
      disableSubmit: false,
      dateFormat: "YYYY-MM-DD",
      validatorRules: {
        username: [{ required: true, message: '请输入用户账号!' },
        { validator: this.validateUsername, }],
        password: [{ required: true, pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字、大小写字母和特殊符号组成!' },
        { validator: this.validateToNextPassword, trigger: 'change' }],
        confirmpassword: [{ required: true, message: '请重新输入登录密码!', },
        { validator: this.compareToFirstPassword, }],
        realname: [{ required: true, message: '请输入用户名称!' }],
        phone: [{ required: false, message: '请输入手机号!' }, { validator: this.validatePhone }],
        email: [{ validator: this.validateEmail }],
        roles: {},
        workNo: [{ required: true, message: '请输入工号' },
        { validator: this.validateWorkNo }],
        telephone: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' },],
        teamId: [{ required: false, message: '请维护班组' }]

      },
      departIdShow: false,
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + "sys/common/upload",
        userWithDepart: "/sys/user/userDepartList", // å¼•å…¥ä¸ºæŒ‡å®šç”¨æˆ·æŸ¥çœ‹éƒ¨é—¨ä¿¡æ¯éœ€è¦çš„url
        //引入为指定用户查看车间信息需要的url
        userProductionList: '/sys/user/userProductionList',
        userId: "/sys/user/generateUserId", // å¼•å…¥ç”Ÿæˆæ·»åŠ ç”¨æˆ·æƒ…况下的url
        syncUserByUserName: "/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
        queryTenantList: '/sys/tenant/queryList'
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
      nextProductionOptions: [],
      isDepartType: '',

    }
  },
  watch: {
    visible: {
      handler(value) {
        if (value) this.initDictData('password_length')
      }
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = { "X-Access-Token": token }
    this.initRoleList()
    this.initTenantList()
    this.queryTreeData()
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload;
    }
  },
  methods: {
    ...mapActions(['QueryDepartTree']),
    queryTreeData() {
      this.QueryDepartTree().then(res => {
        if (res.success) {
          this.isDepartType = res.result[0].value
        } else {
          // this.$message.warn(res.message)
          this.$notification.warning({
            message: '消息',
            description: res.message
          });
        }
      }).finally(() => {
      })
  export default {
    name: 'UserModal',
    components: {
      SelectDeviceModal,
      JSelectProduction
    },
    add() {
      this.refresh();
      this.edit({ activitiSync: '1', userIdentity: 1 });
    },
    edit(record) {
      let that = this;
      that.visible = true;
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize();
      that.userId = record.id;

      that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record);
      that.model = Object.assign({}, { selectedroles: '', selectedProduction: '' }, record);
      //身份为上级显示负责部门，否则不显示
      if (this.model.userIdentity == 2) {
        this.departIdShow = true;
      } else {
        this.departIdShow = false;
      }

      if (record.hasOwnProperty("id")) {
        that.getUserRoles(record.id);
        that.getUserDeparts(record.id);
      }
      console.log('that.model', that.model)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code);
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    // æ ¹æ®å±å¹•å˜åŒ–,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    //初始化租户字典
    initTenantList() {
      getAction(this.url.queryTenantList).then(res => {
        if (res.success) {
          this.tenantsOptions = res.result.map((item, index, arr) => {
            let c = { label: item.name, value: item.id + "" }
            return c;
          })
          console.log('this.tenantsOptions: ', this.tenantsOptions)
        }
      })
    },
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = { label: item.roleName, value: item.id }
            return c;
          })
          console.log('this.rolesOptions: ', this.rolesOptions)
        }
      });
    },
    getUserRoles(userid) {
      queryUserRole({ userid: userid }).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.join(",");
          console.log('that.model.selectedroles=', this.model.selectedroles)
        }
      });
    },
    getUserDeparts(userid) {
      let that = this;
      //部门的url
      getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
        if (res.success) {
          let departOptions = [];
          let selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key);
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
              label: res.result[i].title
            })
          }

          that.model.selecteddeparts = selectDepartKeys.join(",")
          that.model.selectedProduction = selectDepartKeys.join(",")

          that.nextDepartOptions = departOptions;
          console.log('that.nextDepartOptions=', that.nextDepartOptions)
        }
      })

      getAction(that.url.userProductionList, { userId: userid }).then((res) => {
        if (res.success) {
          let ProductionOptions = [];
          let selectProductKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectProductKeys.push(res.result[i].key);
            //新增负责部门选择下拉框
            ProductionOptions.push({
              value: res.result[i].key,
              label: res.result[i].title
            })
          }

          that.model.selectedProduction = selectProductKeys.join(",")

          that.nextProductionOptions = ProductionOptions;
          console.log('that.nextProductionOptions=', that.nextProductionOptions)
        }
      })
      //车间的url
    },
    backDepartInfo(info) {
      this.model.departIds = this.model.selecteddeparts;
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + "" }
        return c;
      })
    },
    backProductionInfo(info) {
      this.model.productionIds = this.model.selectedProduction;
      this.nextProductionOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + "" }
        return c;
      })
    },

    refresh() {
      this.userId = ""
      this.nextDepartOptions = [];
      this.nextProductionOptions = [];
      this.departIdShow = false;
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;
      this.nextDepartOptions = [];
      this.nextProductionOptions = []
      this.departIdShow = false;
      this.$refs.form.resetFields();
    },
    moment,
    handleSubmit() {
      const that = this;
      // è§¦å‘表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          //如果是上级择传入departIds,否则为空
          if (this.model.userIdentity !== 2) {
            this.model.departIds = "";
          }
          let obj;
          if (!this.model.id) {
            this.model.id = this.userId;
            obj = addUser(this.model);
          } else {
            obj = editUser(this.model);
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        } else {
          return false;
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword;
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样！');
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword']);
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback('两次输入的密码不一样！');
      } else {
        callback()
      }
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback("手机号已存在!")
            }
          })
        } else {
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'email',
            fieldVal: value,
            dataId: this.userId
          };
          duplicateCheck(params).then((res) => {
            console.log(res)
            if (res.success) {
              callback()
            } else {
              callback("邮箱已存在!")
            }
          })
        } else {
          callback("请输入正确格式的邮箱!")
        }
      }
    },
    validateUsername(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'username',
        fieldVal: value,
        dataId: this.userId
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("用户名已存在!")
        }
      })
    },
    validateWorkNo(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'work_no',
        fieldVal: value,
        dataId: this.userId
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("工号已存在!")
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function (file) {
      var fileType = file.type;
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片');
        return false;
      }
      //TODO éªŒè¯æ–‡ä»¶å¤§å°
    },
    identityChange(e) {
      if (e.target.value === 1) {
        this.departIdShow = false;
      } else {
        this.departIdShow = true;
      }
    },
    initDictData(dictCode) {
      //根据字典Code, åˆå§‹åŒ–字典数组
      ajaxGetDictItems(dictCode, null).then((res) => {
        if (res.success) {
          const regExp = new RegExp("^(?=.*[a-zA-Z])(?=.*\\\d)(?=.*[~!@#$%^&*()_+`\\-={}:\";'<>?,./]).{" + Number(res.result[0].value) + ",}$");

          this.validatorRules.password[0] = {
    data() {
      return {
        departDisabled: false, //是否是我的部门调用该页面
        productionDisabled: false, //是否是我的车间调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        confirmDirty: false,
        userId: '', //保存用户id
        disableSubmit: false,
        dateFormat: 'YYYY-MM-DD',
        validatorRules: {
          username: [{ required: true, message: '请输入用户账号!' },
            { validator: this.validateUsername }],
          password: [{
            required: true,
            pattern: regExp,
            message: `密码由${res.result[0].value}位数字、大小写字母和特殊符号组成!`,
          }
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
            message: '密码由8位数字、大小写字母和特殊符号组成!'
          },
            { validator: this.validateToNextPassword, trigger: 'change' }],
          confirmpassword: [{ required: true, message: '请重新输入登录密码!' },
            { validator: this.compareToFirstPassword }],
          realname: [{ required: true, message: '请输入用户名称!' }],
          phone: [{ required: false, message: '请输入手机号!' }, { validator: this.validatePhone }],
          email: [{ validator: this.validateEmail }],
          roles: {},
          workNo: [{ required: true, message: '请输入工号' },
            { validator: this.validateWorkNo }],
          telephone: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }],
          teamId: [{ required: false, message: '请维护班组' }]

        },
        departIdShow: false,
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        uploadLoading: false,
        confirmLoading: false,
        headers: {},
        url: {
          fileUpload: window._CONFIG['domianURL'] + 'sys/common/upload',
          userWithDepart: '/sys/user/userDepartList', // å¼•å…¥ä¸ºæŒ‡å®šç”¨æˆ·æŸ¥çœ‹éƒ¨é—¨ä¿¡æ¯éœ€è¦çš„url
          //引入为指定用户查看车间信息需要的url
          userProductionList: '/sys/user/userProductionList',
          userId: '/sys/user/generateUserId', // å¼•å…¥ç”Ÿæˆæ·»åŠ ç”¨æˆ·æƒ…况下的url
          syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//同步用户到工作流
          queryTenantList: '/sys/tenant/queryList'
        },
        tenantsOptions: [],
        rolesOptions: [],
        nextDepartOptions: [],
        nextProductionOptions: [],
        isDepartType: '',
        model: {
          selectedProduction: ''
        }
      })
      }
    },
    watch: {
      visible: {
        handler(value) {
          if (value) this.initDictData('password_length')
        }
      },
      'model.selectedProduction': {
        handler(newVal, oldVal) {
          console.log('触发监听', 'newVal=', newVal, 'oldVal=', oldVal)
          // if ((newVal !== oldVal && oldVal) || !newVal) this.model.equipmentIds = ''
          if (newVal && this.$refs.selectDeviceModal) this.$refs.selectDeviceModal.queryTreeData(newVal)
        }
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.initRoleList()
      this.initTenantList()
      this.queryTreeData()
    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload
      }
    },
    methods: {
      ...mapActions(['QueryDepartTree']),
      queryTreeData() {
        this.QueryDepartTree().then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        }).finally(() => {
        })
      },
      add() {
        this.refresh()
        this.edit({
          activitiSync: '1',
          userIdentity: 1,
          selectedroles: '',
          selecteddeparts: '',
          selectedProduction: ''
        })
      },
      edit(record) {
        let that = this
        that.visible = true
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize()
        that.userId = record.id
        console.log('record', record)
        that.model = Object.assign({}, record)
        //身份为上级显示负责部门，否则不显示
        if (this.model.userIdentity == 2) {
          this.departIdShow = true
        } else {
          this.departIdShow = false
        }

        if (record.hasOwnProperty('id')) {
          that.getUserRoles(record.id)
          that.getUserDeparts(record.id)
        }
        console.log('that.model', that.model)
      },
      isDisabledAuth(code) {
        return disabledAuthFilter(code)
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modaltoggleFlag = !this.modaltoggleFlag
      },
      // æ ¹æ®å±å¹•å˜åŒ–,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 700
        }
      },
      //初始化租户字典
      initTenantList() {
        getAction(this.url.queryTenantList).then(res => {
          if (res.success) {
            this.tenantsOptions = res.result.map((item, index, arr) => {
              let c = { label: item.name, value: item.id + '' }
              return c
            })
            console.log('this.tenantsOptions: ', this.tenantsOptions)
          }
        })
      },
      //初始化角色字典
      initRoleList() {
        queryall().then((res) => {
          if (res.success) {
            this.rolesOptions = res.result.map((item, index, arr) => {
              let c = { label: item.roleName, value: item.id }
              return c
            })
            console.log('this.rolesOptions: ', this.rolesOptions)
          }
        })
      },
      getUserRoles(userid) {
        queryUserRole({ userid: userid }).then((res) => {
          if (res.success) {
            // this.model.selectedroles = res.result.join(',')
            this.$set(this.model, 'selectedroles', res.result.join(','))
            console.log('that.model.selectedroles=', this.model.selectedroles)
          }
        })
      },
      getUserDeparts(userid) {
        let that = this
        //部门的url èŽ·å–部门分配
        getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
          if (res.success) {
            let departOptions = []
            let selectDepartKeys = []
            for (let i = 0; i < res.result.length; i++) {
              selectDepartKeys.push(res.result[i].key)
              //新增负责部门选择下拉框
              departOptions.push({
                value: res.result[i].key,
                label: res.result[i].title
              })
            }

            // that.model.selecteddeparts = selectDepartKeys.join(',')
            this.$set(this.model, 'selecteddeparts', selectDepartKeys.join(','))

            that.nextDepartOptions = departOptions
            console.log('that.nextDepartOptions=', that.nextDepartOptions)
          }
        })

        // èŽ·å–车间分配
        getAction(that.url.userProductionList, { userId: userid }).then((res) => {
          if (res.success) {
            let ProductionOptions = []
            let selectProductKeys = []
            for (let i = 0; i < res.result.length; i++) {
              selectProductKeys.push(res.result[i].key)
              //新增负责部门选择下拉框
              ProductionOptions.push({
                value: res.result[i].key,
                label: res.result[i].title
              })
            }

            // that.model.selectedProduction = selectProductKeys.join(',')
            this.$set(this.model, 'selectedProduction', selectProductKeys.join(','))
            that.nextProductionOptions = ProductionOptions
            console.log('that.nextProductionOptions=', that.nextProductionOptions)
          }
        })
        //车间的url
      },
      backDepartInfo(info) {
        this.model.departIds = this.model.selecteddeparts
        this.nextDepartOptions = info.map((item, index, arr) => {
          let c = { label: item.text, value: item.value + '' }
          return c
        })
      },
      backProductionInfo(info) {
        this.model.productionIds = this.model.selectedProduction
        this.nextProductionOptions = info.map((item, index, arr) => {
          let c = { label: item.text, value: item.value + '' }
          return c
        })
      },

      refresh() {
        this.userId = ''
        this.nextDepartOptions = []
        this.nextProductionOptions = []
        this.departIdShow = false
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
        this.nextDepartOptions = []
        this.nextProductionOptions = []
        this.departIdShow = false
        this.$refs.form.resetFields()
      },
      moment,
      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            //如果是上级择传入departIds,否则为空
            if (this.model.userIdentity !== 2) {
              this.model.departIds = ''
            }
            let obj
            if (!this.model.id) {
              this.model.id = this.userId
              obj = addUser(this.model)
            } else {
              obj = editUser(this.model)
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false
          }
        })
      },
      handleCancel() {
        this.close()
      },
      validateToNextPassword(rule, value, callback) {
        const confirmpassword = this.model.confirmpassword
        if (value && confirmpassword && value !== confirmpassword) {
          callback('两次输入的密码不一样！')
        }
        if (value && this.confirmDirty) {
          this.$refs.form.validateField(['confirmpassword'])
        }
        callback()
      },
      compareToFirstPassword(rule, value, callback) {
        if (value && value !== this.model.password) {
          callback('两次输入的密码不一样！')
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'phone',
              fieldVal: value,
              dataId: this.userId
            }
            duplicateCheck(params).then((res) => {
              if (res.success) {
                callback()
              } else {
                callback('手机号已存在!')
              }
            })
          } else {
            callback('请输入正确格式的手机号码!')
          }
        }
      },
      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'email',
              fieldVal: value,
              dataId: this.userId
            }
            duplicateCheck(params).then((res) => {
              console.log(res)
              if (res.success) {
                callback()
              } else {
                callback('邮箱已存在!')
              }
            })
          } else {
            callback('请输入正确格式的邮箱!')
          }
        }
      },
      validateUsername(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'username',
          fieldVal: value,
          dataId: this.userId
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback('用户名已存在!')
          }
        })
      },
      validateWorkNo(rule, value, callback) {
        var params = {
          tableName: 'sys_user',
          fieldName: 'work_no',
          fieldVal: value,
          dataId: this.userId
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback('工号已存在!')
          }
        })
      },
      handleConfirmBlur(e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      },
      beforeUpload: function(file) {
        var fileType = file.type
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片')
          return false
        }
        //TODO éªŒè¯æ–‡ä»¶å¤§å°
      },
      identityChange(e) {
        if (e.target.value === 1) {
          this.departIdShow = false
        } else {
          this.departIdShow = true
        }
      },
      initDictData(dictCode) {
        //根据字典Code, åˆå§‹åŒ–字典数组
        ajaxGetDictItems(dictCode, null).then((res) => {
          if (res.success) {
            const regExp = new RegExp('^(?=.*[a-zA-Z])(?=.*\\\d)(?=.*[~!@#$%^&*()_+`\\-={}:";\'<>?,./]).{' + Number(res.result[0].value) + ',}$')

            this.validatorRules.password[0] = {
              required: true,
              pattern: regExp,
              message: `密码由${res.result[0].value}位数字、大小写字母和特殊符号组成!`
            }

          }
        })
      },

      deviceSearch() {
        this.$refs.selectDeviceModal.visible = true
        this.$refs.selectDeviceModal.selectedRowKeys = []
        this.$refs.selectDeviceModal.selectedRows = []
        this.$refs.selectDeviceModal.checkedKeys = this.model.equipmentIds ? this.model.equipmentIds.split(',') : []
      },

      /**
       * é€‰æ‹©å·²æœ‰è®¾å¤‡åŽç‚¹å‡»ç¡®å®šæ—¶è§¦å‘
       * @param data å·²é€‰æ‹©çš„设备数组
       */
      selectOK(data) {
        console.log('data=', data)
        this.$set(this.model, 'equipmentIds', data.join(','))
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

.drawer-bottom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bottom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>