From 1f46b6a95ec519c844605b8ba119295f69cfd9b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Wed, 20 Sep 2023 17:53:32 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=E4=BC=98=E5=8C=96=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variables.module.scss |  5 ++
 src/views/components/dictData.vue       | 99 +++++++++++++++----------
 src/views/system/role/index.vue         | 16 +++-
 3 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index baf5092..ba4c5ec 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -35,12 +35,17 @@ $panGreen: #30b08f;
   --el-text-color-primary: #e5eaf3;
   --el-menu-text-color: var(--el-text-color-primary);
 }
+// 黑色主题
 html.dark {
   /* custom dark bg color */
   // --el-bg-color: #141414;
   --base-color-white: #ffffff;
   --base-text-color-rgba: #ffffff;
   --base-menu-background: #000;
+
+  .current-row {
+    color: #e65d6e;
+  }
 }
 html.cafe {
   filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
diff --git a/src/views/components/dictData.vue b/src/views/components/dictData.vue
index 6e15da0..5834a81 100644
--- a/src/views/components/dictData.vue
+++ b/src/views/components/dictData.vue
@@ -50,49 +50,70 @@
       </template>
     </el-table-column>
   </el-table>
-  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+  <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
   <!-- 添加或修改参数配置对话框 -->
   <el-dialog :title="title" v-model="open" draggable width="500px" append-to-body>
     <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="字典类型">
-        <el-input v-model="form.dictType" :disabled="true" />
-      </el-form-item>
-      <el-form-item label="数据标签" prop="dictLabel">
-        <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
-      </el-form-item>
-      <el-form-item label="翻译键值" prop="langKey">
-        <el-input v-model="form.langKey" placeholder="请输入翻译键值" />
-      </el-form-item>
-      <el-form-item label="数据键值" prop="dictValue">
-        <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
-      </el-form-item>
-      <el-form-item label="样式属性" prop="cssClass">
-        <!-- <el-input v-model="form.cssClass" placeholder="请输入样式属性" /> -->
-        <el-select v-model="form.cssClass" allow-create filterable clearable="">
-          <el-option v-for="dict in cssClassOptions" :class="dict.value" :key="dict.value" :label="dict.label" :value="dict.value">
-            <span style="float: left" :class="dict.value">{{ dict.label }}</span>
-            <span style="float: right">{{ dict.value }}</span>
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="显示排序" prop="dictSort">
-        <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
-      </el-form-item>
-      <el-form-item label="回显样式" prop="listClass">
-        <el-select v-model="form.listClass">
-          <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-radio-group v-model="form.status">
-          <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-      </el-form-item>
+      <el-row :gutter="20">
+        <el-col :lg="24">
+          <el-form-item label="字典类型">
+            <el-input v-model="form.dictType" :disabled="true" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :lg="12">
+          <el-form-item label="数据标签" prop="dictLabel">
+            <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12">
+          <el-form-item label="翻译键值" prop="langKey">
+            <el-input v-model="form.langKey" placeholder="请输入翻译键值" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="24">
+          <el-form-item label="数据键值" prop="dictValue">
+            <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12">
+          <el-form-item label="样式属性" prop="cssClass">
+            <el-select v-model="form.cssClass" allow-create filterable clearable="">
+              <el-option v-for="dict in cssClassOptions" :class="dict.value" :key="dict.value" :label="dict.label" :value="dict.value">
+                <span style="float: left" :class="dict.value">{{ dict.label }}</span>
+                <span style="float: right">{{ dict.value }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12">
+          <el-form-item label="回显样式" prop="listClass">
+            <el-select v-model="form.listClass">
+              <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12">
+          <el-form-item label="显示排序" prop="dictSort">
+            <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="12">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+
+        <el-col :lg="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 08ddb63..7c87439 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -29,10 +29,10 @@
     <el-table v-loading="loading" :data="roleList" highlight-current-row @selection-change="handleSelectionChange">
       <el-table-column label="编号" prop="roleId" width="80" />
       <el-table-column label="名称" prop="roleName" />
-      <el-table-column label="显示顺序" prop="roleSort" align="center"></el-table-column>
+      <el-table-column label="显示顺序" prop="roleSort"></el-table-column>
       <el-table-column label="权限字符" prop="roleKey" />
       <el-table-column label="权限范围" prop="dataScope" :formatter="dataScopeFormat"></el-table-column>
-      <el-table-column label="状态" align="center" width="90">
+      <el-table-column label="状态" width="90">
         <template #default="scope">
           <el-switch
             v-model="scope.row.status"
@@ -123,7 +123,7 @@
 
     <!-- 添加或修改角色配置对话框 -->
     <zr-dialog :title="title" v-model="open" width="600px" append-to-body @close="cancel">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
         <el-row>
           <el-col :lg="12">
             <el-form-item label="角色名称" prop="roleName">
@@ -132,6 +132,16 @@
           </el-col>
           <el-col :lg="12">
             <el-form-item label="权限字符" prop="roleKey">
+              <template #label>
+                <span>
+                  <el-tooltip content="使用： v-hasRole='['admin']'" placement="top">
+                    <el-icon :size="15">
+                      <questionFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  权限字符
+                </span>
+              </template>
               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
             </el-form-item>
           </el-col>