feat(rules): 优化操作列按钮样式和功能

- 添加按钮图标和标题提示
- 添加按钮样式类normal-button
- 添加权限设置抽屉组件
- 优化操作列按钮样式和图标
- 增加设置权限按钮功能
- 将DIFY_URL从'/dify'改为'/agent'
- 添加getMenuTree方法获取菜单树形结构

src/config/base-url.js

@@ -1,5 +1,5 @@
 // DIFY 的 base url 地址
-const DIFY_URL = '/dify'
+const DIFY_URL = '/agent'
 
 module.exports = {
   DIFY_URL

src/views/rules/Index.vue

@@ -31,31 +31,31 @@ export default {
           { prop: 'createdDate', key: '创建时间' },
           {
             key: '操作',
+            isRedraw: true,
             render: (h, params) => {
               return h('div', [
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini' },
+                    props: { type: 'text', size: 'mini', icon: 'el-icon-tickets', title: '查看详情' },
                     on: { click: () => this.handleInfoVisible(params.row) }
-                  },
-                  '查看详情'
+                  }
                 ),
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini' },
+                    props: { type: 'text', size: 'mini', icon: 'el-icon-edit-outline', title: '修改' },
                     on: { click: () => this.handleEdit(params.row) }
                   },
-                  '修改'
+                  "修改"
                 ),
                 h(
                   'el-button',
                   {
-                    props: { type: 'danger', size: 'mini' },
+                    props: { type: 'danger', size: 'mini', icon: 'el-icon-delete', title: '删除' },
                     on: { click: () => this.handleDelete(params.row, params.index) }
                   },
-                  '删除'
+                  "删除"
                 )
               ])
             }
@@ -107,7 +107,7 @@ export default {
   },
   watch: {
     form: {
-      handler() {},
+      handler() { },
       deep: true
     }
   },
@@ -243,7 +243,8 @@ export default {
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
                   <el-option label="全部规则" value="">全部规则</el-option>
-                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item" :value="reverseRuleType(item)" />
+                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item"
+                    :value="reverseRuleType(item)" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -256,15 +257,8 @@ export default {
             <!-- 创建时间 -->
             <el-col :span="6">
               <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="form.createdDate"
-                  type="daterange"
-                  unlink-panels
-                  range-separator="-"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :picker-options="form.pickerOptions"
-                >
+                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="-"
+                  start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="form.pickerOptions">
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -283,19 +277,14 @@ export default {
 
       <!-- 下方规则列表 -->
       <div class="p20">
-        <r-table
-          :columns="tableConfig.columns"
-          :data="tableData"
-          :deletion="false"
-          :total="tableConfig.total"
-          @currentChange="handleCurrentChange"
-          @sizeChange="handleSizeChange"
-          :currentPage="tableConfig.currentPage"
-          :pageSize="tableConfig.pageSize"
-        />
+        <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+          @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" :currentPage="tableConfig.currentPage"
+          :pageSize="tableConfig.pageSize" />
       </div>
     </el-card>
-    <edit-prompt-rule ref="editPromptRule" v-if="dialogOptions.currentComponent === 'EditPromptRule'" @getDataList="handleQuery" />
-    <edit-split-rule ref="editSplitRule" v-else-if="dialogOptions.currentComponent === 'EditSplitRule'" @getDataList="handleQuery" />
+    <edit-prompt-rule ref="editPromptRule" v-if="dialogOptions.currentComponent === 'EditPromptRule'"
+      @getDataList="handleQuery" />
+    <edit-split-rule ref="editSplitRule" v-else-if="dialogOptions.currentComponent === 'EditSplitRule'"
+      @getDataList="handleQuery" />
   </div>
 </template>

src/views/system/menu/index.vue

@@ -36,20 +36,14 @@
         </el-form>
       </div>
 
-      <r-table
-        :columns="tableConfig.columns"
-        :data="tableData"
-        :deletion="false"
-        :total="tableConfig.total"
-        @currentChange="handleCurrentChange"
-        @sizeChange="handleSizeChange"
-        :currentPage="tableConfig.currentPage"
-        :pageSize="tableConfig.pageSize"
-      />
+      <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+        @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" :currentPage="tableConfig.currentPage"
+        :pageSize="tableConfig.pageSize" />
     </el-card>
 
     <!-- 菜单新增 编辑 弹窗 -->
-    <menu-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView" :menu-data="currentMenuData" @submit="handleSubmit" />
+    <menu-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView"
+      :menu-data="currentMenuData" @submit="handleSubmit" />
   </div>
 </template>
 
@@ -96,7 +90,8 @@ export default {
                   props: {
                     type: params.row.type === 0 ? 'success' : 'primary',
                     size: 'small'
-                  }
+                  },
+                  class: 'normal-button'
                 },
                 params.row.type === 0 ? '菜单' : '接口'
               )
@@ -104,12 +99,14 @@ export default {
           },
           {
             key: '操作',
+            isRedraw: true,
             render: (h, params) => {
               return h('div', [
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini' },
+                    props: { type: 'text', size: 'mini', title: '编辑', icon: 'el-icon-edit-outline' },
+                    class: 'normal-button',
                     on: { click: () => this.handleEdit(params.row) }
                   },
                   '编辑'
@@ -117,7 +114,8 @@ export default {
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini', style: 'color: #F56C6C' },
+                    props: { type: 'text', size: 'mini', title: '删除', icon: 'el-icon-delete' },
+                    class: 'normal-button',
                     on: { click: () => this.handleDelete(params.row) }
                   },
                   '删除'

src/views/system/role/index.vue

@@ -27,25 +27,26 @@
         </el-form>
       </div>
 
-      <r-table
-        :columns="tableConfig.columns"
-        :data="tableData"
-        :deletion="false"
-        :total="tableConfig.total"
-        @currentChange="handleCurrentChange"
-        @sizeChange="handleSizeChange"
-        :currentPage="tableConfig.currentPage"
-        :pageSize="tableConfig.pageSize"
-      />
+      <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+        @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" :currentPage="tableConfig.currentPage"
+        :pageSize="tableConfig.pageSize" />
     </el-card>
 
     <!-- 角色新增弹窗 -->
-    <role-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView" :role-data="currentRoleData" @submit="handleSubmit" />
+    <role-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView"
+      :role-data="currentRoleData" @submit="handleSubmit" />
+
+    <!-- 角色权限 抽屉 -->
+    <el-drawer :visible.sync="permissionDrawer.visible" :title="permissionDrawer.title" size="60%">
+      <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
+        :props="defaultProps">
+      </el-tree>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { getRolePage, deleteRole, queryRoleDetail } from '@/api/system/role'
+import { getRolePage, deleteRole, queryRoleDetail, getMenuTree } from '@/api/system/role'
 import RoleDialog from '@/views/system/role/components/RoleDialog'
 
 export default {
@@ -55,6 +56,10 @@ export default {
   },
   data() {
     return {
+      permissionDrawer: {
+        visible: false,
+        title: '设置权限'
+      },
       loading: false,
       dialogVisible: false,
       resetPasswordVisible: false,
@@ -81,31 +86,34 @@ export default {
           { prop: 'remark', key: '角色描述' },
           {
             key: '操作',
+            isRedraw: true,
             render: (h, params) => {
               return h('div', [
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini' },
+                    props: { type: 'primary', size: 'mini', icon: 'el-icon-edit-outline', title: '编辑' },
+                    class: "normal-button",
                     on: { click: () => this.handleEdit(params.row) }
                   },
-                  '编辑'
                 ),
-                // h(
-                //   'el-button',
-                //   {
-                //     props: { type: 'text', size: 'mini' },
-                //     on: { click: () => this.handleInfoVisible(params.row) }
-                //   },
-                //   '查看详情'
-                // ),
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini', style: 'color: #F56C6C' },
+                    props: { type: 'danger', size: 'mini', icon: 'el-icon-delete', title: '删除' },
+                    class: "normal-button",
                     on: { click: () => this.handleDelete(params.row) }
                   },
-                  '删除'
+                  "删除"
+                ),
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'primary', size: 'mini', icon: 'el-icon-tickets', title: '设置权限' },
+                    class: "normal-button",
+                    on: { click: () => this.handlePermissionVisible(params.row) }
+                  },
+                  "设置权限"
                 )
               ])
             }
@@ -119,6 +127,13 @@ export default {
     this.getRoleList()
   },
   methods: {
+    async handlePermissionVisible(row) {
+      this.permissionDrawer.visible = true
+
+      // const response = await getMenuTree()
+      // console.log(response);
+
+    },
     // 获取角色列表
     getRoleList() {
       this.loading = true

src/views/system/user/index.vue

@@ -24,16 +24,9 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="创建时间">
-                <el-date-picker
-                  v-model="queryParams.dateRange"
-                  type="daterange"
-                  range-separator="-"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  value-format="yyyy-MM-dd"
-                  size="small"
-                  style="width: 100%"
-                />
+                <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="-"
+                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" size="small"
+                  style="width: 100%" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -48,20 +41,14 @@
           </el-row>
         </el-form>
       </div>
-      <r-table
-        :columns="tableConfig.columns"
-        :data="tableData"
-        :deletion="false"
-        :total="tableConfig.total"
-        @currentChange="handleCurrentChange"
-        @sizeChange="handleSizeChange"
-        :currentPage="tableConfig.currentPage"
-        :pageSize="tableConfig.pageSize"
-      />
+      <r-table :columns="tableConfig.columns" :data="tableData" :deletion="false" :total="tableConfig.total"
+        @currentChange="handleCurrentChange" @sizeChange="handleSizeChange" :currentPage="tableConfig.currentPage"
+        :pageSize="tableConfig.pageSize" />
     </el-card>
 
     <!-- 用户新增弹窗 -->
-    <user-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView" :user-data="currentUserData" @submit="handleSubmit" />
+    <user-dialog :visible.sync="dialogVisible" :title="dialogTitle" :is-edit="isEdit" :is-view="isView"
+      :user-data="currentUserData" @submit="handleSubmit" />
 
     <!-- 重置密码弹窗 -->
     <reset-password-dialog :visible.sync="resetPasswordVisible" :user-id="currentUserId" @success="getUserList" />
@@ -128,12 +115,14 @@ export default {
           },
           {
             key: '操作',
+            isRedraw: true,
             render: (h, params) => {
               return h('div', [
                 h(
                   'el-button',
                   {
                     props: { type: 'text', size: 'mini' },
+                    class: "normal-button",
                     on: { click: () => this.handleEdit(params.row) }
                   },
                   '编辑'
@@ -162,6 +151,7 @@ export default {
                   'el-button',
                   {
                     props: { type: 'text', size: 'mini', style: 'color: #409EFF' },
+                    class: "normal-button",
                     on: { click: () => this.handleResetPassword(params.row) }
                   },
                   '重置密码'