feat：【ele】【mall】diy/page 代码优化

apps/web-ele/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 [
@@ -59,9 +61,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
-        clearable: true,
+        allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];

apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue

@@ -4,7 +4,7 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import { onMounted, ref, unref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { ElMessage } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import * as DiyPageApi from '#/api/mall/promotion/diy/page';
 import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
@@ -12,63 +12,50 @@ import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 /** 装修页面表单 */
 defineOptions({ name: 'DiyPageDecorate' });
 
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const route = useRoute();
-const formData = ref<MallDiyPageApi.DiyPage>();
-const formRef = ref(); // 表单 Ref
 
-// 获取详情
+const formData = ref<MallDiyPageApi.DiyPage>();
+
+/** 获取详情 */
 async function getPageDetail(id: any) {
-  formLoading.value = true;
+  const loadingInstance = ElLoading.service({
+    text: '加载中...',
+  });
   try {
     formData.value = await DiyPageApi.getDiyPageProperty(id);
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
 }
 
-// 提交表单
+/** 提交表单 */
 async function submitForm() {
-  // 校验表单
+  const loadingInstance = ElLoading.service({
-  if (!formRef.value) return;
+    text: '保存中...',
-  // 提交请求
+  });
-  formLoading.value = true;
   try {
     await DiyPageApi.updateDiyPageProperty(unref(formData)!);
     ElMessage.success('保存成功');
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
 }
 
-// 重置表单
-function resetForm() {
-  formData.value = {
-    id: undefined,
-    templateId: undefined,
-    name: '',
-    remark: '',
-    previewPicUrls: [],
-    property: '',
-  } as MallDiyPageApi.DiyPage;
-  formRef.value?.resetFields();
-}
-
 /** 初始化 */
-const route = useRoute();
 onMounted(() => {
-  resetForm();
   if (!route.params.id) {
     ElMessage.warning('参数错误，页面编号不能为空！');
     return;
   }
+  formData.value = {} as MallDiyPageApi.DiyPage;
   getPageDetail(route.params.id);
 });
 </script>
 <template>
   <DiyEditor
-    v-if="formData && !formLoading"
+    v-if="formData?.id"
-    v-model="formData.property"
+    v-model="formData!.property"
-    :title="formData.name"
+    :title="formData!.name"
     :libs="PAGE_LIBS"
     @save="submitForm"
   />

apps/web-ele/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>