feat：【antd】【mall】diy 主页面的迁移

apps/web-antd/src/views/mall/promotion/diy/page/data.ts

@@ -1,6 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -51,7 +53,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入页面名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -59,9 +61,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];

apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { onMounted, ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { message } from 'ant-design-vue';
+
+import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' });
+
+const route = useRoute();
+
+const formData = ref<MallDiyPageApi.DiyPage>();
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const hideLoading = message.loading({
+    content: '加载中...',
+    duration: 0,
+  });
+  try {
+    formData.value = await DiyPageApi.getDiyPageProperty(id);
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
+    message.success('保存成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  formData.value = {} as MallDiyPageApi.DiyPage;
+  getPageDetail(route.params.id);
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="formData!.property"
+    :title="formData!.name"
+    :libs="PAGE_LIBS"
+    @save="submitForm"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/diy/page/index.vue

@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
 import { $t } from '#/locales';
@@ -37,7 +39,6 @@ function handleEdit(row: MallDiyPageApi.DiyPage) {
   formModalApi.setData(row).open();
 }
 
-// TODO @xingyu：装修未实现
 /** 装修页面 */
 function handleDecorate(row: MallDiyPageApi.DiyPage) {
   push({ name: 'DiyPageDecorate', params: { id: row.id } });
@@ -45,8 +46,17 @@ function handleDecorate(row: MallDiyPageApi.DiyPage) {
 
 /** 删除 DIY 页面 */
 async function handleDelete(row: MallDiyPageApi.DiyPage) {
-  await deleteDiyPage(row.id as number);
-  handleRefresh();
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDiyPage(row.id as number);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({

apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue

@@ -45,12 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyPageApi.DiyPage;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-
     try {
       await (formData.value?.id ? updateDiyPage(data) : createDiyPage(data));
       // 关闭并提示
@@ -84,7 +78,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>