by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fyy
2025-07-01 14:39:49 +08:00
parent 38267d7a4a
commit ea185bfcea
5 changed files with 118 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: '操作',
key: 'action',
fixed: 'right' as const,
},
{
title: '操作',
key: 'action',
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() {
console.log('handleConfirm123123123');
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();
}
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);
console.log(unitObj,'unitObj');
const unitObj = unitListData.find((item) => item.id === data.unitId);
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 = parseInt(totalSumPeices.value, 10);
data.sumPeices = parseInt(totalSumPeices.value, 10);
// 组装 cleanIds
// data.cleanIds = detailTable.value.map((item: any) => item.id);
data.cleanList = detailTable.value;
console.log(data);
console.log(12037847120120);
await clean_orderAdd(data)
// isUpdate.value ? await clean_orderUpdate(data) : await clean_orderAdd(data);
console.log('1231273');
isUpdate.value ? await clean_orderUpdate({...data,id:editCleanOrderId.value}) : await clean_orderAdd(data);
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>
<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>
@@ -396,15 +399,22 @@ async function setupCommunitySelect() {
{{ 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>
<CleanDetailModal @reload="handleDetailReload" />
<CleanDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
</BasicModal>
</template>