修改

src/api/organization.js

 import { delReq, getReq, postReq, putReq } from '@/utils';
 
-// export function delMenuApi(id) {
-//     return delReq(`/api/v1/menus/${id}`);
-// }
-
-// export function getMenuDataApi() {
-//     return getReq('/api/v1/menus');
-// }
-
-// export function addMenuApi(data) {
-//     return postReq('/api/v1/menus', data);
-// }
-
 function addJobsApi(data) {
     return postReq('/api/v1/jobs', data);
 }

src/components/FormMixin/index.js

+export default {
+    data() {
+        return {
+            type: 0,
+            form: {},
+        };
+    },
+    computed: {
+        isAdd() {
+            return this.type === 0;
+        },
+        isEdit() {
+            return this.type === 1;
+        },
+        isView() {
+            return this.type === 2;
+        },
+    },
+    methods: {
+        async submit() {
+            await this.$refs.DrawerForm.validate();
+            if (this.isAdd) {
+                return this?.add();
+            }
+            if (this.isEdit) {
+                return this?.edit();
+            }
+        },
+        setData(data, type) {
+            this.form = data;
+            this.type = type;
+        },
+    },
+};

src/components/table/index.vue

@@ -30,13 +30,12 @@
 
         <!-- 新增 -->
         <a-drawer
-            :title="addBtn.title || '新建'"
+            :title="title"
             placement="right"
             :visible="addVisible"
             @close="addDrawerClose"
             v-if="addBtn"
             :maskClosable="!!addBtn.maskClosable"
-            :closable="false"
             :drawerStyle="drawerStyle"
             :bodyStyle="bodyStyle"
             :width="addBtn.width || 600"
@@ -44,7 +43,7 @@
         >
             <div class="tw-overflow-y-hidden">
                 <div class="tw-overflow-y-auto tw-h-full">
-                    <slot name="add" />
+                    <slot name="drawer" />
                 </div>
             </div>
             <a-divider />
@@ -78,6 +77,7 @@ export default {
             pageSize: 10,
         };
         return {
+            title: '新增',
             data: [],
             queryForm: {
                 ...this.initQuery,
@@ -147,7 +147,19 @@ export default {
             }
             this.submitLoading = false;
         },
-        showAdd() {
+        show({ type, title } = {}) {
+            if (type === 0) {
+                this.title = '新增';
+            }
+            if (type === 1) {
+                this.title = '编辑';
+            }
+            if (type === 2) {
+                this.title = '查看';
+            }
+            if (title) {
+                this.title = title;
+            }
             this.addVisible = true;
         },
     },

src/pages/system/view/organization/jobmanagement/JobManagement.vue

 <template>
-    <my-table url="/api/v1/jobs" rowKey="jobId" :addBtn="addBtn" ref="table">
-        <template #add>
+    <my-table url="/api/v1/jobs" rowKey="jobId" :addBtn="addBtn" ref="table" noPage>
+        <template #drawer>
             <Form ref="form" />
         </template>
-        <template #search="{ query }">
+        <!-- <template #search="{ query }">
             <a-form-model-item label="名称">
                 <a-input v-model="query.jobName" />
             </a-form-model-item>
-        </template>
+        </template> -->
 
         <a-table-column title="名称" data-index="jobName" />
         <a-table-column title="描述" data-index="jobDescription" />
         <a-table-column title="操作">
             <template #default="row">
-                <a @click="() => view(row)">编辑</a>
+                <a @click="() => view(row, 1)">编辑</a>
                 <a-divider type="vertical" />
-                <PopconfirmDelete :url="`/api/v1/roles/${row.roleId}`" :cb="refreshTable" />
+                <PopconfirmDelete :url="`/api/v1/jobs/${row.jobId}`" :cb="refreshTable" />
             </template>
         </a-table-column>
     </my-table>
@@ -35,9 +35,9 @@ 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);
+                this.$refs['form'].setData({ ...data }, type);
             });
         },
     },

src/pages/system/view/organization/jobmanagement/form.vue

 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules">
-        <a-form-model-item label="名称">
+    <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="描述">
+        <a-form-model-item label="描述" prop="jobDescription">
             <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
         </a-form-model-item>
     </a-form-model>
@@ -11,38 +11,25 @@
 
 <script>
 import JobsApi from '@/api/organization';
+import FormMixin from '@/components/FormMixin';
 export default {
+    mixins: [FormMixin],
     data() {
         return {
-            type: 0,
-            form: {},
-            rules: {},
-            checkedKeys: [],
-        };
-    },
-    computed: {
-        isAdd() {
-            return this.type === 0;
-        },
-        isEdit() {
-            return this.type === 1;
-        },
-        isView() {
-            return this.type === 2;
+            rules: {
+                jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                jobDescription: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
             },
+        };
     },
     methods: {
-        submit() {
-            if (this.isEdit) {
+        add() {
             return JobsApi.add({ ...this.form });
-            }
-            if (this.isAdd) {
-                return JobsApi.update({ ...this.form });
-            }
         },
-        setData(data, type) {
-            this.form = data;
-            this.type = type;
+        edit() {
+            return JobsApi.update({ ...this.form });
         },
     },
 };