Browse Source

feat(draw): update

gemercheung 1 year ago
parent
commit
35a9c90f21
4 changed files with 329 additions and 242 deletions
  1. BIN
      src/assets/empty__no_rights.png
  2. 8 1
      src/router.ts
  3. 23 0
      src/view/no-persession.vue
  4. 298 241
      src/view/register/register.vue

BIN
src/assets/empty__no_rights.png


+ 8 - 1
src/router.ts

@@ -8,8 +8,14 @@ export const QUERY_COORD_NAME = "query-map-coord";
 export const QUERY_POYS_NAME = "query-map-poy";
 
 const history = createWebHashHistory();
+
 const routes: RouteRecordRaw[] = [
   {
+    path: "/no-persession",
+    name: "no-persession",
+    component: () => import("@/view/no-persession.vue"),
+  },
+  {
     path: "/down-vision",
     name: "down-vision",
     component: () => import("@/view/down-vision.vue"),
@@ -145,6 +151,7 @@ const routes: RouteRecordRaw[] = [
     ],
   },
   { path: '/:pathMatch(.*)*', component: import("@/view/layout/nav.vue") },
+
 ];
 
 export const findRoute = (
@@ -214,7 +221,7 @@ router.beforeEach((to, _, next) => {
     if (!isSuper.value) {
       router.replace({ name: "scene" });
       return
-    }    
+    }
   }
 
   if (to.name === "map") {

+ 23 - 0
src/view/no-persession.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="no-permission">
+    <img :src="emptyNoRights" />
+    <span>无访问权限</span>
+  </div>
+</template>
+<script setup>
+import emptyNoRights from "@/assets/empty__no_rights.png";
+</script>
+<style lang="scss">
+.no-permission {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 500px;
+
+  span {
+    font-size: 14px;
+    color: #999999;
+  }
+}
+</style>

+ 298 - 241
src/view/register/register.vue

@@ -1,278 +1,335 @@
 <template>
-    <div class="register">
-        <el-form class="panel" :model="form" :rules="rules" ref="baseFormRef">
-            <h2>单位注册</h2>
-            <span class="desc">
-                此功能仅用于注册单位及单位管理员,
-                单位内其它用户可由单位管理员登录后创建。
-            </span>
-            <el-form-item class="panel-form-item" label="单位名称"required>
-                <el-input :maxlength="11" v-model.trim="form.orgName" placeholder="请输入"></el-input>
-            </el-form-item>
-
-            <el-form-item class="panel-form-item" label="类型" prop="type">
-                <el-select v-model="form.type">
-                    <el-option class="register-select-option" :value="Number(key)" :label="type"
-                        v-for="(type, key) in OrganizationTypeDesc" />
-                </el-select>
-            </el-form-item>
-            <el-form-item class="panel-form-item" label="姓名" required>
-                <el-input :maxlength="200" v-model.trim="form.contact" placeholder="请选择"></el-input>
-            </el-form-item>
-
-
-            <el-form-item class="panel-form-item" prop="userName" label="账号" required>
-                <el-input :maxlength="11" v-model.trim="form.userName" placeholder="请输入手机号码">
-                </el-input>
-            </el-form-item>
-
-            <el-form-item class="panel-form-item msgcode" prop="msgAuthCode" label="验证码" required>
-                <el-input :maxlength="8" v-model.trim="form.msgAuthCode" placeholder="输入验证码">
-                </el-input>
-                <el-button class="getMsgAuthCode" :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled"
-                    style="margin-left: 10px" @click="getCheckCode"> {{ checkCodeBtn.text }}</el-button>
-            </el-form-item>
-
-            <!-- <el-form-item class="panel-form-item" label="密码" prop="password" required>
+  <div class="register">
+    <el-form class="panel" :model="form" :rules="rules" ref="baseFormRef">
+      <h2>单位注册</h2>
+      <span class="desc">
+        此功能仅用于注册单位及单位管理员,
+        单位内其它用户可由单位管理员登录后创建。
+      </span>
+      <el-form-item class="panel-form-item" label="单位名称" required>
+        <el-input
+          :maxlength="11"
+          v-model.trim="form.orgName"
+          placeholder="请输入"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item class="panel-form-item" label="类型" prop="type">
+        <el-select v-model="form.type">
+          <el-option
+            class="register-select-option"
+            :value="Number(key)"
+            :label="type"
+            v-for="(type, key) in OrganizationTypeDesc"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="panel-form-item" label="姓名" required>
+        <el-input
+          :maxlength="200"
+          v-model.trim="form.contact"
+          placeholder="请选择"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item
+        class="panel-form-item"
+        prop="userName"
+        label="账号"
+        required
+      >
+        <el-input
+          :maxlength="11"
+          v-model.trim="form.userName"
+          placeholder="请输入手机号码"
+        >
+        </el-input>
+      </el-form-item>
+
+      <el-form-item
+        class="panel-form-item msgcode"
+        prop="msgAuthCode"
+        label="验证码"
+        required
+      >
+        <el-input
+          :maxlength="8"
+          v-model.trim="form.msgAuthCode"
+          placeholder="输入验证码"
+        >
+        </el-input>
+        <el-button
+          class="getMsgAuthCode"
+          :loading="checkCodeBtn.loading"
+          :disabled="checkCodeBtn.disabled"
+          style="margin-left: 10px"
+          @click="getCheckCode"
+        >
+          {{ checkCodeBtn.text }}</el-button
+        >
+      </el-form-item>
+
+      <!-- <el-form-item class="panel-form-item" label="密码" prop="password" required>
                 <el-input v-model.trim="form.password" placeholder="请输入8-16位数字、字母大小写组合">
                 </el-input>
             </el-form-item> -->
-            <el-form-item class="panel-form-item" label="密码" prop="password" required>
-                <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
-                    v-model="form.password" :type="addPassFlag ? 'text' : 'password'" :maxlength="20"
-                    placeholder="请输入8-16位数字、字母大小写组合">
-                    <template #suffix>
-                        <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
-                            <el-icon v-if="addPassFlag">
-                                <View />
-                            </el-icon>
-                            <el-icon v-else>
-                                <Hide />
-                            </el-icon>
-                        </span>
-                    </template>
-                </el-input>
-
-            </el-form-item>
-
-            <el-form-item class="panel-form-item" label="密码确认" prop="confirmPwd" required>
-                <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
-                    v-model="form.confirmPwd" :type="addPassFlag1 ? 'text' : 'password'" :maxlength="20"
-                    placeholder="输入再次输入密码">
-                    <template #suffix>
-                        <span @click="addPassFlag1 = !addPassFlag1" style="cursor: pointer;">
-                            <el-icon v-if="addPassFlag1">
-                                <View />
-                            </el-icon>
-                            <el-icon v-else>
-                                <Hide />
-                            </el-icon>
-                        </span>
-                    </template>
-                </el-input>
-
-            </el-form-item>
-
-            <el-form-item class="panel-form-item">
-                <el-button type="primary" class="fill submit" @click="submitClick">注册</el-button>
-            </el-form-item>
-
-
-        </el-form>
-    </div>
+      <el-form-item
+        class="panel-form-item"
+        label="密码"
+        prop="password"
+        required
+      >
+        <el-input
+          autocomplete="off"
+          readonly
+          onfocus="this.removeAttribute('readonly');"
+          v-model="form.password"
+          :type="addPassFlag ? 'text' : 'password'"
+          :maxlength="20"
+          placeholder="请输入8-16位数字、字母大小写组合"
+        >
+          <template #suffix>
+            <span @click="addPassFlag = !addPassFlag" style="cursor: pointer">
+              <el-icon v-if="addPassFlag">
+                <View />
+              </el-icon>
+              <el-icon v-else>
+                <Hide />
+              </el-icon>
+            </span>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item
+        class="panel-form-item"
+        label="密码确认"
+        prop="confirmPwd"
+        required
+      >
+        <el-input
+          autocomplete="off"
+          readonly
+          onfocus="this.removeAttribute('readonly');"
+          v-model="form.confirmPwd"
+          :type="addPassFlag1 ? 'text' : 'password'"
+          :maxlength="20"
+          placeholder="输入再次输入密码"
+        >
+          <template #suffix>
+            <span @click="addPassFlag1 = !addPassFlag1" style="cursor: pointer">
+              <el-icon v-if="addPassFlag1">
+                <View />
+              </el-icon>
+              <el-icon v-else>
+                <Hide />
+              </el-icon>
+            </span>
+          </template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item class="panel-form-item">
+        <el-button type="primary" class="fill submit" @click="submitClick"
+          >注册</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, unref } from 'vue'
+import { reactive, ref, unref } from "vue";
 import { ElMessage, type FormInstance, type FormRules } from "element-plus";
-import { OrganizationTypeDesc } from '@/store/organization';
-import { View, Hide } from '@element-plus/icons-vue';
-import { registerOrganization } from '@/request/organization';
+import { OrganizationTypeDesc } from "@/store/organization";
+import { View, Hide } from "@element-plus/icons-vue";
+import { registerOrganization } from "@/request/organization";
 // import { encodePwd } from "@/util";
-import {
-    getMsgAuthCode,
-} from "@/request";
+import { getMsgAuthCode } from "@/request";
 
-const emit = defineEmits(['done'])
+const emit = defineEmits(["done"]);
 const baseFormRef = ref<FormInstance>();
-const addPassFlag = ref(false) //图标显示标识
-const addPassFlag1 = ref(false) //图标显示标识
+const addPassFlag = ref(false); //图标显示标识
+const addPassFlag1 = ref(false); //图标显示标识
 
 let checkCodeBtn = reactive<any>({
-    text: '获取验证码',
-    loading: false,
-    disabled: false,
-    duration: 60,
-    timer: null
-})
-
-
+  text: "获取验证码",
+  loading: false,
+  disabled: false,
+  duration: 60,
+  timer: null,
+});
 
 const equalToPassword = (_, value: any, callback: any) => {
-    if (form.password !== value) {
-        callback(new Error("两次输入的密码不一致"));
-    } else {
-        callback();
-    }
+  if (form.password !== value) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
+  }
 };
 
-
 const rules = reactive<FormRules>({
-    orgName: [
-        { required: true, message: "请选择单位名称", trigger: "select" },
-    ],
-    msgAuthCode: [
-        { required: true, message: "请输入验证码", trigger: "change" },
-    ],
-    contact: [
-        { required: true, message: "请输入姓名", trigger: "blur" },
-    ],
-    userName: [
-        { required: true, message: "请输入手机号码", trigger: "blur" },
-        { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入手机号码", trigger: "blur" },
-    ],
-    password: [
-        { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
-        { required: true, min: 8, message: '密码太短!', trigger: "blur" },
-    ],
-    confirmPwd: [
-        { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
-        { required: true, min: 8, message: '密码太短!', trigger: "blur" },
-        { required: true, validator: equalToPassword, trigger: "blur" }
-    ],
-},)
-
+  orgName: [{ required: true, message: "请选择单位名称", trigger: "select" }],
+  msgAuthCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
+  contact: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+  userName: [
+    { required: true, message: "请输入手机号码", trigger: "blur" },
+    {
+      required: true,
+      pattern: /^1[3456789]\d{9}$/,
+      message: "请输入手机号码",
+      trigger: "blur",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
+      message: "请输入8-16位数字、字母大小写组合",
+      trigger: "blur",
+    },
+    { required: true, min: 8, message: "密码太短!", trigger: "blur" },
+  ],
+  confirmPwd: [
+    {
+      required: true,
+      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
+      message: "请输入8-16位数字、字母大小写组合",
+      trigger: "blur",
+    },
+    { required: true, min: 8, message: "密码太短!", trigger: "blur" },
+    { required: true, validator: equalToPassword, trigger: "blur" },
+  ],
+});
 
 const form = reactive({
-    orgName: "",
-    type: "",
-    userName: "",
-    password: "",
-    contact: "",
-    confirmPwd: "",
-    msgAuthCode: "",
+  orgName: "",
+  type: "",
+  userName: "",
+  password: "",
+  contact: "",
+  confirmPwd: "",
+  msgAuthCode: "",
 });
 
 const getCheckCode = async () => {
-    // 倒计时期间按钮不能单击
-    await unref(baseFormRef)?.validateField('userName');
-
-    const phoneNum = form.userName
-    console.log('getMsgCode', phoneNum)
-    const res = await getMsgAuthCode('+86', phoneNum)
-    if (res.success) {
-        ElMessage.success(res.data);
-    }
-    if (checkCodeBtn.duration == 60) {
-        checkCodeBtn.disabled = true
+  // 倒计时期间按钮不能单击
+  await unref(baseFormRef)?.validateField("userName");
+
+  const phoneNum = form.userName;
+  console.log("getMsgCode", phoneNum);
+  const res = await getMsgAuthCode("+86", phoneNum);
+  if (res.success) {
+    ElMessage.success(res.data);
+  }
+  if (checkCodeBtn.duration == 60) {
+    checkCodeBtn.disabled = true;
+  }
+  // 清除掉定时器
+  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer);
+  // 开启定时器
+  checkCodeBtn.timer = setInterval(() => {
+    const tmp = checkCodeBtn.duration--;
+    checkCodeBtn.text = `${tmp}秒`;
+    if (tmp <= 0) {
+      // 清除掉定时器
+      clearInterval(checkCodeBtn.timer);
+      checkCodeBtn.duration = 60;
+      checkCodeBtn.text = "重新获取";
+      // 设置按钮可以单击
+      checkCodeBtn.disabled = false;
     }
-    // 清除掉定时器
-    checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
-    // 开启定时器
-    checkCodeBtn.timer = setInterval(() => {
-        const tmp = checkCodeBtn.duration--
-        checkCodeBtn.text = `${tmp}秒`
-        if (tmp <= 0) {
-            // 清除掉定时器
-            clearInterval(checkCodeBtn.timer)
-            checkCodeBtn.duration = 60
-            checkCodeBtn.text = '重新获取'
-            // 设置按钮可以单击
-            checkCodeBtn.disabled = false
-        }
-        console.info(checkCodeBtn.duration)
-    }, 1000)
-}
+    console.info(checkCodeBtn.duration);
+  }, 1000);
+};
 
 const submitClick = async () => {
-    if (unref(baseFormRef)) {
-        const res = await unref(baseFormRef)?.validate();
-        if (res) {
-            const result = await registerOrganization(form)
-            console.log('result', result)
-            emit('done')
-            // ElMessage.success('新增成功!');
-        }
-    } else {
-        throw "";
+  if (unref(baseFormRef)) {
+    const res = await unref(baseFormRef)?.validate();
+    if (res) {
+      const result = await registerOrganization(form);
+      console.log("result", result);
+      emit("done");
+      // ElMessage.success('新增成功!');
     }
-}
+  } else {
+    throw "";
+  }
+};
 </script>
 
 <style lang="scss" scoped>
 .register {
-    padding: 10px 0;
-
-    .panel {
-        width: 430px;
-    }
-
-    .panel-form-item {
-        padding-left: 0;
-        padding-right: 0;
+  padding: 10px 0;
+
+  .panel {
+    width: 430px;
+  }
+
+  .panel-form-item {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  h2 {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+  .desc {
+    color: #93795d;
+    display: block;
+    margin-bottom: 20px;
+  }
+
+  :deep(.panel-form-item .el-form-item__label) {
+    line-height: 40px;
+    font-size: 16px;
+    min-width: 90px;
+  }
+
+  :deep(.el-form-item__error) {
+    font-size: 14px;
+  }
+
+  :deep(.el-select) {
+    width: 100%;
+    height: 42px;
+    line-height: 42px;
+
+    .el-select__wrapper {
+      height: 100%;
+      font-size: 1.14rem;
     }
-
-    h2 {
-        padding-left: 0;
-        margin-bottom: 0;
-    }
-
-    .desc {
-        color: #93795D;
-        display: block;
-        margin-bottom: 20px;
-    }
-
-    :deep(.panel-form-item .el-form-item__label) {
-        line-height: 40px;
-        font-size: 16px;
-        min-width: 90px;
-    }
-
-    :deep(.el-form-item__error) {
-        font-size: 14px;
-    }
-
-    :deep(.el-select) {
-        width: 100%;
-        height: 42px;
-        line-height: 42px;
-
-        .el-select__wrapper {
-            height: 100%;
-            font-size: 1.14rem;
-        }
-    }
-
-    .msgcode {
-        position: relative;
-    }
-
-    .getMsgAuthCode {
-        border: 1px solid #93795D;
-        background: rgba(147, 121, 93, 0.05);
-        font-size: 14px;
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        height: 32px;
-        line-height: 32px;
-    }
-
-    .fill {
-        width: 100%;
-    }
-
-
+  }
+
+  .msgcode {
+    position: relative;
+  }
+
+  .getMsgAuthCode {
+    border: 1px solid #93795d;
+    background: rgba(147, 121, 93, 0.05);
+    font-size: 14px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  .fill {
+    width: 100%;
+  }
 }
 </style>
 <style>
 .register-select-option {
-    font-size: 1.14rem;
-    min-height: 50px;
-    line-height: 50px;
-    /* padding: 5px 0; */
+  font-size: 1.14rem;
+  min-height: 50px;
+  line-height: 50px;
+  /* padding: 5px 0; */
 }
-.el-form-item__label:before{
-    display: none;
+.el-form-item__label:before {
+  display: none;
 }
-</style>
+</style>