角色管理分配权限

Report-V3-TS/src/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue

@@ -3,7 +3,7 @@
  * @Author: qianlishi
  * @Date: 2025-01-11 22:50:26
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-11 23:51:23
+ * @LastEditTime: 2025-01-12 00:20:42
 -->
 <template>
   <div class="flex items-center justify-center">
@@ -30,32 +30,45 @@
   </div>
 </template>
 <script lang='ts' setup>
-import { computed } from 'vue'
-import jsqIcon from '@/components/Base/Jsq-icon/index.vue'
+  import { computed } from 'vue'
+  import jsqIcon from '@/components/Base/Jsq-icon/index.vue'
 
-interface action {
-  label: string; // 按钮文本
-  key?: string | number, // 按钮标记
-  onClick: () => void; // 按钮点击事件
-  isShow?: (row?: object) => boolean; // 根据业务场景按钮是否显示 row当前行数据
-  permission?: string; // 目前只考虑一个按钮只绑定一个权限码
-}
+  interface action {
+    label: string; // 按钮文本
+    key?: string | number, // 按钮标记
+    onClick: () => void; // 按钮点击事件
+    isShow?: (row?: object) => boolean; // 根据业务场景按钮是否显示 row当前行数据
+    permission?: string; // 目前只考虑一个按钮只绑定一个权限码
+  }
 
-interface actionsProps {
-  actions: {
-    type: action[],
-    default: []
-  },
-  select: {
-    type: Function,
-    default: () => void,
-  },
-} 
-const props =  defineProps<actionsProps>()
-  console.log('111', props.actions)
-const getActions = computed<action[]>(() => {
-  return props.actions
-})
+  interface actionsProps {
+    actions: action[]
+    select: () => void
+  } 
+  const props =  defineProps<actionsProps>()
+    
+  // 添加一层 props 为什么要添加 -> https://www.naiveui.com/zh-CN/light/components/dropdown
+  const getActions = computed(() => {
+    /**
+     * 按钮根据权限和当前业务场景过滤后剩下的个数
+     * 目前没过滤
+     **/
+    let filterActions = props.actions
+    // 默认按钮进行过滤
+    if(filterActions?.length > 2) {
+      filterActions = filterActions.map((item, index) => {
+        return {
+          ...item,
+          key: index,
+          props: {
+            onClick: item.onClick
+          }
+        }
+      })
+    }
+    return filterActions
+  })
 
+  
 </script>
 <style lang='less' scoped></style>

Report-V3-TS/src/views/access/accessAuthority/utils/schemas.ts

@@ -3,7 +3,7 @@
  * @Author: qianlishi
  * @Date: 2025-01-03 01:01:14
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-11 21:34:22
+ * @LastEditTime: 2025-01-11 23:55:41
  */
 import { computed, h } from 'vue';
 import { cloneDeep } from 'lodash-es';
@@ -12,7 +12,6 @@ import { NButton, NTag } from 'naive-ui'
 import { editFormShow, enable } from '@/enums/common'
 import { FormSchema } from '@/components/Base/Jsq-crud/src/components/Jsq-searchForm';
 import { getAuthorityTree } from '@/api/access/accessAuthority';
-import { number } from 'vue-types';
 
 // tree配置
 export const getTreeOptions = () => {
@@ -326,7 +325,6 @@ export const getTableColumns = ({ updateClick, removeSingle }) => {
             {
               size: 'small',
               quaternary: true,
-              'v-permission': 'asd',
               type:"primary",
               onClick: () => {
                 removeSingle(row)

Report-V3-TS/src/views/access/accessRole/index.vue

@@ -28,8 +28,14 @@
     toRemove(row)
   }
 
+  // 分配权限
+  const toSetPermission = (row) => {
+    console.log(row)
+    console.log('分配权限')
+  }
+
   const { rowsButtons } = getTableButtons({ addClick, removeAll })
-  const { columns } = getTableColumns({ updateClick, removeSingle })
+  const { columns } = getTableColumns({ updateClick, removeSingle, toSetPermission })
 
   const [register, { toAdd, toUpdate, toRemoveAll, toRemove }] = useCrud({
     searchFormOption: {

Report-V3-TS/src/views/access/accessRole/utils/schemas.ts

@@ -3,15 +3,15 @@
  * @Author: qianlishi
  * @Date: 2025-01-03 01:01:14
  * @LastEditors: qianlishi
- * @LastEditTime: 2025-01-11 21:36:37
+ * @LastEditTime: 2025-01-12 00:00:55
  */
 import { computed, h } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import { isObject } from '@/utils/is';
-import { NButton, NTag } from 'naive-ui'
+import { NTag } from 'naive-ui'
 import { editFormShow, enable } from '@/enums/common'
 import { FormSchema } from '@/components/Base/Jsq-crud/src/components/Jsq-searchForm';
-
+import JsqTableAction from '@/components/Base/Jsq-crud/src/components/Jsq-tableActiion.vue';
 // 表单配置
 export const getFormSchemas = ({ params }: Record<string, any>) => {
   const schemas = computed<FormSchema[]>(() => {
@@ -174,7 +174,7 @@ export const getDialogRecordingSchemas = () => {
 }
 
 // 表格
-export const getTableColumns = ({ updateClick, removeSingle }) => {
+export const getTableColumns = ({ updateClick, removeSingle, toSetPermission }) => {
   const columns= [
     {
       type: 'selection',
@@ -244,33 +244,37 @@ export const getTableColumns = ({ updateClick, removeSingle }) => {
       width: "120px",
       editHide: true,
       render(row) {
-        return [
-          h(
-            NButton,
+        return h(JsqTableAction as any, {
+          actions: [
             {
-              size: 'small',
+              label: '编辑',
               quaternary: true,
               type:"primary",
               onClick: () => {
                 updateClick(row)
               }
             },
-            { default: () => '编辑' }
-          ),
-          h(
-            NButton,
             {
-              size: 'small',
+              label: '分配权限',
+              quaternary: true,
+              type:"primary",
+              onClick: () => {
+                toSetPermission(row)
+              }
+            },
+            {
+              label: '删除',
               quaternary: true,
-              'v-permission': 'asd',
               type:"primary",
               onClick: () => {
                 removeSingle(row)
               }
             },
-            { default: () => '删除' }
-          )
-        ]
+          ],
+          // select: (key) => {
+          //   window['$message'].info(`您点击了，${key} 按钮`);
+          // },
+        })
       }
     }
   ];