bug修改

zhouwenxuan

2023-12-15 07ca2d96c6f38a2a38f958d1771b6b9848f0ce0d

 src/layout/components/Register/index.vue

@@ -2,7 +2,7 @@
    <el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
      <template #header>
        <div style="display:flex;font-size: 1.2rem;font-weight: bolder">
          机构注册
          {{state.title}}
          <div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息，带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div>
        </div>
      </template>
@@ -11,6 +11,7 @@
          <el-col :span="8">
            <el-form-item prop="agency.name" label="机构名称">
              <el-input
                  :disabled="isAbleEdit"
                  v-model="registerForm.agency.name"
                  size="large"
                  placeholder="请输入机构名称"
@@ -21,6 +22,7 @@
          <el-col :span="8">
            <el-form-item prop="agency.creditCode" label="社会信用代码">
              <el-input
                  :disabled="isAbleEdit"
                  v-model="registerForm.agency.creditCode"
                  size="large"
                  placeholder="请输入社会信用代码"
@@ -31,8 +33,8 @@
          <el-col :span="8">
            <el-form-item prop="agency.attribute" label="机构属性">
              <el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()">
                <el-radio :label="0" size="large">疆内</el-radio>
                <el-radio :label="1" size="large">疆外</el-radio>
                <el-radio :label="0" size="large" border>疆内</el-radio>
                <el-radio :label="1" size="large" border>疆外</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
@@ -106,7 +108,7 @@
              <el-input
                  v-model="registerForm.agency.certNumber"
                  size="large"
                  placeholder="请输入机构负责人"
                  placeholder="请输入资质证书编号"
              />
            </el-form-item>
          </el-col>
@@ -179,12 +181,12 @@
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agency.business" label="申请的法定安全评价业务范围">
              <el-select v-model="registerForm.agency.business" placeholder="请选择业务范围" size="large" style="width: 100%">
              <el-select :disabled="isAbleEdit" v-model="registerForm.agency.business" placeholder="请选择业务范围" multiple size="large" style="width: 100%">
                <el-option
                    v-for="item in state.busList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.label"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
@@ -217,6 +219,7 @@
                  <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
                </template>
              </el-upload>

            </el-form-item>
          </el-col>
        </el-row>
@@ -224,7 +227,8 @@
          <el-col :span="12">
            <el-form-item prop="username" label="登录用户名(字母+数字，长度在5-16之间)">
              <el-input
                  v-model="registerForm.username"
                  :disabled="state.title == '编辑'"
                  v-model.trim="registerForm.username"
                  size="large"
                  placeholder="请输入登录用户名"
              />
@@ -233,18 +237,18 @@
          <el-col :span="12">
            <el-form-item prop="phone" label="用户电话">
              <el-input
                  v-model="registerForm.phone"
                  v-model.trim="registerForm.phone"
                  size="large"
                  placeholder="请输入用户电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
        <el-row :gutter="30" v-if="state.title == '新增/注册'">
          <el-col :span="12">
            <el-form-item prop="password" label="密码">
              <el-input
                  v-model="registerForm.password"
                  v-model.trim="registerForm.password"
                  type="password"
                  size="large"
                  placeholder="请输入密码"
@@ -255,7 +259,7 @@
          <el-col :span="12">
            <el-form-item prop="confirmPassword" label="确认密码">
              <el-input
                  v-model="registerForm.confirmPassword"
                  v-model.trim="registerForm.confirmPassword"
                  type="password"
                  size="large"
                  auto-complete="off"
@@ -273,9 +277,16 @@
            type="primary"
            style="width:40%;margin: 0 auto"
            @click.prevent="handleRegister"
            v-preReClick
          >
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
            <div v-if="state.title == '新增/注册'">
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
            </div>
            <div v-else>
              <span v-if="!loading">确定</span>
              <span v-else>编 辑 中...</span>
            </div>
          </el-button>
        </el-form-item>
      </el-form>
@@ -286,43 +297,17 @@
</template>

<script setup>
import {ref, watch, defineExpose, onMounted, reactive} from "vue"
import {ref, watch, defineExpose, onMounted, reactive, toRefs, watchEffect} from "vue"
import {ElMessage, ElMessageBox} from "element-plus"
import { register,delPic,getDict } from "@/api/login"
import {register, delPic, getDict, checkUserName, checkPhone, editAgency} from "@/api/login"
import { getRegionTree } from "@/api/area"
import { getToken } from "@/utils/auth";
import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate";
let { proxy } = getCurrentInstance()
import { Base64 } from 'js-base64'
const registerForm = ref({
  agency:{
    name: "",
    creditCode: "",
    attribute: 0,
    area: [],
    province: '',
    city: '',
    district: '',
    address: '',
    legalPerson: '',
    legalPhone: '',
    manager: '',
    managerPhone: '',
    certNumber: '',
    issueDate: '',
    validDate: '',
    assetValue: '',
    workArea: '',
    archiveArea: '',
    regAddress: '',
    business: '',
    reportPath: '',
  },
  username: '',
  phone: '',
  password: '',
  confirmPassword: ''
});
import {getAgencyById} from "../../../api/sysUsers";
import Cookies from "js-cookie";
const emit = defineEmits(["getList"]);

const props = {
  expandTrigger: 'hover',
@@ -331,6 +316,7 @@
}

const state = reactive({
  title: '',
  areaList: [],
  busList: [],
  fileList: [],
@@ -340,12 +326,45 @@
    Authorization: 'Bearer ' + getToken()
  },
  dialogImageUrl: '',
  dialogImg: false
  dialogImg: false,
  isView: false,
  registerForm:{
    agency:{
      name: "",
      creditCode: "",
      attribute: 0,
      area: [],
      province: '',
      city: '',
      district: '',
      address: '',
      legalPerson: '',
      legalPhone: '',
      manager: '',
      managerPhone: '',
      certNumber: '',
      issueDate: '',
      validDate: '',
      assetValue: '',
      workArea: '',
      archiveArea: '',
      regAddress: '',
      business: '',
      reportPath: '',
    },
    username: '',
    phone: '',
    password: '',
    confirmPassword: ''
  }
})
const isSuper = ref(false);


const {registerForm} = toRefs(state);
const startUsername = ref('');
const startPhone = ref('');
const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
  if (state.registerForm.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
@@ -364,14 +383,64 @@
  }
}

const validateUserPhone = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入手机号'))
  }else if(state.title == '编辑' && value == startPhone.value){
      callback()
  } else{
    if(!verifyPhone(value)){
      callback(new Error('手机号格式有误'))
    }else{
        let param = {}
        if(state.title=='新增/注册') {
            param = {
                phone:value
            }
        }else if(state.title=='编辑'){
            param = {
                phone:value,
                id: state.registerForm.id
            }
        }
      checkPhone(param).then((res)=>{
        if(res.data == false){
          callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
        }else{
          callback()
        }
      })
    }
  }
}

const validateUsername = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入登录时用户名'))
  }else if(state.title == '编辑' && value == startUsername.value){
      callback()
  }else{
    if(!verifyUsername(value)){
      callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
    }else{
      callback()
        let param = {}
        if(state.title=='新增/注册') {
            param = {
                username:value
            }
        }else if(state.title=='编辑'){
            param = {
                username:value,
                id: state.registerForm.id
            }
        }
      checkUserName(param).then((res)=>{
        if(res.data == false){
          callback(new Error('用户名已被占用，请更换其他用户名'))
        }else{
          callback()
        }
      })
    }
  }
}
@@ -408,7 +477,7 @@
  "agency.business": [{required: true, trigger: "blur", message: "请选择申请的法定安全评价业务范围"}],
  "agency.reportPath": [{required: true, trigger: "blur", message: "请上传加盖公章的《机构信息上报表》"}],
  username: [{ required: true, trigger: "blur", validator: validateUsername }],
  phone: [{ required: true, trigger: "blur", validator: validatePhone }],
  phone: [{ required: true, trigger: "blur", validator: validateUserPhone }],
  password: [{ required: true, trigger: "blur", validator: validatePwd }],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次确认密码" },
@@ -421,19 +490,79 @@
const registerRef = ref(null)

onMounted(()=>{
    if(getToken()){
        const userInfo = JSON.parse(Cookies.get('userInfo'))
        if(userInfo.identity == 0){isSuper.value = true}
    }

  getBusiness()
  getArea()
    getArea()
  // watchEffect(() => {
  //   // 在副作用中调用 getArea()
  //   getArea();
  // });
})
const isAbleEdit = ref(false);
const openDialog=(type, value)=>{
  state.title = type === 'add' ? '新增/注册' : type ==='edit' ? '编辑' : '查看' ;
    getArea()
  if(type === 'edit' || type == 'view') {
    state.registerForm.id = value.id
    state.registerForm.username = value.username
    state.registerForm.phone = value.phone
    startUsername.value = value.username
    startPhone.value = value.phone
    state.registerForm.agency.id = value.agencyId
    if( isSuper.value){
        isAbleEdit.value = false
    }else{
        isAbleEdit.value = true
    }
    getAgencyById({agencyId: value.agencyId}).then((res)=>{
      if(res.code == 200){
        const info = JSON.parse(JSON.stringify(res.data))
        for(let i in state.registerForm.agency){
          if(validKey(i,info)){
            state.registerForm.agency[i] = info[i]
          }
        }
        getArea()

        state.registerForm.agency.business = info.business.split(',').map(Number)
          if(state.registerForm.agency.attribute === 0){
              state.registerForm.agency.area = [info.city,info.district].filter(item => { return item && item.trim() })
          }else {
              state.registerForm.agency.area = [info.province,info.city,info.district].filter(item => { return item && item.trim() })
          }
          if(res.data.reportPath) {
              const imgUrl = import.meta.env.VITE_APP_BASE_API + "/" +  res.data.reportPath
              state.fileList = imgUrl ? imgUrl.split(',').map(url => {return {url} }) : []
          }

      }else{
        ElMessage.warning(res.message)
      }
    })
    if(type == 'view'){
      state.isView = true
    }
  }
  dialogVisible.value = true
}

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

const handleChange = (value) => {
  if(registerForm.value.agency.attribute == 0){
    registerForm.value.agency.province = '新疆维吾尔自治区'
    registerForm.value.agency.city = value[0]?value[0]:''
    registerForm.value.agency.district  = value[1]?value[1]:''
  if(state.registerForm.agency.attribute == 0){
    state.registerForm.agency.province = '新疆维吾尔自治区'
    state.registerForm.agency.city = value[0]?value[0]:''
    state.registerForm.agency.district  = value[1]?value[1]:''
  }else{
    registerForm.value.agency.province = value[0]?value[0]:''
    registerForm.value.agency.city = value[1]?value[1]:''
    registerForm.value.agency.district  = value[2]?value[2]:''
    state.registerForm.agency.province = value[0]?value[0]:''
    state.registerForm.agency.city = value[1]?value[1]:''
    state.registerForm.agency.district  = value[2]?value[2]:''
  }
}

@@ -447,7 +576,7 @@
}

const getArea = async ()=>{
  const type = registerForm.value.agency.attribute
  const type = state.registerForm.agency.attribute
  const res = await getRegionTree({name: '',parentId: null,regionType: type})
  if(res.code == 200){
    state.areaList = res.data
@@ -486,7 +615,7 @@

const handleAvatarSuccess = (res, uploadFile) => {
  if(res.code == 200){
    registerForm.value.agency.reportPath = res.data.path
    state.registerForm.agency.reportPath = res.data.path
  }else{
    ElMessage({
      type: 'warning',
@@ -496,7 +625,7 @@
}

const handleRemove = async (file, uploadFiles) => {
  const res = await delPic({path: registerForm.value.agency.reportPath})
  const res = await delPic({path: state.registerForm.agency.reportPath})
  if(res.code == 200){
    ElMessage({
      type: 'success',
@@ -514,43 +643,82 @@
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      const {confirmPassword, ...data} = registerForm.value
      data.password = Base64.encode(data.password)
      delete data.agency.area
      register(data).then(res => {
        if(res.code == 200){
          const username = registerForm.value.username
          ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
            dangerouslyUseHTMLString: true,
            type: "success",
          }).then(() => {
            dialogVisible.value = false
            proxy.$refs.registerRef.resetFields()
            proxy.$refs.registerRef.clearValidate()
            state.fileList = []
            // router.push("/homePage")
          }).catch(() => {})
        }else{
          ElMessage({
            type: 'warning',
            message: res.message
      if(state.title == '新增/注册'){
        const {confirmPassword,id, ...data} = JSON.parse(JSON.stringify(state.registerForm))
        data.password = Base64.encode(data.password)
        data.agency.business = data.agency.business.join(',')
        delete data.agency.area
          delete data.agency.id
        register(data).then(res => {
          if(res.code == 200){
            const username = state.registerForm.username
            ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
              dangerouslyUseHTMLString: true,
              type: "success",
            }).then(() => {
                emit("getList")

              dialogVisible.value = false
                state.registerForm.agency.attribute = 0
              proxy.$refs.registerRef.resetFields()
              proxy.$refs.registerRef.clearValidate()
              state.fileList = []
                loading.value = false
              // router.push("/homePage")
            }).catch(() => {})
          }else{
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        }).catch(() => {
          loading.value = false
        })
      }else {
          const {confirmPassword, ...data} = JSON.parse(JSON.stringify(state.registerForm))
          data.password = Base64.encode(data.password)
          console.log('data',data)
          data.agency.business = data.agency.business.join(',')
          // delete data.agency.area
          console.log('data',data)
          editAgency(data).then(res => {
              if(res.code == 200){
                  ElMessage({
                      type: 'success',
                      message: '编辑成功'
                  })
                  emit("getList")
                  dialogVisible.value = false
                  state.registerForm.agency.attribute = 0
                  proxy.$refs.registerRef.resetFields()
                  proxy.$refs.registerRef.clearValidate()
                  state.fileList = []
                  loading.value = false

              }else{
                  ElMessage({
                      type: 'warning',
                      message: res.message
                  })
              }
          }).catch(() => {
              loading.value = false
          })
        }
      }).catch(() => {
        loading.value = false
      })
      }
    }
  });
}

const closeDialog = ()=>{
    state.registerForm.agency.attribute = 0
  proxy.$refs.registerRef.resetFields()
  proxy.$refs.registerRef.clearValidate()
  state.fileList = []
}

defineExpose({
  dialogVisible,
  openDialog
})

</script>