From 515a265a809d0c12fb5cbff39cb743f391938a41 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 30 十一月 2023 08:49:34 +0800
Subject: [PATCH] 新增

---
 src/layout/components/Register/index.vue |  616 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 505 insertions(+), 111 deletions(-)

diff --git a/src/layout/components/Register/index.vue b/src/layout/components/Register/index.vue
index 42bfc31..a7eae8c 100644
--- a/src/layout/components/Register/index.vue
+++ b/src/layout/components/Register/index.vue
@@ -1,97 +1,348 @@
 <template>
-    <el-dialog v-model="dialogVisible" title="注册用户" width="30%" :append-to-body="true" top="50vh" custom-class="regForm">
-      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
-        <el-form-item prop="username">
-          <el-input
-            v-model="registerForm.username"
-            type="text"
-            size="large"
-            auto-complete="off"
-            placeholder="账号"
-          >
-            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            v-model="registerForm.password"
-            type="password"
-            size="large"
-            auto-complete="off"
-            placeholder="密码"
-            @keyup.enter="handleRegister"
-          >
-            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="confirmPassword">
-          <el-input
-            v-model="registerForm.confirmPassword"
-            type="password"
-            size="large"
-            auto-complete="off"
-            placeholder="确认密码"
-            @keyup.enter="handleRegister"
-          >
-            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="code" v-if="captchaEnabled">
-          <el-input
-            size="large"
-            v-model="registerForm.code"
-            auto-complete="off"
-            placeholder="验证码"
-            style="width: 63%"
-            @keyup.enter="handleRegister"
-          >
-            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-          </el-input>
-          <div class="register-code">
-            <img :src="codeUrl" @click="getCode" class="register-code-img"/>
-          </div>
-        </el-form-item>
+    <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">
+          机构注册
+          <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>
+      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form" label-position="top">
+        <el-row :gutter="30">
+          <el-col :span="8">
+            <el-form-item prop="agency.name" label="机构名称">
+              <el-input
+                  v-model="registerForm.agency.name"
+                  size="large"
+                  placeholder="请输入机构名称"
+              >
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="agency.creditCode" label="社会信用代码">
+              <el-input
+                  v-model="registerForm.agency.creditCode"
+                  size="large"
+                  placeholder="请输入社会信用代码"
+              >
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <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-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item prop="agency.area" label="实际经营地址所属区域">
+              <el-cascader
+                  v-model="registerForm.agency.area"
+                  :options="state.areaList"
+                  :props="props"
+                  @change="handleChange"
+                  style="width: 100%"
+                  size="large"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="agency.address" label="实际经营地址">
+              <el-input
+                  v-model="registerForm.agency.address"
+                  size="large"
+                  placeholder="请输入实际经营地址"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item prop="agency.legalPerson" label="法定代表人">
+              <el-input
+                  v-model="registerForm.agency.legalPerson"
+                  size="large"
+                  placeholder="请输入法定代表人"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="agency.legalPhone" label="法人电话">
+              <el-input
+                  v-model="registerForm.agency.legalPhone"
+                  size="large"
+                  placeholder="请输入法人电话"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item prop="agency.manager" label="机构负责人">
+              <el-input
+                  v-model="registerForm.agency.manager"
+                  size="large"
+                  placeholder="请输入机构负责人"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="agency.managerPhone" label="负责人电话">
+              <el-input
+                  v-model="registerForm.agency.managerPhone"
+                  size="large"
+                  placeholder="请输入负责人电话"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="8">
+            <el-form-item prop="agency.certNumber" label="资质证书编号">
+              <el-input
+                  v-model="registerForm.agency.certNumber"
+                  size="large"
+                  placeholder="请输入机构负责人"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="agency.issueDate" label="发证日期">
+              <el-date-picker
+                  v-model="registerForm.agency.issueDate"
+                  type="date"
+                  placeholder="请选择发证日期"
+                  value-format="YYYY-MM-DD 00:00:00"
+                  size="large"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="agency.validDate" label="有效日期">
+              <el-date-picker
+                  v-model="registerForm.agency.validDate"
+                  type="date"
+                  placeholder="请选择有效日期"
+                  value-format="YYYY-MM-DD 00:00:00"
+                  size="large"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="8">
+            <el-form-item prop="agency.assetValue" label="固定资产总值">
+              <el-input
+                  v-model="registerForm.agency.assetValue"
+                  type="number"
+                  size="large"
+                  placeholder="请输入固定资产总值"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="agency.workArea" label="工作场所建筑面积">
+              <el-input
+                  type="number"
+                  v-model="registerForm.agency.workArea"
+                  size="large"
+                  placeholder="请输入工作场所建筑面积"
+              ><template #append>㎡</template></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="agency.archiveArea" label="档案室面积">
+              <el-input
+                  type="number"
+                  v-model="registerForm.agency.archiveArea"
+                  size="large"
+                  placeholder="请输入档案室面积"
+              ><template #append>㎡</template></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="8">
+            <el-form-item prop="agency.regAddress" label="注册地址">
+              <el-input
+                  v-model="registerForm.agency.regAddress"
+                  size="large"
+                  placeholder="请输入注册地址"
+              />
+            </el-form-item>
+          </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-option
+                    v-for="item in state.busList"
+                    :key="item.id"
+                    :label="item.label"
+                    :value="item.label"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="8">
+            <el-form-item prop="agency.reportPath" label="加盖公章的《机构信息上报表》">
+              <!--              <el-upload-->
+              <!--                  v-model:file-list="state.fileList"-->
+              <!--                  class="upload-demo"-->
+              <!--                  action=""-->
+              <!--                  multiple-->
+              <!--                  :on-preview="handlePreview"-->
+              <!--                  :on-remove="handleRemove"-->
+              <!--                  :before-remove="beforeRemove"-->
+              <!--                  :limit="3"-->
+              <!--                  :on-exceed="handleExceed"-->
+              <!--              >-->
+              <!--                <el-button type="primary">点击上传</el-button>-->
+              <!--                <template #tip>-->
+              <!--                  <div class="el-upload__tip">-->
+              <!--                    上传文件大小不超过2M-->
+              <!--                  </div>-->
+              <!--                </template>-->
+              <!--              </el-upload>-->
+              <el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="handleAvatarSuccess" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='state.imgLimit' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove">
+                <el-icon><Plus /></el-icon>
+                <template #tip>
+                  <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
+                </template>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item prop="username" label="登录用户名(字母+数字,长度在5-16之间)">
+              <el-input
+                  v-model="registerForm.username"
+                  size="large"
+                  placeholder="请输入登录用户名"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="phone" label="用户电话">
+              <el-input
+                  v-model="registerForm.phone"
+                  size="large"
+                  placeholder="请输入用户电话"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item prop="password" label="密码">
+              <el-input
+                  v-model="registerForm.password"
+                  type="password"
+                  size="large"
+                  placeholder="请输入密码"
+                  show-password
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="confirmPassword" label="确认密码">
+              <el-input
+                  v-model="registerForm.confirmPassword"
+                  type="password"
+                  size="large"
+                  auto-complete="off"
+                  placeholder="确认密码"
+                  show-password
+              >
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item style="width:100%;">
           <el-button
             :loading="loading"
             size="large"
             type="primary"
-            style="width:100%;"
+            style="width:40%;margin: 0 auto"
             @click.prevent="handleRegister"
           >
             <span v-if="!loading">注 册</span>
             <span v-else>注 册 中...</span>
           </el-button>
-<!--          <div style="float: right;">-->
-<!--            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>-->
-<!--          </div>-->
         </el-form-item>
       </el-form>
+      <el-dialog v-model="state.dialogImg">
+        <el-image style="width: 100%; height: 100%" :src="state.dialogImageUrl"/>
+      </el-dialog>
     </el-dialog>
-    <!--  底部  -->
-<!--    <div class="el-Register-footer">-->
-<!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
-<!--    </div>-->
 </template>
 
 <script setup>
-import {ref, watch, defineExpose, onMounted} from "vue"
-import { ElMessageBox } from "element-plus";
-import { getCodeImg, register } from "@/api/login";
+import {ref, watch, defineExpose, onMounted, reactive} from "vue"
+import {ElMessage, ElMessageBox} from "element-plus"
+import { register,delPic,getDict } 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: ''
+});
 
-const router = useRouter();
-const { proxy } = getCurrentInstance();
-const test=()=>{
-  dialogVisible.value = false
+const props = {
+  expandTrigger: 'hover',
+  value: 'name',
+  label: 'name'
 }
 
-const registerForm = ref({
-  username: "",
-  password: "",
-  confirmPassword: "",
-  code: "",
-  uuid: ""
-});
+const state = reactive({
+  areaList: [],
+  busList: [],
+  fileList: [],
+  imgLimit: 1,
+  uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
+  header: {
+    Authorization: 'Bearer ' + getToken()
+  },
+  dialogImageUrl: '',
+  dialogImg: false
+})
+
 
 const equalToPassword = (rule, value, callback) => {
   if (registerForm.value.password !== value) {
@@ -101,65 +352,205 @@
   }
 };
 
+const validatePhone = (rule, value, callback)=>{
+  if(value === ''){
+    callback(new Error('请输入手机号'))
+  }else{
+    if(!verifyPhone(value)){
+      callback(new Error('手机号格式有误'))
+    }else{
+      callback()
+    }
+  }
+}
+
+const validateUsername = (rule, value, callback)=>{
+  if(value === ''){
+    callback(new Error('请输入登录时用户名'))
+  }else{
+    if(!verifyUsername(value)){
+      callback(new Error('用户名须使用字母+数字,长度在5-16之间'))
+    }else{
+      callback()
+    }
+  }
+}
+
+let validatePwd = (rule, value, callback)=>{
+  if(value === ''){
+    callback(new Error('请输入密码'))
+  }else{
+    if(!verifyPwd(value)){
+      callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线),长度在6-16之间'))
+    }else{
+      callback()
+    }
+  }
+}
+
 const registerRules = {
-  username: [
-    { required: true, trigger: "blur", message: "请输入您的账号" },
-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
-  ],
-  password: [
-    { required: true, trigger: "blur", message: "请输入您的密码" },
-    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
-  ],
+  "agency.name": [{required: true, trigger: "blur", message: "请输入机构名称"}],
+  "agency.creditCode": [{required: true, trigger: "blur", message: "请输入社会信用代码"}],
+  "agency.attribute": [{required: true, trigger: "blur", message: "请选择机构属性"}],
+  "agency.area": [{required: true, trigger: "blur", message: "请选择实际经营地址所属区域"}],
+  "agency.address": [{required: true, trigger: "blur", message: "请输入实际经营地址"}],
+  "agency.legalPerson": [{required: true, trigger: "blur", message: "请输入法定代表人"}],
+  "agency.legalPhone": [{required: true, trigger: "blur", validator: validatePhone}],
+  "agency.manager": [{required: true, trigger: "blur", message: "请输入机构负责人"}],
+  "agency.managerPhone": [{required: true, trigger: "blur", validator: validatePhone}],
+  "agency.certNumber": [{required: true, trigger: "blur", message: "请输入资质证书编号"}],
+  "agency.issueDate": [{required: true, trigger: "blur", message: "请选择发证日期"}],
+  "agency.validDate": [{required: true, trigger: "blur", message: "请选择有效日期"}],
+  "agency.assetValue": [{required: true, trigger: "blur", message: "请输入固定资产总值"}],
+  "agency.workArea": [{required: true, trigger: "blur", message: "请输入工作场所建筑面积"}],
+  "agency.archiveArea": [{required: true, trigger: "blur", message: "请输入档案室面积"}],
+  "agency.regAddress": [{required: true, trigger: "blur", message: "请输入注册地址"}],
+  "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 }],
+  password: [{ required: true, trigger: "blur", validator: validatePwd }],
   confirmPassword: [
-    { required: true, trigger: "blur", message: "请再次输入您的密码" },
+    { required: true, trigger: "blur", message: "请再次确认密码" },
     { required: true, validator: equalToPassword, trigger: "blur" }
-  ],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+  ]
 };
 
-const codeUrl = ref("");
-const loading = ref(false);
-const captchaEnabled = ref(true);
+const loading = ref(false)
 const dialogVisible = ref(false)
+const registerRef = ref(null)
+
 onMounted(()=>{
-  getCode();
+  getBusiness()
+  getArea()
 })
+
+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]:''
+  }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]:''
+  }
+}
+
+const getBusiness = async ()=>{
+  const res = await getDict({dictType: 'sys_business_scope'})
+  if(res.code == 200){
+    state.busList = res.data
+  }else{
+    ElMessage.warning(res.message)
+  }
+}
+
+const getArea = async ()=>{
+  const type = registerForm.value.agency.attribute
+  const res = await getRegionTree({name: '',parentId: null,regionType: type})
+  if(res.code == 200){
+    state.areaList = res.data
+  }else{
+    ElMessage.warning(res.message)
+  }
+}
+
+const changeAttr=()=>{
+  getArea()
+}
+
+// 图片上传
+const showTip =()=>{
+  ElMessage({
+    type: 'warning',
+    message: '超出文件上传数量'
+  });
+}
+
+const picSize = async (rawFile) => {
+  if(rawFile.size / 1024 / 1024 > 5){
+    ElMessage({
+      type: 'warning',
+      message: '文件大小不能超过5M'
+    });
+    return false
+  }
+};
+
+const handlePictureCardPreview = (uploadFile) => {
+  state.dialogImageUrl = uploadFile.url
+  state.dialogImg = true
+};
+
+
+const handleAvatarSuccess = (res, uploadFile) => {
+  if(res.code == 200){
+    registerForm.value.agency.reportPath = res.data.path
+  }else{
+    ElMessage({
+      type: 'warning',
+      message: '文件上传失败'
+    })
+  }
+}
+
+const handleRemove = async (file, uploadFiles) => {
+  const res = await delPic({path: registerForm.value.agency.reportPath})
+  if(res.code == 200){
+    ElMessage({
+      type: 'success',
+      message: '文件已删除'
+    })
+  }else{
+    ElMessage({
+      type: 'warning',
+      message: res.message
+    })
+  }
+}
 
 function handleRegister() {
   proxy.$refs.registerRef.validate(valid => {
     if (valid) {
       loading.value = true;
-      register(registerForm.value).then(res => {
-        const username = registerForm.value.username;
-        ElMessageBox.alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", "系统提示", {
-          dangerouslyUseHTMLString: true,
-          type: "success",
-        }).then(() => {
-          router.push("/homePage");
-        }).catch(() => {});
-      }).catch(() => {
-        loading.value = false;
-        if (captchaEnabled) {
-          getCode();
+      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
+          })
         }
-      });
+      }).catch(() => {
+        loading.value = false
+      })
     }
   });
 }
 
-function getCode() {
-  getCodeImg().then(res => {
-    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-    if (captchaEnabled.value) {
-      codeUrl.value = "data:image/gif;base64," + res.img;
-      registerForm.value.uuid = res.uuid;
-    }
-  });
+const closeDialog = ()=>{
+  proxy.$refs.registerRef.resetFields()
+  proxy.$refs.registerRef.clearValidate()
+  state.fileList = []
 }
 
 defineExpose({
   dialogVisible,
-  test
 })
 
 </script>
@@ -183,6 +574,9 @@
     width: 14px;
     margin-left: 0px;
   }
+  .el-radio-group{
+    width: 200px !important;
+  }
 }
 .register-tip {
   font-size: 13px;

--
Gitblit v1.9.2