修改

zhouwx

2025-05-19 457f9c817adef8b003ee6379f493798bae5cbb69

 src/views/Admin/components/userMod.vue

@@ -13,13 +13,13 @@
  >
    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
      <a-form-model-item label="姓名" prop="realName">
        <a-input v-model="form.realName"/>
        <a-input v-model.trim="form.realName"/>
      </a-form-model-item>
      <a-form-model-item label="手机号码" prop="phone">
        <a-input v-model="form.phone"/>
        <a-input v-model.trim="form.phone"/>
      </a-form-model-item>
      <a-form-model-item label="用户名" prop="name">
        <a-input v-model="form.name"/>
        <a-input v-model.trim="form.name"/>
      </a-form-model-item>
      <a-form-model-item label="密码" v-if="title== '新增用户'" prop="pwd">
        <a-input v-model="form.pwd"/>
@@ -33,15 +33,15 @@
          <a-radio-button :value="0">女</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="选择级别" prop="unittype">
        <a-select v-model="form.unittype" placeholder="监管级别">
          <a-select-option :value="1">
      <a-form-model-item label="单位层级" prop="unittype">
        <a-select v-model="form.unittype" placeholder="单位层级" @change="changeLevel">
          <a-select-option :disabled="unittype !== 1&&unittype !== null"  :value="1">
            省级
          </a-select-option>
          <a-select-option :value="2">
          <a-select-option :disabled="unittype !== 1&&unittype !== null && unittype !== 2" :value="2">
            地（市、州）级
          </a-select-option>
          <a-select-option :value="3">
          <a-select-option :disabled="unittype == 4 ? true : false" :value="3">
            区县级
          </a-select-option>
          <a-select-option :value="4">
@@ -49,23 +49,28 @@
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="所属地区" prop="area">
<!--        <a-cascader v-model="form.area" :options="areaData" expandTrigger="hover" changeOnSelect placeholder="请选择" @change="onChange"/>-->
      <a-form-model-item label="所属地区" prop="districtId">
        <!--        <a-cascader v-model="form.area" :options="areaData" expandTrigger="hover" changeOnSelect placeholder="请选择" @change="onChange"/>-->
        <a-tree-select
            v-model="form.area"
            v-model="form.districtId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="areaData"
            placeholder="行政区划"
            :replaceFields="replaceFields"
            @change="changeArea"
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="所属单位">
        <a-input v-model="unitName"/>
        <a-input v-model="form.company"/>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="role">
      <a-form-model-item label="角色" prop="roleId">
        <a-select v-model="form.roleId" placeholder="角色">
          <a-select-option :value="2">
            审批领导
          </a-select-option>
          <a-select-option :value="4">
            领导
          </a-select-option>
          <a-select-option :value="3">
@@ -78,19 +83,59 @@
</template>

<script>
import { addUser } from '@/api/user'
import {addUser, updateUser} from '@/api/user'
import {verifyPasswordPowerful, verifyPhone, verifySimplePhone} from "@/util/validate";
export default {
  name: 'userMod',
  props: ['unitType'],
  data () {
    let validatePwd = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入密码'))
      }else{
        if(!verifyPasswordPowerful(value)){
          callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线)，长度在6-16之间'))
        }else{
          callback()
        }
      }
    }
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    let validatePwd2 = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请再次输入密码'))
      }else if(value !== this.form.pwd){
        callback(new Error('两次输入密码不同'))
      }else{
        callback()
      }
    }
    return {
      title: '新增用户',
      visible: false,
      unittype: this.unitType,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      areaData: [],
      unitName: '',
      replaceFields: {
        children:'children',
        title:'name',
        key:'id',
        value: 'id'
      },
      form: {
        id: null,
        realName: '',
        phone: '',
        name: '',
@@ -98,18 +143,19 @@
        dupPwd: '',
        sex: null,
        unittype: null,
        area: null,
        roleId: null
        districtId: null,
        roleId: null,
        company: ''
      },
      rules: {
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur'}],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur'}],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur'}],
        name: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur'}],
        dupPwd: [{ required: true, message: '请再次输入密码', trigger: 'blur'}],
        dupPwd: [{ required: true, validator: validatePwd2, trigger: 'blur'}],
        sex: [{ required: true, message: '请选择性别', trigger: 'change'}],
        unittype: [{ required: true, message: '请选择监管级别', trigger: 'change'}],
        area: [{ required: true, message: '请选择行政区划', trigger: 'change'}],
        unittype: [{ required: true, message: '请选择单位层级', trigger: 'change'}],
        districtId: [{ required: true, message: '请选择行政区划', trigger: 'change'}],
        roleId: [{ required: true, message: '请选择角色', trigger: 'change'}]
      }
    }
@@ -123,38 +169,138 @@
      if(type == 'add'){
        t.title = '新增用户'
        t.form = {
          id: null,
          realName: '',
          phone: '',
          name: '',
          pwd: '',
          dupPwd: '',
          sex: undefined,
          unittype: undefined,
          area: undefined,
          roleId: null
          sex: null,
          unittype: null,
          districtId: null,
          roleId: null,
          company: ''
        }
      }else{
        t.title = '编辑用户'
        data.roleId = data.role.roleId
        const { realName,phone,name,sex,unittype,roleId } = data
        t.form = { realName,phone,name,sex,unittype,roleId }
        for(let i in data){
          if(t.isValidKey(i,t.form)){
            t.form[i] = data[i]
          }
        }
      }
      t.visible = true
    },
    isValidKey(key, object){
      return key in object;
    },


    // 根据id查对象
    findNodeById(data,value) {
      for (const node of data) {
        if (node.id === value) {
          return node;
        }
        if (node.children) {
          const foundNode = this.findNodeById(node.children, value);
          if (foundNode) {
            return foundNode;
          }
        }
      }
      return null;
    },

    // 根据code查对象
    findNodeByCode(data,code) {
      for (const node of data) {
        if (node.code === code) {
          return node;
        }
        if (node.children) {
          const foundNode = this.findNodeByCode(node.children,code);
          if (foundNode) {
            return foundNode;
          }
        }
      }
      return null;
    },

    changeLevel(value, option){
      console.log(value)
    },

    changeArea(value, label, extra){
      const t = this
      t.form.districtId = value
      const code = t.findNodeById(t.areaData,value).code
      if(code.length == 2){
        t.form.company = '自治区自然灾害预警中心'
        // t.form.province = t.findNodeByCode(t.areaData,code).name
        // t.form.city = ''
        // t.form.area = ''
        // t.form.town = ''
      } else if(code.length == 9){
        // t.form.province = t.findNodeByCode(t.areaData,code.substr(0,2)).name
        // t.form.city = t.findNodeByCode(t.areaData,code.substr(0,4)).name
        // t.form.area = t.findNodeByCode(t.areaData,code.substr(0,6)).name
        // t.form.town = t.findNodeByCode(t.areaData,code).name
        t.form.company = label[0]
      } else{
        // if(code.length == 4){
        //   t.form.city = t.findNodeByCode(t.areaData,code).name
        //   t.form.area = ''
        // }
        // if(code.length == 6){
        //   t.form.city = t.findNodeByCode(t.areaData,code.substr(0,4)).name
        //   t.form.area = t.findNodeByCode(t.areaData,code).name
        // }
        // t.form.province = t.findNodeByCode(t.areaData,code.substr(0,2)).name
        // t.form.town = ''
        t.form.company = label[0] + '自然灾害综合监测预警中心'
      }
    },

    clearMod(){
      this.$refs.ruleForm.clearValidate()
      this.$refs.ruleForm.resetFields()
    },

    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(this.title == '新增用户')
             addUser(this.form).then((res)=>{
               if(res.data.code == 100){
                 console.log(res,'res')
               }
             })
          if(this.form.unittype !==  this.findNodeById(this.areaData,this.form.districtId).type){
            this.$message.error('单位层级和所属地区不匹配，请重新选择')
            return
          }
          // this.form.realName = this.form.realName.trim()
          // this.form.name = this.form.name.trim()
          if(this.title == '新增用户'){
            const { id,...data } = this.form
            addUser(data).then((res)=>{
              if(res.data.code == 100){
                this.$message.success('新增用户成功')
                this.$emit('refresh')
                this.visible = false
              }else{
                this.$message.error(res.data.msg)
              }
            })
          }else{
            const {pwd,dupPwd,...data} = this.form
            updateUser(data).then((res)=>{
              if(res.data.code == 100){
                this.$message.success('修改用户成功')
                this.$emit('refresh')
                this.visible = false
              }else{
                this.$message.error(res.data.msg)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;