From 506f5bf00605ab68d91ed4575bf66e7714e7a16b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 23 Jan 2022 00:39:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9BType?=
 =?UTF-8?q?Script=E6=89=93=E5=8C=85=E7=BC=96=E8=AF=91=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E7=8E=B0=E7=89=88=E6=9C=AC=E5=8F=AF?=
 =?UTF-8?q?=E6=88=90=E5=8A=9F=E7=94=9F=E4=BA=A7=E6=89=93=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pms/brand/index.vue                 |  44 +++---
 .../pms/category/components/Attribute.vue     |   4 +-
 .../pms/goods/components/GoodsAttribute.vue   |   8 +-
 .../pms/goods/components/GoodsCategory.vue    |   8 +-
 src/views/pms/goods/components/GoodsInfo.vue  |  41 +++---
 src/views/pms/goods/detail.vue                |  18 +--
 src/views/system/menu/components/Menu.vue     |  48 +++----
 src/views/system/menu/components/Perm.vue     | 133 +++++++++---------
 src/views/system/user/index.vue               |   6 +-
 9 files changed, 149 insertions(+), 161 deletions(-)

diff --git a/src/views/pms/brand/index.vue b/src/views/pms/brand/index.vue
index 4b8911a3..10213b4e 100644
--- a/src/views/pms/brand/index.vue
+++ b/src/views/pms/brand/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!-- 搜索表单 -->
     <el-form
-        ref="queryForm"
+        ref="queryFormRef"
         :model="queryParams"
         :inline="true"
         size="small"
@@ -105,7 +105,7 @@
         width="600px"
     >
       <el-form
-          ref="dataForm"
+          ref="dataFormRef"
           :model="formData"
           :rules="rules"
           label-width="100px"
@@ -121,7 +121,6 @@
         <el-form-item label="排序" prop="sort">
           <el-input v-model="formData.sort"/>
         </el-form-item>
-
       </el-form>
 
       <template #footer>
@@ -138,11 +137,12 @@
 import {listBrandsWithPage, getBrandDetail, updateBrand, addBrand, deleteBrands} from '@/api/pms/brand'
 import SingleUpload from "@/components/Upload/SingleUpload.vue"
 import {onMounted, reactive, ref, toRefs, unref} from "vue";
-import {ElForm, ElMessage, ElMessageBox} from "element-plus";
+import {ElForm, ElTable, ElMessage, ElMessageBox} from "element-plus";
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
 
-const dataForm = ref(ElForm)  // 属性名必须和元素的ref属性值一致
-const dataTable = ref()
+const dataTableRef = ref(ElTable)
+const queryFormRef = ref(ElForm)  // 属性名必须和元素的ref属性值一致
+const dataFormRef = ref(ElForm)  // 属性名必须和元素的ref属性值一致
 
 const state = reactive({
   loading: true,
@@ -189,16 +189,14 @@ function handleQuery() {
 }
 
 function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    title: undefined
-  }
+  const dataTable = unref(dataTableRef)
+  dataTable.resetFields()
   handleQuery()
 }
 
 function handleRowClick(row: any) {
-  dataTable.value.toggleRowSelection(row);
+  const dataTable = unref(dataTableRef)
+  dataTable.toggleRowSelection(row);
 }
 
 function handleSelectionChange(selection: any) {
@@ -208,7 +206,6 @@ function handleSelectionChange(selection: any) {
 }
 
 function handleAdd() {
-  resetForm()
   state.dialog = {
     title: '添加品牌',
     visible: true
@@ -216,7 +213,6 @@ function handleAdd() {
 }
 
 function handleUpdate(row: any) {
-  resetForm()
   state.dialog = {
     title: '修改品牌',
     visible: true,
@@ -228,19 +224,21 @@ function handleUpdate(row: any) {
 }
 
 function submitForm() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
+  const dataForm = unref(dataFormRef)
+  dataForm.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
         updateBrand(state.formData.id as any, state.formData).then(response => {
           ElMessage.success('修改成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       } else {
         addBrand(state.formData).then(response => {
           ElMessage.success('新增成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       }
@@ -248,18 +246,17 @@ function submitForm() {
   })
 }
 
+/**
+ * 重置表单
+ */
 function resetForm() {
-  state.formData = {
-    id: undefined,
-    name: undefined,
-    logoUrl: undefined,
-    sort: 1
-  }
+  const dataForm = unref(dataFormRef)
+  dataForm.resetFields()
 }
 
 function cancel() {
-  resetForm()
   state.dialog.visible = false
+  resetForm()
 }
 
 function handleDelete(row: any) {
@@ -285,5 +282,4 @@ onMounted(() => {
 </script>
 
 <style scoped>
-
 </style>
diff --git a/src/views/pms/category/components/Attribute.vue b/src/views/pms/category/components/Attribute.vue
index f199cd2f..17db3953 100644
--- a/src/views/pms/category/components/Attribute.vue
+++ b/src/views/pms/category/components/Attribute.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container">
+  <div class="component-container">
     <el-card class="box-card" shadow="always">
       <el-row>
         <el-col :span="12">
@@ -158,7 +158,7 @@ function submitForm() {
 </script>
 
 <style scoped>
-.components-container{
+.component-container{
   margin-bottom: 20px;
 }
 
diff --git a/src/views/pms/goods/components/GoodsAttribute.vue b/src/views/pms/goods/components/GoodsAttribute.vue
index 3e03bfb8..0e3506ac 100644
--- a/src/views/pms/goods/components/GoodsAttribute.vue
+++ b/src/views/pms/goods/components/GoodsAttribute.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="components-container">
-    <div class="components-container__main">
+  <div class="component-container">
+    <div class="component-container__main">
       <el-card class="box-card">
         <template #header>
           <span>商品属性</span>
@@ -67,7 +67,7 @@
       </el-card>
 
     </div>
-    <div class="components-container__footer">
+    <div class="component-container__footer">
       <el-button @click="handlePrev">上一步，填写商品信息</el-button>
       <el-button type="primary" @click="handleNext">下一步，设置商品库存</el-button>
     </div>
@@ -151,7 +151,7 @@ function handleNext() {
 
 <style lang="scss" scoped>
 
-.components-container {
+.component-container {
   &__main {
     margin: 20px auto
   }
diff --git a/src/views/pms/goods/components/GoodsCategory.vue b/src/views/pms/goods/components/GoodsCategory.vue
index 7ea1b0c2..7368260b 100644
--- a/src/views/pms/goods/components/GoodsCategory.vue
+++ b/src/views/pms/goods/components/GoodsCategory.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="components-container">
-    <div class="components-container__main">
+  <div class="component-container">
+    <div class="component-container__main">
       <el-cascader-panel
           ref="categoryRef"
           :options="categoryOptions"
@@ -19,7 +19,7 @@
       </div>
 
     </div>
-    <div class="components-container__footer">
+    <div class="component-container__footer">
       <el-button type="primary" @click="handleNext">下一步，填写商品信息</el-button>
     </div>
   </div>
@@ -80,7 +80,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 
-.components-container {
+.component-container {
   &__main {
     margin: 20px auto
   }
diff --git a/src/views/pms/goods/components/GoodsInfo.vue b/src/views/pms/goods/components/GoodsInfo.vue
index da17bbb2..4dfd2b41 100644
--- a/src/views/pms/goods/components/GoodsInfo.vue
+++ b/src/views/pms/goods/components/GoodsInfo.vue
@@ -1,24 +1,12 @@
 <template>
-  <div class="components-container">
-    <div class="components-container__main">
+  <div class="component-container">
+    <div class="component-container__main">
       <el-form
           ref="dataForm"
           :rules="rules"
           :model="modelValue"
           label-width="120px"
       >
-        <el-form-item label="商品名称" prop="name">
-          <el-input style="width: 400px" v-model="modelValue.name"/>
-        </el-form-item>
-
-        <el-form-item label="原价" prop="originPrice">
-          <el-input style="width: 400px" v-model="modelValue.originPrice"/>
-        </el-form-item>
-
-        <el-form-item label="现价" prop="price">
-          <el-input style="width: 400px" v-model="modelValue.price"/>
-        </el-form-item>
-
         <el-form-item label="商品品牌" prop="brandId">
           <el-select
               v-model="modelValue.brandId"
@@ -34,16 +22,23 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item label="商品名称" prop="name">
+          <el-input style="width: 400px" v-model="modelValue.name"/>
+        </el-form-item>
+
+        <el-form-item label="原价" prop="originPrice">
+          <el-input style="width: 400px" v-model="modelValue.originPrice"/>
+        </el-form-item>
+
+        <el-form-item label="现价" prop="price">
+          <el-input style="width: 400px" v-model="modelValue.price"/>
+        </el-form-item>
+
         <el-form-item label="商品简介">
-          <el-input
-              type="textarea"
-              v-model="modelValue.description"
-              style="width: 400px"
-          />
+          <el-input type="textarea" v-model="modelValue.description"/>
         </el-form-item>
 
         <el-form-item label="商品相册">
-
           <el-card   v-for="(item,index) in pictures" style="width: 170px;display: inline-block;margin-left: 10px" :body-style="{ padding: '10px' }">
 
             <single-upload v-model="item.url"/>
@@ -62,12 +57,12 @@
         </el-form-item>
 
         <el-form-item label="商品详情" prop="detail">
-          <editor v-model="modelValue.detail" ></editor>
+          <editor v-model="modelValue.detail" style="height: 600px"/>
         </el-form-item>
 
       </el-form>
     </div>
-    <div class="components-container__footer">
+    <div class="component-container__footer">
       <el-button @click="handlePrev">上一步，选择商品分类</el-button>
       <el-button type="primary" @click="handleNext">下一步，设置商品属性</el-button>
     </div>
@@ -178,7 +173,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 
-.components-container {
+.component-container {
   &__main {
     margin: 20px auto;
 
diff --git a/src/views/pms/goods/detail.vue b/src/views/pms/goods/detail.vue
index 2a94eb2d..b17242a3 100644
--- a/src/views/pms/goods/detail.vue
+++ b/src/views/pms/goods/detail.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="components-container">
-
+  <div class="app-container">
     <el-steps :active="active" process-status="finish" finish-status="success" simple>
-      <el-step title="选择商品分类"></el-step>
-      <el-step title="填写商品信息"></el-step>
-      <el-step title="设置商品属性"></el-step>
-      <el-step title="设置商品库存"></el-step>
+      <el-step title="选择商品分类"/>
+      <el-step title="填写商品信息"/>
+      <el-step title="设置商品属性"/>
+      <el-step title="设置商品库存"/>
     </el-steps>
 
     <goods-category
@@ -107,8 +106,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.form-container {
-  width: 80%;
-  margin: 30px auto;
+.app-container {
+  width: 1200px;
+  margin: 50px auto;
+  border: 1px solid #eee;
 }
 </style>
diff --git a/src/views/system/menu/components/Menu.vue b/src/views/system/menu/components/Menu.vue
index 7272f7cf..96ed0136 100644
--- a/src/views/system/menu/components/Menu.vue
+++ b/src/views/system/menu/components/Menu.vue
@@ -2,7 +2,7 @@
   <div class="component-container">
     <!-- 搜索表单 -->
     <el-form
-        ref="queryForm"
+        ref="queryFormRef"
         size="mini"
         :model="queryParams"
         :inline="true"
@@ -11,7 +11,7 @@
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item prop="name">
         <el-input
             v-model="queryParams.name"
             placeholder="菜单名称"
@@ -79,7 +79,7 @@
         width="750px"
     >
       <el-form
-          ref="dataForm"
+          ref="dataFormRef"
           :model="formData"
           :rules="rules"
       >
@@ -177,7 +177,9 @@ import IconSelect from '@/components/IconSelect/index.vue';
 const emit = defineEmits(['menuClick'])
 const showChooseIcon = ref(false);
 const iconSelectRef = ref(null);
-const dataForm = ref(ElForm)
+
+const queryFormRef = ref(ElForm)
+const dataFormRef = ref(ElForm)
 
 const state = reactive({
   loading: true,
@@ -207,7 +209,7 @@ const state = reactive({
     sort: 1,
     component: 'Layout',
     path: undefined,
-    redirect:''
+    redirect: ''
   },
   rules: {
     parentId: [
@@ -224,7 +226,7 @@ const state = reactive({
   currentRow: undefined
 })
 
-const {loading,single,multiple,queryParams,menuList,total,dialog,formData,rules,menuOptions} =toRefs(state)
+const {loading, single, multiple, queryParams, menuList, total, dialog, formData, rules, menuOptions} = toRefs(state)
 
 function handleQuery() {
   // 重置父组件
@@ -250,12 +252,12 @@ async function loadTreeSelectMenuOptions() {
   })
 }
 
+/**
+ * 重置查询
+ */
 function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    name: undefined
-  }
+  const queryForm = unref(queryFormRef)
+  queryForm.resetFields()
   handleQuery()
 }
 
@@ -271,7 +273,6 @@ function handleRowClick(row: any) {
 }
 
 async function handleAdd(row: any) {
-  resetForm()
   await loadTreeSelectMenuOptions()
   state.dialog = {
     title: '添加菜单',
@@ -299,7 +300,6 @@ async function handleAdd(row: any) {
 }
 
 async function handleUpdate(row: any) {
-  resetForm()
   await loadTreeSelectMenuOptions()
   state.dialog = {
     title: '修改菜单',
@@ -312,8 +312,8 @@ async function handleUpdate(row: any) {
 }
 
 function submitForm() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
+  const dataForm = unref(dataFormRef)
+  dataForm.validate((valid: any) => {
     if (valid) {
       if (state.formData.id) {
         updateMenu(state.formData.id, state.formData).then(response => {
@@ -348,23 +348,17 @@ function handleDelete(row: any) {
   )
 }
 
+/**
+ * 重置表单
+ */
 function resetForm() {
-  state.formData = {
-    id: undefined,
-    parentId: 0,
-    name: undefined,
-    visible: 1,
-    icon: '',
-    sort: 1,
-    component: 'Layout',
-    path: undefined,
-    redirect:''
-  }
+  const dataForm = unref(dataFormRef)
+  dataForm.resetFields
 }
 
 function cancel() {
-  resetForm()
   state.dialog.visible = false
+  resetForm()
 }
 
 function showSelectIcon() {
diff --git a/src/views/system/menu/components/Perm.vue b/src/views/system/menu/components/Perm.vue
index f82a1a94..117bebaa 100644
--- a/src/views/system/menu/components/Perm.vue
+++ b/src/views/system/menu/components/Perm.vue
@@ -1,22 +1,23 @@
 <template>
-  <div>
+  <div claas="component-container">
     <!-- 搜索表单 -->
     <el-form
-        ref="queryForm"
+        ref="queryFormRef"
         size="mini"
-        :model="state.queryParams"
+        :model="queryParams"
         :inline="true"
     >
       <el-form-item>
-        <el-button type="success" :icon="Plus" :disabled="state.single" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除</el-button>
+        <el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
       </el-form-item>
-      <el-form-item>
+      <el-form-item prop="name">
         <el-input
-            v-model="state.queryParams.name"
+            v-model="queryParams.name"
             placeholder="权限名称"
             clearable
-            @keyup.enter.native="handleQuery"/>
+            @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
@@ -26,9 +27,8 @@
 
     <!-- 数据表格 -->
     <el-table
-        ref="dataTable"
-        :data="state.pageList"
-        v-loading="state.loading"
+        :data="pageList"
+        v-loading="loading"
         @selection-change="handleSelectionChange"
         border
         size="mini"
@@ -63,64 +63,65 @@
       </el-table-column>
     </el-table>
 
+    <!-- 分页工具条 -->
     <pagination
-        v-show="state.total>0"
-        :total="state.total"
-        :page="state.queryParams.pageNum"
-        :limit="state.queryParams.pageSize"
+        v-show="total>0"
+        :total="total"
+        :page="queryParams.pageNum"
+        :limit="queryParams.pageSize"
         @pagination="handleQuery"
     />
 
     <!-- 表单弹窗 -->
     <el-dialog
-        :title="state.dialog.title"
-        v-model="state.dialog.visible"
+        :title="dialog.title"
+        v-model="dialog.visible"
         width="700px">
       <el-form
-          ref="dataForm"
-          :model="state.formData"
-          :rules="state.rules"
-          label-width="120px">
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-width="120px"
+      >
 
         <el-form-item label="权限名称" prop="name">
-          <el-input v-model="state.formData.name" placeholder="请输入权限名称"/>
+          <el-input v-model="formData.name" placeholder="请输入权限名称"/>
         </el-form-item>
 
         <el-form-item label="URL权限标识" prop="urlPerm">
-          <el-input placeholder="/api/v1/users" v-model="state.urlPerm.requestPath" class="input-with-select">
-
+          <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath" class="input-with-select">
             <template #prepend>
               <el-select
-                  v-model="state.urlPerm.serviceName"
+                  v-model="urlPerm.serviceName"
                   style="width: 130px;"
                   placeholder="所属服务"
                   clearable
               >
-                <el-option v-for="item in state.microServiceOptions" :value="item.value" :label="item.name"/>
+                <el-option v-for="item in microServiceOptions" :value="item.value" :label="item.name"/>
               </el-select>
 
               <el-select
-                  v-model="state.urlPerm.requestMethod"
+                  v-model="urlPerm.requestMethod"
                   style="width: 120px;margin-left: 20px"
                   slot="prepend"
                   placeholder="请求方式"
                   clearable
               >
                 <el-option
-                    v-for="item in state.requestMethodOptions"
+                    v-for="item in requestMethodOptions"
                     :value="item.value"
                     :label="item.name"
                 />
               </el-select>
             </template>
           </el-input>
-          <el-link v-show="state.urlPerm.requestMethod">
-            {{ state.urlPerm.requestMethod }}:/{{ state.urlPerm.serviceName }}{{ state.urlPerm.requestPath }}
+          <el-link v-show="urlPerm.requestMethod">
+            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName }}{{ urlPerm.requestPath }}
           </el-link>
         </el-form-item>
 
         <el-form-item label="按钮权限标识" prop="btnPerm">
-          <el-input v-model="state.formData.btnPerm" placeholder="sys:user:add"/>
+          <el-input v-model="formData.btnPerm" placeholder="sys:user:add"/>
         </el-form-item>
 
       </el-form>
@@ -142,14 +143,13 @@ import {ElForm, ElMessage, ElMessageBox} from "element-plus"
 
 const {proxy}: any = getCurrentInstance();
 
+const queryFormRef = ref(ElForm)
+const dataFormRef = ref(ElForm)
+
 const props = defineProps({
   menuId: {
     type: String,
     default: ''
-  },
-  menuName: {
-    type: String,
-    default: ''
   }
 })
 
@@ -196,9 +196,8 @@ const state = reactive({
       {required: true, message: '请选择请求方式', trigger: 'blur'}
     ]
   },
-  microServiceOptions: [],
+  microServiceOptions: [] as Array<any>,
   requestMethodOptions: [] as Array<any>,
-  menuName: undefined,
   urlPerm: {
     requestMethod: undefined,
     serviceName: undefined,
@@ -206,8 +205,21 @@ const state = reactive({
   },
 })
 
- toRefs(state)
-
+const {
+  loading,
+  ids,
+  single,
+  multiple,
+  pageList,
+  total,
+  dialog,
+  formData,
+  rules,
+  microServiceOptions,
+  requestMethodOptions,
+  urlPerm,
+  queryParams
+} = toRefs(state)
 
 function handleQuery() {
   if (state.queryParams.menuId) {
@@ -227,12 +239,8 @@ function handleQuery() {
 }
 
 function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    menuId: undefined,
-    name: undefined
-  }
+  const queryForm = unref(queryFormRef)
+  queryForm.resetFields()
   handleQuery()
 }
 
@@ -242,11 +250,10 @@ function handleSelectionChange(selection: any) {
   state.multiple = !selection.length
 }
 
-
 /**
- * 字典数据准备
+ * 加载字典数据
  */
-function loadDictData() {
+function loadDictOptions() {
   proxy.$listDictsByCode('micro_service').then((response: any) => {
     state.microServiceOptions = response.data
   })
@@ -257,8 +264,7 @@ function loadDictData() {
 }
 
 function handleAdd() {
-  resetForm()
-  loadDictData()
+  loadDictOptions()
   state.dialog = {
     title: '添加权限',
     visible: true
@@ -266,8 +272,7 @@ function handleAdd() {
 }
 
 function handleUpdate(row: any) {
-  resetForm()
-  loadDictData()
+  loadDictOptions()
   state.dialog = {
     title: '修改权限',
     visible: true
@@ -286,11 +291,9 @@ function handleUpdate(row: any) {
   })
 }
 
-const dataForm = ref(ElForm)
-
 function submitForm() {
-  const form = unref(dataForm)
-  form.validate((valid: any) => {
+  const dataForm = unref(dataFormRef)
+  dataForm.validate((valid: any) => {
     if (valid) {
       // 接口权限和按钮权限必填其一
       console.log(state.urlPerm.requestPath, state.formData.btnPerm)
@@ -298,7 +301,6 @@ function submitForm() {
         ElMessage.warning('请至少填写一种权限')
         return false
       }
-
       // 如果填写了URL权限，完整性校验
       if (!state.urlPerm.requestPath) {
         if (!state.urlPerm.requestMethod) {
@@ -317,12 +319,14 @@ function submitForm() {
         updatePerm(state.formData.id, state.formData).then(response => {
           ElMessage.success('修改成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       } else {
         addPerm(state.formData).then(response => {
           ElMessage.success('新增成功')
           state.dialog.visible = false
+          resetForm()
           handleQuery()
         })
       }
@@ -330,14 +334,13 @@ function submitForm() {
   })
 }
 
+/**
+ * 重置表单
+ */
 function resetForm() {
-  state.formData = {
-    id: undefined,
-    name: undefined,
-    urlPerm: '',
-    btnPerm: '',
-    menuId: ''
-  }
+  const dataForm = unref(dataFormRef)
+  dataForm.resetFields()
+
 }
 
 function cancel() {
@@ -366,7 +369,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.perm-container {
+.component-container {
   margin-bottom: 20px;
 }
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 04de6488..9832dd01 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -442,9 +442,9 @@ const state = reactive({
     ],
     email: [
       {
-        type: 'email',
-        message: '\'请输入正确的邮箱地址',
-        trigger: ['blur', 'change']
+        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+        message: '请输入正确的邮箱地址',
+        trigger: 'blur'
       }
     ],
     mobile: [