Merge branch 'feature/shuiluo' into 'master'

feat: 表单优化，任务管理页面列表完成

See merge request product/kim3-web-vue/starter-web-vue!6

src/components/action_button/index.vue

@@ -3,9 +3,11 @@
         <span v-for="(btn, index) of basicBtns" :key="btn.label">
             <PopconfirmDelete
                 :url="getDelUrl(btn.url, row)"
-                v-if="btn.type === 'del'"
+                v-if="btn.type === 'confirm'"
                 :cb="btn.after"
                 :title="btn.title"
+                :onOk="btn.onOk"
+                :label="btn.label"
             />
             <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
             <a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
@@ -15,9 +17,17 @@
             <a-popover>
                 <template slot="content">
                     <a-space direction="vertical">
-                        <a v-for="btn of moreBtns" :key="btn.label" @click="() => btn.click(row)">
-                            {{ btn.label }}
-                        </a>
+                        <span v-for="btn of moreBtns" :key="btn.label">
+                            <PopconfirmDelete
+                                :url="getDelUrl(btn.url, row)"
+                                v-if="btn.type === 'confirm'"
+                                :cb="btn.after"
+                                :title="btn.title"
+                                :onOk="btn.onOk"
+                                :label="btn.label"
+                            />
+                            <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
+                        </span>
                     </a-space>
                 </template>
                 <a>...</a>

src/components/popconfirm_delete/index.vue

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

src/components/table/index.vue

@@ -46,11 +46,15 @@
                     <slot name="drawer" />
                 </div>
             </div>
+            <template v-if="!noFooter">
                 <a-divider />
                 <a-space>
                     <a-button @click="addVisible = false">取消</a-button>
-                <a-button type="primary" @click="submit" :loading="submitLoading">确认</a-button>
+                    <a-button type="primary" @click="submit" :loading="submitLoading">
+                        确认
+                    </a-button>
                 </a-space>
+            </template>
         </a-drawer>
     </div>
 </template>
@@ -94,6 +98,7 @@ export default {
                 display: 'flex',
                 flexDirection: 'column',
             },
+            noFooter: false,
         };
     },
     watch: {
@@ -144,7 +149,7 @@ export default {
             }
             this.submitLoading = false;
         },
-        show({ type, title } = {}) {
+        show({ type, title, noFooter } = {}) {
             if (type === 0) {
                 this.title = '新增';
             }
@@ -157,6 +162,7 @@ export default {
             if (title) {
                 this.title = title;
             }
+            this.noFooter = noFooter;
             this.addVisible = true;
         },
     },

src/pages/system/view/menu/MenuManagement.vue

@@ -7,7 +7,7 @@
         noPage
         ref="table"
     >
-        <template #add>
+        <template #drawer>
             <Form ref="addForm" />
         </template>
 
@@ -20,7 +20,7 @@
             <template #default="row">
                 <a @click="() => edit(row)">编辑</a>
                 <a-divider type="vertical" />
-                <PopconfirmDelete :onOk="() => delMenu(row.menuId)" />
+                <PopconfirmDelete :url="`/api/v1/menus/${row.menuId}`" :cb="refreshTable" />
             </template>
         </a-table-column>
     </my-table>
@@ -29,14 +29,12 @@
 <script>
 import { convertListToTree } from '@/utils';
 import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
-import { delMenuApi } from '@/api';
 import Form from './form.vue';
 
 export default {
     data: vm => ({
         addBtn: {
             text: '新建',
-            title: '菜单配置',
             onOk() {
                 return vm.$refs['addForm']?.submit();
             },
@@ -51,16 +49,11 @@ export default {
         refreshTable() {
             this.$refs['table'].getData();
         },
-        async delMenu(id) {
-            await delMenuApi(id);
-            this.refreshTable();
-        },
         sorter(pre, next) {
             return pre.viewIndex - next.viewIndex;
         },
         edit(data) {
-            console.log(data);
-            this.$refs['table']?.showAdd();
+            this.$refs['table']?.show({ type: 1 });
             this.$nextTick(() => {
                 this.$refs['addForm'].setEdit(data);
             });

src/pages/system/view/role/RoleManagement.vue

 <template>
     <my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table" noPage>
-        <template #add>
+        <template #drawer>
             <Form ref="form" />
         </template>
 
@@ -34,7 +34,7 @@ export default {
             this.$refs['table']?.getData();
         },
         view(data, type) {
-            this.$refs['table']?.showAdd();
+            this.$refs['table']?.show({ type });
             this.$nextTick(() => {
                 this.$refs['form'].setData(data, type);
             });

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

+<template>
+    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+        <a-form-model-item label="任务名称" prop="jobName">
+            <a-input v-model="form.jobName" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="调度规则" prop="jobDescription">
+            <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
+        </a-form-model-item>
+        <a-form-model-item label="实现类" prop="jobDescription">
+            <a-input v-model="form.jobDescription" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="说明" prop="jobDescription">
+            <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
+        </a-form-model-item>
+    </a-form-model>
+</template>
+
+<script>
+import JobsApi from '@/api/organization';
+import FormMixin from '@/components/FormMixin';
+export default {
+    mixins: [FormMixin],
+    data() {
+        return {
+            rules: {
+                jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                jobDescription: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
+            },
+        };
+    },
+    methods: {
+        add() {
+            return JobsApi.add({ ...this.form });
+        },
+        edit() {
+            return JobsApi.update({ ...this.form });
+        },
+    },
+};
+</script>

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

 <template>
-    <my-table url="/api/v1/schedules" rowKey="taskId">
+    <my-table url="/api/v1/schedules" rowKey="taskId" :addBtn="addBtn" ref="table">
+        <template #drawer>
+            <Form ref="form" />
+        </template>
         <a-table-column title="任务名称" data-index="taskName" />
         <a-table-column title="调度规则" data-index="taskRule" />
         <a-table-column title="实现类" data-index="implementClass" />
@@ -14,49 +17,54 @@
 
 <script>
 import ActionButton from '@/components/action_button/index.vue';
+import Form from './form.vue';
 
 export default {
-    components: { ActionButton },
+    components: { ActionButton, Form },
     data() {
         return {
+            addBtn: {},
             buttons: [
                 {
                     label: '查看',
-                    onClick(row) {},
+                    click: row => {
+                        this.showDrawer(2, true);
+                        this.$nextTick(() => {
+                            this.$refs['form'].setData(row, 2);
+                        });
                     },
-                {
-                    label: '编辑',
-                    onClick(row) {},
                 },
                 {
-                    type: 'del',
-                    url: row => {
-                        console.log(row);
-                        return 'dassda';
-                    },
-                    after() {
-                        console.log('ddd');
-                    },
-                },
-
-                {
-                    label: 'chakan',
-                    onClick(row) {},
+                    label: '编辑',
+                    click: row => {
+                        this.showDrawer(1);
+                        this.$nextTick(() => {
+                            this.$refs['form'].setData(row, 1);
+                        });
                     },
-                {
-                    label: '查看1',
-                    onClick(row) {},
                 },
                 {
-                    label: '查看2',
-                    onClick(row) {},
+                    type: 'confirm',
+                    label: '失效',
+                    title: '确认是否失效?',
+                    url: row => `/api/v1/schedules/${row.taskId}`,
+                    after: () => this.refreshTable(),
                 },
                 {
-                    label: '查看3',
-                    onClick(row) {},
+                    type: 'confirm',
+                    url: row => `/api/v1/schedules/${row.taskId}`,
+                    after: () => this.refreshTable(),
                 },
             ],
         };
     },
+    methods: {
+        refreshTable() {
+            this.$refs.table.getData();
+        },
+        showDrawer(type, noFooter) {
+            this.$refs['table'].show({ type, noFooter });
+        },
+    },
 };
 </script>