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-06-26 18:02:43 +08:00
parent 2b10dc8fa2
commit 730d8ca6f2
5 changed files with 533 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -193,7 +193,10 @@ async function handleConfirm() {
const selectedService = cleanListData.find(item => item.id === data.name);
if (selectedService) {
data.name = selectedService.name;
data.id = selectedService.id
}
console.log(data);
handleClosed()
await markInitialized();
emit('reload', data);

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

@@ -7,16 +7,24 @@ import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { cleanList } from '#/api/property/clean';
import { cleanAdd, cleanInfo, cleanUpdate, cleanList } from '#/api/property/clean';
import type { CleanVO } from '#/api/property/clean/model';
import { clean_orderAdd, clean_orderInfo, clean_orderUpdate } from '#/api/property/clean_order';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { resident_unitList } from '#/api/property/resident/unit';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import type { VxeGridProps } from '#/adapter/vxe-table';
import cleanDetailModal from './clean-detail-modal.vue';
import { Table, Button } from 'ant-design-vue';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const totalSumPeices = computed(() => {
return detailTable.value
.reduce((total: number, item: any) => total + (Number(item.sumPeices) || 0), 0)
.toFixed(2);
});
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
@@ -99,8 +107,9 @@ const [BasicModal, modalApi] = useVbenModal({
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await clean_orderInfo(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 || '';
@@ -112,6 +121,134 @@ const [BasicModal, modalApi] = useVbenModal({
},
});
// 添加订单详情表格配置
const detailGridOptions: VxeGridProps = {
height: '300px',
columns: [
{
title: '序号',
field: 'index',
width: 'auto',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '劳务名称',
field: 'name',
width: 'auto',
},
{
title: '计量单位',
field: 'measure',
width: 'auto',
},
{
title: '计算方式',
field: 'method',
width: 'auto',
},
{
title: '申报单价含税（元）',
field: 'peices',
width: 'auto',
},
{
title: '保洁频率',
field: 'frequency',
width: 'auto',
},
{
title: '保洁标准',
field: 'standard',
width: 'auto',
},
{
title: '备注',
field: 'remark',
width: 'auto',
},
{
title: '状态',
field: 'stater',
width: 'auto',
slots: {
default: ({ row }) => row.stater === 1 ? '启用' : '禁用',
},
},
{
title: '保洁面积',
field: 'area',
width: 'auto',
},
{
title: '合计费用',
field: 'sumPeices',
width: 'auto',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 'auto',
},
],
data: [],
};
const detailColumns = [
{ title: '序号', key: 'index', width: 'auto'},
{ title: '劳务名称', dataIndex: 'name', key: 'name', width: 'auto' },
{ title: '计量单位', dataIndex: 'measure', key: 'measure', width: 'auto' },
{ title: '计算方式', dataIndex: 'method', key: 'method', width: 'auto' },
{ title: '申报单价含税（元）', dataIndex: 'peices', key: 'peices' , width: 'auto'},
{ title: '保洁频率', dataIndex: 'frequency', key: 'frequency' , width: 'auto'},
{ title: '保洁标准', dataIndex: 'standard', key: 'standard' , width: 'auto'},
{ title: '备注', dataIndex: 'remark', key: 'remark' , width: 'auto'},
{
title: '状态',
dataIndex: 'stater',
key: 'stater',
width: 'auto',
customRender: ({ value }: { value: number }) => (value === 1 ? '启用' : '禁用')
},
{ title: '保洁面积', dataIndex: 'area', key: 'area', width: 'auto' },
{ title: '合计费用', dataIndex: 'sumPeices', key: 'sumPeices', width: 'auto' },
{
title: '操作',
key: 'action',
fixed: 'right' as const,
width: 'auto',
},
]
const [DetailTable, detailTableApi] = useVbenVxeGrid({
gridOptions: detailGridOptions,
});
const detailTable = ref<any>([])
const [CleanDetailModal, detailModalApi] = useVbenModal({
connectedComponent: cleanDetailModal,
});
function handleAddDetail() {
detailModalApi.setData({});
detailModalApi.open();
}
function handleDetailReload(data: any) {
detailTable.value.push(data)
}
function handleDeleteDetail(record: any,index: number) {
console.log(record,index);
detailTable.value.splice(index,1)
}
async function handleConfirm() {
try {
modalApi.lock(true);
@@ -120,15 +257,13 @@ async function handleConfirm() {
return;
}
const data = cloneDeep(await formApi.getValues());
console.log(data);
console.log(data);
// 单位数据缓存
if (unitListData.length === 0) {
const res = await resident_unitList();
unitListData = res.rows || [];
}
// 劳务数据缓存 cleanListData 已有
// 查找label
const unitObj = unitListData.find(item => item.id === data.unit);
const cleanObj = cleanListData.find(item => item.id === data.name);
@@ -138,9 +273,9 @@ console.log(data);
data.unitId = unitObj ? unitObj.id : (isUpdate.value ? editUnitId.value : '');
data.cleanId = cleanObj ? cleanObj.id : (isUpdate.value ? editCleanId.value : '');
// 如不需要原字段可删除
// delete data.unit;
// delete data.name;
// 组装 cleanIds
data.cleanIds = detailTable.value.map((item: any) => item.id);
data.details = detailTable.value;
await (isUpdate.value ? clean_orderUpdate(data) : clean_orderAdd(data));
resetInitialized();
@@ -154,15 +289,60 @@ console.log(data);
}
async function handleClosed() {
detailTable.value = []
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicModal :title="title" >
<BasicForm />
<!-- 添加订单详情部分 -->
<div class="mt-4">
<div class="flex items-center justify-between mb-2">
<h3 class="text-lg font-medium">添加保洁订单详情</h3>
<a-button type="primary" @click="handleAddDetail">
{{ $t('pages.common.add') }}
</a-button>
</div>
<Table :dataSource="detailTable" :columns="detailColumns" :pagination="false" >
<template #bodyCell="{ column, index,record }">
<template v-if="column.key === 'index'">
{{ index + 1 }}
</template>
<template v-else-if="column.key === 'action'">
<Button danger @click="handleDeleteDetail(record,index)">删除</Button>
</template>
</template>
</Table>
<div>费用合计：{{ totalSumPeices }}元</div>
</div>
<CleanDetailModal @reload="handleDetailReload" />
</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;
}
</style>

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

@@ -39,10 +39,10 @@ export const querySchema: FormSchemaGetter = () => [
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '序号',
field: 'id',
width:'60',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
@@ -52,26 +52,32 @@ export const columns: VxeGridProps['columns'] = [
{
title: '服务地址',
field: 'location',
width: 'auto',
},
{
title: '服务面积（㎡）',
field: 'area',
width: 'auto',
},
{
title: '劳务名称',
field: 'name',
width: 'auto',
},
{
title: '申报单价含税（元）',
field: 'prices',
width: 'auto',
},
{
title: '合计费用',
field: 'sumPeices',
width: 'auto',
},
{
title: '支付状态',
field: 'payState',
width: 'auto',
slots: {
default: ({ row }) => row.stater === 1 ? '已支付' : '待支付',
},
@@ -79,22 +85,30 @@ export const columns: VxeGridProps['columns'] = [
{
title: '服务开始时间',
field: 'starTime',
width: 'auto',
},
{
title: '服务结束时间',
field: 'endTime',
width: 'auto',
},
{
title: '申请单位',
field: 'unit',
width: 'auto',
},
{
title: '申请人',
field: 'persion',
width: 'auto',
},
{
title: '联系电话',
field: 'phone',
width: 'auto',
},
// {
// title: '提交时间',
@@ -105,7 +119,6 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
@@ -131,28 +144,28 @@ export const modalSchema: FormSchemaGetter = () => [
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: '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',

13
apps/web-antd/src/views/property/clean/cleanSettings/data.ts
View File

@@ -31,11 +31,9 @@ export const querySchema: FormSchemaGetter = () => [
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '序号',
field: 'id',
width: 60,
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
@@ -45,22 +43,27 @@ export const columns: VxeGridProps['columns'] = [
{
title: '劳务名称',
field: 'name',
width:'120'
},
{
title: '计量单位',
field: 'measure',
width:'120'
},
{
title: '计算方式',
field: 'method',
width:'120'
},
{
title: '申报单价含税（元）',
field: 'peices',
width: 'auto',
},
{
title: '保洁频率',
field: 'frequency',
width:'120'
},
// {
// title: '保洁内容',
@@ -69,14 +72,17 @@ export const columns: VxeGridProps['columns'] = [
{
title: '保洁标准',
field: 'standard',
width:'200'
},
{
title: '备注',
field: 'remark',
width:'200'
},
{
title: '状态',
field: 'stater',
width:'120',
slots: {
default: ({ row }) => row.stater === 1 ? '上架' : '下架',
},
@@ -90,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
width: 'auto',
},
];
@@ -127,6 +133,7 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'peices',
component: 'Input',
rules: 'required',
width: 300,
},
{
label: '保洁频率',