diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
new file mode 100644
index 0000000..0bfc395
--- /dev/null
+++ b/src/views/system/role/functionPerm.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup name="FunctionPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { funcAuthor } from '@/api/system/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('功能权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+const filterText = ref('')
+// 所有资源id
+const resourceIds = ref([])
+// 资源树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  funcAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchResourceTree(roleid: string) {
+  loading.value = true
+  getResourceListByRole(roleid).then((response) => {
+    if (response.data) {
+      resourceIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      tree.value.setCheckedKeys(temp.openedList)
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? resourceIds.value : [])
+}
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchResourceTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="400px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
new file mode 100644
index 0000000..0bfc395
--- /dev/null
+++ b/src/views/system/role/functionPerm.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup name="FunctionPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { funcAuthor } from '@/api/system/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('功能权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+const filterText = ref('')
+// 所有资源id
+const resourceIds = ref([])
+// 资源树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  funcAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchResourceTree(roleid: string) {
+  loading.value = true
+  getResourceListByRole(roleid).then((response) => {
+    if (response.data) {
+      resourceIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      tree.value.setCheckedKeys(temp.openedList)
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? resourceIds.value : [])
+}
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchResourceTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="400px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/list.role.vue b/src/views/system/role/list.role.vue
deleted file mode 100644
index a775da3..0000000
--- a/src/views/system/role/list.role.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts" setup name="SystemRoleList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import SystemEditRole from './edit.role.vue'
-import FunctionPerm from './function.perm.vue'
-import DataPerm from './data.perm.vue'
-import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 数据权限类型字典
-const dataScopeTypeDict: { [key: string]: string } = {
-  1: '所有数据',
-  2: '所属及下属部门',
-  3: '本部门',
-  4: '自定义',
-}
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '角色名称', value: 'name', align: 'left' },
-  { text: '所在组织机构', value: 'deptName' },
-  { text: '数据权限类型', value: 'dataScopeTypeName' },
-  { text: '别名', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<RoleInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getRoleList(listQuery).then((res) => {
-    const data = res.data.map((item: RoleInfo): RoleInfo => {
-      return {
-        ...item,
-        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
-      }
-    })
-    const treeData = toTreeList<RoleInfo>(data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取角色类型列表
-const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchRoleType() {
-  getDataScopeTypeList().then((res) => {
-    roleTypeList.value = res.data
-  })
-}
-// 编辑角色
-function edit(row: RoleInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除角色
-function del(row: RoleInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delRole(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加角色
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 打开功能权限菜单
-const functionPerm = ref()
-function openFunctionPerm(row: RoleInfo) {
-  functionPerm.value.initDialog(row)
-}
-
-// 打开数据权限菜单
-const dataPerm = ref()
-function openDataPerm(row: RoleInfo) {
-  dataPerm.value.initDialog(row)
-}
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-onMounted(() => {
-  fetchRoleType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="角色名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
-              功能权限
-            </ElButton>
-            <!-- 只有自定义显示配置数据权限按钮 -->
-            <ElButton v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
-              数据权限
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditRole ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
-    <FunctionPerm ref="functionPerm" />
-    <DataPerm ref="dataPerm" />
-  </appcontainer>
-</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
new file mode 100644
index 0000000..0bfc395
--- /dev/null
+++ b/src/views/system/role/functionPerm.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup name="FunctionPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { funcAuthor } from '@/api/system/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('功能权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+const filterText = ref('')
+// 所有资源id
+const resourceIds = ref([])
+// 资源树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  funcAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchResourceTree(roleid: string) {
+  loading.value = true
+  getResourceListByRole(roleid).then((response) => {
+    if (response.data) {
+      resourceIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      tree.value.setCheckedKeys(temp.openedList)
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? resourceIds.value : [])
+}
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchResourceTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="400px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/list.role.vue b/src/views/system/role/list.role.vue
deleted file mode 100644
index a775da3..0000000
--- a/src/views/system/role/list.role.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts" setup name="SystemRoleList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import SystemEditRole from './edit.role.vue'
-import FunctionPerm from './function.perm.vue'
-import DataPerm from './data.perm.vue'
-import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 数据权限类型字典
-const dataScopeTypeDict: { [key: string]: string } = {
-  1: '所有数据',
-  2: '所属及下属部门',
-  3: '本部门',
-  4: '自定义',
-}
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '角色名称', value: 'name', align: 'left' },
-  { text: '所在组织机构', value: 'deptName' },
-  { text: '数据权限类型', value: 'dataScopeTypeName' },
-  { text: '别名', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<RoleInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getRoleList(listQuery).then((res) => {
-    const data = res.data.map((item: RoleInfo): RoleInfo => {
-      return {
-        ...item,
-        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
-      }
-    })
-    const treeData = toTreeList<RoleInfo>(data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取角色类型列表
-const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchRoleType() {
-  getDataScopeTypeList().then((res) => {
-    roleTypeList.value = res.data
-  })
-}
-// 编辑角色
-function edit(row: RoleInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除角色
-function del(row: RoleInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delRole(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加角色
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 打开功能权限菜单
-const functionPerm = ref()
-function openFunctionPerm(row: RoleInfo) {
-  functionPerm.value.initDialog(row)
-}
-
-// 打开数据权限菜单
-const dataPerm = ref()
-function openDataPerm(row: RoleInfo) {
-  dataPerm.value.initDialog(row)
-}
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-onMounted(() => {
-  fetchRoleType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="角色名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
-              功能权限
-            </ElButton>
-            <!-- 只有自定义显示配置数据权限按钮 -->
-            <ElButton v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
-              数据权限
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditRole ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
-    <FunctionPerm ref="functionPerm" />
-    <DataPerm ref="dataPerm" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
new file mode 100644
index 0000000..53b18e2
--- /dev/null
+++ b/src/views/system/role/listRole.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup name="SystemRoleList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import SystemEditRole from './editRole.vue'
+import FunctionPerm from './functionPerm.vue'
+import DataPerm from './dataPerm.vue'
+import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 数据权限类型字典
+const dataScopeTypeDict: { [key: string]: string } = {
+  1: '所有数据',
+  2: '所属及下属部门',
+  3: '本部门',
+  4: '自定义',
+}
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '角色名称', value: 'name', align: 'left' },
+  { text: '所在组织机构', value: 'deptName' },
+  { text: '数据权限类型', value: 'dataScopeTypeName' },
+  { text: '别名', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<RoleInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getRoleList(listQuery).then((res) => {
+    const data = res.data.map((item: RoleInfo): RoleInfo => {
+      return {
+        ...item,
+        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
+      }
+    })
+    const treeData = toTreeList<RoleInfo>(data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取角色类型列表
+const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchRoleType() {
+  getDataScopeTypeList().then((res) => {
+    roleTypeList.value = res.data
+  })
+}
+// 编辑角色
+function edit(row: RoleInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除角色
+function del(row: RoleInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delRole(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加角色
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 打开功能权限菜单
+const functionPerm = ref()
+function openFunctionPerm(row: RoleInfo) {
+  functionPerm.value.initDialog(row)
+}
+
+// 打开数据权限菜单
+const dataPerm = ref()
+function openDataPerm(row: RoleInfo) {
+  dataPerm.value.initDialog(row)
+}
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+onMounted(() => {
+  fetchRoleType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="角色名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column
+          v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align"
+        />
+        <el-table-column v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
+              功能权限
+            </el-button>
+            <!-- 只有自定义显示配置数据权限按钮 -->
+            <el-button v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
+              数据权限
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-role ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
+    <function-perm ref="functionPerm" />
+    <data-perm ref="dataPerm" />
+  </app-container>
+</template>

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
new file mode 100644
index 0000000..0bfc395
--- /dev/null
+++ b/src/views/system/role/functionPerm.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup name="FunctionPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { funcAuthor } from '@/api/system/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('功能权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+const filterText = ref('')
+// 所有资源id
+const resourceIds = ref([])
+// 资源树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  funcAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchResourceTree(roleid: string) {
+  loading.value = true
+  getResourceListByRole(roleid).then((response) => {
+    if (response.data) {
+      resourceIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      tree.value.setCheckedKeys(temp.openedList)
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? resourceIds.value : [])
+}
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchResourceTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="400px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/list.role.vue b/src/views/system/role/list.role.vue
deleted file mode 100644
index a775da3..0000000
--- a/src/views/system/role/list.role.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts" setup name="SystemRoleList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import SystemEditRole from './edit.role.vue'
-import FunctionPerm from './function.perm.vue'
-import DataPerm from './data.perm.vue'
-import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 数据权限类型字典
-const dataScopeTypeDict: { [key: string]: string } = {
-  1: '所有数据',
-  2: '所属及下属部门',
-  3: '本部门',
-  4: '自定义',
-}
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '角色名称', value: 'name', align: 'left' },
-  { text: '所在组织机构', value: 'deptName' },
-  { text: '数据权限类型', value: 'dataScopeTypeName' },
-  { text: '别名', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<RoleInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getRoleList(listQuery).then((res) => {
-    const data = res.data.map((item: RoleInfo): RoleInfo => {
-      return {
-        ...item,
-        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
-      }
-    })
-    const treeData = toTreeList<RoleInfo>(data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取角色类型列表
-const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchRoleType() {
-  getDataScopeTypeList().then((res) => {
-    roleTypeList.value = res.data
-  })
-}
-// 编辑角色
-function edit(row: RoleInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除角色
-function del(row: RoleInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delRole(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加角色
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 打开功能权限菜单
-const functionPerm = ref()
-function openFunctionPerm(row: RoleInfo) {
-  functionPerm.value.initDialog(row)
-}
-
-// 打开数据权限菜单
-const dataPerm = ref()
-function openDataPerm(row: RoleInfo) {
-  dataPerm.value.initDialog(row)
-}
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-onMounted(() => {
-  fetchRoleType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="角色名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
-              功能权限
-            </ElButton>
-            <!-- 只有自定义显示配置数据权限按钮 -->
-            <ElButton v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
-              数据权限
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditRole ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
-    <FunctionPerm ref="functionPerm" />
-    <DataPerm ref="dataPerm" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
new file mode 100644
index 0000000..53b18e2
--- /dev/null
+++ b/src/views/system/role/listRole.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup name="SystemRoleList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import SystemEditRole from './editRole.vue'
+import FunctionPerm from './functionPerm.vue'
+import DataPerm from './dataPerm.vue'
+import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 数据权限类型字典
+const dataScopeTypeDict: { [key: string]: string } = {
+  1: '所有数据',
+  2: '所属及下属部门',
+  3: '本部门',
+  4: '自定义',
+}
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '角色名称', value: 'name', align: 'left' },
+  { text: '所在组织机构', value: 'deptName' },
+  { text: '数据权限类型', value: 'dataScopeTypeName' },
+  { text: '别名', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<RoleInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getRoleList(listQuery).then((res) => {
+    const data = res.data.map((item: RoleInfo): RoleInfo => {
+      return {
+        ...item,
+        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
+      }
+    })
+    const treeData = toTreeList<RoleInfo>(data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取角色类型列表
+const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchRoleType() {
+  getDataScopeTypeList().then((res) => {
+    roleTypeList.value = res.data
+  })
+}
+// 编辑角色
+function edit(row: RoleInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除角色
+function del(row: RoleInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delRole(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加角色
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 打开功能权限菜单
+const functionPerm = ref()
+function openFunctionPerm(row: RoleInfo) {
+  functionPerm.value.initDialog(row)
+}
+
+// 打开数据权限菜单
+const dataPerm = ref()
+function openDataPerm(row: RoleInfo) {
+  dataPerm.value.initDialog(row)
+}
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+onMounted(() => {
+  fetchRoleType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="角色名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column
+          v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align"
+        />
+        <el-table-column v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
+              功能权限
+            </el-button>
+            <!-- 只有自定义显示配置数据权限按钮 -->
+            <el-button v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
+              数据权限
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-role ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
+    <function-perm ref="functionPerm" />
+    <data-perm ref="dataPerm" />
+  </app-container>
+</template>
diff --git a/src/views/system/role/role-interface.ts b/src/views/system/role/role-interface.ts
new file mode 100644
index 0000000..d3847c3
--- /dev/null
+++ b/src/views/system/role/role-interface.ts
@@ -0,0 +1,19 @@
+// 数据权限类型
+export interface DataScopeTypeInfo {
+  name: string
+  value: string
+}
+
+// 角色信息
+export interface RoleInfo {
+  id: string
+  name: string // 角色名
+  tips: string // 别名
+  dataScopeType: string // 数据权限类型
+  dataScopeTypeName?: string // 数据权限类型名称
+  pid: string // 父角色
+  deptId: string // 组织机构
+  num: number // 排序
+  version: string // 保留字段
+  children?: []
+}

diff --git a/.env.development b/.env.development
index a5b855b..b34f073 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
 VITE_APP_TITLE = 后台基础框架
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://111.198.10.15:11309
-# VITE_APP_API_BASEURL = http://111.198.10.15:21409
+# VITE_APP_API_BASEURL = http://111.198.10.15:11309
+VITE_APP_API_BASEURL = http://111.198.10.15:21409
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
 
diff --git a/.eslintrc b/.eslintrc
index 5d9c01f..5c6806e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,10 @@
   "rules": {
     "curly": ["error", "all"],
     "no-tabs":"off",
-    "no-const-assign": "off"
+    "no-const-assign": "off",
+    "vue/component-name-in-template-casing": ["error", "kebab-case", {
+      "registeredComponentsOnly": false,
+      "ignores": []
+    }]
   }
 }
diff --git a/README.md b/README.md
index 89ec586..d529f38 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
-<h1 align="center">Vue3-admin</h1>
+<h1 align="center">SmartMeteringFront</h1>
 
-<p align="center">基于Vue3的中后台管理系统框架</p>
+<p align="center">计量管理系统</p>
 
 ## 简要说明
 <p>
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index dac3b84..b76afc5 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,5 +1,5 @@
+// import qs from 'qs'
 import request from '../index'
-import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -63,8 +63,8 @@
     url: 'sys/mgr/roleAssign',
     method: 'post',
     data: {
-      userId: userId,
-      roleIds: ids
+      userId,
+      roleIds: ids,
     },
     // paramsSerializer: (params) => qs.stringify(params, { indices: false })
   })
diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 8405618..620806d 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="DeptSelect">
 import { ElTreeSelect } from 'element-plus'
 import type { Ref } from 'vue'
-import type { DeptTreeNode } from '@/views/system/dept/dept_interface'
+import type { DeptTreeNode } from '@/views/system/dept/dept-interface'
 import useDictStore from '@/store/modules/dict'
 import { getDeptTreeList } from '@/api/system/dept'
 import { judgeTree, toTreeList } from '@/utils/structure'
@@ -157,7 +157,7 @@
 
 <template>
   <div style="width: 100%;">
-    <ElTreeSelect
+    <el-tree-select
       v-if="multiData"
       v-model="value"
       :data="deptTreeList"
@@ -174,9 +174,9 @@
       filterable
       class="full-width-input"
     />
-    <ElSelect v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
-      <ElOption />
-    </ElSelect>
+    <el-select v-else v-model="value" :placeholder="props.placeholder" :size="props.size" :disabled="props.disabled" :clearable="props.clearable" class="full-width-input">
+      <el-option />
+    </el-select>
   </div>
 </template>
 
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e490686..2e2708b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -28,7 +28,7 @@
   <div class="search-container">
     <slot />
     <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
+      <el-button link size="small" @click="toggle">
         <template #icon>
           <el-icon>
             <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ef3dab2..feec73f 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -41,7 +41,7 @@
       {
         path: 'list',
         name: 'ResourceList',
-        component: () => import('@/views/system/resource/list.resource.vue'),
+        component: () => import('@/views/system/resource/listResource.vue'),
         meta: {
           title: '资源管理',
           auth: '/sys/resource',
@@ -65,7 +65,7 @@
       {
         path: 'list',
         name: 'DeptList',
-        component: () => import('@/views/system/dept/list.dept.vue'),
+        component: () => import('@/views/system/dept/listDept.vue'),
         meta: {
           title: '组织管理',
           auth: '/sys/dept',
@@ -89,7 +89,7 @@
       {
         path: 'list',
         name: 'RoleList',
-        component: () => import('@/views/system/role/list.role.vue'),
+        component: () => import('@/views/system/role/listRole.vue'),
         meta: {
           title: '角色管理',
           auth: '/sys/role',
@@ -137,7 +137,7 @@
       {
         path: 'list',
         name: 'DictList',
-        component: () => import('@/views/system/dict/list.dict.vue'),
+        component: () => import('@/views/system/dict/listDict.vue'),
         meta: {
           title: '字典管理',
           auth: '/sys/dict',
diff --git a/src/views/system/area/area-interface.ts b/src/views/system/area/area-interface.ts
new file mode 100644
index 0000000..627a360
--- /dev/null
+++ b/src/views/system/area/area-interface.ts
@@ -0,0 +1,21 @@
+export interface IlistQuery {
+  keywords: string
+  offset: number
+  limit: number
+  sort: string
+  order: string
+}
+
+export interface IareaForm {
+  id: string // 编号
+  pid: string // 父级编号
+  pName: string // 父级名称
+  areaName: string // 区域名
+  simpleName: string // 别名，
+  level: string
+  num: number // 排序
+}
+
+export interface IlistQuerySelectTree {
+  pid: string
+}
diff --git a/src/views/system/dept/dept-interface.ts b/src/views/system/dept/dept-interface.ts
new file mode 100644
index 0000000..12ffea3
--- /dev/null
+++ b/src/views/system/dept/dept-interface.ts
@@ -0,0 +1,29 @@
+// 部门类别
+export const DeptTypeList = [
+  { name: '公司/单位', value: '03' },
+  { name: '部门/组', value: '04' },
+]
+
+// 部门信息，下拉树用
+export interface DeptTreeNode {
+  id: string
+  name: string
+  pid: string
+  version: string
+  num: number
+  tips: string
+  deptType: string
+  children?: []
+}
+// 部门信息，列表用
+export interface DeptInfo {
+  id: string
+  simpleName: string
+  fullName: string
+  pid: string
+  version: string
+  num: number
+  deptType: string
+  tips: string
+  children?: []
+}
diff --git a/src/views/system/dept/dept_interface.ts b/src/views/system/dept/dept_interface.ts
deleted file mode 100644
index 04a5ed0..0000000
--- a/src/views/system/dept/dept_interface.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const DeptTypeList = [
-  { name: '公司/单位', value: '03' },
-  { name: '部门/组', value: '04' },
-]
-
-// 部门信息
-export interface DeptTreeNode {
-  id: string
-  name: string
-  pid: string
-  version: string
-  num: number
-  tips: string
-  deptType: string
-  children?: []
-}
-
-export interface DeptInfo {
-  id: string
-  simpleName: string
-  fullName: string
-  pid: string
-  version: string
-  num: number
-  deptType: string
-  tips: string
-  children?: []
-}
diff --git a/src/views/system/dept/edit.dept.vue b/src/views/system/dept/edit.dept.vue
deleted file mode 100644
index 8b0763e..0000000
--- a/src/views/system/dept/edit.dept.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script lang="ts" setup name="SystemEditDept">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { DeptTypeList } from './dept_interface'
-import type { DeptInfo } from './dept_interface'
-import { addDept, updateDept } from '@/api/system/dept'
-import useDictStore from '@/store/modules/dict'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: DeptInfo = reactive({
-  id: '',
-  simpleName: '',
-  fullName: '',
-  deptType: '',
-  pid: '',
-  num: 0,
-  version: '',
-  tips: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules: FormRules = reactive({
-  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
-  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
-  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDept(formData).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    }).finally(() => {
-      clearBuffer()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDept(formData).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    clearBuffer()
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-const dictStore = useDictStore()
-
-// 部门选择组件
-const deptSelect = ref()
-// 在组织变更后清空pinia中缓存
-function clearBuffer() {
-  dictStore.setAllCompanyList([])
-  dictStore.setAllDeptList([])
-  deptSelect.value.refreshTree() // 刷新组件
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DeptInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.id = row.id
-    formData.simpleName = row.simpleName
-    formData.fullName = row.fullName
-    formData.deptType = row.deptType
-    formData.pid = row.pid
-    formData.num = row.num
-    formData.version = row.version
-    formData.tips = row.tips
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    title="新增"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织名称" prop="simpleName" class="required">
-            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织全称" prop="fullName" class="required">
-            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父组织" prop="pid" class="required">
-            <DeptSelect ref="deptSelect" v-model="formData.pid" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="组织类型" prop="deptType" class="required">
-            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="备注" prop="tips">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/dept/editDept.vue b/src/views/system/dept/editDept.vue
new file mode 100644
index 0000000..c16ec9a
--- /dev/null
+++ b/src/views/system/dept/editDept.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup name="SystemEditDept">
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { DeptTypeList } from './dept-interface'
+import type { DeptInfo } from './dept-interface'
+import { addDept, updateDept } from '@/api/system/dept'
+import useDictStore from '@/store/modules/dict'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: DeptInfo = reactive({
+  id: '',
+  simpleName: '',
+  fullName: '',
+  deptType: '',
+  pid: '',
+  num: 0,
+  version: '',
+  tips: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules: FormRules = reactive({
+  simpleName: [{ required: true, message: '组织名称不可为空', trigger: ['blur', 'change'] }],
+  fullName: [{ required: true, message: '组织全称不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父组织必选', trigger: ['blur', 'change'] }],
+  deptType: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDept(formData).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    }).finally(() => {
+      clearBuffer()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDept(formData).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    clearBuffer()
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+const dictStore = useDictStore()
+
+// 部门选择组件
+const deptSelect = ref()
+// 在组织变更后清空pinia中缓存
+function clearBuffer() {
+  dictStore.setAllCompanyList([])
+  dictStore.setAllDeptList([])
+  deptSelect.value.refreshTree() // 刷新组件
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DeptInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.id = row.id
+    formData.simpleName = row.simpleName
+    formData.fullName = row.fullName
+    formData.deptType = row.deptType
+    formData.pid = row.pid
+    formData.num = row.num
+    formData.version = row.version
+    formData.tips = row.tips
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织名称" prop="simpleName" class="required">
+            <el-input v-model.trim="formData.simpleName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织全称" prop="fullName" class="required">
+            <el-input v-model.trim="formData.fullName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父组织" prop="pid" class="required">
+            <dept-select ref="deptSelect" v-model="formData.pid" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="组织类型" prop="deptType" class="required">
+            <el-select v-model="formData.deptType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in DeptTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
deleted file mode 100644
index 51ff8e7..0000000
--- a/src/views/system/dept/list.dept.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup name="SystemDeptList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DeptInfo, DeptTreeNode } from './dept_interface'
-import SystemEditDept from './edit.dept.vue'
-import { delDept, getDeptList } from '@/api/system/dept'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '组织名称', value: 'simpleName', align: 'left' },
-  { text: '组织全称', value: 'fullName' },
-  { text: '备注', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<DeptInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDeptList(listQuery).then((res) => {
-    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
-    list.value = treeData
-    loading.value = false
-  })
-}
-const editDialog = ref() // 弹窗组件
-// 编辑组织
-function edit(row: DeptInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除组织
-function del(row: DeptInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.simpleName}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDept(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加组织
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-    </TableContainer>
-    <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </div>
-    <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
-
-<style lang="scss" scoped>
-.table-text-button {
-  margin-left: 0;
-}
-</style>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
new file mode 100644
index 0000000..07382e9
--- /dev/null
+++ b/src/views/system/dept/listDept.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup name="SystemDeptList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DeptInfo, DeptTreeNode } from './dept-interface'
+import SystemEditDept from './editDept.vue'
+import { delDept, getDeptList } from '@/api/system/dept'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '组织名称', value: 'simpleName', align: 'left' },
+  { text: '组织全称', value: 'fullName' },
+  { text: '备注', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<DeptInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDeptList(listQuery).then((res) => {
+    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
+    list.value = treeData
+    loading.value = false
+  })
+}
+const editDialog = ref() // 弹窗组件
+// 编辑组织
+function edit(row: DeptInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除组织
+function del(row: DeptInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.simpleName}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDept(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加组织
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: DeptInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+    </table-container>
+    <div>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <system-edit-dept ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+.table-text-button {
+  margin-left: 0;
+}
+</style>
diff --git a/src/views/system/dict/dict-interface.ts b/src/views/system/dict/dict-interface.ts
new file mode 100644
index 0000000..9b647ec
--- /dev/null
+++ b/src/views/system/dict/dict-interface.ts
@@ -0,0 +1,25 @@
+// 字典值列表
+export interface DictDetail {
+  name: string
+  value: string
+  num: number
+}
+
+// 字典
+export interface DictInfo {
+  dictId: string
+  dictCode: string
+  dictName: string
+  dictTips: string
+  dictValues: DictDetail[]
+}
+
+export interface DictListInfo {
+  id: string
+  name: string
+  code: string
+  pid: string
+  detail: string
+  tips: string
+  num: number
+}
diff --git a/src/views/system/dict/dict_interface.ts b/src/views/system/dict/dict_interface.ts
deleted file mode 100644
index 9b647ec..0000000
--- a/src/views/system/dict/dict_interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// 字典值列表
-export interface DictDetail {
-  name: string
-  value: string
-  num: number
-}
-
-// 字典
-export interface DictInfo {
-  dictId: string
-  dictCode: string
-  dictName: string
-  dictTips: string
-  dictValues: DictDetail[]
-}
-
-export interface DictListInfo {
-  id: string
-  name: string
-  code: string
-  pid: string
-  detail: string
-  tips: string
-  num: number
-}
diff --git a/src/views/system/dict/edit.dict.vue b/src/views/system/dict/edit.dict.vue
deleted file mode 100644
index d8a6d90..0000000
--- a/src/views/system/dict/edit.dict.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<script lang="ts" setup name="SystemEditDict">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DictDetail, DictInfo, DictListInfo } from './dict_interface'
-import { addDict, updateDict } from '@/api/system/dict'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<DictInfo> = ref({
-  dictId: '',
-  dictCode: '',
-  dictName: '',
-  dictTips: '',
-  dictValues: [],
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
-  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
-  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
-  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
-  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addDict(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateDict(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-// 添加一行
-function addDetail() {
-  formData.value.dictValues.push({
-    value: '',
-    name: '',
-    num: formData.value.dictValues.length,
-  })
-}
-// 删除一行
-function deleteDetail(index: number) {
-  formData.value.dictValues.splice(index, 1)
-}
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: DictListInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    const detailArr = row.detail.split(';')
-    const details = [] as DictDetail[]
-    for (const detail of detailArr) {
-      const detailItem = detail.split(':')
-      const item = {
-        value: detailItem[0],
-        name: detailItem[1],
-        num: parseInt(detailItem[2]),
-      }
-      details.push(item)
-    }
-    formData.value = {
-      dictId: row.id,
-      dictCode: row.code,
-      dictName: row.name,
-      dictTips: row.tips,
-      dictValues: details,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典名称" prop="dictName" class="required">
-            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="字典编码" prop="dictCode" class="required">
-            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" class="grid-cell">
-          <el-form-item label="字典描述" prop="tips" class="required">
-            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-        <div class="dict-detail">
-          <div class="title">
-            字典值列表
-            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
-              添加
-            </el-button>
-          </div>
-          <div class="body">
-            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
-              <el-col :span="6">
-                <el-form-item :required="true" label="值" label-width="40">
-                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="7">
-                <el-form-item :required="true" label="名称" label-width="60">
-                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item :required="true" label="排序" label-width="60">
-                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2" :offset="1">
-                <el-button type="primary" @click="deleteDetail(index)">
-                  删除
-                </el-button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-
-  .dict-detail {
-    padding: 10px;
-
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      margin-bottom: 15px;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..c2e9eb8
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup name="SystemEditDict">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictDetail, DictInfo, DictListInfo } from './dict-interface'
+import { addDict, updateDict } from '@/api/system/dict'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<DictInfo> = ref({
+  dictId: '',
+  dictCode: '',
+  dictName: '',
+  dictTips: '',
+  dictValues: [],
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+  dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+  value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+  name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+  num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addDict(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateDict(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+// 添加一行
+function addDetail() {
+  formData.value.dictValues.push({
+    value: '',
+    name: '',
+    num: formData.value.dictValues.length,
+  })
+}
+// 删除一行
+function deleteDetail(index: number) {
+  formData.value.dictValues.splice(index, 1)
+}
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: DictListInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    const detailArr = row.detail.split(';')
+    const details = [] as DictDetail[]
+    for (const detail of detailArr) {
+      const detailItem = detail.split(':')
+      const item = {
+        value: detailItem[0],
+        name: detailItem[1],
+        num: parseInt(detailItem[2]),
+      }
+      details.push(item)
+    }
+    formData.value = {
+      dictId: row.id,
+      dictCode: row.code,
+      dictName: row.name,
+      dictTips: row.tips,
+      dictValues: details,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典名称" prop="dictName" class="required">
+            <el-input v-model="formData.dictName" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="字典编码" prop="dictCode" class="required">
+            <el-input v-model="formData.dictCode" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" class="grid-cell">
+          <el-form-item label="字典描述" prop="tips" class="required">
+            <el-input v-model="formData.dictTips" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+        <div class="dict-detail">
+          <div class="title">
+            字典值列表
+            <el-button type="default" style="margin-left: 20px;" @click="addDetail()">
+              添加
+            </el-button>
+          </div>
+          <div class="body">
+            <el-row v-for="(detail, index) in formData.dictValues" :key="index" :gutter="10">
+              <el-col :span="6">
+                <el-form-item :required="true" label="值" label-width="40">
+                  <el-input v-model="detail.value" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7">
+                <el-form-item :required="true" label="名称" label-width="60">
+                  <el-input v-model="detail.name" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :required="true" label="排序" label-width="60">
+                  <el-input-number v-model.number="detail.num" style="width: 100%;" placeholder="必填" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" :offset="1">
+                <el-button type="primary" @click="deleteDetail(index)">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+
+  .dict-detail {
+    padding: 10px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
deleted file mode 100644
index 2c7d960..0000000
--- a/src/views/system/dict/list.dict.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup name="SystemDictList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { DictListInfo } from './dict_interface'
-import SystemEditDict from './edit.dict.vue'
-import type { TableColumn } from '@/components/NormalTable/table_interface'
-import { delDict, getDictList } from '@/api/system/dict'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  condition: '',
-  offset: 1,
-  limit: 10,
-  sort: '',
-  order: '',
-}
-const total = ref(0)
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns: Ref<TableColumn[]> = ref([])
-columns.value = [
-  { text: '字典名称', value: 'name', width: 180, align: 'center' },
-  { text: '字典编码', value: 'code', width: 180, align: 'center' },
-  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
-  { text: '字典详情', value: 'detail', align: 'center' },
-]
-// 数据列表
-const list: Ref<DictListInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
-    list.value = res.data.rows
-    total.value = res.data.total
-    loading.value = false
-  })
-}
-
-// 编辑资源
-function edit(row: DictListInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: DictListInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delDict(row.id).then(() => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
-function changePage(val: { size: number; page: number }) {
-  if (val && val.size) {
-    listQuery.limit = val.size
-  }
-  if (val && val.page) {
-    listQuery.offset = val.page
-  }
-  fetchData()
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-      </template>
-      <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
-        <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
-            <template #default="scope">
-              <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-                修改
-              </ElButton>
-              <ElButton v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-                删除
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </template>
-      </NormalTable>
-    </TableContainer>
-    <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..feea486
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup name="SystemDictList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { DictListInfo } from './dict-interface'
+import SystemEditDict from './edit.dict.vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { delDict, getDictList } from '@/api/system/dict'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  condition: '',
+  offset: 1,
+  limit: 10,
+  sort: '',
+  order: '',
+}
+const total = ref(0)
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns: Ref<TableColumn[]> = ref([])
+columns.value = [
+  { text: '字典名称', value: 'name', width: 180, align: 'center' },
+  { text: '字典编码', value: 'code', width: 180, align: 'center' },
+  { text: '字典描述', value: 'tips', width: 180, align: 'center' },
+  { text: '字典详情', value: 'detail', align: 'center' },
+]
+// 数据列表
+const list: Ref<DictListInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getDictList(listQuery).then((res: { data: { rows: []; total: number } }) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+// 编辑资源
+function edit(row: DictListInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: DictListInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delDict(row.id).then(() => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+function changePage(val: { size: number; page: number }) {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.condition" placeholder="字典名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+      </template>
+      <normal-table :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
+        <template #columns>
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+            <template #default="scope">
+              <el-button v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+                修改
+              </el-button>
+              <el-button v-if="proxy.hasPerm('/sys/dict/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <system-edit-dict ref="editDialog" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/edit.resource.vue b/src/views/system/resource/edit.resource.vue
deleted file mode 100644
index 96c5015..0000000
--- a/src/views/system/resource/edit.resource.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script lang="ts" setup name="SystemEditResource">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-// ----------------------- 以下是字段定义 emits props ---------------------
-const props = defineProps({
-  // 资源类型列表
-  resourceTypeList: {
-    type: Array<ResourceTypeInfo>,
-    default: () => [],
-  },
-})
-
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<ResourceInfo> = ref({
-  name: '',
-  id: '',
-  url: '',
-  code: '',
-  pid: '',
-  resourceType: '',
-  num: 0,
-  icon: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
-  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
-  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
-  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addResource(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateResource(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const resourceTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-const resourceTree: Ref<ResourceInfo[]> = ref([])
-// 获取资源树列表
-function fetchResourceTree() {
-  getResourceTreeList().then((response) => {
-    if (response.data) {
-      resourceTree.value = toTreeList(response.data, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchResourceTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: ResourceInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      url: row.url,
-      code: row.code,
-      pid: row.pid,
-      resourceType: row.resourceType,
-      num: row.num,
-      icon: row.icon,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源名称" prop="name" class="required">
-            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源路径" prop="url" class="required">
-            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源编码" prop="code" class="required">
-            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父资源" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="resourceTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="resourceTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="资源类型" prop="resourceType" class="required">
-            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="图标" prop="icon">
-            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
new file mode 100644
index 0000000..1e72e08
--- /dev/null
+++ b/src/views/system/resource/editResource.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup name="SystemEditResource">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import { addResource, getResourceTreeList, updateResource } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+// ----------------------- 以下是字段定义 emits props ---------------------
+const props = defineProps({
+  // 资源类型列表
+  resourceTypeList: {
+    type: Array<ResourceTypeInfo>,
+    default: () => [],
+  },
+})
+
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<ResourceInfo> = ref({
+  name: '',
+  id: '',
+  url: '',
+  code: '',
+  pid: '',
+  resourceType: '',
+  num: 0,
+  icon: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '资源名称不可为空', trigger: ['blur', 'change'] }],
+  url: [{ required: true, message: '资源路径不可为空', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '资源编码不可为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父资源必选', trigger: ['blur', 'change'] }],
+  resourceType: [{ required: true, message: '资源类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addResource(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateResource(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const resourceTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+const resourceTree: Ref<ResourceInfo[]> = ref([])
+// 获取资源树列表
+function fetchResourceTree() {
+  getResourceTreeList().then((response) => {
+    if (response.data) {
+      resourceTree.value = toTreeList(response.data, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchResourceTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: ResourceInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      code: row.code,
+      pid: row.pid,
+      resourceType: row.resourceType,
+      num: row.num,
+      icon: row.icon,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="80px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源名称" prop="name" class="required">
+            <el-input v-model="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源路径" prop="url" class="required">
+            <el-input v-model="formData.url" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源编码" prop="code" class="required">
+            <el-input v-model="formData.code" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父资源" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="resourceTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="resourceTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="资源类型" prop="resourceType" class="required">
+            <el-select v-model="formData.resourceType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in props.resourceTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="图标" prop="icon">
+            <el-input v-model="formData.icon" type="text" placeholder="非必填" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
deleted file mode 100644
index cb9c156..0000000
--- a/src/views/system/resource/list.resource.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script lang="ts" setup name="SystemResourceList">
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
-import SystemEditResource from './edit.resource.vue'
-import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
-import { toTreeList } from '@/utils/structure'
-
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 默认查询条件
-const defaultQuery = {
-  resourceName: '',
-  resourceUrl: '',
-  level: '',
-  resourceType: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '资源名称', value: 'name', type: 'expand' },
-  { text: '资源编号', value: 'code' },
-  { text: '请求地址', value: 'url' },
-  { text: '资源类型', value: 'resourceTypeName', width: 80 },
-  { text: '层级', value: 'levels', width: 60, align: 'center' },
-  { text: '排序', value: 'num', width: 60, align: 'center' },
-])
-// 数据列表
-const list: Ref<ResourceInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getResourceList(listQuery).then((res) => {
-    const treeData = toTreeList<ResourceInfo>(res.data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取资源类型列表
-const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
-function fetchResourceType() {
-  getResourceTypeList().then((res) => {
-    resourceTypeList.value = res.data
-  })
-}
-// 编辑资源
-function edit(row: ResourceInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除资源
-function del(row: ResourceInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delResource(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加资源
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-
-onMounted(() => {
-  fetchResourceType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
-            v-for="item in resourceTypeList"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
new file mode 100644
index 0000000..f332c24
--- /dev/null
+++ b/src/views/system/resource/listResource.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup name="SystemResourceList">
+import type { Ref } from 'vue'
+import { computed, getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
+import SystemEditResource from './edit.resource.vue'
+import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
+import { toTreeList } from '@/utils/structure'
+
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 默认查询条件
+const defaultQuery = {
+  resourceName: '',
+  resourceUrl: '',
+  level: '',
+  resourceType: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '资源名称', value: 'name', type: 'expand' },
+  { text: '资源编号', value: 'code' },
+  { text: '请求地址', value: 'url' },
+  { text: '资源类型', value: 'resourceTypeName', width: 80 },
+  { text: '层级', value: 'levels', width: 60, align: 'center' },
+  { text: '排序', value: 'num', width: 60, align: 'center' },
+])
+// 数据列表
+const list: Ref<ResourceInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getResourceList(listQuery).then((res) => {
+    const treeData = toTreeList<ResourceInfo>(res.data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取资源类型列表
+const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
+function fetchResourceType() {
+  getResourceTypeList().then((res) => {
+    resourceTypeList.value = res.data
+  })
+}
+// 编辑资源
+function edit(row: ResourceInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除资源
+function del(row: ResourceInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delResource(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加资源
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+
+onMounted(() => {
+  fetchResourceType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
+            v-for="item in resourceTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
+  </app-container>
+</template>
diff --git a/src/views/system/resource/resource-interface.ts b/src/views/system/resource/resource-interface.ts
new file mode 100644
index 0000000..a9f2bd8
--- /dev/null
+++ b/src/views/system/resource/resource-interface.ts
@@ -0,0 +1,23 @@
+export enum ResourceTypeEnum {
+  '02' = '子系统',
+  '03' = '菜单',
+  '04' = '按钮',
+}
+// 资源类型
+export interface ResourceTypeInfo {
+  name: string
+  value: string
+}
+
+// 资源
+export interface ResourceInfo {
+  id: string
+  name: string
+  url: string
+  code: string
+  pid: string
+  resourceType: string
+  num: number
+  icon: string
+  children?: ResourceInfo[]
+}
diff --git a/src/views/system/resource/resource_interface.ts b/src/views/system/resource/resource_interface.ts
deleted file mode 100644
index a9f2bd8..0000000
--- a/src/views/system/resource/resource_interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ResourceTypeEnum {
-  '02' = '子系统',
-  '03' = '菜单',
-  '04' = '按钮',
-}
-// 资源类型
-export interface ResourceTypeInfo {
-  name: string
-  value: string
-}
-
-// 资源
-export interface ResourceInfo {
-  id: string
-  name: string
-  url: string
-  code: string
-  pid: string
-  resourceType: string
-  num: number
-  icon: string
-  children?: ResourceInfo[]
-}
diff --git a/src/views/system/role/data.perm.vue b/src/views/system/role/data.perm.vue
deleted file mode 100644
index 7276e21..0000000
--- a/src/views/system/role/data.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="DataPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { RoleInfo } from './role_interface'
-import { dataAuthor } from '@/api/system/role'
-import { getDeptTreeByRole } from '@/api/system/dept'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('数据权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-// 过滤文字
-const filterText = ref('')
-// 全部组织id, 用于全选
-const allDeptIds = ref([])
-// 组织树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  dataAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchDeptTree(roleid: string) {
-  loading.value = true
-  getDeptTreeByRole(roleid).then((response) => {
-    if (response.data) {
-      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
-}
-
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchDeptTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="300px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/dataPerm.vue b/src/views/system/role/dataPerm.vue
new file mode 100644
index 0000000..b86654e
--- /dev/null
+++ b/src/views/system/role/dataPerm.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup name="DataPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { dataAuthor } from '@/api/system/role'
+import { getDeptTreeByRole } from '@/api/system/dept'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('数据权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+// 过滤文字
+const filterText = ref('')
+// 全部组织id, 用于全选
+const allDeptIds = ref([])
+// 组织树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  dataAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchDeptTree(roleid: string) {
+  loading.value = true
+  getDeptTreeByRole(roleid).then((response) => {
+    if (response.data) {
+      allDeptIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
+}
+
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchDeptTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="300px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/edit.role.vue b/src/views/system/role/edit.role.vue
deleted file mode 100644
index 30e628e..0000000
--- a/src/views/system/role/edit.role.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup name="SystemEditRole">
-import type { Ref } from 'vue'
-import { nextTick, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框类型：create,update
-const dialogStatus = ref('create')
-const dialogVisible = ref(false)
-// 显示标题
-const textMap: { [key: string]: string } = {
-  update: '编辑',
-  create: '新增',
-}
-// 表单数据对象
-const formData: Ref<RoleInfo> = ref({
-  id: '',
-  name: '',
-  tips: '',
-  dataScopeType: '',
-  pid: '',
-  deptId: '',
-  num: 0,
-  version: '',
-})
-
-// 保存按钮加载状态
-const btnLoading = ref(false)
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-// 校验规则
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
-  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
-  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
-  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
-  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
-  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
-})
-
-function submitForm() {
-  if (dataFormRef) {
-    dataFormRef.value?.validate((valid: boolean) => {
-      if (valid) {
-        if (dialogStatus.value === 'create') {
-          createData()
-        }
-        else if (dialogStatus.value === 'update') {
-          updateData()
-        }
-      }
-    })
-  }
-}
-// 新增数据
-function createData() {
-  btnLoading.value = true
-  addRole(formData.value).then((res) => {
-    ElMessageBox.confirm(
-      '新增成功，是否继续新增?',
-      '提示',
-      {
-        confirmButtonText: '是',
-        cancelButtonText: '否',
-        type: 'info',
-      },
-    ).then(() => {
-      resetForm()
-    }).catch(() => {
-      closeRefresh()
-    })
-    btnLoading.value = false
-  }).catch((_) => {
-    btnLoading.value = false
-  })
-}
-
-// 更新数据
-function updateData() {
-  updateRole(formData.value).then((res) => {
-    ElMessage.success('修改成功')
-    btnLoading.value = false
-    closeRefresh()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 重置表单
-function resetForm() {
-  nextTick(() => {
-    if (!dataFormRef.value) { return }
-    dataFormRef.value?.resetFields()
-  })
-}
-
-// 树列表配置
-const roleTreeProps = {
-  parent: 'pid',
-  value: 'id',
-  label: 'name',
-  children: 'children',
-}
-// 数据类型列表
-const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchDataScopeType() {
-  getDataScopeTypeList().then((response) => {
-    dataScopeTypeList.value = response.data
-  })
-}
-// 获取角色树列表
-const roleTree: Ref<RoleInfo[]> = ref([])
-function fetchRoleTree() {
-  getRoleTreeList().then((response) => {
-    if (response.data) {
-      roleTree.value = toTreeList(response.data.list, '0', true)
-    }
-  })
-}
-//
-const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
-
-onBeforeMount(() => {
-  fetchDataScopeType()
-  fetchRoleTree()
-})
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(dialogstatus: string, row: RoleInfo) {
-  dialogStatus.value = dialogstatus
-  dialogVisible.value = true
-  btnLoading.value = false
-  if (dialogstatus === 'create') {
-    // resetForm()
-  }
-  else if (dialogstatus === 'update') {
-    formData.value = {
-      id: row.id,
-      name: row.name,
-      tips: row.tips,
-      dataScopeType: row.dataScopeType,
-      pid: row.pid,
-      deptId: row.deptId,
-      num: row.num,
-      version: row.version,
-    }
-  }
-}
-
-// 关闭并刷新
-function closeRefresh() {
-  dialogVisible.value = false
-  resetForm()
-  emits('closeRefresh')
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="textMap[dialogStatus]"
-    width="50%"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <el-form
-      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
-      size="default" @submit.prevent
-    >
-      <el-row :gutter="10">
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="角色名称" prop="name" class="required">
-            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="别名" prop="tips" class="required">
-            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="父角色" prop="pid" class="required">
-            <el-tree-select
-              v-model="formData.pid"
-              :data="roleTree"
-              node-key="id"
-              :filter-node-method="filterTree"
-              :props="roleTreeProps"
-              :expand-on-click-node="false"
-              :render-after-expand="false"
-              check-strictly
-              check-on-click-node
-              filterable
-              class="full-width-input"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="所属组织" prop="deptId" class="required">
-            <DeptSelect v-model="formData.deptId" :dept-show="true" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
-            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
-              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="grid-cell">
-          <el-form-item label="排序" prop="num" class="required">
-            <el-input-number
-              v-model="formData.num" class="full-width-input" controls-position="right"
-              :min="0" :max="999" :precision="0" :step="1"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </el-button>
-        <el-button @click="dialogClose">
-          取消
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  width: 100%;
-
-  .full-width-input {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/views/system/role/editRole.vue b/src/views/system/role/editRole.vue
new file mode 100644
index 0000000..6f668f9
--- /dev/null
+++ b/src/views/system/role/editRole.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup name="SystemEditRole">
+import type { Ref } from 'vue'
+import { nextTick, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import { addRole, getDataScopeTypeList, getRoleTreeList, updateRole } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框类型：create,update
+const dialogStatus = ref('create')
+const dialogVisible = ref(false)
+// 显示标题
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+}
+// 表单数据对象
+const formData: Ref<RoleInfo> = ref({
+  id: '',
+  name: '',
+  tips: '',
+  dataScopeType: '',
+  pid: '',
+  deptId: '',
+  num: 0,
+  version: '',
+})
+
+// 保存按钮加载状态
+const btnLoading = ref(false)
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+// 校验规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '角色名称不可为空', trigger: ['blur', 'change'] }],
+  tips: [{ required: true, message: '别名不可为空', trigger: ['blur', 'change'] }],
+  deptId: [{ required: true, message: '所属组织不能为空', trigger: ['blur', 'change'] }],
+  pid: [{ required: true, message: '父角色必选', trigger: ['blur', 'change'] }],
+  dataScopeType: [{ required: true, message: '数据权限类型必选', trigger: ['blur', 'change'] }],
+  num: [{ required: true, message: '排序不可为空', trigger: 'blur' }, { pattern: /^\d+(\.\d+)?$/, trigger: ['blur', 'change'], message: '' }],
+})
+
+function submitForm() {
+  if (dataFormRef) {
+    dataFormRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        if (dialogStatus.value === 'create') {
+          createData()
+        }
+        else if (dialogStatus.value === 'update') {
+          updateData()
+        }
+      }
+    })
+  }
+}
+// 新增数据
+function createData() {
+  btnLoading.value = true
+  addRole(formData.value).then((res) => {
+    ElMessageBox.confirm(
+      '新增成功，是否继续新增?',
+      '提示',
+      {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info',
+      },
+    ).then(() => {
+      resetForm()
+    }).catch(() => {
+      closeRefresh()
+    })
+    btnLoading.value = false
+  }).catch((_) => {
+    btnLoading.value = false
+  })
+}
+
+// 更新数据
+function updateData() {
+  updateRole(formData.value).then((res) => {
+    ElMessage.success('修改成功')
+    btnLoading.value = false
+    closeRefresh()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 重置表单
+function resetForm() {
+  nextTick(() => {
+    if (!dataFormRef.value) { return }
+    dataFormRef.value?.resetFields()
+  })
+}
+
+// 树列表配置
+const roleTreeProps = {
+  parent: 'pid',
+  value: 'id',
+  label: 'name',
+  children: 'children',
+}
+// 数据类型列表
+const dataScopeTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchDataScopeType() {
+  getDataScopeTypeList().then((response) => {
+    dataScopeTypeList.value = response.data
+  })
+}
+// 获取角色树列表
+const roleTree: Ref<RoleInfo[]> = ref([])
+function fetchRoleTree() {
+  getRoleTreeList().then((response) => {
+    if (response.data) {
+      roleTree.value = toTreeList(response.data.list, '0', true)
+    }
+  })
+}
+//
+const filterTree = (value: string, data: { name: string }) => data.name?.includes(value)
+
+onBeforeMount(() => {
+  fetchDataScopeType()
+  fetchRoleTree()
+})
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(dialogstatus: string, row: RoleInfo) {
+  dialogStatus.value = dialogstatus
+  dialogVisible.value = true
+  btnLoading.value = false
+  if (dialogstatus === 'create') {
+    // resetForm()
+  }
+  else if (dialogstatus === 'update') {
+    formData.value = {
+      id: row.id,
+      name: row.name,
+      tips: row.tips,
+      dataScopeType: row.dataScopeType,
+      pid: row.pid,
+      deptId: row.deptId,
+      num: row.num,
+      version: row.version,
+    }
+  }
+}
+
+// 关闭并刷新
+function closeRefresh() {
+  dialogVisible.value = false
+  resetForm()
+  emits('closeRefresh')
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="textMap[dialogStatus]"
+    width="50%"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef" :model="formData" :rules="rules" label-position="left" label-width="110px" class="form-container"
+      size="default" @submit.prevent
+    >
+      <el-row :gutter="10">
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="角色名称" prop="name" class="required">
+            <el-input v-model.trim="formData.name" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="别名" prop="tips" class="required">
+            <el-input v-model.trim="formData.tips" type="text" placeholder="必填" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="父角色" prop="pid" class="required">
+            <el-tree-select
+              v-model="formData.pid"
+              :data="roleTree"
+              node-key="id"
+              :filter-node-method="filterTree"
+              :props="roleTreeProps"
+              :expand-on-click-node="false"
+              :render-after-expand="false"
+              check-strictly
+              check-on-click-node
+              filterable
+              class="full-width-input"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="所属组织" prop="deptId" class="required">
+            <dept-select v-model="formData.deptId" :dept-show="true" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="数据权限类型" prop="dataScopeType" class="required">
+            <el-select v-model="formData.dataScopeType" class="full-width-input" clearable placeholder="请选择">
+              <el-option v-for="(item, index) in dataScopeTypeList" :key="index" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="grid-cell">
+          <el-form-item label="排序" prop="num" class="required">
+            <el-input-number
+              v-model="formData.num" class="full-width-input" controls-position="right"
+              :min="0" :max="999" :precision="0" :step="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+
+  .full-width-input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/role/function.perm.vue b/src/views/system/role/function.perm.vue
deleted file mode 100644
index 294dc9f..0000000
--- a/src/views/system/role/function.perm.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script lang="ts" setup name="FunctionPerm">
-import type { Ref } from 'vue'
-import { Switch } from '@element-plus/icons-vue'
-import { ElButton, ElDialog, ElMessage } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import type { ResourceInfo } from '../resource/resource_interface'
-import type { RoleInfo } from './role_interface'
-import { funcAuthor } from '@/api/system/role'
-import { getResourceListByRole } from '@/api/system/resource'
-import { getShowItem, toTreeList } from '@/utils/structure'
-
-// ----------------------- 以下是字段定义 emits props ---------------------
-const emits = defineEmits(['closeRefresh'])
-
-// 对话框是否显示
-const dialogVisible = ref(false)
-// 显示标题-角色名称
-const roleName = ref('功能权限')
-// 角色id
-const roleId = ref('')
-// 树列表配置项
-const defaultProps = {
-  label: 'name',
-  children: 'children',
-}
-const filterText = ref('')
-// 所有资源id
-const resourceIds = ref([])
-// 资源树列表数据
-const treeList = ref([])
-// 默认展开项
-const defaultExpanded: Ref<string[]> = ref([])
-// 默认选中项
-const defaultChecked: Ref<string[]> = ref([])
-// 树展开状态
-const treeExpand = ref(false)
-// 全选
-const nodeCheckedAll = ref(false)
-// 父子联动
-const treeCheckStrictly = ref(false)
-// 保存按钮加载状态
-const btnLoading = ref(false)
-// 列表加载状态
-const loading = ref(false)
-
-const tree = ref()
-
-// ---------------表单提交--------------------------------
-// 表单对象
-const dataFormRef = ref<FormInstance>()
-
-// 提交表单
-function submitForm() {
-  const ids: string[] = tree.value.getCheckedKeys()
-  btnLoading.value = true
-  funcAuthor(roleId.value, ids).then((res) => {
-    ElMessage.success('权限配置成功')
-    btnLoading.value = false
-    dialogClose()
-  }).catch((_) => { // 异常情况，loading置为false
-    btnLoading.value = false
-  })
-}
-
-// 获取当前角色的功能权限
-function fetchResourceTree(roleid: string) {
-  loading.value = true
-  getResourceListByRole(roleid).then((response) => {
-    if (response.data) {
-      resourceIds.value = response.data.map((item: { id: string }) => item.id)
-      treeList.value = toTreeList(response.data)
-      const temp = getShowItem(response.data) // 获取展开项和选中项
-      defaultExpanded.value = temp.expandList
-      defaultChecked.value = temp.openedList
-      tree.value.setCheckedKeys(temp.openedList)
-      loading.value = false
-    }
-  })
-}
-
-interface treeItem {
-  expanded: boolean
-  childNodes?: treeItem[]
-}
-/**
-     * 改变树节点展开状态，递归
-     * @param node 改变的节点
-     * @param value 展开/折叠
-     */
-function changeTreeNodeStatus(node: treeItem, value: boolean) {
-  node.expanded = value // 给当前节点赋值
-  if (node.childNodes) {
-    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
-      node.childNodes[i].expanded = value
-      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
-        changeTreeNodeStatus(node.childNodes[i], value)
-      }
-    }
-  }
-}
-// 点击展开或折叠按钮
-function expandOrCollapse() {
-  treeExpand.value = !treeExpand.value
-  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
-}
-// 全选或全不选
-function handleCheckedTreeNodeAll(value: boolean) {
-  tree.value.setCheckedKeys(value ? resourceIds.value : [])
-}
-const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
-
-// 监控查询框
-watch(filterText, (val) => {
-  tree.value!.filter(val)
-})
-
-// ----------初始化、关闭对话框相关-----------------
-function initDialog(row: RoleInfo) {
-  roleName.value = row.name
-  roleId.value = row.id
-  dialogVisible.value = true
-  btnLoading.value = false
-  fetchResourceTree(row.id)
-}
-// 关闭弹窗
-function dialogClose() {
-  dialogVisible.value = false
-}
-// ----------------------- 以下是暴露的方法内容 ----------------------------
-defineExpose({ initDialog })
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="roleName"
-    width="400"
-    :before-close="dialogClose"
-    append-to-body
-    :open-delay="0"
-    :close-on-click-modal="false"
-  >
-    <div class="tool-line">
-      <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-        展开/折叠
-      </ElButton>
-      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll($event)">
-        全选
-      </el-checkbox>
-      <el-checkbox v-model="treeCheckStrictly">
-        父子联动
-      </el-checkbox>
-    </div>
-    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
-    <el-scrollbar height="400px">
-      <el-tree
-        ref="tree"
-        v-loading="loading"
-        :props="defaultProps"
-        :data="treeList"
-        :default-expanded-keys="defaultExpanded"
-        :default-checked-keys="defaultChecked"
-        :check-strictly="!treeCheckStrictly"
-        :filter-node-method="filterNode"
-        show-checkbox
-        node-key="id"
-      />
-    </el-scrollbar>
-    <template #footer>
-      <div class="dialog-footer">
-        <ElButton :loading="btnLoading" type="primary" @click="submitForm">
-          保存
-        </ElButton>
-        <ElButton @click="dialogClose">
-          取消
-        </ElButton>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style lang="scss" scoped>
-.tool-line {
-  margin-bottom: 5px;
-  margin-top: -15px;
-}
-</style>
diff --git a/src/views/system/role/functionPerm.vue b/src/views/system/role/functionPerm.vue
new file mode 100644
index 0000000..0bfc395
--- /dev/null
+++ b/src/views/system/role/functionPerm.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup name="FunctionPerm">
+import type { Ref } from 'vue'
+import { Switch } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElMessage } from 'element-plus'
+import type { CheckboxValueType, FormInstance } from 'element-plus'
+import type { RoleInfo } from './role-interface'
+import { funcAuthor } from '@/api/system/role'
+import { getResourceListByRole } from '@/api/system/resource'
+import { getShowItem, toTreeList } from '@/utils/structure'
+
+// ----------------------- 以下是字段定义 emits props ---------------------
+const emits = defineEmits(['closeRefresh'])
+
+// 对话框是否显示
+const dialogVisible = ref(false)
+// 显示标题-角色名称
+const roleName = ref('功能权限')
+// 角色id
+const roleId = ref('')
+// 树列表配置项
+const defaultProps = {
+  label: 'name',
+  children: 'children',
+}
+const filterText = ref('')
+// 所有资源id
+const resourceIds = ref([])
+// 资源树列表数据
+const treeList = ref([])
+// 默认展开项
+const defaultExpanded: Ref<string[]> = ref([])
+// 默认选中项
+const defaultChecked: Ref<string[]> = ref([])
+// 树展开状态
+const treeExpand = ref(false)
+// 全选
+const nodeCheckedAll = ref(false)
+// 父子联动
+const treeCheckStrictly = ref(false)
+// 保存按钮加载状态
+const btnLoading = ref(false)
+// 列表加载状态
+const loading = ref(false)
+
+const tree = ref()
+
+// ---------------表单提交--------------------------------
+// 表单对象
+const dataFormRef = ref<FormInstance>()
+
+// 提交表单
+function submitForm() {
+  const ids: string[] = tree.value.getCheckedKeys()
+  btnLoading.value = true
+  funcAuthor(roleId.value, ids).then((res) => {
+    ElMessage.success('权限配置成功')
+    btnLoading.value = false
+    dialogClose()
+  }).catch((_) => { // 异常情况，loading置为false
+    btnLoading.value = false
+  })
+}
+
+// 获取当前角色的功能权限
+function fetchResourceTree(roleid: string) {
+  loading.value = true
+  getResourceListByRole(roleid).then((response) => {
+    if (response.data) {
+      resourceIds.value = response.data.map((item: { id: string }) => item.id)
+      treeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.expandList
+      defaultChecked.value = temp.openedList
+      tree.value.setCheckedKeys(temp.openedList)
+      loading.value = false
+    }
+  })
+}
+
+interface treeItem {
+  expanded: boolean
+  childNodes?: treeItem[]
+}
+/**
+     * 改变树节点展开状态，递归
+     * @param node 改变的节点
+     * @param value 展开/折叠
+     */
+function changeTreeNodeStatus(node: treeItem, value: boolean) {
+  node.expanded = value // 给当前节点赋值
+  if (node.childNodes) {
+    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
+      node.childNodes[i].expanded = value
+      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
+        changeTreeNodeStatus(node.childNodes[i], value)
+      }
+    }
+  }
+}
+// 点击展开或折叠按钮
+function expandOrCollapse() {
+  treeExpand.value = !treeExpand.value
+  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
+}
+// 全选或全不选
+function handleCheckedTreeNodeAll(value: CheckboxValueType) {
+  tree.value.setCheckedKeys(value ? resourceIds.value : [])
+}
+const filterNode = (value: string, data: { name: string }) => data.name?.includes(value)
+
+// 监控查询框
+watch(filterText, (val) => {
+  tree.value!.filter(val)
+})
+
+// ----------初始化、关闭对话框相关-----------------
+function initDialog(row: RoleInfo) {
+  roleName.value = row.name
+  roleId.value = row.id
+  dialogVisible.value = true
+  btnLoading.value = false
+  fetchResourceTree(row.id)
+}
+// 关闭弹窗
+function dialogClose() {
+  dialogVisible.value = false
+}
+// ----------------------- 以下是暴露的方法内容 ----------------------------
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="roleName"
+    width="400"
+    :before-close="dialogClose"
+    append-to-body
+    :open-delay="0"
+    :close-on-click-modal="false"
+  >
+    <div class="tool-line">
+      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        展开/折叠
+      </el-button>
+      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
+        全选
+      </el-checkbox>
+      <el-checkbox v-model="treeCheckStrictly">
+        父子联动
+      </el-checkbox>
+    </div>
+    <el-input v-model="filterText" placeholder="关键词过滤" style="margin-bottom: 15px;" />
+    <el-scrollbar height="400px">
+      <el-tree
+        ref="tree"
+        v-loading="loading"
+        :props="defaultProps"
+        :data="treeList"
+        :default-expanded-keys="defaultExpanded"
+        :default-checked-keys="defaultChecked"
+        :check-strictly="!treeCheckStrictly"
+        :filter-node-method="filterNode"
+        show-checkbox
+        node-key="id"
+      />
+    </el-scrollbar>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="submitForm">
+          保存
+        </el-button>
+        <el-button @click="dialogClose">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.tool-line {
+  margin-bottom: 5px;
+  margin-top: -15px;
+}
+</style>
diff --git a/src/views/system/role/list.role.vue b/src/views/system/role/list.role.vue
deleted file mode 100644
index a775da3..0000000
--- a/src/views/system/role/list.role.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script lang="ts" setup name="SystemRoleList">
-import type { Ref } from 'vue'
-import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
-import { Plus, Switch } from '@element-plus/icons-vue'
-import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
-import SystemEditRole from './edit.role.vue'
-import FunctionPerm from './function.perm.vue'
-import DataPerm from './data.perm.vue'
-import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
-import { toTreeList } from '@/utils/structure'
-const { proxy } = getCurrentInstance() as any
-
-const editDialog = ref() // 组件
-
-// 数据权限类型字典
-const dataScopeTypeDict: { [key: string]: string } = {
-  1: '所有数据',
-  2: '所属及下属部门',
-  3: '本部门',
-  4: '自定义',
-}
-
-// 默认查询条件
-const defaultQuery = {
-  keyword: '',
-}
-// 查询条件
-const listQuery = reactive({ ...defaultQuery })
-// 搜索重置
-function reset() {
-  Object.assign(listQuery, defaultQuery)
-  fetchData()
-}
-// 表格表头
-const columns = ref([
-  { text: '角色名称', value: 'name', align: 'left' },
-  { text: '所在组织机构', value: 'deptName' },
-  { text: '数据权限类型', value: 'dataScopeTypeName' },
-  { text: '别名', value: 'tips' },
-  { text: '排序', value: 'num', width: 80 },
-])
-// 数据列表
-const list: Ref<RoleInfo[]> = ref([])
-const loading = ref(false)
-
-// 搜索按钮
-function search() {
-  fetchData()
-}
-// 查询数据
-function fetchData() {
-  loading.value = true
-  getRoleList(listQuery).then((res) => {
-    const data = res.data.map((item: RoleInfo): RoleInfo => {
-      return {
-        ...item,
-        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
-      }
-    })
-    const treeData = toTreeList<RoleInfo>(data)
-    list.value = treeData
-    loading.value = false
-  })
-}
-
-// 获取角色类型列表
-const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
-function fetchRoleType() {
-  getDataScopeTypeList().then((res) => {
-    roleTypeList.value = res.data
-  })
-}
-// 编辑角色
-function edit(row: RoleInfo) {
-  editDialog.value.initDialog('update', row)
-}
-// 删除角色
-function del(row: RoleInfo) {
-  ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
-    '确认删除',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    },
-  ).then(() => {
-    delRole(row.id).then((res) => {
-      ElMessage.success('删除成功')
-    })
-    fetchData()
-  })
-}
-// 添加角色
-function add() {
-  editDialog.value.initDialog('create')
-}
-
-// 打开功能权限菜单
-const functionPerm = ref()
-function openFunctionPerm(row: RoleInfo) {
-  functionPerm.value.initDialog(row)
-}
-
-// 打开数据权限菜单
-const dataPerm = ref()
-function openDataPerm(row: RoleInfo) {
-  dataPerm.value.initDialog(row)
-}
-// 表格组件
-const table = ref()
-const expansion = ref(false)
-// 展开或折叠
-function expandOrCollapse() {
-  expansion.value = !expansion.value
-  toggleRowExpansionAll(list.value, expansion.value)
-}
-// 展开所有行的递归函数
-function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
-  data.forEach((item) => {
-    table.value.toggleRowExpansion(item, isExpansion)
-    if (item.children && item.children.length > 0) {
-      toggleRowExpansionAll(item.children, isExpansion)
-    }
-  })
-}
-onMounted(() => {
-  fetchRoleType()
-  fetchData()
-})
-</script>
-
-<template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.keyword" placeholder="角色名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
-      <template #btns-left>
-        <ElButton v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
-          新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
-          展开/折叠
-        </ElButton>
-      </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
-          <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
-              修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
-              删除
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
-              功能权限
-            </ElButton>
-            <!-- 只有自定义显示配置数据权限按钮 -->
-            <ElButton v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
-              数据权限
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
-    <SystemEditRole ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
-    <FunctionPerm ref="functionPerm" />
-    <DataPerm ref="dataPerm" />
-  </appcontainer>
-</template>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
new file mode 100644
index 0000000..53b18e2
--- /dev/null
+++ b/src/views/system/role/listRole.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup name="SystemRoleList">
+import type { Ref } from 'vue'
+import { getCurrentInstance, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Switch } from '@element-plus/icons-vue'
+import type { DataScopeTypeInfo, RoleInfo } from './role-interface'
+import SystemEditRole from './editRole.vue'
+import FunctionPerm from './functionPerm.vue'
+import DataPerm from './dataPerm.vue'
+import { delRole, getDataScopeTypeList, getRoleList } from '@/api/system/role'
+import { toTreeList } from '@/utils/structure'
+const { proxy } = getCurrentInstance() as any
+
+const editDialog = ref() // 组件
+
+// 数据权限类型字典
+const dataScopeTypeDict: { [key: string]: string } = {
+  1: '所有数据',
+  2: '所属及下属部门',
+  3: '本部门',
+  4: '自定义',
+}
+
+// 默认查询条件
+const defaultQuery = {
+  keyword: '',
+}
+// 查询条件
+const listQuery = reactive({ ...defaultQuery })
+// 搜索重置
+function reset() {
+  Object.assign(listQuery, defaultQuery)
+  fetchData()
+}
+// 表格表头
+const columns = ref([
+  { text: '角色名称', value: 'name', align: 'left' },
+  { text: '所在组织机构', value: 'deptName' },
+  { text: '数据权限类型', value: 'dataScopeTypeName' },
+  { text: '别名', value: 'tips' },
+  { text: '排序', value: 'num', width: 80 },
+])
+// 数据列表
+const list: Ref<RoleInfo[]> = ref([])
+const loading = ref(false)
+
+// 搜索按钮
+function search() {
+  fetchData()
+}
+// 查询数据
+function fetchData() {
+  loading.value = true
+  getRoleList(listQuery).then((res) => {
+    const data = res.data.map((item: RoleInfo): RoleInfo => {
+      return {
+        ...item,
+        dataScopeTypeName: dataScopeTypeDict[parseInt(item.dataScopeType)],
+      }
+    })
+    const treeData = toTreeList<RoleInfo>(data)
+    list.value = treeData
+    loading.value = false
+  })
+}
+
+// 获取角色类型列表
+const roleTypeList: Ref<DataScopeTypeInfo[]> = ref([])
+function fetchRoleType() {
+  getDataScopeTypeList().then((res) => {
+    roleTypeList.value = res.data
+  })
+}
+// 编辑角色
+function edit(row: RoleInfo) {
+  editDialog.value.initDialog('update', row)
+}
+// 删除角色
+function del(row: RoleInfo) {
+  ElMessageBox.confirm(
+    `确定要删除${row.name}吗？`,
+    '确认删除',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    delRole(row.id).then((res) => {
+      ElMessage.success('删除成功')
+    })
+    fetchData()
+  })
+}
+// 添加角色
+function add() {
+  editDialog.value.initDialog('create')
+}
+
+// 打开功能权限菜单
+const functionPerm = ref()
+function openFunctionPerm(row: RoleInfo) {
+  functionPerm.value.initDialog(row)
+}
+
+// 打开数据权限菜单
+const dataPerm = ref()
+function openDataPerm(row: RoleInfo) {
+  dataPerm.value.initDialog(row)
+}
+// 表格组件
+const table = ref()
+const expansion = ref(false)
+// 展开或折叠
+function expandOrCollapse() {
+  expansion.value = !expansion.value
+  toggleRowExpansionAll(list.value, expansion.value)
+}
+// 展开所有行的递归函数
+function toggleRowExpansionAll(data: RoleInfo[], isExpansion: boolean) {
+  data.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpansion)
+    if (item.children && item.children.length > 0) {
+      toggleRowExpansionAll(item.children, isExpansion)
+    }
+  })
+}
+onMounted(() => {
+  fetchRoleType()
+  fetchData()
+})
+</script>
+
+<template>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.keyword" placeholder="角色名称" />
+      </search-item>
+    </search-area>
+    <table-container>
+      <template #btns-left>
+        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+          新增
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+          展开/折叠
+        </el-button>
+      </template>
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column
+          v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align"
+        />
+        <el-table-column v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
+          <template #default="scope">
+            <el-button v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+              修改
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+              删除
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/role/funcAuthor')" type="primary" link size="small" class="table-text-button" @click="openFunctionPerm(scope.row)">
+              功能权限
+            </el-button>
+            <!-- 只有自定义显示配置数据权限按钮 -->
+            <el-button v-if="proxy.hasPerm('/sys/role/dataAuthor') && scope.row.dataScopeType === '4'" type="primary" link size="small" class="table-text-button" @click="openDataPerm(scope.row)">
+              数据权限
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </table-container>
+    <system-edit-role ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
+    <function-perm ref="functionPerm" />
+    <data-perm ref="dataPerm" />
+  </app-container>
+</template>
diff --git a/src/views/system/role/role-interface.ts b/src/views/system/role/role-interface.ts
new file mode 100644
index 0000000..d3847c3
--- /dev/null
+++ b/src/views/system/role/role-interface.ts
@@ -0,0 +1,19 @@
+// 数据权限类型
+export interface DataScopeTypeInfo {
+  name: string
+  value: string
+}
+
+// 角色信息
+export interface RoleInfo {
+  id: string
+  name: string // 角色名
+  tips: string // 别名
+  dataScopeType: string // 数据权限类型
+  dataScopeTypeName?: string // 数据权限类型名称
+  pid: string // 父角色
+  deptId: string // 组织机构
+  num: number // 排序
+  version: string // 保留字段
+  children?: []
+}
diff --git a/src/views/system/role/role_interface.ts b/src/views/system/role/role_interface.ts
deleted file mode 100644
index d3847c3..0000000
--- a/src/views/system/role/role_interface.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// 数据权限类型
-export interface DataScopeTypeInfo {
-  name: string
-  value: string
-}
-
-// 角色信息
-export interface RoleInfo {
-  id: string
-  name: string // 角色名
-  tips: string // 别名
-  dataScopeType: string // 数据权限类型
-  dataScopeTypeName?: string // 数据权限类型名称
-  pid: string // 父角色
-  deptId: string // 组织机构
-  num: number // 排序
-  version: string // 保留字段
-  children?: []
-}