by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/property/clean_order/model.d.ts vendored
View File

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

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

@ -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: '劳务名称',
@ -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,7 +236,8 @@ async function handleClosed() {
<template>
<BasicModal :title="title">
<BasicForm />
<BasicForm >
</BasicForm>
</BasicModal>
</template>
<style scoped>

84
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();
@ -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);
// 组装 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)">
<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>

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

@ -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,

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

@ -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时间格式 将一个字段映射为两个字段 搜索/导出会用到
// 不需要直接删除