From 33f2197ea897cd3f2743ed743ebd22fc5c4cb20e Mon Sep 17 00:00:00 2001
From: fyy <2717885210@qq.com>
Date: Tue, 1 Jul 2025 17:48:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9E=84=E6=9E=B6=E7=BB=BF=E6=A4=8D?=
 =?UTF-8?q?=E7=A7=9F=E8=B5=81=E6=96=B9=E6=A1=88=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../clean/cleanOrders/clean-detail-modal.vue  |   2 +
 .../clean/cleanOrders/clean-modal.vue         |   6 +-
 .../views/property/clean/cleanOrders/data.ts  |  41 +--
 .../property/clean/cleanOrders/index.vue      |   7 +-
 .../leasePogramManagement/data.ts             |  35 ++-
 .../leasePogramManagement/index.vue           |  22 +-
 .../rentalPlan-detial-modal.vue               | 238 ++++++++++++++++++
 .../rentalPlan-modal.vue                      | 128 ++++++++--
 8 files changed, 417 insertions(+), 62 deletions(-)

diff --git a/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue b/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue
index f8bca507..83cd446f 100644
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-detail-modal.vue
@@ -204,6 +204,8 @@ async function handleConfirm() {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
+    console.log(data);
+    
     // 获取选中的服务名称
     const selectedService = cleanListData.find(item => item.id === data.name);
     if (selectedService) {
diff --git a/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue b/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
index 35b1eeb1..a0e5f252 100644
--- a/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/clean-modal.vue
@@ -285,12 +285,12 @@ function handleEditDetailReload(data: any) {
 function handleDeleteDetail(record: any, index: number) {
   detailTable.value.splice(index, 1);
 }
-
+// 查看产品详情
 function handleViewDetail(record: any) {
   detailModalApi.setData({ ...record, readonly: true });
   detailModalApi.open();
 }
-
+// 编辑产品详情
 function handleEditDetail(record: any, index: number) {
   detailModalApi.setData({ ...record, index, readonly: false });
   detailModalApi.open();
@@ -348,7 +348,7 @@ async function setupCommunitySelect() {
   // addFullName(areaList, 'areaName', ' / ');
   const splitStr = '/';
   handleNode(areaList, 'label', splitStr, function (node: any) {
-    
+
   });
   formApi.updateSchema([
     {
diff --git a/apps/web-antd/src/views/property/clean/cleanOrders/data.ts b/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
index 98358eff..e2ba796c 100644
--- a/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/data.ts
@@ -8,22 +8,22 @@ import type { FormSchema } from '../../../../../../../packages/@core/ui-kit/form
 const cleanStore = useCleanStore();
 
 export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
-    {
-    label: '服务地址',
-    component: 'TreeSelect',
-    fieldName: 'location',
-    componentProps: {
-      treeData: areaList,
-      fieldNames: {
-        label: 'label',
-        value: 'id',
-        children: 'children',
-      },
-      placeholder: '请选择服务地址',
-      showSearch: true,
-      treeDefaultExpandAll: true,
-    },
-  },
+  //   {
+  //   label: '服务地址',
+  //   component: 'TreeSelect',
+  //   fieldName: 'location',
+  //   componentProps: {
+  //     treeData: areaList || [],
+  //     fieldNames: {
+  //       label: 'label',
+  //       value: 'id',
+  //       children: 'children',
+  //     },
+  //     placeholder: '请选择服务地址',
+  //     showSearch: true,
+  //     treeDefaultExpandAll: true,
+  //   },
+  // },
   //   {
   //   label: '服务地址',
   //   component: 'TreeSelect',
@@ -83,7 +83,7 @@ export const columns: VxeGridProps['columns'] = [
     field: 'payState',
     width: '120',
     slots: {
-      default: ({ row }) => (row.stater === 1 ? '已支付' : '待支付'),
+      default: ({ row }) => (row.state === 1 ? '已支付' : '待支付'),
     },
   },
   {
@@ -110,6 +110,12 @@ export const columns: VxeGridProps['columns'] = [
     title: '联系电话',
     field: 'phone',
     width: 'auto',
+  },
+    {
+    title: '订单状态',
+    field: 'state',
+    width: 'auto',
+    slots: { default: 'state' },
   },
   //   {
   //   title: '提交时间',
@@ -121,6 +127,7 @@ export const columns: VxeGridProps['columns'] = [
     slots: { default: 'action' },
     title: '操作',
   },
+
 ];
 
 export const modalSchema: FormSchemaGetter = () => [
diff --git a/apps/web-antd/src/views/property/clean/cleanOrders/index.vue b/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
index 8eb9712e..82422130 100644
--- a/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
+++ b/apps/web-antd/src/views/property/clean/cleanOrders/index.vue
@@ -7,7 +7,7 @@ import type { CleanForm } from '#/api/property/clean/model';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
@@ -162,6 +162,11 @@ async function handleView(row: Required<CleanForm>) {
           </a-button>
         </Space>
       </template>
+      <template #state="{ row }">
+        <Tag v-if="row.state === 1" color="success">审核通过</Tag>
+        <Tag v-else-if="row.state === 2" color="error">审核不通过</Tag>
+        <Tag v-else color="default">未审核</Tag>
+      </template>
       <template #action="{ row }">
         <Space>
           <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
diff --git a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/data.ts b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/data.ts
index 9453c88a..2cb2cbf6 100644
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/data.ts
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/data.ts
@@ -41,6 +41,11 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '序号',
     field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
   },
   {
     title: '方案名称',
@@ -57,10 +62,6 @@ export const columns: VxeGridProps['columns'] = [
     {
     title: '植物组合包',
     field: 'scene',
-  },
-    {
-    title: '基础服务项',
-    field: 'scene',
   },
   {
     title: '价格',
@@ -70,10 +71,7 @@ export const columns: VxeGridProps['columns'] = [
     title: '状态',
     field: 'state',
     slots: {
-      default: ({ row }) => {
-        // 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
-        return renderDict(row.state, 'wy_kg');
-      },
+      default: 'state'
     },
   },
   {
@@ -119,16 +117,6 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '价格体系',
     fieldName: 'price',
     component: 'Input',
-  },
-    {
-    label: '基础服务项',
-    fieldName: 'price',
-    component: 'Input',
-  },
-      {
-    label: '优惠活动',
-    fieldName: 'price',
-    component: 'Input',
   },
   {
     label: '状态',
@@ -136,7 +124,16 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Select',
     componentProps: {
       // 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
-      options: getDictOptions('wy_kg'),
+      options: [
+        {
+          label: '待支付',
+          value: 0,
+        },
+        {
+          label: '已支付',
+          value: 1,
+        },
+      ],
     },
     rules: 'selectRequired',
   },
diff --git a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/index.vue b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/index.vue
index 808bea8a..2e083765 100644
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/index.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/index.vue
@@ -6,13 +6,13 @@ import { ref } from 'vue';
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Modal, Popconfirm, Space,Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import {   
+import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
-  type VxeGridProps 
+  type VxeGridProps
 } from '#/adapter/vxe-table';
 
 import {
@@ -102,7 +102,10 @@ async function handleDelete(row: Required<RentalPlanForm>) {
   await rentalPlanRemove(row.id);
   await tableApi.query();
 }
-
+async function handleView(row: Required<RentalPlanForm>) {
+  modalApi.setData({ id: row.id, readonly: true,ab:"wegqw" });
+  modalApi.open();
+}
 function handleMultiDelete() {
   const rows = tableApi.grid.getCheckboxRecords();
   const ids = rows.map((row: Required<RentalPlanForm>) => row.id);
@@ -122,6 +125,7 @@ function handleDownloadExcel() {
     fieldMappingTime: formOptions.fieldMappingTime,
   });
 }
+
 </script>
 
 <template>
@@ -138,8 +142,8 @@ function handleDownloadExcel() {
           <a-button
             :disabled="!vxeCheckboxChecked(tableApi)"
             danger
-            type="primary" 
-            v-access:code="['property:rentalPlan:remove']" 
+            type="primary"
+            v-access:code="['property:rentalPlan:remove']"
             @click="handleMultiDelete">
             {{ $t('pages.common.delete') }}
           </a-button>
@@ -152,8 +156,14 @@ function handleDownloadExcel() {
           </a-button>
         </Space>
       </template>
+      <template #state="{ row }">
+        <Tag v-if="row.state === 0" color="error">禁用</Tag>
+        <Tag v-else-if="row.state === 1" color="success">启用</Tag>
+        <Tag v-else color="default">未审核</Tag>
+      </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
           <ghost-button
             v-access:code="['property:rentalPlan:edit']"
             @click.stop="handleEdit(row)"
diff --git a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-detial-modal.vue b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-detial-modal.vue
index e69de29b..5a90234b 100644
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-detial-modal.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-detial-modal.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { plantsProductList } from '#/api/property/productManagement';
+
+const emit = defineEmits<{ reload: [data: any], editReload: [data: any] }>();
+
+const isUpdate = ref(false);
+const isAdd = ref(false);
+const isView = ref(false);
+const title = computed(() => {
+  if(isAdd.value){
+    return $t('pages.common.add');
+  }else if(isView.value){
+    return '查看';
+  }else{
+    return $t('pages.common.edit');
+  }
+});
+
+// 缓存清洁服务数据
+let plantListData: any[] = [];
+const detailIndex = ref<number>();//传index对应详情的某条数据,对该条数据进行编辑修改
+const detailSchema = [
+  {
+    label: '产品名称',
+    fieldName: 'plantName',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const res = await plantsProductList({inventory:0});
+        plantListData = res.rows || [];
+        return res;
+      },
+      resultField: 'rows',
+      labelField: 'plantName',
+      valueField: 'id',
+      onChange: async (value: string) => {
+        console.log(value);
+
+        // 找到选中的服务数据
+        const selectedService = plantListData.find(item => item.id === value);
+        console.log(selectedService,'1203');
+
+        if (selectedService) {
+          // 自动填充其他字段
+          await formApi.setValues({
+            plantCode: selectedService.plantCode,
+            plantType: selectedService.plantType,
+            imgPath: selectedService.imgPath,
+            specification: selectedService.specification,
+            rent: selectedService.rent,
+            state: selectedService.state,
+            remark: selectedService.remark,
+          });
+        }
+      },
+    },
+    rules: 'required',
+  },
+  {
+    label: '产品编号',
+    fieldName: 'plantCode',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    rules: 'required',
+  },
+  {
+    label: '产品分类',
+    fieldName: 'plantType',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    rules: 'required',
+  },
+  {
+    label: '图片',
+    fieldName: 'imgPath',
+    component: 'InputNumber',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    label: '规格',
+    fieldName: 'specification',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    rules: 'required',
+  },
+  {
+    label: '租金',
+    fieldName: 'rent',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    rules: 'required',
+  },
+
+  {
+    label: '状态',
+    fieldName: 'state',
+    component: 'Select',
+    componentProps: {
+      disabled: true,
+      options: [
+        { label: '上架', value: 1 },
+        { label: '下架', value: 0 },
+      ],
+    },
+    rules: 'required',
+  },
+    {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 120,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: detailSchema,
+  showDefaultActions: false,
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const data = modalApi.getData();
+    detailIndex.value = modalApi.getData().index;
+    if(!data || Object.keys(data).length === 0){
+    //modalApi.getData()为空时表示添加
+      isAdd.value = true;
+    }else if(detailIndex.value == undefined || detailIndex.value == null){
+    //不存在detailIndex.value时表示查看
+     isView.value = true;
+    }else{
+    //表示编辑
+     isUpdate.value = true;
+    }
+    // TODO: 获取详情数据
+    await formApi.setValues(modalApi.getData());
+    await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    console.log(data);
+
+    // 获取选中的产品
+    const selectedService = plantListData.find(item => item.id === data.plantName);
+    console.log(selectedService,'selectedService');
+    if (selectedService) {
+      data.plantName = selectedService.plantName;
+      data.id = selectedService.id
+    }
+    //index>=0时表示编辑
+    if (detailIndex.value! >= 0) {
+      emit('editReload', data);
+    }
+    handleClosed()
+    await markInitialized();
+    console.log(data);
+
+    emit('reload', data);
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  isAdd.value = false;
+  isView.value = false;
+  isUpdate.value = false;
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm >
+    </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: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-modal.vue b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-modal.vue
index 756a1ab2..afe4585e 100644
--- a/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-modal.vue
+++ b/apps/web-antd/src/views/property/greenPlantRentalManagement/leasePogramManagement/rentalPlan-modal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-
+import { Button, Table } from 'ant-design-vue';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
@@ -10,12 +10,13 @@ import { rentalPlanAdd, rentalPlanInfo, rentalPlanUpdate } from '#/api/property/
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
-
+import productDetailModal from './rentalPlan-detial-modal.vue';
 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');
+    return isUpdate.value ? $t('pages.common.edit') : isReadonly.value ? '详情' : $t('pages.common.add');
 });
 
 const [BasicForm, formApi] = useVbenForm({
@@ -25,9 +26,10 @@ const [BasicForm, formApi] = useVbenForm({
     // 默认label宽度 px
     labelWidth: 120,
     // 通用配置项 会影响到所有表单项
-    componentProps: {
+    componentProps: computed(() => ({
       class: 'w-full',
-    }
+      disabled: isReadonly.value,
+    })),
   },
   schema: modalSchema(),
   showDefaultActions: false,
@@ -52,12 +54,20 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    console.log(isOpen);
+
     modalApi.modalLoading(true);
+    console.log(modalApi.getData(),'====================');
 
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
+    const { id, readonly } = modalApi.getData() as { id?: number | string, readonly?: boolean; };
+    isReadonly.value = !!readonly;
+    if(isReadonly.value){
+      isUpdate.value = false;
+    }else{
+      isUpdate.value = !!id;
+    }
+    // 查看与编辑时需要获取详情
+    if ((isUpdate.value || isReadonly.value) && id) {
       const record = await rentalPlanInfo(id);
       await formApi.setValues(record);
     }
@@ -66,6 +76,7 @@ const [BasicModal, modalApi] = useVbenModal({
     modalApi.modalLoading(false);
   },
 });
+const detailTable = ref<any>([]);
 
 async function handleConfirm() {
   try {
@@ -76,6 +87,10 @@ async function handleConfirm() {
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
+    console.log(data);
+    console.log(detailTable.value);
+
+    data.productIds = detailTable.value.map((item:any) => item.id);
     await (isUpdate.value ? rentalPlanUpdate(data) : rentalPlanAdd(data));
     resetInitialized();
     emit('reload');
@@ -88,9 +103,14 @@ async function handleConfirm() {
 }
 
 async function handleClosed() {
+  detailTable.value = [];
   await formApi.resetForm();
   resetInitialized();
 }
+const [ProductDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: productDetailModal,
+});
+
 const detailColumns = [
   { title: '序号', key: 'index' },
   { title: '产品编号', dataIndex: 'plantCode', key: 'plantCode' },
@@ -121,16 +141,43 @@ const detailColumns = [
     fixed: 'right' as const,
   },
 ];
+function handleAddDetail() {
+  detailModalApi.setData({});
+  detailModalApi.open();
+}
+//添加植物组合包产品
+function handleDetailReload (data: any) {
+  detailTable.value.push(data);
+}
+// 编辑植物组合包产品
+function handleEditDetailReload (data: any) {
+  detailTable.value[data.index] = data;
+
+}
+// 删除植物组合包产品
+function handleDeleteDetail(record: any, index: number) {
+  detailTable.value.splice(index, 1);
+}
+// 查看产品详情
+function handleViewDetail(record: any) {
+  detailModalApi.setData({ ...record, readonly: true });
+  detailModalApi.open();
+}
+// 编辑产品详情
+function handleEditDetail(record: any, index: number) {
+  detailModalApi.setData({ ...record, index, readonly: false });
+  detailModalApi.open();
+}
 </script>
 
 <template>
   <BasicModal :title="title">
     <BasicForm />
-        <!-- 添加订单详情部分、 -->
+        <!-- 添加产品部分、 -->
     <div class="mt-4">
       <div class="mb-2 flex items-center justify-between">
-        <h3 class="text-lg font-medium">添加保洁订单详情</h3>
-        <a-button type="primary" @click="handleAddDetail">
+        <h3 class="text-lg font-medium">{{ isUpdate ? '编辑植物组合包产品' : isReadonly ? '查看植物组合包产品' : '添加植物组合包产品' }} </h3>
+        <a-button v-if="!isReadonly" type="primary" @click="handleAddDetail">
           {{ $t('pages.common.add') }}
         </a-button>
       </div>
@@ -144,14 +191,63 @@ const detailColumns = [
             {{ index + 1 }}
           </template>
           <template v-else-if="column.key === 'action'">
-            <Button danger @click="handleDeleteDetail(record, index)">
-              删除
-            </Button>
+           <template v-if="isReadonly">
+              <Button @click="handleViewDetail(record)">查看</Button>
+            </template>
+            <template v-else >
+              <Button type="primary" size="small" style="margin-right: 5px;" @click="handleViewDetail(record)">查看</Button>
+              <Button type="primary" size="small" style="margin-right: 5px;" @click="handleEditDetail(record, index)">编辑</Button>
+              <Button danger size="small" @click="handleDeleteDetail(record, index)">
+                删除
+              </Button>
+            </template>
           </template>
         </template>
       </Table>
-      <div>费用合计：{{ totalSumPeices }}元</div>
+      <!-- <div>费用合计：{{ totalSumPeices }}元</div> -->
     </div>
+    <ProductDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
   </BasicModal>
 </template>
 
+<style scoped>
+.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;
+}
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item),
+:deep(.ant-picker-disabled .ant-picker-input > input) {
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</style>