From c9d84979d9496e0c373649244760a71581743be3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Wed, 3 Jan 2024 21:07:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/site/index.vue          | 41 +++++------------------
 src/views/tunnel-manage/index.vue | 52 ++++++++++++++++-------------
 src/views/user/index.vue          | 55 +++++++++++++++++++------------
 3 files changed, 71 insertions(+), 77 deletions(-)

diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 997db05..9d28b8f 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -62,8 +62,8 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
-        <el-form-item label="站点名称">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
+        <el-form-item label="站点名称" prop="siteName">
           <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -108,35 +108,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
-const siteList = ref([
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '一号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '二号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '三号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // }
-])
+const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
 const info = ref({
@@ -160,7 +132,7 @@ const form = ref({
   isDefault: false
 });
 const formRules = ref({
-  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
+  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
 })
 const formInstance = ref()
 const getList = () => {
@@ -235,7 +207,7 @@ const handleAdd = () => {
 }
 const handleSubmit = (instance) => {
   if (!instance) return
-  instance.validate(async (valid) => {
+  instance.validate(valid => {
     if (!valid) return
     if (title.value === '编辑站点') {
       editSite(form.value).then((res) => {
@@ -328,6 +300,9 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error){
+  font-size: 35px;
+}
 :deep(.el-radio-group) {
   margin-top: 10px;
 }
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index 8030c72..24e6324 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -67,13 +67,13 @@
         <span>{{ title }}</span>
       </div>
       <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
-        <el-form-item label="隧道名称" required>
+        <el-form-item label="隧道名称" prop="tunnelName">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号" required>
+        <el-form-item label="序列号" prop="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度" required>
+        <el-form-item label="隧道长度" prop="totalLength">
           <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -117,9 +117,17 @@ const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
 const userId = reactive(params.userId)
 const type = reactive(params.type)
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
-  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  serialNumber: [
+    {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
 })
 const showFirst = ref(true)
 const showOperation = ref(true)
@@ -193,7 +201,7 @@ const pageInfo = reactive({
   pageSize: 12
 });
 const total = ref(10);
-onMounted(()=>{
+onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
 const handleGoSiteOrIndex = () => {
@@ -232,16 +240,13 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
-  // if (!instance) return
-  // console.log('instance',instance)
-  // instance.validate(async (valid) => {
-  //   console.log('valid',valid)
-  //   if (!valid) return
-  const data = {
-    siteId: siteId,
-    ...form.value
-  }
-  if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value
+    }
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')
@@ -251,16 +256,13 @@ const handleSubmit = (instance) => {
         ElMessage.warning(res.msg)
       }
     })
-  } else {
-    ElMessage.warning('请先完善信息再新增')
-  }
-  // })
+  })
 }
 //预览隧道
-const handlePreview=(id)=>{
+const handlePreview = (id) => {
   console.log('预览')
-  if(id){
-    router.push('/'+id)
+  if (id) {
+    router.push('/' + id)
   }
 }
 const handleGoToEditTunnel = (tunnelId) => {
@@ -353,6 +355,10 @@ const handleMoreDelete = () => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 .site-name {
   position: absolute;
   left: 250px;
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index aa300d0..69d8c3e 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -72,16 +72,16 @@
         <el-form-item label="当前站点">
           <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
         </el-form-item>
-        <el-form-item label="输入用户名">
+        <el-form-item label="输入用户名" prop="userName">
           <el-input v-model="form.userName" placeholder="请输入用户名"/>
         </el-form-item>
-        <el-form-item label="输入密码" v-if="title==='添加用户'">
+        <el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
           <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
         </el-form-item>
-        <el-form-item label="输入昵称">
+        <el-form-item label="输入昵称" prop="nickName">
           <el-input v-model="form.nickName" placeholder="请输入昵称"/>
         </el-form-item>
-        <el-form-item label="输入电话号码">
+        <el-form-item label="输入电话号码" prop="phoneNumber">
           <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
         </el-form-item>
         <el-form-item label="是否启用">
@@ -90,7 +90,7 @@
             <el-radio label="0">停用</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择身份">
+        <el-form-item label="选择身份" prop="roleId">
           <el-radio-group v-model="form.roleId" @change="(val) => {
             if (val >3){
                  getTunnel()
@@ -98,7 +98,7 @@
             <el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择隧道" v-if="form.roleId>3">
+        <el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
           <div class="user-select">
             <el-select
                 v-model="form.tunnelList"
@@ -172,20 +172,27 @@ const form = ref({
   roleId: [],
   tunnelList: [1]
 });
+const validateName = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
-  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
+  userName: [
+    {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
+    {validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
+  nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
+  roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
+  tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
 })
 const radioList = ref([])
 const tunnelList = ref([])
 const multipleTable = ref()
 onMounted(() => {
-  if (localStorage.getItem('userId') == 2) {
-    showAdmin.value = true
-  } else {
-    showAdmin.value = false
-  }
+  showAdmin.value = localStorage.getItem('userId') == 2;
 })
+
 const getTunnel = () => {
   getTunnelOption(siteId).then(res => {
     if (res.code === 1000) {
@@ -280,9 +287,9 @@ const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
   getInfo()
 }
-const handleSubmit = async (formInstance) => {
+const handleSubmit = (formInstance) => {
   if (!formInstance) return;
-  formInstance.validate(async (valid) => {
+  formInstance.validate((valid) => {
     if (!valid) return;
     const data = {
       siteId: siteId,
@@ -295,7 +302,7 @@ const handleSubmit = async (formInstance) => {
       tunnelList: form.value.tunnelList
     }
     if (title.value === '添加用户') {
-      await addUser(data).then(res => {
+      addUser(data).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -309,7 +316,7 @@ const handleSubmit = async (formInstance) => {
         userId: form.value.userId,
         ...data
       }
-      await editUser(editData).then(res => {
+      editUser(editData).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -335,11 +342,13 @@ const handleSelect = async (selection, row) => {
 }
 </script>
 <style lang="scss">
+
 .user-select {
-  .el-input{
+  .el-input {
     min-height: 75px;
-    height: auto!important;
+    height: auto !important;
   }
+
   .el-select__popper {
     margin-top: -12px !important;
     background: #072247 !important;
@@ -357,7 +366,8 @@ const handleSelect = async (selection, row) => {
   .el-select-dropdown__item {
     font-size: 38px !important;
     height: 60px !important;
-    line-height:60px !important;
+    line-height: 60px !important;
+
     > span {
       color: #FFFFFF;
     }
@@ -390,6 +400,10 @@ const handleSelect = async (selection, row) => {
 }
 </style>
 <style scoped lang="scss">
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 :deep(.el-input .el-input__password) {
   font-size: 60px;
 }
@@ -415,7 +429,6 @@ const handleSelect = async (selection, row) => {
 }
 
 
-
 :deep(.el-radio-group) {
   margin-top: 10px;
 }