feat(ads-detail): add/edit action for page

mock/advertisement/selectAll.ts

@@ -20,7 +20,7 @@ const demoList = (() => {
       image: `@image('313x200', '@color', '示例slider')`,
       orderNum: '@integer(0,10)',
       title: '@ctitle(0,15)',
-      url: null,
+      link: '@url',
     });
   }
   return result;

src/views/dashboard/advertisement/list.vue

@@ -2,20 +2,18 @@
   <div class="p-4">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="openAddDrawer(true)">新增</a-button>
+        <a-button type="primary" @click="handleCreate">新增</a-button>
       </template>
       <template #img="{ record }">
         <TableImg :size="200" :simpleShow="true" :imgList="[record.image]" />
       </template>
-      <template #action>
+      <template #action="{ record }">
         <TableAction
           :actions="[
             {
               icon: 'clarity:note-edit-line',
               label: '编辑',
-              onClick: () => {
-                createMessage.info(`暂未接入`);
-              },
+              onClick: handleEdit.bind(null, record),
             },
             {
               icon: 'ant-design:delete-outlined',
@@ -32,7 +30,7 @@
         />
       </template>
     </BasicTable>
-    <addListDrawer @register="registeraddListDrawer" />
+    <listDrawer @register="registerDrawer" />
   </div>
 </template>
 <script lang="ts">
@@ -40,14 +38,14 @@
   import { BasicTable, useTable, BasicColumn, TableAction, TableImg } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
-  import addListDrawer from './addListDrawer.vue';
+  import listDrawer from './listDrawer.vue';
   import { ListApi } from '/@/api/advertisement/list';
   // param type 2
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg, addListDrawer },
+    components: { BasicTable, TableAction, TableImg, listDrawer },
     setup() {
       const { createMessage } = useMessage();
-      const [registeraddListDrawer, { openDrawer: openAddDrawer }] = useDrawer();
+      const [registerDrawer, { openDrawer }] = useDrawer();
       const columns: BasicColumn[] = [
         {
           title: '序号',
@@ -93,12 +91,24 @@
         showIndexColumn: false,
         rowKey: 'id',
       });
-      // pagination.value = { pageSize: 20 };
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
       return {
         registerTable,
         createMessage,
-        registeraddListDrawer,
-        openAddDrawer,
+        registerDrawer,
+        handleCreate,
+        handleEdit,
       };
     },
   });

src/views/dashboard/advertisement/addListDrawer.vue

@@ -1,11 +1,11 @@
 <template>
-  <BasicDrawer v-bind="$attrs" title="新增轮播资讯" width="50%">
-    <BasicForm @register="register" />
+  <BasicDrawer v-bind="$attrs" width="50%" :title="getTitle" @register="registerDrawer">
+    <BasicForm @register="registerForm" />
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicDrawer } from '/@/components/Drawer';
+  import { defineComponent, ref, unref, computed } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicForm, useForm } from '/@/components/Form';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { schemas } from './schemas';
@@ -13,7 +13,8 @@
     components: { BasicDrawer, BasicForm },
     setup() {
       const { createMessage } = useMessage();
-      const [register, { validate, setProps }] = useForm({
+      const isUpdate = ref(true);
+      const [registerForm, { validate, setProps, resetFields, setFieldsValue }] = useForm({
         labelCol: {
           span: 4,
         },
@@ -30,6 +31,19 @@
         },
         submitFunc: summitAddDrawer,
       });
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增轮播资讯' : '编辑轮播资讯'));
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          console.log('data.record', data.record);
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
 
       async function summitAddDrawer() {
         try {
@@ -51,7 +65,10 @@
       }
 
       return {
-        register,
+        registerForm,
+        getTitle,
+        registerDrawer,
+        closeDrawer,
       };
     },
   });

src/views/dashboard/advertisement/schemas.ts

@@ -15,7 +15,7 @@ export const schemas: FormSchema[] = [
   },
 
   {
-    field: 'order',
+    field: 'orderNum',
     component: 'Input',
     label: '轮播排序',
     defaultValue: 0,