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 = '/';

apps/web-antd/src/views/property/clean/cleanOrders/data.ts

@@ -5,10 +5,10 @@ import { resident_unitList } from '#/api/property/resident/unit';
 import { useCleanStore } from '#/store';
 import type { FormSchema } from '../../../../../../../packages/@core/ui-kit/form-ui/src/types';
 import dayjs from 'dayjs';
-import {h} from "vue";
-import {Rate} from "ant-design-vue";
-import {getDictOptions} from "#/utils/dict";
-import {renderDict} from "#/utils/render";
+import { h } from 'vue';
+import { Rate } from 'ant-design-vue';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
 const cleanStore = useCleanStore();
 
 export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
@@ -120,7 +120,7 @@ export const columns: VxeGridProps['columns'] = [
     field: 'type',
     width: 180,
     slots: {
-      default: ({row}) => {
+      default: ({ row }) => {
         return renderDict(row.type, 'pro_cleaning_type');
       },
     },
@@ -130,7 +130,7 @@ export const columns: VxeGridProps['columns'] = [
     field: 'serviceEvalua',
     width: 180,
     slots: {
-      default: ({row}) => {
+      default: ({ row }) => {
         return h(Rate, {
           value: row.serviceEvalua || 0,
           disabled: true,
@@ -153,12 +153,13 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width:'200'
+    width: '200',
   },
-
 ];
 
-export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) => [
+export const modalSchema: (isReadonly: boolean) => FormSchema[] = (
+  isReadonly,
+) => [
   {
     label: '主键id',
     fieldName: 'id',
@@ -193,9 +194,11 @@ export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) =
     componentProps: (values) => ({
       showTime: true,
       format: 'YYYY-MM-DD HH:mm:ss',
-      placeholder: !values.starTime?'请先选择开始时间':`请选择结束时间（结束时间不能早于开始时间）`,
+      placeholder: !values.starTime
+        ? '请先选择开始时间'
+        : `请选择结束时间（结束时间不能早于开始时间）`,
       disabled: isReadonly || !values.starTime, // 没选开始时间时禁用
-      disabledDate: (current:any) => {
+      disabledDate: (current: any) => {
         if (!values.starTime) return false;
         // 只允许选择大于等于开始时间的日期
         return current && current < dayjs(values.starTime).startOf('second');
@@ -266,8 +269,29 @@ export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) =
       allowHalf: false,
       count: 5,
       tooltips: ['1星', '2星', '3星', '4星', '5星'],
-      defaultValue: 0
+      defaultValue: 0,
+    },
+    dependencies: {
+      show: () => (isReadonly ? true : false),
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '评价文本',
+    fieldName: 'serviceEvaluaText',
+    component: 'Input',
+    dependencies: {
+      show: () => (isReadonly ? true : false),
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '联系电话',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    dependencies: {
+      show: () => (isReadonly ? true : false),
+      triggerFields: [''],
     },
-    rules: 'required',
   },
 ];

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

@@ -135,7 +135,6 @@ function handleView(row: Required<CleanForm>) {
 function handleAudit(row: any) {
   // 审核逻辑
   // TODO: 实现审核功能
-  console.log('审核', row);
   modalApi.setData({ id: row.id, readonly: true, audit: true, row: row });
   modalApi.open();
 }
@@ -143,7 +142,6 @@ function handleAudit(row: any) {
 function handleRefund(row: any) {
   // 退定逻辑
   // TODO: 实现退定功能
-  console.log('退定', row);
   modalApi.setData({ id: row.id, readonly: true, refund: true, row: row });
   modalApi.open();
 }