权限管理、一网共享代理、预案管理。样式调整

src/views/agent/one_network_shared_proxy/agent.vue

@@ -3,18 +3,13 @@
     <transition name="fade">
       <div v-show="showSearch" class="mb-[10px]">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-          <el-form-item style="width: 200px" label="接口类型" prop="eventType">
+          <el-form-item style="width: 200px" label="接口类型：" prop="eventType">
             <el-select v-model="queryParams.eventType" placeholder="全部" clearable>
               <el-option label="全部" value=""></el-option>
-              <el-option
-                v-for="item in data.eventTypeSelection"
-                :key="item.dictValue"
-                :label="item.dictLabel"
-                :value="item.dictValue"
-              ></el-option>
+              <el-option v-for="item in data.eventTypeSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="发布日期" prop="publishDate">
+          <el-form-item label="发布日期：" prop="publishDate">
             <el-date-picker
               v-model="queryParams.publishDate"
               type="daterange"
@@ -25,8 +20,7 @@
             ></el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-input v-model="queryParams.passtoken" placeholder="请输入接口名称" clearable
-                      @keyup.enter="handleQuery"/>
+            <el-input v-model="queryParams.passtoken" placeholder="请输入接口名称" clearable @keyup.enter="handleQuery" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -39,15 +33,13 @@
     </transition>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate(selectedRow)">修改
-        </el-button>
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate(selectedRow)">修改 </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除
-        </el-button>
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除 </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
@@ -56,95 +48,97 @@
     </el-row>
 
     <!--      表格组件-->
-    <el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange"> <!--      handleSelectionChange-->
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="接口名称" align="center" prop="servername"/>
-      <el-table-column label="接口ID" align="center" prop="passid"/>
-      <el-table-column label="令牌" align="center" prop="passtoken"/>
-      <el-table-column label="接口类型" align="center" prop="eventType"/>
-      <el-table-column label="默认参数" align="center" prop="params_default"/>
-      <el-table-column label="默认请求体" align="center" prop="body_default"/>
-      <el-table-column label="默认请求头" align="center" prop="header_default"/>
-      <el-table-column label="发布日期" align="center" prop="publishDate"/>
+    <el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange">
+      <!--      handleSelectionChange-->
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="接口名称" align="center" prop="servername" />
+      <el-table-column label="接口ID" align="center" prop="passid" />
+      <el-table-column label="令牌" align="center" prop="passtoken" />
+      <el-table-column label="接口类型" align="center" prop="eventType" />
+      <el-table-column label="默认参数" align="center" prop="params_default" />
+      <el-table-column label="默认请求体" align="center" prop="body_default" />
+      <el-table-column label="默认请求头" align="center" prop="header_default" />
+      <el-table-column label="发布日期" align="center" prop="publishDate" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-tooltip content="查看" placement="top">
-            <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
+          <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">查看</el-text>
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleDelete(scope.row)">修改</el-text>
+          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDataScope(scope.row)">删除</el-text>
         </template>
       </el-table-column>
     </el-table>
-
     <!-- <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                 :total="total" @pagination="getList"/> -->
 
     <!--    新增/修改弹窗-->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="接口名称" prop="servername">  <!--  reportNumber -->
-          <el-input v-model="form.servername" placeholder="请输入接口名称"/>
-        </el-form-item>
-        <el-form-item label="接口参数" prop="passid">  <!--  reportName -->
-          <el-input v-model="form.passid" placeholder="请输入接口参数"/>
-        </el-form-item>
-        <el-form-item label="接口令牌" prop="passtoken"> <!--  keyword -->
-          <el-input v-model="form.passtoken" placeholder="请输入接口令牌"/>
-        </el-form-item>
-        <el-form-item label="接口编码" prop="servercode">   <!--  新增的一个 -->
-          <el-input v-model="form.servercode" placeholder="请输入接口编码"/>
-        </el-form-item>
-        <el-form-item label="接口类型" prop="eventType">
-          <el-select v-model="form.eventType" placeholder="请选择接口类型" clearable>
-            <el-option
-              v-for="item in data.eventTypeSelection"
-              :key="item.dictValue"
-              :label="item.dictLabel"
-              :value="item.dictValue"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="默认参数" prop="params_default"> <!--  新增的一个 -->
-          <el-input v-model="form.params_default" placeholder="请输入默认参数"/>
-        </el-form-item>
-        <el-form-item label="默认请求体" prop="body_default" >  <!--  新增的一个 -->
-          <el-input v-model="form.body_default" placeholder="请输入默认请求体"/>
-        </el-form-item>
-        <el-form-item label="默认请求头" prop="header_default"> <!--  新增的一个 -->
-          <el-input v-model="form.header_default" placeholder="请输入默认请求头"/>
-        </el-form-item>
-        <!-- <el-form-item label="发布日期" prop="publishDate">
-          <el-date-picker
-            v-model="form.publishDate"
-            type="date"
-            placeholder="选择发布日期"
-            value-format="yyyy-MM-dd"
-          ></el-date-picker>
-        </el-form-item> -->
-        <!-- <el-col :span="1.5"> -->
-        <!-- 使用分片上传组件,每个分片-->
-        <!-- <chunk-upload :max-file-size="50 * 1024 * 1024" :max-files="5" />
-      </el-col> -->
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
-          <el-button @click="cancel">取消</el-button>
+    <div v-show="dialog.visible" class="common-dialog">
+      <div class="common-dialog-content">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>{{ dialog.title }}</div>
+        </div>
+        <div class="common-dialog-box">
+          <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="接口名称" prop="servername">
+              <!--  reportNumber -->
+              <el-input v-model="form.servername" placeholder="请输入接口名称" />
+            </el-form-item>
+            <el-form-item label="接口参数" prop="passid">
+              <!--  reportName -->
+              <el-input v-model="form.passid" placeholder="请输入接口参数" />
+            </el-form-item>
+            <el-form-item label="接口令牌" prop="passtoken">
+              <!--  keyword -->
+              <el-input v-model="form.passtoken" placeholder="请输入接口令牌" />
+            </el-form-item>
+            <el-form-item label="接口编码" prop="servercode">
+              <!--  新增的一个 -->
+              <el-input v-model="form.servercode" placeholder="请输入接口编码" />
+            </el-form-item>
+            <el-form-item label="接口类型" prop="eventType">
+              <el-select v-model="form.eventType" placeholder="请选择接口类型" clearable>
+                <el-option v-for="item in data.eventTypeSelection" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="默认参数" prop="params_default">
+              <!--  新增的一个 -->
+              <el-input v-model="form.params_default" placeholder="请输入默认参数" />
+            </el-form-item>
+            <el-form-item label="默认请求体" prop="body_default">
+              <!--  新增的一个 -->
+              <el-input v-model="form.body_default" placeholder="请输入默认请求体" />
+            </el-form-item>
+            <el-form-item label="默认请求头" prop="header_default">
+              <!--  新增的一个 -->
+              <el-input v-model="form.header_default" placeholder="请输入默认请求头" />
+            </el-form-item>
+            <!-- <el-form-item label="发布日期" prop="publishDate">
+                <el-date-picker
+                  v-model="form.publishDate"
+                  type="date"
+                  placeholder="选择发布日期"
+                  value-format="yyyy-MM-dd"
+                ></el-date-picker>
+              </el-form-item> -->
+            <!-- <el-col :span="1.5"> -->
+            <!-- 使用分片上传组件,每个分片-->
+            <!-- <chunk-upload :max-file-size="50 * 1024 * 1024" :max-files="5" />
+            </el-col> -->
+          </el-form>
+        </div>
+        <div class="common-dialog-footer" style="display: flex; justify-content: center">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
         </div>
-      </template>
-    </el-dialog>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, toRefs, onMounted} from 'vue';
-import {getDicts} from "@/api/system/dict/data";
-import {ElMessage} from 'element-plus';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import { getDicts } from '@/api/system/dict/data';
+import { ElMessage } from 'element-plus';
 import ChunkUpload from '@/components/ChunkUpload/index.vue';
 import request from '@/utils/request';
 
@@ -181,7 +175,7 @@ const initFormData = {
 };
 
 const data = reactive({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -191,26 +185,26 @@ const data = reactive({
     servercode: ''
   },
   rules: {
-    servername: [{required: true, message: '接口名称不能为空', trigger: 'blur'}],
-    passid: [{required: true, message: '接口参数不能为空', trigger: 'blur'}],
-    passtoken: [{required: true, message: '令牌不能为空', trigger: 'blur'}],
-    servercode: [{required: true, message: '接口编码不能为空', trigger: 'blur'}],
-    eventType: [{required: true, message: '事件类型不能为空', trigger: 'blur'}],
-    params_default: [{required: true, message: '默认参数不能为空', trigger: 'blur'}],
-    body_default: [{required: true, message: '请求体不能为空', trigger: 'blur'}],
-    header_default: [{required: true, message: '请求头不能为空', trigger: 'blur'}]
+    servername: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
+    passid: [{ required: true, message: '接口参数不能为空', trigger: 'blur' }],
+    passtoken: [{ required: true, message: '令牌不能为空', trigger: 'blur' }],
+    servercode: [{ required: true, message: '接口编码不能为空', trigger: 'blur' }],
+    eventType: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+    params_default: [{ required: true, message: '默认参数不能为空', trigger: 'blur' }],
+    body_default: [{ required: true, message: '请求体不能为空', trigger: 'blur' }],
+    header_default: [{ required: true, message: '请求头不能为空', trigger: 'blur' }]
     //   publishDate: [{required: true, message: '发布日期不能为空', trigger: 'blur'}]
   },
   eventTypeSelection: []
 });
 
-const {queryParams, form, rules} = toRefs(data);
+const { queryParams, form, rules } = toRefs(data);
 
 const getList = async () => {
   loading.value = true;
   try {
     const response = await fetchReports(queryParams.value);
-    const {data, total} = response;
+    const { data, total } = response;
     demoList.value = data;
     total.value = total;
   } catch (error) {
@@ -244,7 +238,7 @@ const cancel = () => {
 };
 
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
   demoFormRef.value?.resetFields();
 };
 
@@ -254,7 +248,7 @@ const handleQuery = () => {
 };
 // 重置查询
 const resetQuery = () => {
-  queryParams.value = {pageNum: 1, pageSize: 10, eventType: '', publishDate: ['', ''], passtoken: '',servercode: ''};
+  queryParams.value = { pageNum: 1, pageSize: 10, eventType: '', publishDate: ['', ''], passtoken: '', servercode: '' };
   handleQuery();
 };
 
@@ -324,9 +318,8 @@ const handleExport = () => {
 onMounted(() => {
   getList();
   // 取字典值"mm_event_type"
-  getDicts("proxy_handler_one_share_api_type").then(res => {
+  getDicts('proxy_handler_one_share_api_type').then((res) => {
     data.eventTypeSelection = res.data;
   });
 });
 </script>
-

src/views/riskPrevention/planManage/index.vue

@@ -3,12 +3,12 @@
     <transition name="fade">
       <div v-show="showSearch" class="mb-[10px]">
         <el-form ref="queryFormRef" :model="planForm" :inline="true">
-          <el-form-item style="width: 200px" label="预案类型" prop="planType">
+          <el-form-item style="width: 200px" label="预案类型：" prop="planType">
             <el-select v-model="planForm.planType" placeholder="全部" clearable>
               <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="发布日期" prop="publish_date">
+          <el-form-item label="发布日期：" prop="publish_date">
             <el-date-picker
               v-model="dateRange"
               type="daterange"
@@ -32,12 +32,12 @@
     </transition>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除</el-button>
       </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+      <!--      <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>-->
     </el-row>
 
     <!-- 表格组件 -->
@@ -55,15 +55,9 @@
       <el-table-column label="发布日期" align="center" prop="publishDate" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-tooltip content="查看" placement="top">
-            <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="修改" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="删除" placement="top">
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
+          <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
+          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
         </template>
       </el-table-column>
     </el-table>
@@ -71,36 +65,42 @@
     <pagination v-show="total > 0" v-model:page="planForm.page" v-model:limit="planForm.pageSize" :total="total" @pagination="getList" />
 
     <!-- 新增/修改弹窗 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="预案名称" prop="planName">
-          <el-input v-model="form.planName" placeholder="请输入预案名称" />
-        </el-form-item>
-        <el-form-item label="预案类型" prop="planType">
-          <el-select v-model="form.planType" placeholder="请选择预案类型" clearable>
-            <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发布日期" prop="publishDate">
-          <el-date-picker v-model="form.publishDate" type="date" placeholder="选择发布日期" value-format="YYYY-MM-DD"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="编制单位" prop="organizingUnit">
-          <el-input v-model="form.organizingUnit" placeholder="请输入编制单位" />
-        </el-form-item>
-        <el-form-item label="发文字号" prop="document">
-          <el-input v-model="form.document" placeholder="请输入发文字号" />
-        </el-form-item>
-        <el-form-item label="预案附件" prop="fileList">
-          <file-upload v-model="form.fileList" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
-          <el-button @click="cancel">取消</el-button>
+    <div v-show="dialog.visible" class="common-dialog">
+      <div class="common-dialog-content">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>{{ dialog.title }}</div>
         </div>
-      </template>
-    </el-dialog>
+        <div class="common-dialog-box">
+          <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="预案名称：" prop="planName">
+              <el-input v-model="form.planName" placeholder="请输入预案名称" />
+            </el-form-item>
+            <el-form-item label="预案类型：" prop="planType">
+              <el-select v-model="form.planType" placeholder="请选择预案类型" clearable>
+                <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="发布日期：" prop="publishDate">
+              <el-date-picker v-model="form.publishDate" type="date" placeholder="选择发布日期" value-format="YYYY-MM-DD"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="编制单位：" prop="organizingUnit">
+              <el-input v-model="form.organizingUnit" placeholder="请输入编制单位" />
+            </el-form-item>
+            <el-form-item label="发文字号：" prop="document">
+              <el-input v-model="form.document" placeholder="请输入发文字号" />
+            </el-form-item>
+            <el-form-item label="预案附件：" prop="fileList">
+              <file-upload v-model="form.fileList" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="common-dialog-footer" style="display: flex; justify-content: center">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -193,7 +193,7 @@ const handleAdd = () => {
   dialog.title = '添加预案';
 };
 
-const handleUpdate = async(row: PlanVO) => {
+const handleUpdate = async (row: PlanVO) => {
   if (row) {
     resetForm();
     const res = await getPlanDetail(row.planId);

src/views/system/role/index.vue

@@ -1,188 +1,149 @@
 <template>
   <div class="app-container">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="角色名称" prop="roleName">
-              <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="权限字符" prop="roleKey">
-              <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="状态" prop="status">
-              <el-select v-model="queryParams.status" placeholder="角色状态" clearable>
-                <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="创建时间" style="width: 308px">
-              <el-date-picker
-                v-model="dateRange"
-                value-format="YYYY-MM-DD"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-              ></el-date-picker>
-            </el-form-item>
+      <div v-show="showSearch" class="mb-[20px]">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="角色名称：" prop="roleName">
+            <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="权限字符：" prop="roleKey">
+            <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="状态：" prop="status">
+            <el-select v-model="queryParams.status" placeholder="角色状态" clearable>
+              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间：" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+          </el-form-item>
 
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
       </div>
     </transition>
 
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:role:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:role:delete']" type="danger" plain :disabled="ids.length === 0" @click="handleDelete()">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-
-      <el-table ref="roleTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column v-if="false" label="角色编号" prop="roleId" width="120" />
-        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="200" />
-        <el-table-column label="显示顺序" prop="roleSort" width="100" />
-        <el-table-column label="状态" align="center" width="100">
-          <template #default="scope">
-            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime">
-          <template #default="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:role:add']" type="primary" icon="Plus" @click="handleAdd()">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:role:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:role:delete']" type="danger" plain :disabled="ids.length === 0" @click="handleDelete()">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:role:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
+      </el-col>
+      <!--      <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>-->
+    </el-row>
 
-        <el-table-column fixed="right" label="操作" width="180">
-          <template #default="scope">
-            <el-tooltip v-if="scope.row.roleId !== 1" content="修改" placement="top">
-              <el-button v-hasPermi="['system:role:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip v-if="scope.row.roleId !== 1" content="删除" placement="top">
-              <el-button v-hasPermi="['system:role:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip v-if="scope.row.roleId !== 1" content="数据权限" placement="top">
-              <el-button v-hasPermi="['system:role:edit']" link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip v-if="scope.row.roleId !== 1" content="分配用户" placement="top">
-              <el-button v-hasPermi="['system:role:edit']" link type="primary" icon="User" @click="handleAuthUser(scope.row)"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column v-if="false" label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="200" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template #default="scope">
+          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+            <span>{{ scope.row.dictType }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
 
-      <pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
+          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleDataScope(scope.row)">数据权限</el-text>
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleAuthUser(scope.row)">分配用户</el-text>
+        </template>
+      </el-table-column>
+    </el-table>
 
+    <pagination
+      v-if="total > 0"
+      v-model:total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
 
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="roleFormRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-        </el-form-item>
-        <el-form-item prop="roleKey">
-          <template #label>
-            <span>
-              <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">
-                <el-icon><question-filled /></el-icon>
-              </el-tooltip>
-              权限字符
-            </span>
-          </template>
-          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-        </el-form-item>
-        <el-form-item label="角色顺序" prop="roleSort">
-          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-          <el-tree
-            ref="menuRef"
-            class="tree-border"
-            :data="menuOptions"
-            show-checkbox
-            node-key="id"
-            :check-strictly="!form.menuCheckStrictly"
-            empty-text="加载中，请稍候"
-            :props="{ label: 'label', children: 'children' }"
-          ></el-tree>
-        </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
+    <div v-show="dialog.visible" class="common-dialog">
+      <div class="common-dialog-content">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>{{ dialog.title }}</div>
+        </div>
+        <div class="common-dialog-box">
+          <el-form ref="roleFormRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="角色名称：" prop="roleName">
+              <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item prop="roleKey">
+              <template #label>
+                <span>
+                  <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">
+                    <el-icon><question-filled /></el-icon>
+                  </el-tooltip>
+                  权限字符：
+                </span>
+              </template>
+              <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+            </el-form-item>
+            <el-form-item label="角色顺序：" prop="roleSort">
+              <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="状态：">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="菜单权限：">
+              <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+              <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+              <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+              <el-tree
+                ref="deptRef"
+                class="tree-border"
+                :data="deptOptions"
+                show-checkbox
+                default-expand-all
+                node-key="id"
+                :check-strictly="!form.deptCheckStrictly"
+                empty-text="加载中，请稍候"
+                :props="{ label: 'label', children: 'children' }"
+              ></el-tree>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="common-dialog-footer" style="display: flex; justify-content: center">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
-      </template>
-    </el-dialog>
-
-    <!-- 分配角色数据权限对话框 -->
-    <el-dialog v-model="openDataScope" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="dataScopeRef" :model="form" label-width="80px">
-        <el-form-item label="角色名称">
-          <el-input v-model="form.roleName" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限字符">
-          <el-input v-model="form.roleKey" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限范围">
-          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item v-show="form.dataScope === '2'" label="数据权限">
-          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-          <el-tree
-            ref="deptRef"
-            class="tree-border"
-            :data="deptOptions"
-            show-checkbox
-            default-expand-all
-            node-key="id"
-            :check-strictly="!form.deptCheckStrictly"
-            empty-text="加载中，请稍候"
-            :props="{ label: 'label', children: 'children' }"
-          ></el-tree>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitDataScope">确 定</el-button>
-          <el-button @click="cancelDataScope">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/system/user/index.vue

@@ -21,19 +21,19 @@
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div v-show="showSearch" class="mb-[10px]">
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-              <el-form-item label="用户名称" prop="userName">
+              <el-form-item label="用户名称：" prop="userName">
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
               </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
+              <el-form-item label="手机号码：" prop="phonenumber">
                 <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
               </el-form-item>
 
-              <el-form-item label="状态" prop="status">
+              <el-form-item label="状态：" prop="status">
                 <el-select v-model="queryParams.status" placeholder="用户状态" clearable>
                   <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="创建时间" style="width: 308px">
+              <el-form-item label="创建时间：" style="width: 308px">
                 <el-date-picker
                   v-model="dateRange"
                   value-format="YYYY-MM-DD"
@@ -51,37 +51,37 @@
           </div>
         </transition>
 
-           <el-row :gutter="10">
-            <el-col :span="1.5">
-              <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
-                修改
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
-                删除
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-dropdown class="mt-[1px]">
-                <el-button plain type="info">
-                  更多
-                  <el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
-                    <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>
-                    <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-col>
-            <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
-          </el-row>
-
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button v-has-permi="['system:user:add']" type="primary" icon="Plus" @click="handleAdd()">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
+              修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
+              删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-dropdown class="mt-[1px]">
+              <el-button plain type="info">
+                更多
+                <el-icon class="el-icon--right"><arrow-down /></el-icon
+              ></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
+                  <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>
+                  <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
+        </el-row>
 
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />