feat: 前端完成保洁订单流程

apps/web-antd/src/api/property/clean_order/model.d.ts

@@ -77,7 +77,7 @@ export interface Clean_orderForm extends BaseEntity {
   /**
    * 主键
    */
-  id?: string | number;
+  id?: string;
 
   /**
    * 位置

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

@@ -7,16 +7,24 @@ import { useVbenForm } from '#/adapter/form';
 import { cleanList } from '#/api/property/clean';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
-const emit = defineEmits<{ reload: [data: any] }>();
+const emit = defineEmits<{ reload: [data: any], editReload: [data: any] }>();
 
 const isUpdate = ref(false);
+const isAdd = ref(false);
+const isView = ref(false);
 const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+  if(isAdd.value){
+    return $t('pages.common.add');
+  }else if(isView.value){
+    return '查看';
+  }else{
+    return $t('pages.common.edit');
+  }
 });
 
 // 缓存清洁服务数据
 let cleanListData: any[] = [];
-
+const detailIndex = ref<number>();//传index对应详情的某条数据,对该条数据进行编辑修改
 const detailSchema = [
   {
     label: '劳务名称',
@@ -50,7 +58,7 @@ const detailSchema = [
     },
     rules: 'required',
   },
-      {
+  {
     label: '保洁面积',
     fieldName: 'area',
     component: 'InputNumber',
@@ -132,7 +140,6 @@ const detailSchema = [
     },
     rules: 'required',
   },
-
   {
     label: '合计费用',
     fieldName: 'sumPeices',
@@ -170,11 +177,20 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-    const { id } = modalApi.getData() as { id?: number | string };
+    const data = modalApi.getData();
-    isUpdate.value = !!id;
+    detailIndex.value = modalApi.getData().index;
-    if (isUpdate.value && id) {
+    if(!data || Object.keys(data).length === 0){
-      // TODO: 获取详情数据
+    //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);
   },
@@ -188,15 +204,16 @@ async function handleConfirm() {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
-    
     // 获取选中的服务名称
     const selectedService = cleanListData.find(item => item.id === data.name);
     if (selectedService) {
       data.name = selectedService.name;
       data.id = selectedService.id
     }
-    console.log(data);
+    //index>=0时表示编辑
-    
+    if (detailIndex.value! >= 0) {
+      emit('editReload', data);
+    }
     handleClosed()
     await markInitialized();
     emit('reload', data);
@@ -209,6 +226,9 @@ async function handleConfirm() {
 }
 
 async function handleClosed() {
+  isAdd.value = false;
+  isView.value = false;
+  isUpdate.value = false;
   await formApi.resetForm();
   resetInitialized();
 }
@@ -216,9 +236,10 @@ async function handleClosed() {
 
 <template>
   <BasicModal :title="title">
-    <BasicForm />
+    <BasicForm >
+    </BasicForm>
   </BasicModal>
-</template> 
+</template>
 <style scoped>
 /* 使用 :deep() 穿透 scoped 样式，影响子组件 */
 :deep(.ant-input[disabled]),
@@ -229,4 +250,4 @@ async function handleClosed() {
   /* 有些浏览器需要这个来覆盖默认颜色 */
   -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
 }
-</style>
+</style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { CleanVO } from '#/api/property/clean/model';
-
+import { h } from 'vue';
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -40,7 +40,7 @@ const totalSumPeices = computed(() => {
 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');
 });
 
 // 用来缓存 cleanList 的完整数据
@@ -50,7 +50,8 @@ let cleanListData: CleanVO[] = [];
 let unitListData: { id: any; name: string }[] = [];
 
 const editUnitId = ref('');
-const editCleanId = ref('');
+const editCleanOrderId = ref('');
+const detailModal = ref(null);
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
@@ -117,20 +118,27 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    // 查询服务地址树形结构
     setupCommunitySelect()
     modalApi.modalLoading(true);
     const { id, readonly } = modalApi.getData() as {
-      id?: number | string;
+      id?: string;
       readonly?: boolean;
     };
-    isUpdate.value = !!id;
+    editCleanOrderId.value = id || '';
     isReadonly.value = !!readonly;
-    if (isUpdate.value && id) {
+    //判断是否是编辑状态需要先判断是否是只读状态
+    if(isReadonly.value){
+      isUpdate.value = false;
+    }else{
+      isUpdate.value = !!id;
+    }
+    if ((isUpdate.value || isReadonly.value) && 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 || '';
-      editCleanId.value = record.cleanId || '';
+      detailTable.value = record.cleanList || [];
       await formApi.setValues(record);
     }
     await markInitialized();
@@ -245,11 +253,11 @@ const detailColumns = [
     dataIndex: 'sumPeices',
     key: 'sumPeices',
   },
-  {
+      {
-    title: '操作',
+        title: '操作',
-    key: 'action',
+        key: 'action',
-    fixed: 'right' as const,
+        fixed: 'right' as const,
-  },
+      },
 ];
 
 const [DetailTable, detailTableApi] = useVbenVxeGrid({
@@ -265,20 +273,32 @@ 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) {
-  console.log(record, index);
   detailTable.value.splice(index, 1);
 }
 
-async function handleConfirm() {
+function handleViewDetail(record: any) {
-  console.log('handleConfirm123123123');
+  detailModalApi.setData({ ...record, readonly: true });
+  detailModalApi.open();
+}
 
+function handleEditDetail(record: any, index: number) {
+  detailModalApi.setData({ ...record, index, readonly: false });
+  detailModalApi.open();
+}
+
+async function handleConfirm() {
   if (isReadonly.value) {
+    detailTable.value = [];
     modalApi.close();
     return;
   }
@@ -289,7 +309,6 @@ async function handleConfirm() {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
-    console.log(data);
     // 单位数据缓存
     if (unitListData.length === 0) {
       const res = await resident_unitList();
@@ -297,31 +316,16 @@ async function handleConfirm() {
     }
     // 劳务数据缓存 cleanListData 已有
     // 查找label
-    const unitObj = unitListData.find((item) => item.id === data.unit);
+    const unitObj = unitListData.find((item) => item.id === data.unitId);
-    console.log(unitObj,'unitObj');
-
     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
+    data.sumPeices = parseInt(totalSumPeices.value, 10);
-      ? cleanObj.id
-      : isUpdate.value
-        ? editCleanId.value
-        : '';
-
-        data.sumPeices = parseInt(totalSumPeices.value, 10);
-
     // 组装 cleanIds
     // data.cleanIds = detailTable.value.map((item: any) => item.id);
     data.cleanList = detailTable.value;
-    console.log(data);
+    isUpdate.value ?  await clean_orderUpdate({...data,id:editCleanOrderId.value}) : await clean_orderAdd(data);
-console.log(12037847120120);
-await clean_orderAdd(data)
-// isUpdate.value ?  await clean_orderUpdate(data) : await clean_orderAdd(data);
-    console.log('1231273');
-
     resetInitialized();
     emit('reload');
     modalApi.close();
@@ -334,6 +338,7 @@ await clean_orderAdd(data)
 
 async function handleClosed() {
   await formApi.resetForm();
+  detailTable.value = [];//清空详情表格
   resetInitialized();
 }
 // 获取服务地址
@@ -343,9 +348,7 @@ async function setupCommunitySelect() {
   // addFullName(areaList, 'areaName', ' / ');
   const splitStr = '/';
   handleNode(areaList, 'label', splitStr, function (node: any) {
-    if (node.level != 5) {
+    
-      node.disabled = true;
-    }
   });
   formApi.updateSchema([
     {
@@ -381,8 +384,8 @@ async function setupCommunitySelect() {
     <!-- 添加订单详情部分 -->
     <div class="mt-4">
       <div class="mb-2 flex items-center justify-between">
-        <h3 class="text-lg font-medium">添加保洁订单详情</h3>
+        <h3 class="text-lg font-medium">{{ isUpdate ? '编辑保洁订单详情' : isReadonly ? '查看保洁订单详情' : '添加保洁订单详情' }} </h3>
-        <a-button type="primary" @click="handleAddDetail">
+        <a-button v-if="!isReadonly" type="primary" @click="handleAddDetail">
           {{ $t('pages.common.add') }}
         </a-button>
       </div>
@@ -396,15 +399,22 @@ async function setupCommunitySelect() {
             {{ index + 1 }}
           </template>
           <template v-else-if="column.key === 'action'">
-            <Button danger @click="handleDeleteDetail(record, index)">
+            <template v-if="isReadonly">
-              删除
+              <Button @click="handleViewDetail(record)">查看</Button>
-            </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>
-    <CleanDetailModal @reload="handleDetailReload" />
+    <CleanDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
   </BasicModal>
 </template>
 

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

@@ -3,52 +3,34 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { resident_unitList } from '#/api/property/resident/unit';
 import { useCleanStore } from '#/store';
+import type { FormSchema } from '../../../../../../../packages/@core/ui-kit/form-ui/src/types';
 
 const cleanStore = useCleanStore();
 
-export const querySchema: FormSchemaGetter = () => [
+export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
-  {
+    {
-    component: 'Input',
-    fieldName: 'location',
     label: '服务地址',
+    component: 'TreeSelect',
+    fieldName: 'location',
+    componentProps: {
+      treeData: areaList,
+      fieldNames: {
+        label: 'label',
+        value: 'id',
+        children: 'children',
+      },
+      placeholder: '请选择服务地址',
+      showSearch: true,
+      treeDefaultExpandAll: true,
+    },
   },
   //   {
-  //   label: '服务地址（房间号）',
+  //   label: '服务地址',
   //   component: 'TreeSelect',
   //   defaultValue: undefined,
   //   fieldName: 'location',
   //   rules: 'required',
   // },
-  // {
-  //   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',
@@ -91,21 +73,6 @@ export const columns: VxeGridProps['columns'] = [
     field: 'location',
     width: '180',
   },
-  // {
-  //   title: '服务面积（㎡）',
-  //   field: 'area',
-  //   width: 'auto',
-  // },
-  // {
-  //   title: '劳务名称',
-  //   field: 'name',
-  //   width: 'auto',
-  // },
-  // {
-  //   title: '申报单价含税（元）',
-  //   field: 'prices',
-  //   width: 'auto',
-  // },
   {
     title: '合计费用（元）',
     field: 'sumPeices',
@@ -168,69 +135,11 @@ export const modalSchema: FormSchemaGetter = () => [
   },
   {
     label: '服务地址（房间号）',
-    component: 'Input',
+    component: 'TreeSelect',
     defaultValue: undefined,
     fieldName: 'location',
     rules: 'required',
   },
-  // {
-  //   label: '服务面积（㎡）',
-  //   fieldName: 'area',
-  //   component: 'Input',
-  //   rules: 'required',
-  // },
-  // {
-  //   label: '劳务名称',
-  //   fieldName: 'name',
-  //   component: 'ApiSelect',
-  //   componentProps: {
-  //     api: cleanList,
-  //     resultField: 'rows',
-  //     labelField: 'name',
-  //     valueField: 'id',
-  //   },
-  //   rules: 'required',
-  // },
-  // {
-  //   label: '服务单价',
-  //   fieldName: 'prices',
-  //   component: 'Input',
-  //   rules: 'required',
-  //   componentProps: {
-  //     placeholder: '',
-  //     disabled: true,
-  //   },
-  // },
-  // {
-  //   label: '保洁频率',
-  //   fieldName: 'frequency',
-  //   component: 'Input',
-  //   rules: 'required',
-  //   componentProps: {
-  //     placeholder: '',
-  //     disabled: true,
-  //   },
-  // },
-  // {
-  //   label: '保洁内容',
-  //   fieldName: 'standard',
-  //   component: 'Input',
-  //   rules: 'required',
-  //   componentProps: {
-  //     placeholder: '',
-  //     disabled: true,
-  //   },
-  // },
-  //   {
-  //   label: '保洁标准',
-  //   fieldName: 'peices',
-  //   component: 'Input',
-  //   rules: 'required',
-  //   componentProps: {
-  //     placeholder: '',
-  //     disabled: true,
-  //   },
-  // },
   {
     label: '开始时间',
     fieldName: 'starTime',
@@ -267,7 +176,7 @@ export const modalSchema: FormSchemaGetter = () => [
   },
   {
     label: '申请单位',
-    fieldName: 'unit',
+    fieldName: 'unitId',
     component: 'ApiSelect',
     componentProps: {
       api: resident_unitList,

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

@@ -19,7 +19,12 @@ import { commonDownloadExcel } from '#/utils/file/download';
 
 import cleanModal from './clean-modal.vue';
 import { columns, querySchema } from './data';
-
+import { onMounted, ref } from 'vue';
+import { communityTree } from '#/api/property/community';
+const areaList = ref<any>(null);
+onMounted(async () => {
+  areaList.value = await communityTree(5);
+});
 const formOptions: VbenFormProps = {
   commonConfig: {
     labelWidth: 120,
@@ -27,7 +32,7 @@ const formOptions: VbenFormProps = {
       allowClear: true,
     },
   },
-  schema: querySchema(),
+  schema: querySchema(areaList.value),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
   // 不需要直接删除