feat: 保洁接口对接

2025-06-27 18:03:13 +08:00
parent f01cb4abce
commit 3e8ba86305
10 changed files with 62158 additions and 366 deletions
--- a/apps/web-antd/src/components/roomSelect/room-select.vue
+++ b/apps/web-antd/src/components/roomSelect/room-select.vue
--- a/apps/web-antd/src/store/clean.ts
+++ b/apps/web-antd/src/store/clean.ts
@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+
+import { defineStore } from 'pinia';
+
+export const useCleanStore = defineStore('clean', () => {
+  // 当前选中的服务地址ID
+  const selectedLocationId = ref<null | number | string>(null);
+  // 申请人是否可用
+  const isPersionEnabled = ref(false);
+
+  function setLocation(id: number | string) {
+    selectedLocationId.value = id;
+    isPersionEnabled.value = !!id;
+    console.log(selectedLocationId.value);
+
+    console.log(isPersionEnabled.value);
+  }
+
+  return {
+    selectedLocationId,
+    isPersionEnabled,
+    setLocation,
+  };
+});
--- a/apps/web-antd/src/store/index.ts
+++ b/apps/web-antd/src/store/index.ts
@@ -1,2 +1,3 @@
 export * from './auth';
+export * from './clean';
 export * from './notify';
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
@@ -1,31 +1,45 @@
 <script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { CleanVO } from '#/api/property/clean/model';
+
 import { computed, ref } from 'vue';
-import dayjs from 'dayjs';

 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';

+import { Button, Table } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
 import { useVbenForm } from '#/adapter/form';
-import { cleanAdd, cleanInfo, cleanUpdate, cleanList } from '#/api/property/clean';
-import type { CleanVO } from '#/api/property/clean/model';
-import { clean_orderAdd, clean_orderInfo, clean_orderUpdate } from '#/api/property/clean_order';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-import { resident_unitList } from '#/api/property/resident/unit';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import { cleanList } from '#/api/property/clean';
+import {
+  clean_orderAdd,
+  clean_orderInfo,
+  clean_orderUpdate,
+} from '#/api/property/clean_order';
+import { resident_unitList } from '#/api/property/resident/unit';
+import RoomSelect from '#/components/roomSelect/room-select.vue';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
 import cleanDetailModal from './clean-detail-modal.vue';
-import { Table, Button } from 'ant-design-vue';
 import { modalSchema } from './data';

+const emit = defineEmits<{ reload: [] }>();
+
+// 计算合计费用
 const totalSumPeices = computed(() => {
  return detailTable.value
-    .reduce((total: number, item: any) => total + (Number(item.sumPeices) || 0), 0)
+    .reduce(
+      (total: number, item: any) => total + (Number(item.sumPeices) || 0),
+      0,
+    )
    .toFixed(2);
 });

-const emit = defineEmits<{ reload: [] }>();
 const isUpdate = ref(false);
+const isReadonly = ref(false);
 const title = computed(() => {
  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
@@ -46,9 +60,10 @@ const [BasicForm, formApi] = useVbenForm({
    // 默认label宽度 px
    labelWidth: 120,
    // 通用配置项 会影响到所有表单项
-    componentProps: {
+    componentProps: computed(() => ({
      class: 'w-full',
-    }
+      disabled: isReadonly.value,
+    })),
  },
  // 1. 使用正确的属性名 handleValuesChange
  handleValuesChange: async (values, fieldsChanged) => {
@@ -59,23 +74,23 @@ const [BasicForm, formApi] = useVbenForm({
        try {
          const res = await cleanList(); // 查询所有
          cleanListData = res.rows || [];
-        } catch (e) {
-          console.error('获取劳务列表失败:', e);
+        } catch (error) {
+          console.error('获取劳务列表失败:', error);
          cleanListData = []; // 出错时清空
        }
      }
-      
+
      // 3. 从 values 中获取当前选中的 id
      const selectedId = values.name;
-      const selectedItem = cleanListData.find(item => item.id === selectedId);
-      
+      const selectedItem = cleanListData.find((item) => item.id === selectedId);
+
      if (selectedItem) {
        // 4. 使用正确的 formApi.setValues 方法
        await formApi.setValues({
-          prices: selectedItem.peices,    // 服务单价
+          prices: selectedItem.peices, // 服务单价
          frequency: selectedItem.frequency, // 保洁频率
-          standard: selectedItem.standard,   // 保洁内容
-          peices: selectedItem.peices,     // 保洁标准
+          standard: selectedItem.standard, // 保洁内容
+          peices: selectedItem.peices, // 保洁标准
        });
      }
    }
@@ -104,12 +119,14 @@ const [BasicModal, modalApi] = useVbenModal({
      return null;
    }
    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as { id?: number | string };
+    const { id, readonly } = modalApi.getData() as {
+      id?: number | string;
+      readonly?: boolean;
+    };
    isUpdate.value = !!id;
-
+    isReadonly.value = !!readonly;
    if (isUpdate.value && id) {
-      const record:any = await clean_orderInfo(id);
+      const record: any = await clean_orderInfo(id);
      if (record.starTime) record.starTime = dayjs(record.starTime);
      if (record.endTime) record.endTime = dayjs(record.endTime);
      editUnitId.value = record.unitId || '';
@@ -125,11 +142,10 @@ const [BasicModal, modalApi] = useVbenModal({
 const detailGridOptions: VxeGridProps = {
  height: '300px',
  columns: [
-
    {
      title: '序号',
      field: 'index',
-          width: 'auto',
+      width: 'auto',
      slots: {
        default: ({ rowIndex }) => {
          return (rowIndex + 1).toString();
@@ -139,97 +155,112 @@ const detailGridOptions: VxeGridProps = {
    {
      title: '劳务名称',
      field: 'name',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '计量单位',
      field: 'measure',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '计算方式',
      field: 'method',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '申报单价含税（元）',
      field: 'peices',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '保洁频率',
      field: 'frequency',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '保洁标准',
      field: 'standard',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '备注',
      field: 'remark',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '状态',
      field: 'stater',
-          width: 'auto',
+      width: 'auto',
      slots: {
-        default: ({ row }) => row.stater === 1 ? '启用' : '禁用',
+        default: ({ row }) => (row.stater === 1 ? '启用' : '禁用'),
      },
    },
    {
      title: '保洁面积',
      field: 'area',
-          width: 'auto',
+      width: 'auto',
    },
    {
      title: '合计费用',
      field: 'sumPeices',
-          width: 'auto',
+      width: 'auto',
    },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
-    width: 'auto',
+      width: 'auto',
    },
  ],
  data: [],
 };
 const detailColumns = [
-  { title: '序号', key: 'index', width: 'auto'},
+  { title: '序号', key: 'index', width: 'auto' },
  { title: '劳务名称', dataIndex: 'name', key: 'name', width: 'auto' },
  { title: '计量单位', dataIndex: 'measure', key: 'measure', width: 'auto' },
  { title: '计算方式', dataIndex: 'method', key: 'method', width: 'auto' },
-  { title: '申报单价含税（元）', dataIndex: 'peices', key: 'peices' , width: 'auto'},
-  { title: '保洁频率', dataIndex: 'frequency', key: 'frequency' , width: 'auto'},
-  { title: '保洁标准', dataIndex: 'standard', key: 'standard' , width: 'auto'},
-  { title: '备注', dataIndex: 'remark', key: 'remark' , width: 'auto'},
+  {
+    title: '申报单价含税（元）',
+    dataIndex: 'peices',
+    key: 'peices',
+    width: 'auto',
+  },
+  {
+    title: '保洁频率',
+    dataIndex: 'frequency',
+    key: 'frequency',
+    width: 'auto',
+  },
+  { title: '保洁标准', dataIndex: 'standard', key: 'standard', width: 'auto' },
+  { title: '备注', dataIndex: 'remark', key: 'remark', width: 'auto' },
  {
    title: '状态',
    dataIndex: 'stater',
    key: 'stater',
    width: 'auto',
-    customRender: ({ value }: { value: number }) => (value === 1 ? '启用' : '禁用')
-    
+    customRender: ({ value }: { value: number }) =>
+      value === 1 ? '启用' : '禁用',
  },
  { title: '保洁面积', dataIndex: 'area', key: 'area', width: 'auto' },
-  { title: '合计费用', dataIndex: 'sumPeices', key: 'sumPeices', width: 'auto' },
+  {
+    title: '合计费用',
+    dataIndex: 'sumPeices',
+    key: 'sumPeices',
+    width: 'auto',
+  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right' as const,
    width: 'auto',
  },
-]
+];

 const [DetailTable, detailTableApi] = useVbenVxeGrid({
  gridOptions: detailGridOptions,
 });
-const detailTable = ref<any>([])
+const detailTable = ref<any>([]);

 const [CleanDetailModal, detailModalApi] = useVbenModal({
  connectedComponent: cleanDetailModal,
@@ -241,15 +272,19 @@ function handleAddDetail() {
 }

 function handleDetailReload(data: any) {
-  detailTable.value.push(data)
+  detailTable.value.push(data);
 }

-function handleDeleteDetail(record: any,index: number) {
-  console.log(record,index);
-  detailTable.value.splice(index,1)
+function handleDeleteDetail(record: any, index: number) {
+  console.log(record, index);
+  detailTable.value.splice(index, 1);
 }

 async function handleConfirm() {
+  if (isReadonly.value) {
+    modalApi.close();
+    return;
+  }
  try {
    modalApi.lock(true);
    const { valid } = await formApi.validate();
@@ -265,14 +300,18 @@ async function handleConfirm() {
    }
    // 劳务数据缓存 cleanListData 已有
    // 查找label
-    const unitObj = unitListData.find(item => item.id === data.unit);
-    const cleanObj = cleanListData.find(item => item.id === data.name);
-
-    data.unit = unitObj ? unitObj.name  : data.unit || '' ;
-    data.name = cleanObj ? cleanObj.name  :data.name || '';
-    data.unitId = unitObj ? unitObj.id : (isUpdate.value ? editUnitId.value : '');
-    data.cleanId = cleanObj ? cleanObj.id : (isUpdate.value ? editCleanId.value : '');
+    const unitObj = unitListData.find((item) => item.id === data.unit);
+    const cleanObj = cleanListData.find((item) => item.id === data.name);

+    data.unit = unitObj ? unitObj.name : data.unit || '';
+    data.name = cleanObj ? cleanObj.name : data.name || '';
+    data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
+    data.cleanId = cleanObj
+      ? cleanObj.id
+      : isUpdate.value
+        ? editCleanId.value
+        : '';
+    data.sumPeices = totalSumPeices;
    // 组装 cleanIds
    data.cleanIds = detailTable.value.map((item: any) => item.id);
    data.details = detailTable.value;
@@ -295,28 +334,38 @@ async function handleClosed() {
 </script>

 <template>
-  <BasicModal :title="title" >
-    <BasicForm />
+  <BasicModal :title="title">
+    <BasicForm>
+      <template #location="soltProps">
+        <RoomSelect v-bind="soltProps" />
+      </template>
+    </BasicForm>
    <!-- 添加订单详情部分 -->
    <div class="mt-4">
-      <div class="flex items-center justify-between mb-2">
+      <div class="mb-2 flex items-center justify-between">
        <h3 class="text-lg font-medium">添加保洁订单详情</h3>
        <a-button type="primary" @click="handleAddDetail">
          {{ $t('pages.common.add') }}
        </a-button>
      </div>
-    <Table :dataSource="detailTable" :columns="detailColumns" :pagination="false"  >
-  <template #bodyCell="{ column, index,record }">
-    <template v-if="column.key === 'index'">
-      {{ index + 1 }}
-    </template>
-        <template v-else-if="column.key === 'action'">
-          <Button danger @click="handleDeleteDetail(record,index)">删除</Button>        
+      <Table
+        :data-source="detailTable"
+        :columns="detailColumns"
+        :pagination="false"
+      >
+        <template #bodyCell="{ column, index, record }">
+          <template v-if="column.key === 'index'">
+            {{ index + 1 }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Button danger @click="handleDeleteDetail(record, index)">
+              删除
+            </Button>
+          </template>
        </template>
-  </template>
-</Table>
-<div>费用合计：{{ totalSumPeices }}元</div>
-      </div>
+      </Table>
+      <div>费用合计：{{ totalSumPeices }}元</div>
+    </div>
    <CleanDetailModal @reload="handleDetailReload" />
  </BasicModal>
 </template>
@@ -325,24 +374,29 @@ async function handleClosed() {
 .mt-4 {
  margin-top: 1rem;
 }
+
 .mb-2 {
  margin-bottom: 0.5rem;
 }
+
 .flex {
  display: flex;
 }
+
 .items-center {
  align-items: center;
 }
+
 .justify-between {
  justify-content: space-between;
 }
+
 .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
 }
+
 .font-medium {
  font-weight: 500;
 }
 </style>
-
--- a/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
@@ -1,10 +1,10 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import { cleanList } from '#/api/property/clean';
-import type { PageResult } from '#/api/common';
-import type { CleanVO } from '#/api/property/clean/model';
-import {  resident_unitList } from '#/api/property/resident/unit';
-import dayjs from 'dayjs';
+
+import { resident_unitList } from '#/api/property/resident/unit';
+import { useCleanStore } from '#/store';
+
+const cleanStore = useCleanStore();

 export const querySchema: FormSchemaGetter = () => [
  {
@@ -12,6 +12,36 @@ export const querySchema: FormSchemaGetter = () => [
    fieldName: 'location',
    label: '服务地址',
  },
+  // {
+  //   label: '服务地址（房间号）',
+  //   fieldName: 'location',
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     api: resident_unitList,
+  //     resultField: 'rows',
+  //     labelField: 'name',
+  //     valueField: 'id',
+  //     placeholder: '请选择服务地址',
+  //     onChange: (val: string | number) => {
+  //       cleanStore.setLocation(val);
+  //     },
+  //   },
+  //   rules: 'required',
+  // },
+  // {
+  //   label: '申请人hhh',
+  //   fieldName: 'persion',
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     api: cleanList,
+  //     resultField: 'rows',
+  //     labelField: 'name',
+  //     valueField: 'id',
+  //     placeholder: '请选择申请人',
+  //     disabled: computed(() => !cleanStore.isPersionEnabled),
+  //   },
+  //   rules: 'required',
+  // },
  {
    component: 'Input',
    fieldName: 'persion',
@@ -21,7 +51,7 @@ export const querySchema: FormSchemaGetter = () => [
    component: 'Select',
    fieldName: 'payState',
    label: '支付状态',
-        componentProps: {
+    componentProps: {
      options: [
        {
          label: '待支付',
@@ -42,8 +72,8 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '序号',
    field: 'id',
-    width:'60',
-        slots: {
+    width: '60',
+    slots: {
      default: ({ rowIndex }) => {
        return (rowIndex + 1).toString();
      },
@@ -52,58 +82,55 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '服务地址',
    field: 'location',
-    width: 'auto',
+    width: '180',
  },
+  // {
+  //   title: '服务面积（㎡）',
+  //   field: 'area',
+  //   width: 'auto',
+  // },
+  // {
+  //   title: '劳务名称',
+  //   field: 'name',
+  //   width: 'auto',
+  // },
+  // {
+  //   title: '申报单价含税（元）',
+  //   field: 'prices',
+  //   width: 'auto',
+  // },
  {
-    title: '服务面积（㎡）',
-    field: 'area',
-    width: 'auto',
-  },
-  {
-    title: '劳务名称',
-    field: 'name',
-    width: 'auto',
-  },
-  {
-    title: '申报单价含税（元）',
-    field: 'prices',
-    width: 'auto',
-  },
-  {
-    title: '合计费用',
+    title: '合计费用（元）',
    field: 'sumPeices',
-    width: 'auto',
+    width: '120',
  },
  {
    title: '支付状态',
    field: 'payState',
-    width: 'auto',
-        slots: {
-      default: ({ row }) => row.stater === 1 ? '已支付' : '待支付',
+    width: '120',
+    slots: {
+      default: ({ row }) => (row.stater === 1 ? '已支付' : '待支付'),
    },
  },
  {
    title: '服务开始时间',
    field: 'starTime',
    width: 'auto',
-
-    
  },
  {
    title: '服务结束时间',
    field: 'endTime',
    width: 'auto',
-
  },
-    {
+  {
    title: '申请单位',
    field: 'unit',
-    width: 'auto',
+    width: '150',
  },
  {
    title: '申请人',
    field: 'persion',
-    width: 'auto',
+    width: '150',
  },
  {
    title: '联系电话',
@@ -135,16 +162,22 @@ export const modalSchema: FormSchemaGetter = () => [
  {
    label: '服务地址（房间号）',
    fieldName: 'location',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '服务面积（㎡）',
-    fieldName: 'area',
-    component: 'Input',
+    componentProps: {
+      placeholder: '请选择房间',
+    },
+    slots: {
+      default: 'location',
+    },
+    formItemClass: 'col-span-2',
    rules: 'required',
  },
  // {
+  //   label: '服务面积（㎡）',
+  //   fieldName: 'area',
+  //   component: 'Input',
+  //   rules: 'required',
+  // },
+  // {
  //   label: '劳务名称',
  //   fieldName: 'name',
  //   component: 'ApiSelect',
@@ -196,25 +229,25 @@ export const modalSchema: FormSchemaGetter = () => [
  //     disabled: true,
  //   },
  // },
-      {
+  {
    label: '开始时间',
    fieldName: 'starTime',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
-      placeholder: '请选择开始时间'
+      placeholder: '请选择开始时间',
    },
    rules: 'required',
  },
-    {
+  {
    label: '结束时间',
    fieldName: 'endTime',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      format: 'YYYY-MM-DD HH:mm:ss',
-      placeholder: '请选择结束时间'
+      placeholder: '请选择结束时间',
    },
    rules: 'required',
  },
@@ -243,7 +276,7 @@ export const modalSchema: FormSchemaGetter = () => [
    },
    rules: 'required',
  },
-   {
+  {
    label: '支付状态',
    fieldName: 'payState',
    component: 'Select',
--- a/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben/types';
+import type { VbenFormProps } from '@vben/common-ui';

-import { ref } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { CleanForm } from '#/api/property/clean/model';

-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';

 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';

-import {   
-  useVbenVxeGrid,
-  vxeCheckboxChecked,
-  type VxeGridProps 
-} from '#/adapter/vxe-table';
-
-import {
-  cleanExport,
-  cleanList,
-  cleanRemove,
-} from '#/api/property/clean';
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
  clean_orderExport,
  clean_orderList,
  clean_orderRemove,
 } from '#/api/property/clean_order';
-import type { CleanForm } from '#/api/property/clean/model';
 import { commonDownloadExcel } from '#/utils/file/download';

 import cleanModal from './clean-modal.vue';
@@ -81,7 +70,7 @@ const gridOptions: VxeGridProps = {
    keyField: 'id',
  },
  // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-clean-index'
+  id: 'property-clean-index',
 };

 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -123,9 +112,19 @@ function handleMultiDelete() {
 }

 function handleDownloadExcel() {
-  commonDownloadExcel(clean_orderExport, '保洁订单数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
+  commonDownloadExcel(
+    clean_orderExport,
+    '保洁订单数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+
+async function handleView(row: Required<CleanForm>) {
+  modalApi.setData({ id: row.id, readonly: true });
+  modalApi.open();
 }
 </script>

@@ -143,9 +142,10 @@ function handleDownloadExcel() {
          <a-button
            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
-            type="primary" 
-            v-access:code="['property:clean:remove']" 
-            @click="handleMultiDelete">
+            type="primary"
+            v-access:code="['property:clean:remove']"
+            @click="handleMultiDelete"
+          >
            {{ $t('pages.common.delete') }}
          </a-button>
          <a-button
@@ -159,6 +159,7 @@ function handleDownloadExcel() {
      </template>
      <template #action="{ row }">
        <Space>
+          <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
          <ghost-button
            v-access:code="['property:clean:edit']"
            @click.stop="handleEdit(row)"
--- a/apps/web-antd/src/views/property/clean/cleanSettings/clean-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanSettings/clean-modal.vue
@@ -14,7 +14,9 @@ import { modalSchema } from './data';
 const emit = defineEmits<{ reload: [] }>();

 const isUpdate = ref(false);
+const isReadonly = ref(false);
 const title = computed(() => {
+  if (isReadonly.value) return '详情';
  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });

@@ -27,7 +29,10 @@ const [BasicForm, formApi] = useVbenForm({
    // 通用配置项 会影响到所有表单项
    componentProps: {
      class: 'w-full',
-    }
+      get disabled() {
+        return isReadonly.value;
+      },
+    },
  },
  schema: modalSchema(),
  showDefaultActions: false,
@@ -53,21 +58,32 @@ const [BasicModal, modalApi] = useVbenModal({
      return null;
    }
    modalApi.modalLoading(true);
-
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await cleanInfo(id);
-      await formApi.setValues(record);
+    try {
+      const { id, readonly } = modalApi.getData() as {
+        id?: number | string;
+        readonly?: boolean;
+      };
+      isUpdate.value = !!id;
+      isReadonly.value = !!readonly;
+      if (isUpdate.value && id) {
+        const record = await cleanInfo(id);
+        await formApi.setValues(record);
+      }
+      await markInitialized();
+    } catch (error) {
+      // 可以根据需要弹出错误提示
+      console.error(error);
+    } finally {
+      modalApi.modalLoading(false);
    }
-    await markInitialized();
-
-    modalApi.modalLoading(false);
  },
 });

 async function handleConfirm() {
+  if (isReadonly.value) {
+    modalApi.close();
+    return;
+  }
  try {
    modalApi.lock(true);
    const { valid } = await formApi.validate();
@@ -98,4 +114,15 @@ async function handleClosed() {
    <BasicForm />
  </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgb(0 0 0 / 65%) !important;

+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</style>
--- a/apps/web-antd/src/views/property/clean/cleanSettings/data.ts
+++ b/apps/web-antd/src/views/property/clean/cleanSettings/data.ts
@@ -1,14 +1,12 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';

-
 export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'name',
    label: '劳务名称',
  },
-
  {
    component: 'Input',
    fieldName: 'method',
@@ -18,7 +16,7 @@ export const querySchema: FormSchemaGetter = () => [
    component: 'Select',
    fieldName: 'stater',
    label: '状态',
-     componentProps: {
+    componentProps: {
      options: [
        { label: '下架', value: 0 },
        { label: '上架', value: 1 },
@@ -34,7 +32,8 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '序号',
    field: 'id',
-        slots: {
+    width: '60',
+    slots: {
      default: ({ rowIndex }) => {
        return (rowIndex + 1).toString();
      },
@@ -43,17 +42,17 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '劳务名称',
    field: 'name',
-    width:'120'
+    width: '120',
  },
  {
    title: '计量单位',
    field: 'measure',
-        width:'120'
+    width: '120',
  },
  {
    title: '计算方式',
    field: 'method',
-        width:'120'
+    width: '120',
  },
  {
    title: '申报单价含税（元）',
@@ -63,30 +62,30 @@ export const columns: VxeGridProps['columns'] = [
  {
    title: '保洁频率',
    field: 'frequency',
-        width:'120'
+    width: '120',
  },
  // {
  //   title: '保洁内容',
  //   field: 'standard',
  // },
-    {
+  {
    title: '保洁标准',
    field: 'standard',
-     width:'200'
+    width: '200',
  },
  {
    title: '备注',
    field: 'remark',
-         width:'200'
+    width: '200',
  },
  {
    title: '状态',
    field: 'stater',
-         width:'120',
+    width: '120',
    slots: {
-      default: ({ row }) => row.stater === 1 ? '上架' : '下架',
+      default: ({ row }) => (row.stater === 1 ? '上架' : '下架'),
    },
-  },  
+  },
  // {
  //   title: '创建时间',
  //   field: 'stater',
@@ -147,7 +146,7 @@ export const modalSchema: FormSchemaGetter = () => [
  //   component: 'Input',
  //   rules: 'required',
  // },
-    {
+  {
    label: '保洁标准',
    fieldName: 'standard',
    component: 'Input',
@@ -175,7 +174,7 @@ export const modalSchema: FormSchemaGetter = () => [
  //   },
  //   rules: 'required',
  // },
-      {
+  {
    label: '状态',
    fieldName: 'stater',
    component: 'Select',
--- a/apps/web-antd/src/views/property/clean/cleanSettings/index.vue
+++ b/apps/web-antd/src/views/property/clean/cleanSettings/index.vue
@@ -1,26 +1,16 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben/types';
+import type { VbenFormProps } from '@vben/common-ui';

-import { ref } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { CleanForm } from '#/api/property/clean/model';

-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';

 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';

-import {   
-  useVbenVxeGrid,
-  vxeCheckboxChecked,
-  type VxeGridProps 
-} from '#/adapter/vxe-table';
-
-import {
-  cleanExport,
-  cleanList,
-  cleanRemove,
-} from '#/api/property/clean';
-import type { CleanForm } from '#/api/property/clean/model';
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
+import { cleanExport, cleanList, cleanRemove } from '#/api/property/clean';
 import { commonDownloadExcel } from '#/utils/file/download';

 import cleanModal from './clean-modal.vue';
@@ -28,7 +18,8 @@ import { columns, querySchema } from './data';

 const formOptions: VbenFormProps = {
  commonConfig: {
-    labelWidth: 120,    componentProps: {
+    labelWidth: 120,
+    componentProps: {
      allowClear: true,
    },
  },
@@ -75,7 +66,7 @@ const gridOptions: VxeGridProps = {
    keyField: 'id',
  },
  // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-clean-index'
+  id: 'property-clean-index',
 };

 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -102,6 +93,11 @@ async function handleDelete(row: Required<CleanForm>) {
  await tableApi.query();
 }

+async function handleView(row: Required<CleanForm>) {
+  modalApi.setData({ id: row.id, readonly: true });
+  modalApi.open();
+}
+
 function handleMultiDelete() {
  const rows = tableApi.grid.getCheckboxRecords();
  const ids = rows.map((row: Required<CleanForm>) => row.id);
@@ -117,9 +113,14 @@ function handleMultiDelete() {
 }

 function handleDownloadExcel() {
-  commonDownloadExcel(cleanExport, '保洁管理数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
+  commonDownloadExcel(
+    cleanExport,
+    '保洁管理数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
 }
 </script>

@@ -137,9 +138,10 @@ function handleDownloadExcel() {
          <a-button
            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
-            type="primary" 
-            v-access:code="['property:clean:remove']" 
-            @click="handleMultiDelete">
+            type="primary"
+            v-access:code="['property:clean:remove']"
+            @click="handleMultiDelete"
+          >
            {{ $t('pages.common.delete') }}
          </a-button>
          <a-button
@@ -153,6 +155,7 @@ function handleDownloadExcel() {
      </template>
      <template #action="{ row }">
        <Space>
+          <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
          <ghost-button
            v-access:code="['property:clean:edit']"
            @click.stop="handleEdit(row)"
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
 import { Button } from 'ant-design-vue';
-import { ref, onMounted } from 'vue';
-import { EchartsUI, useEcharts, type EchartsUIType } from '@vben/plugins/echarts';

 const orderLineRef = ref<EchartsUIType>();
 const leasePieRef = ref<EchartsUIType>();
@@ -12,10 +16,17 @@ const maintenanceQualityScoresPeiRef = ref<EchartsUIType>();

 const { renderEcharts } = useEcharts(orderLineRef);
 const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef);
-const {renderEcharts: renderCustomerTypesBar} = useEcharts(customerTypesBarRef);
-const {renderEcharts: renderCustomerRenewalLine} = useEcharts(customerRenewalLineRef);
-const {renderEcharts: renderConservationTasksBar} = useEcharts(conservationTasksBarRef);
-const {renderEcharts: renderMaintenanceQualityScoresPei} = useEcharts(maintenanceQualityScoresPeiRef);
+const { renderEcharts: renderCustomerTypesBar } =
+  useEcharts(customerTypesBarRef);
+const { renderEcharts: renderCustomerRenewalLine } = useEcharts(
+  customerRenewalLineRef,
+);
+const { renderEcharts: renderConservationTasksBar } = useEcharts(
+  conservationTasksBarRef,
+);
+const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
+  maintenanceQualityScoresPeiRef,
+);

 onMounted(() => {
  renderEcharts({
@@ -85,7 +96,7 @@ onMounted(() => {
    ],
  });
  renderCustomerRenewalLine({
-     title: { text: '客户续租率趋势' },
+    title: { text: '客户续租率趋势' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
@@ -103,191 +114,234 @@ onMounted(() => {
    ],
  });
  renderConservationTasksBar({
-  title: { text: '养护任务完成情况' },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'shadow' }
-  },
-  legend: {
-    data: ['计划任务数', '已完成数', '完成率']
-  },
-  xAxis: [
-    {
-      type: 'category',
-      data: ['朝阳区', '海淀区', '西城区', '东城区']
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value',
-      name: '任务数',
-      min: 0,
-      max: 200,
-      position: 'left'
+    title: { text: '养护任务完成情况' },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
    },
-    {
-      type: 'value',
-      name: '完成率',
-      min: 0,
-      max: 100,
-      position: 'right',
-      axisLabel: {
-        formatter: '{value}%'
-      }
-    }
-  ],
-  series: [
-    {
-      name: '计划任务数',
-      type: 'bar',
-      data: [156, 140, 130, 120]
+    legend: {
+      data: ['计划任务数', '已完成数', '完成率'],
    },
-    {
-      name: '已完成数',
-      type: 'bar',
-      data: [152, 135, 125, 110]
-    },
-    {
-      name: '完成率',
-      type: 'line',
-      yAxisIndex: 1,
-      data: [97.4, 96.4, 96.2, 91.7]
-    }
-  ]
+    xAxis: [
+      {
+        type: 'category',
+        data: ['朝阳区', '海淀区', '西城区', '东城区'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '任务数',
+        min: 0,
+        max: 200,
+        position: 'left',
+      },
+      {
+        type: 'value',
+        name: '完成率',
+        min: 0,
+        max: 100,
+        position: 'right',
+        axisLabel: {
+          formatter: '{value}%',
+        },
+      },
+    ],
+    series: [
+      {
+        name: '计划任务数',
+        type: 'bar',
+        data: [156, 140, 130, 120],
+      },
+      {
+        name: '已完成数',
+        type: 'bar',
+        data: [152, 135, 125, 110],
+      },
+      {
+        name: '完成率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [97.4, 96.4, 96.2, 91.7],
+      },
+    ],
  });
  renderMaintenanceQualityScoresPei({
-  title: { text: '养护质量评分分布', left: 'center' },
-  tooltip: {
-    trigger: 'item',
-    formatter: '{b} : {d}%'
-  },
-  legend: {
-    orient: 'horizontal',
-    left: 'center',
-    bottom: 10,
-    data: ['一星', '两星', '三星', '四星', '五星']
-  },
-  series: [
-    {
-      name: '评分',
-      type: 'pie',
-      radius: '60%',
-      center: ['50%', '50%'],
-      data: [
-        { value: 12.43, name: '一星' },
-        { value: 12.26, name: '两星' },
-        { value: 16.87, name: '三星' },
-        { value: 25.75, name: '四星' },
-        { value: 32.68, name: '五星' }
-      ],
-      label: {
-        formatter: '{b} {d}%',
-        show: true
-      }
-    }
-  ]
-});
+    title: { text: '养护质量评分分布', left: 'center' },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {d}%',
+    },
+    legend: {
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 10,
+      data: ['一星', '两星', '三星', '四星', '五星'],
+    },
+    series: [
+      {
+        name: '评分',
+        type: 'pie',
+        radius: '60%',
+        center: ['50%', '50%'],
+        data: [
+          { value: 12.43, name: '一星' },
+          { value: 12.26, name: '两星' },
+          { value: 16.87, name: '三星' },
+          { value: 25.75, name: '四星' },
+          { value: 32.68, name: '五星' },
+        ],
+        label: {
+          formatter: '{b} {d}%',
+          show: true,
+        },
+      },
+    ],
+  });
 });
 </script>
 <template>
  <div class="main">
    <div class="box">
-        <div class="title">
-            <div class="title-text">绿植租赁业务统计报表：</div>
-            <div class="title-operate">
-                <div class="export">
-                    <Button size="large" style="background-color: #22C55E; color: #fff;">导出数据</Button>
-                </div>
-            </div>
+      <div class="title">
+        <div class="title-text">绿植租赁业务统计报表：</div>
+        <div class="title-operate">
+          <div class="export">
+            <Button size="large" style="color: #fff; background-color: #22c55e">
+              导出数据
+            </Button>
+          </div>
        </div>
-        <div class="content">
-            <div class="row">
-            </div>
-            <div class="row-first">
-                <div class="item1">
-                <EchartsUI ref="orderLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
-                </div>
-                <div class="item2">
-                  <EchartsUI ref="leasePieRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
-                </div>
-            </div>
-            <div class="row-second">
-                <div class="item1">
-                <EchartsUI ref="customerTypesBarRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
-                </div>
-                <div class="item2">
-                <EchartsUI ref="customerRenewalLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" />
-                </div>
-            </div>
-            <div class="row-third">
-              <EchartsUI ref="conservationTasksBarRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
-            </div>
-            <div class="row-fouth">
-              <EchartsUI ref="maintenanceQualityScoresPeiRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
-            </div>
+      </div>
+      <div class="content">
+        <div class="row"></div>
+        <div class="row-first">
+          <div class="item1">
+            <EchartsUI
+              ref="orderLineRef"
+              height="350px"
+              width="100%"
+              style="background: #fff; border-radius: 8px"
+            />
+          </div>
+          <div class="item2">
+            <EchartsUI
+              ref="leasePieRef"
+              height="350px"
+              width="100%"
+              style="background: #fff; border-radius: 8px"
+            />
+          </div>
        </div>
+        <div class="row-second">
+          <div class="item1">
+            <EchartsUI
+              ref="customerTypesBarRef"
+              height="350px"
+              width="100%"
+              style="background: #fff; border-radius: 8px"
+            />
+          </div>
+          <div class="item2">
+            <EchartsUI
+              ref="customerRenewalLineRef"
+              height="350px"
+              width="100%"
+              style="background: #fff; border-radius: 8px"
+            />
+          </div>
+        </div>
+        <div class="row-third">
+          <EchartsUI
+            ref="conservationTasksBarRef"
+            height="100%"
+            width="100%"
+            style="background: #fff; border-radius: 8px"
+          />
+        </div>
+        <div class="row-fouth">
+          <EchartsUI
+            ref="maintenanceQualityScoresPeiRef"
+            height="100%"
+            width="100%"
+            style="background: #fff; border-radius: 8px"
+          />
+        </div>
+      </div>
    </div>
-    
  </div>
 </template>
 <style lang="scss" scoped>
 .main {
  width: 100%;
-  .box{
-    margin: 40px;
+
+  .box {
    height: 100%;
-    .title{
+    margin: 40px;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+
+      .title-text {
+        font-size: 25px;
+        font-weight: bold;
+      }
+
+      .title-operate {
+        display: flex;
+
+        .calendar {
+        }
+
+        .export {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .content {
+      flex: 1;
+      height: 100%;
+      padding: 10px;
+      background-color: #962020;
+
+      .row {
        display: flex;
        justify-content: space-between;
-        .title-text{
-            font-size: 25px;
-            font-weight: bold;
-        }
-        .title-operate{
-            display: flex;
-            .calendar{
-            }
-            .export{
-                margin-left: 20px;
-            }
-        }
-    }
-    .content{
-        flex:1;
-        padding: 10px;
-        background-color: #962020;
+      }
+
+      .row-first {
+        display: flex;
+        justify-content: space-between;
+        height: 400px;
+      }
+
+      .row-second {
+        display: flex;
+        justify-content: space-between;
+        height: 400px;
+      }
+
+      .row-third {
+        height: 400px;
+        margin-bottom: 50px;
+      }
+
+      .row-fouth {
+        height: 400px;
+      }
+
+      .item1 {
+        width: 45%;
        height: 100%;
-        .row{
-          display: flex;
-          justify-content: space-between;
-        }
-        .row-first{
-            display: flex;
-            justify-content: space-between;
-            height: 400px;      
-         }
-        .row-second{
-            display: flex;
-            justify-content: space-between;
-            height: 400px;
-        }
-        .row-third{
-            height: 400px;
-            margin-bottom: 50px;
-        }
-        .row-fouth{
-            height: 400px;
-        }
-        .item1{
-          width: 45%;
-          height: 100%;
-        }
-        .item2{
-            width: 50%;
-            height: 100%;
-        } 
-        
+      }
+
+      .item2 {
+        width: 50%;
+        height: 100%;
+      }
    }
  }
 }
-</style>
+</style>