feat: 完善多按钮的情况

src/components/action_button/index.vue

 <template>
-    <a-table-column :title="title">
-        <template #default="row">
-            <template v-for="btn of basicBtns">
+    <div>
+        <span v-for="(btn, index) of basicBtns" :key="btn.label">
             <PopconfirmDelete
-                    :url="`/api/v1/roles/${row.roleId}`"
-                    :cb="refreshTable"
-                    :key="btn.label"
+                :url="getDelUrl(btn.url, row)"
                 v-if="btn.type === 'del'"
+                :cb="btn.after"
+                :title="btn.title"
             />
-                <a @click="() => btn?.click(row, btn)" :key="btn.label">{{ btn.label }}</a>
-                <a-divider type="vertical" :key="btn.label + 'divider'" />
-            </template>
+            <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
+            <a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
+        </span>
+
         <template v-if="moreBtns.length">
             <a-popover>
                 <template slot="content">
-                        <a v-for="btn of moreBtns" :key="btn.label" @click="() => btn?.click(row, btn)">
+                    <a-space direction="vertical">
+                        <a v-for="btn of moreBtns" :key="btn.label" @click="() => btn.click(row)">
                             {{ btn.label }}
                         </a>
+                    </a-space>
                 </template>
                 <a>...</a>
             </a-popover>
         </template>
-        </template>
-    </a-table-column>
+    </div>
 </template>
 
 <script>
+import { isFunction } from '@/utils';
+import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+
 export default {
+    components: { PopconfirmDelete },
+
     props: {
-        title: {
-            type: String,
-            default: '操作',
-        },
         buttons: {
             type: Array,
-            default: () => [
-                {
-                    label: '查看',
-                    onClick(row) {},
-                    type: 'del',
-                },
-            ],
+            default: () => [],
         },
+        row: Object,
     },
     computed: {
         basicBtns() {
@@ -51,5 +48,12 @@ export default {
             return this.buttons.length > 3 ? this.buttons.slice(3) : [];
         },
     },
+
+    methods: {
+        getDelUrl(url, row) {
+            if (isFunction(url)) return url(row);
+            return url;
+        },
+    },
 };
 </script>

src/components/popconfirm_delete/index.vue

 <template>
-    <a-popconfirm title="确认是否删除" ok-text="确认" cancel-text="取消" @confirm="onOk">
+    <a-popconfirm :title="title" ok-text="确认" cancel-text="取消" @confirm="onOk">
         <a>删除</a>
     </a-popconfirm>
 </template>
@@ -15,11 +15,15 @@ export default {
             type: Function,
             default: EMPTY_FUN,
         },
+        title: {
+            type: String,
+            default: '确认是否删除',
+        },
     },
     methods: {
         async onOk() {
             await delReq(this.url);
-            this.cb();
+            this?.cb();
         },
     },
 };

src/components/table/index.vue

@@ -7,7 +7,7 @@
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
-                    <a-button @click="queryForm = { ...initQuery }">重置</a-button>
+                    <a-button @click="queryForm = {}">重置</a-button>
                     <a-button type="primary" @click="getData">查询</a-button>
                 </a-space>
             </div>
@@ -79,9 +79,7 @@ export default {
         };
         return {
             data: [],
-            queryForm: {
-                ...this.initQuery,
-            },
+            queryForm: {},
             loading: false,
             addVisible: false,
             submitLoading: false,
@@ -104,7 +102,6 @@ export default {
         },
     },
     mounted() {
-        console.log(this.addBtn);
         this.getData();
     },
 
@@ -119,13 +116,13 @@ export default {
             this.loading = false;
         },
         async getDataNoPage() {
-            const res = await request(this.url, METHOD.GET);
+            const res = await request(this.url, METHOD.GET, this.queryForm);
             if (this.formatData) this.data = this.formatData(res);
             else this.data = res;
         },
 
         async getDataWithPage() {
-            const res = await request(this.url, METHOD.GET, this.queryForm);
+            const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
             if (this.formatData) this.data = this.formatData(res);
             else this.data = res.records;
         },

src/pages/frame/store/accountModule.js

@@ -11,7 +11,7 @@ export default {
         user: state => {
             if (!state.user) {
                 try {
-                    const user = localStorage.getItem(process.env.VUE_APP_USER_KEY);
+                    const user = '{}';
                     state.user = JSON.parse(user);
                 } catch (e) {
                     console.error(e);

src/pages/system/view/task/index.vue

@@ -4,10 +4,59 @@
         <a-table-column title="调度规则" data-index="taskRule" />
         <a-table-column title="实现类" data-index="implementClass" />
         <a-table-column title="说明" data-index="remark" />
-        <a-table-column title="操作" data-index="remark" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <ActionButton :buttons="buttons" :row="row" />
+            </template>
+        </a-table-column>
     </my-table>
 </template>
 
 <script>
-export default {};
+import ActionButton from '@/components/action_button/index.vue';
+
+export default {
+    components: { ActionButton },
+    data() {
+        return {
+            buttons: [
+                {
+                    label: '查看',
+                    onClick(row) {},
+                },
+                {
+                    label: '编辑',
+                    onClick(row) {},
+                },
+                {
+                    type: 'del',
+                    url: row => {
+                        console.log(row);
+                        return 'dassda';
+                    },
+                    after() {
+                        console.log('ddd');
+                    },
+                },
+
+                {
+                    label: 'chakan',
+                    onClick(row) {},
+                },
+                {
+                    label: '查看1',
+                    onClick(row) {},
+                },
+                {
+                    label: '查看2',
+                    onClick(row) {},
+                },
+                {
+                    label: '查看3',
+                    onClick(row) {},
+                },
+            ],
+        };
+    },
+};
 </script>

src/utils/index.js

@@ -29,3 +29,5 @@ export function convertListToTree(menuList, filterMenu = false) {
 }
 
 export function EMPTY_FUN() {}
+
+export const isFunction = val => typeof val === 'function';