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

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 };
-    isUpdate.value = !!id;
-    if (isUpdate.value && id) {
-      // TODO: 获取详情数据
+    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);
   },
@@ -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>