feat: 优化大屏

apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue

@@ -23,8 +23,10 @@ import { resident_unitList } from '#/api/property/resident/unit';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import cleanDetailModal from './clean-detail-modal.vue';
-import { modalSchema } from './data';
+// import { modalSchema } from './data';
 import { communityTree } from '#/api/property/community';
+import { getDictOptions } from '#/utils/dict';
+
 const emit = defineEmits<{ reload: [] }>();
 
 // 计算合计费用
@@ -59,7 +61,142 @@ let unitListData: { id: any; name: string }[] = [];
 const editUnitId = ref('');
 const editCleanOrderId = ref('');
 const detailModal = ref(null);
-
+const modalSchema = [
+  {
+    label: '主键id',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '服务地址（房间号）',
+    component: 'TreeSelect',
+    defaultValue: undefined,
+    fieldName: 'location',
+    rules: 'required',
+  },
+  {
+    label: '开始时间',
+    fieldName: 'starTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: '请选择开始时间',
+    },
+    rules: 'required',
+  },
+  {
+    label: '结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: (values: any) => ({
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: !values.starTime
+        ? '请先选择开始时间'
+        : `请选择结束时间（结束时间不能早于开始时间）`,
+      disabled: isReadonly.value || !values.starTime, // 没选开始时间时禁用
+      disabledDate: (current: any) => {
+        if (!values.starTime) return false;
+        // 只允许选择大于等于开始时间的日期
+        return current && current < dayjs(values.starTime).startOf('second');
+      },
+    }),
+    rules: 'required',
+    dependencies: {
+      triggerFields: ['starTime'],
+    },
+  },
+  {
+    label: '申请人',
+    fieldName: 'persion',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '联系电话',
+    fieldName: 'phone',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '申请单位',
+    fieldName: 'unitId',
+    component: 'ApiSelect',
+    componentProps: {
+      api: resident_unitList,
+      resultField: 'rows',
+      labelField: 'name',
+      valueField: 'id',
+      placeholder: '请选择单位',
+    },
+    rules: 'required',
+  },
+  {
+    label: '支付状态',
+    fieldName: 'payState',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '待支付',
+          value: 0,
+        },
+        {
+          label: '已支付',
+          value: 1,
+        },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    label: '保洁类型',
+    fieldName: 'type',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('pro_cleaning_type'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '评价',
+    fieldName: 'serviceEvalua',
+    component: 'Rate',
+    componentProps: {
+      allowHalf: false,
+      count: 5,
+      tooltips: ['1星', '2星', '3星', '4星', '5星'],
+      defaultValue: 0,
+    },
+    dependencies: {
+      show: () => (isReadonly.value ? true : false),
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '评价文本',
+    fieldName: 'serviceEvaluaText',
+    component: 'Input',
+    dependencies: {
+      show: () => (isReadonly.value ? true : false),
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '联系电话',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    dependencies: {
+      show: () => (isReadonly.value ? true : false),
+      triggerFields: [''],
+    },
+  },
+];
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
@@ -71,7 +208,6 @@ const [BasicForm, formApi] = useVbenForm({
       class: 'w-full',
       disabled: isReadonly.value,
     })),
-    schema: modalSchema(isReadonly.value),
   },
   // 1. 使用正确的属性名 handleValuesChange
   handleValuesChange: async (values, fieldsChanged) => {
@@ -103,7 +239,10 @@ const [BasicForm, formApi] = useVbenForm({
       }
     }
   },
-  schema: modalSchema(),
+  // schema: computed(() => {
+  //   modalSchema(isReadonly.value);
+  // }),
+  schema: modalSchema,
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -126,6 +265,8 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    console.log(isReadonly.value);
+
     // 查询服务地址树形结构
     setupCommunitySelect();
     modalApi.modalLoading(true);
@@ -372,6 +513,8 @@ async function handleClosed() {
 // 获取服务地址
 async function setupCommunitySelect() {
   const areaList = await communityTree(4);
+  console.log(areaList);
+
   // 选中后显示在输入框的值 即父节点 / 子节点
   // addFullName(areaList, 'areaName', ' / ');
   const splitStr = '/';