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

zhuzhuanzhuan

2024-03-04 697082adae9e0225bf5ab20b33353970dd8b3f3a

 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,26 +301,31 @@
        @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 { 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 { 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",
    name: 'UserModal',
  components: {
      SelectDeviceModal,
    JSelectProduction
  },
  data() {
@@ -320,48 +337,52 @@
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: "", //保存用户id
        userId: '', //保存用户id
      disableSubmit: false,
      dateFormat: "YYYY-MM-DD",
        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.validateUsername }],
          password: [{
            required: true,
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
            message: '密码由8位数字、大小写字母和特殊符号组成!'
          },
        { validator: this.validateToNextPassword, trigger: 'change' }],
        confirmpassword: [{ required: true, message: '请重新输入登录密码!', },
        { validator: this.compareToFirstPassword, }],
          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: '请输入正确的座机号码' },],
          telephone: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }],
        teamId: [{ required: false, message: '请维护班组' }]

      },
      departIdShow: false,
      title: "操作",
        title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
          sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
          sm: { span: 16 }
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + "sys/common/upload",
        userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的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",//同步用户到工作流
          userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
          syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//同步用户到工作流
        queryTenantList: '/sys/tenant/queryList'
      },
      tenantsOptions: [],
@@ -369,7 +390,9 @@
      nextDepartOptions: [],
      nextProductionOptions: [],
      isDepartType: '',

        model: {
          selectedProduction: ''
        }
    }
  },
  watch: {
@@ -377,18 +400,25 @@
      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 }
      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;
        return this.url.fileUpload
    }
  },
  methods: {
@@ -402,56 +432,61 @@
          this.$notification.warning({
            message: '消息',
            description: res.message
          });
            })
        }
      }).finally(() => {
      })
    },
    add() {
      this.refresh();
      this.edit({ activitiSync: '1', userIdentity: 1 });
        this.refresh()
        this.edit({
          activitiSync: '1',
          userIdentity: 1,
          selectedroles: '',
          selecteddeparts: '',
          selectedProduction: ''
        })
    },
    edit(record) {
      let that = this;
      that.visible = true;
        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);
        this.resetScreenSize()
        that.userId = record.id
        console.log('record', record)
        that.model = Object.assign({}, record)
      //身份为上级显示负责部门，否则不显示
      if (this.model.userIdentity == 2) {
        this.departIdShow = true;
          this.departIdShow = true
      } else {
        this.departIdShow = false;
          this.departIdShow = false
      }

      if (record.hasOwnProperty("id")) {
        that.getUserRoles(record.id);
        that.getUserDeparts(record.id);
        if (record.hasOwnProperty('id')) {
          that.getUserRoles(record.id)
          that.getUserDeparts(record.id)
      }
      console.log('that.model', that.model)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code);
        return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
          this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800;
          this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
        this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
        let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
          this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700;
          this.drawerWidth = 700
      }
    },
    //初始化租户字典
@@ -459,8 +494,8 @@
      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;
              let c = { label: item.name, value: item.id + '' }
              return c
          })
          console.log('this.tenantsOptions: ', this.tenantsOptions)
        }
@@ -472,29 +507,30 @@
        if (res.success) {
          this.rolesOptions = res.result.map((item, index, arr) => {
            let c = { label: item.roleName, value: item.id }
            return c;
              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.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
        let that = this
        //部门的url 获取部门分配
      getAction(that.url.userWithDepart, { userId: userid }).then((res) => {
        if (res.success) {
          let departOptions = [];
            let departOptions = []
          let selectDepartKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectDepartKeys.push(res.result[i].key);
              selectDepartKeys.push(res.result[i].key)
            //新增负责部门选择下拉框
            departOptions.push({
              value: res.result[i].key,
@@ -502,20 +538,21 @@
            })
          }

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

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

        // 获取车间分配
      getAction(that.url.userProductionList, { userId: userid }).then((res) => {
        if (res.success) {
          let ProductionOptions = [];
            let ProductionOptions = []
          let selectProductKeys = []
          for (let i = 0; i < res.result.length; i++) {
            selectProductKeys.push(res.result[i].key);
              selectProductKeys.push(res.result[i].key)
            //新增负责部门选择下拉框
            ProductionOptions.push({
              value: res.result[i].key,
@@ -523,75 +560,75 @@
            })
          }

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

          that.nextProductionOptions = ProductionOptions;
            // 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.model.departIds = this.model.selecteddeparts
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + "" }
        return c;
          let c = { label: item.text, value: item.value + '' }
          return c
      })
    },
    backProductionInfo(info) {
      this.model.productionIds = this.model.selectedProduction;
        this.model.productionIds = this.model.selectedProduction
      this.nextProductionOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + "" }
        return c;
          let c = { label: item.text, value: item.value + '' }
          return c
      })
    },

    refresh() {
      this.userId = ""
      this.nextDepartOptions = [];
      this.nextProductionOptions = [];
      this.departIdShow = false;
        this.userId = ''
        this.nextDepartOptions = []
        this.nextProductionOptions = []
        this.departIdShow = false
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;
      this.nextDepartOptions = [];
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
        this.nextDepartOptions = []
      this.nextProductionOptions = []
      this.departIdShow = false;
      this.$refs.form.resetFields();
        this.departIdShow = false
        this.$refs.form.resetFields()
    },
    moment,
    handleSubmit() {
      const that = this;
        const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
            that.confirmLoading = true
          //如果是上级择传入departIds,否则为空
          if (this.model.userIdentity !== 2) {
            this.model.departIds = "";
              this.model.departIds = ''
          }
          let obj;
            let obj
          if (!this.model.id) {
            this.model.id = this.userId;
            obj = addUser(this.model);
              this.model.id = this.userId
              obj = addUser(this.model)
          } else {
            obj = editUser(this.model);
              obj = editUser(this.model)
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
                that.$message.success(res.message)
                that.$emit('ok')
            } else {
              that.$message.warning(res.message);
                that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
              that.confirmLoading = false
              that.close()
          })
        } else {
          return false;
            return false
        }
      })
    },
@@ -599,18 +636,18 @@
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword;
        const confirmpassword = this.model.confirmpassword
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样！');
          callback('两次输入的密码不一样！')
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword']);
          this.$refs.form.validateField(['confirmpassword'])
      }
      callback();
        callback()
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback('两次输入的密码不一样！');
          callback('两次输入的密码不一样！')
      } else {
        callback()
      }
@@ -625,16 +662,16 @@
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          };
            }
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback("手机号已存在!")
                callback('手机号已存在!')
            }
          })
        } else {
          callback("请输入正确格式的手机号码!");
            callback('请输入正确格式的手机号码!')
        }
      }
    },
@@ -648,17 +685,17 @@
            fieldName: 'email',
            fieldVal: value,
            dataId: this.userId
          };
            }
          duplicateCheck(params).then((res) => {
            console.log(res)
            if (res.success) {
              callback()
            } else {
              callback("邮箱已存在!")
                callback('邮箱已存在!')
            }
          })
        } else {
          callback("请输入正确格式的邮箱!")
            callback('请输入正确格式的邮箱!')
        }
      }
    },
@@ -668,12 +705,12 @@
        fieldName: 'username',
        fieldVal: value,
        dataId: this.userId
      };
        }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("用户名已存在!")
            callback('用户名已存在!')
        }
      })
    },
@@ -683,49 +720,65 @@
        fieldName: 'work_no',
        fieldVal: value,
        dataId: this.userId
      };
        }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("工号已存在!")
            callback('工号已存在!')
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
        const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function (file) {
      var fileType = file.type;
        var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片');
        return false;
          this.$message.warning('请上传图片')
          return false
      }
      //TODO 验证文件大小
    },
    identityChange(e) {
      if (e.target.value === 1) {
        this.departIdShow = false;
          this.departIdShow = false
      } else {
        this.departIdShow = true;
          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) + ",}$");
            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}位数字、大小写字母和特殊符号组成!`,
              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>
@@ -735,6 +788,7 @@
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;