新增

马宇豪

2023-12-04 216f377862182c94471c0b452977ac7b4a113a9f

 src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue

@@ -2,47 +2,39 @@
    <div class="notice">
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            :title="state.title"
            width="500px"
            :before-close="handleClose"
        >
            <el-form :model="state.form" size="default" ref="superRef" :rules="title === '新增'  ? state.formRules : {}" label-width="110px" >
                <el-form-item label="姓名:" prop="name" >
            <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="110px" >
                <el-form-item label="姓名:" prop="name" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.name" ></el-input>
                </el-form-item>
                <el-form-item label="用户名:"  prop="username">
                <el-form-item label="用户名:"  prop="username" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model.trim="state.form.password" :type="passwordType" placeholder="请输入密码" autocomplete="new-password">
                        <template #append>
                            <el-button :icon="View" @click="showPwd" />
                        </template>
                    </el-input>
                <el-form-item label="密码:" prop="password" v-if="state.title == '新增' || state.title == '修改密码'">
                    <el-input v-model.trim="state.form.password" type="password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="重复密码:" prop="confirmPassword">
                    <el-input v-model.trim="state.form.confirmPassword" :type="confirmPasswordType" placeholder="请输入确认密码" autocomplete="new-password">
                        <template #append>
                            <el-button :icon="View" @click="showConfirmPwd" />
                        </template>
                    </el-input>
                <el-form-item label="重复密码:" prop="confirmPassword" v-if="state.title == '新增' || state.title == '修改密码'">
                    <el-input v-model.trim="state.form.confirmPassword" type="password" show-password placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                <el-form-item label="手机号:" prop="phone" v-if="state.title !== '修改密码'">
                    <el-input v-model.trim="state.form.phone" :maxlength="11" ></el-input>
                </el-form-item>
                <el-form-item label="账号类型:" >
                    <el-radio-group v-model="state.form.accountType" >
                        <el-radio :label="1">工作人员</el-radio>
                        <el-radio :label="2">领导</el-radio>
                <el-form-item label="账号类型:" v-if="state.title !== '修改密码'">
                    <el-radio-group v-model="state.form.userType" >
                        <el-radio :label="0">工作人员</el-radio>
                        <el-radio :label="1">领导</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="管辖地区:" >
                    <el-select v-model="state.form.area" class="m-2" placeholder="请选择" style="width:100%">
                <el-form-item label="管辖地区:" prop="manageRegion" v-if="state.title !== '修改密码'">
                    <el-select v-model="state.form.manageRegion" class="m-2" placeholder="请选择" style="width:100%">
                        <el-option
                            v-for="item in state.areaList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        />
                    </el-select>
                </el-form-item>
@@ -57,121 +49,185 @@
    </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import {reactive, ref, toRefs, defineEmits} from 'vue'
import { View } from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {verifyPhone, verifyPwd, verifyUsername} from "../../../../../utils/validate";
import { checkUserName, checkPhone } from "@/api/login"
import { getRegionTree } from "@/api/area"
import { addMonitor, editMonitor } from "@/api/sysUsers"
import {Base64} from "js-base64"
import {resetUserPwd} from "../../../../../api/sysUsers";

const emit = defineEmits(["getList"]);
const dialogVisible = ref(false);
const title = ref("");
const superRef = ref();
const passwordType = ref('password');
const confirmPasswordType= ref('password');
const validatePwd = (rule, value, callback)=>{
    if(title.value === '新增'){
        if(value === ''){
            callback(new Error('请再次输入密码'))
        }else if(value !== state.form.password){
            callback(new Error('两次输入密码不同'))
        }else{
            callback()
        }
const dialogVisible = ref(false)
const superRef = ref(null)

const equalToPassword = (rule, value, callback) => {
  if (state.form.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const validateUserPhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }else{
        if(state.form.password!==''){
            if(value === ''){
                callback(new Error('请再次输入密码'))
            }else if(value !== state.form.password){
                callback(new Error('两次输入密码不同'))
            }else{
                callback()
            }
      checkPhone({phone:value,id: state.form.id}).then((res)=>{
        if(res.data == false){
          callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
        }else{
            callback()
          callback()
        }
      })
    }
  }
}
const phoneRegex = /^1[3456789]\d{9}$/;
const validatePhone = (rule, value, callback)=>{
    if(value === ''){
        callback(new Error('请输入手机号'))

const validateUsername = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入登录时用户名'))
  }else{
    if(!verifyUsername(value)){
      callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
    }else{
        if(!phoneRegex.test(value)){
            callback(new Error('请按要求格式输入手机号'))
      checkUserName({username:value,id: state.form.id}).then((res)=>{
        if(res.data == false){
          callback(new Error('用户名已被占用，请更换其他用户名'))
        }else{
            callback()
          callback()
        }
      })
    }
  }
}

let validatePwd = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    if(!verifyPwd(value)){
      callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线)，长度在6-16之间'))
    }else{
      callback()
    }
  }
}

const state = reactive({
    title: '',
    form: {
        id: null,
        name: '',
        phone: '',
        password: '',
        confirmPassword: '',
        username: '',
        accountType: 1,
        area: ''
        userType: 0,
        manageRegion: ''
    },
    formRules:{
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
        password: [{ required: true, validator: validatePwd, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: equalToPassword, trigger: 'blur' }],
        phone: [{ required: true, validator: validateUserPhone, trigger: 'blur' }],
        manageRegion: [{ required: true, message: '请选择管辖区域', trigger: 'blur' }],
    },
    areaList: []

})

const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
};
const showConfirmPwd = () => {
    if (confirmPasswordType.value === 'password') {
        confirmPasswordType.value = ''
    } else {
        confirmPasswordType.value = 'password'
    }
};


const openDialog = (type, value) => {
    title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看' ;
    getArea()
    state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ;
    if(type === 'edit') {
        state.form = value;
        for(let i in state.form){
          if(validKey(i,value)){
              state.form[i] = value[i]
          }
        }
    }
    dialogVisible.value = true;
    if(type == 'pwd'){
      state.form.id = value.id
    }
    dialogVisible.value = true
}

const validKey=(key,obj)=>{
  return key in obj
}

const getArea = async ()=>{
  const res = await getRegionTree({name: '',parentId: null,regionType: 0})
  if(res.code == 200){
    state.areaList = res.data
    state.areaList.unshift({
      id: 0,
      name: '新疆维吾尔自治区'
    })
  }else{
    ElMessage.warning(res.message)
  }
}

const onSubmit = async () => {
    const valid = await superRef.value.validate();
    if(valid){
        superRef.value.clearValidate();
        reset();
        dialogVisible.value = false;

        if(state.title == '新增'){
          const {confirmPassword,id,...data} = state.form
          data.password = Base64.encode(data.password)
          const res = await addMonitor(data)
          if(res.code == 200){
            ElMessage.success(res.message)
            emit('getList')
            superRef.value.clearValidate();
            superRef.value.resetFields();
            dialogVisible.value = false;
          }else{
            ElMessage.warning(res.message)
          }
        }else if(state.title == '编辑'){
          const {confirmPassword,...data} = state.form
          data.password = Base64.encode(data.password)
          const res = await editMonitor(data)
          if(res.code == 200){
            ElMessage.success(res.message)
            emit('getList')
            superRef.value.clearValidate();
            superRef.value.resetFields();
            dialogVisible.value = false;
          }else{
            ElMessage.warning(res.message)
          }
        }else{
          const {id,password} = state.form
          const data = {id,password}
          data.password = Base64.encode(data.password)
          const res = await resetUserPwd(data)
          if(res.code == 200){
            ElMessage.success(res.message)
            emit('getList')
            superRef.value.clearValidate();
            superRef.value.resetFields();
            dialogVisible.value = false;
          }else{
            ElMessage.warning(res.message)
          }
        }
    }
}

const handleClose = () => {
    superRef.value.clearValidate();
    reset();
    superRef.value.resetFields()
    dialogVisible.value = false;

}
const reset = () => {
    state.form = {
        name: '',
        phone: '',
        password: '',
        confirmPassword: '',
        username: '',
        accountType: 1,
        area: ''
    }
}