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

452 lines
11 KiB
Vue
Raw Normal View History

2025-06-19 14:26:08 +08:00
<script setup lang="ts">
2025-06-27 18:03:13 +08:00
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { CleanVO } from '#/api/property/clean/model';
2025-06-19 14:26:08 +08:00
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
2025-06-30 17:42:56 +08:00
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
2025-06-19 14:26:08 +08:00
2025-06-27 18:03:13 +08:00
import { Button, Table } from 'ant-design-vue';
import dayjs from 'dayjs';
2025-06-19 14:26:08 +08:00
import { useVbenForm } from '#/adapter/form';
2025-06-26 18:02:43 +08:00
import { useVbenVxeGrid } from '#/adapter/vxe-table';
2025-06-27 18:03:13 +08:00
import { cleanList } from '#/api/property/clean';
import {
clean_orderAdd,
clean_orderInfo,
clean_orderUpdate,
} from '#/api/property/clean_order';
import { resident_unitList } from '#/api/property/resident/unit';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
2025-06-26 18:02:43 +08:00
import cleanDetailModal from './clean-detail-modal.vue';
2025-06-25 11:37:28 +08:00
import { modalSchema } from './data';
2025-06-30 17:42:56 +08:00
import { communityTree } from '#/api/property/community';
2025-06-27 18:03:13 +08:00
const emit = defineEmits<{ reload: [] }>();
// 计算合计费用
2025-06-26 18:02:43 +08:00
const totalSumPeices = computed(() => {
return detailTable.value
2025-06-27 18:03:13 +08:00
.reduce(
(total: number, item: any) => total + (Number(item.sumPeices) || 0),
0,
)
2025-06-26 18:02:43 +08:00
.toFixed(2);
});
2025-06-25 11:37:28 +08:00
2025-06-19 14:26:08 +08:00
const isUpdate = ref(false);
2025-06-27 18:03:13 +08:00
const isReadonly = ref(false);
2025-06-19 14:26:08 +08:00
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
2025-06-23 16:50:37 +08:00
// 用来缓存 cleanList 的完整数据
let cleanListData: CleanVO[] = [];
// 在文件顶部加缓存
let unitListData: { id: any; name: string }[] = [];
const editUnitId = ref('');
const editCleanId = ref('');
2025-06-19 14:26:08 +08:00
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
2025-06-23 16:50:37 +08:00
formItemClass: 'col-span-1',
2025-06-19 14:26:08 +08:00
// 默认label宽度 px
2025-06-23 16:50:37 +08:00
labelWidth: 120,
2025-06-19 14:26:08 +08:00
// 通用配置项 会影响到所有表单项
2025-06-27 18:03:13 +08:00
componentProps: computed(() => ({
2025-06-19 14:26:08 +08:00
class: 'w-full',
2025-06-27 18:03:13 +08:00
disabled: isReadonly.value,
})),
2025-06-19 14:26:08 +08:00
},
2025-06-23 16:50:37 +08:00
// 1. 使用正确的属性名 handleValuesChange
handleValuesChange: async (values, fieldsChanged) => {
// 2. fieldsChanged 是一个包含变化字段名的数组
if (fieldsChanged.includes('name')) {
// 如果缓存数据为空,先请求一次并缓存
if (cleanListData.length === 0) {
try {
const res = await cleanList(); // 查询所有
cleanListData = res.rows || [];
2025-06-27 18:03:13 +08:00
} catch (error) {
console.error('获取劳务列表失败:', error);
2025-06-23 16:50:37 +08:00
cleanListData = []; // 出错时清空
}
}
2025-06-27 18:03:13 +08:00
2025-06-23 16:50:37 +08:00
// 3. 从 values 中获取当前选中的 id
const selectedId = values.name;
2025-06-27 18:03:13 +08:00
const selectedItem = cleanListData.find((item) => item.id === selectedId);
2025-06-23 16:50:37 +08:00
if (selectedItem) {
// 4. 使用正确的 formApi.setValues 方法
await formApi.setValues({
2025-06-27 18:03:13 +08:00
prices: selectedItem.peices, // 服务单价
2025-06-23 16:50:37 +08:00
frequency: selectedItem.frequency, // 保洁频率
2025-06-27 18:03:13 +08:00
standard: selectedItem.standard, // 保洁内容
peices: selectedItem.peices, // 保洁标准
2025-06-23 16:50:37 +08:00
});
}
}
},
2025-06-19 14:26:08 +08:00
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
2025-06-23 16:50:37 +08:00
class: 'w-[70%]',
2025-06-19 14:26:08 +08:00
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
2025-06-30 17:42:56 +08:00
setupCommunitySelect()
2025-06-19 14:26:08 +08:00
modalApi.modalLoading(true);
2025-06-27 18:03:13 +08:00
const { id, readonly } = modalApi.getData() as {
id?: number | string;
readonly?: boolean;
};
2025-06-19 14:26:08 +08:00
isUpdate.value = !!id;
2025-06-27 18:03:13 +08:00
isReadonly.value = !!readonly;
2025-06-19 14:26:08 +08:00
if (isUpdate.value && id) {
2025-06-27 18:03:13 +08:00
const record: any = await clean_orderInfo(id);
2025-06-23 16:50:37 +08:00
if (record.starTime) record.starTime = dayjs(record.starTime);
if (record.endTime) record.endTime = dayjs(record.endTime);
editUnitId.value = record.unitId || '';
editCleanId.value = record.cleanId || '';
2025-06-19 14:26:08 +08:00
await formApi.setValues(record);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
2025-06-26 18:02:43 +08:00
// 添加订单详情表格配置
const detailGridOptions: VxeGridProps = {
height: '300px',
columns: [
{
title: '序号',
field: 'index',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '劳务名称',
field: 'name',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '计量单位',
field: 'measure',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '计算方式',
field: 'method',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '申报单价含税(元)',
field: 'peices',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '保洁频率',
field: 'frequency',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '保洁标准',
field: 'standard',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '备注',
field: 'remark',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '状态',
field: 'stater',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
slots: {
2025-06-27 18:03:13 +08:00
default: ({ row }) => (row.stater === 1 ? '启用' : '禁用'),
2025-06-26 18:02:43 +08:00
},
},
{
title: '保洁面积',
field: 'area',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
title: '合计费用',
field: 'sumPeices',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
2025-06-27 18:03:13 +08:00
width: 'auto',
2025-06-26 18:02:43 +08:00
},
],
data: [],
};
const detailColumns = [
2025-06-30 17:42:56 +08:00
{ title: '序号', key: 'index' },
{ title: '劳务名称', dataIndex: 'name', key: 'name' },
{ title: '计量单位', dataIndex: 'measure', key: 'measure' },
{ title: '计算方式', dataIndex: 'method', key: 'method' },
2025-06-27 18:03:13 +08:00
{
title: '申报单价含税(元)',
dataIndex: 'peices',
key: 'peices',
},
{
title: '保洁频率',
dataIndex: 'frequency',
key: 'frequency',
},
2025-06-30 17:42:56 +08:00
{ title: '保洁标准', dataIndex: 'standard', key: 'standard' },
{ title: '备注', dataIndex: 'remark', key: 'remark' },
2025-06-26 18:02:43 +08:00
{
title: '状态',
dataIndex: 'stater',
key: 'stater',
2025-06-27 18:03:13 +08:00
customRender: ({ value }: { value: number }) =>
value === 1 ? '启用' : '禁用',
2025-06-26 18:02:43 +08:00
},
2025-06-30 17:42:56 +08:00
{ title: '保洁面积', dataIndex: 'area', key: 'area' },
2025-06-27 18:03:13 +08:00
{
title: '合计费用',
dataIndex: 'sumPeices',
key: 'sumPeices',
},
2025-06-26 18:02:43 +08:00
{
title: '操作',
key: 'action',
fixed: 'right' as const,
},
2025-06-27 18:03:13 +08:00
];
2025-06-26 18:02:43 +08:00
const [DetailTable, detailTableApi] = useVbenVxeGrid({
gridOptions: detailGridOptions,
});
2025-06-27 18:03:13 +08:00
const detailTable = ref<any>([]);
2025-06-26 18:02:43 +08:00
const [CleanDetailModal, detailModalApi] = useVbenModal({
connectedComponent: cleanDetailModal,
});
function handleAddDetail() {
detailModalApi.setData({});
detailModalApi.open();
}
function handleDetailReload(data: any) {
2025-06-27 18:03:13 +08:00
detailTable.value.push(data);
2025-06-26 18:02:43 +08:00
}
2025-06-27 18:03:13 +08:00
function handleDeleteDetail(record: any, index: number) {
console.log(record, index);
detailTable.value.splice(index, 1);
2025-06-26 18:02:43 +08:00
}
2025-06-19 14:26:08 +08:00
async function handleConfirm() {
2025-06-30 17:42:56 +08:00
console.log('handleConfirm123123123');
2025-06-27 18:03:13 +08:00
if (isReadonly.value) {
modalApi.close();
return;
}
2025-06-19 14:26:08 +08:00
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const data = cloneDeep(await formApi.getValues());
2025-06-26 18:02:43 +08:00
console.log(data);
2025-06-23 16:50:37 +08:00
// 单位数据缓存
if (unitListData.length === 0) {
const res = await resident_unitList();
unitListData = res.rows || [];
}
// 劳务数据缓存 cleanListData 已有
// 查找label
2025-06-27 18:03:13 +08:00
const unitObj = unitListData.find((item) => item.id === data.unit);
2025-06-30 17:42:56 +08:00
console.log(unitObj,'unitObj');
2025-06-27 18:03:13 +08:00
const cleanObj = cleanListData.find((item) => item.id === data.name);
2025-06-23 16:50:37 +08:00
2025-06-27 18:03:13 +08:00
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
: '';
2025-06-30 17:59:17 +08:00
data.sumPeices = parseInt(totalSumPeices.value, 10);
2025-06-26 18:02:43 +08:00
// 组装 cleanIds
2025-06-30 17:59:17 +08:00
// data.cleanIds = detailTable.value.map((item: any) => item.id);
data.cleanList = detailTable.value;
2025-06-30 17:42:56 +08:00
console.log(data);
console.log(12037847120120);
await clean_orderAdd(data)
// isUpdate.value ? await clean_orderUpdate(data) : await clean_orderAdd(data);
console.log('1231273');
2025-06-23 16:50:37 +08:00
2025-06-19 14:26:08 +08:00
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
2025-06-30 17:42:56 +08:00
// 获取服务地址
async function setupCommunitySelect() {
const areaList = await communityTree(5);
// 选中后显示在输入框的值 即父节点 / 子节点
// addFullName(areaList, 'areaName', ' / ');
const splitStr = '/';
handleNode(areaList, 'label', splitStr, function (node: any) {
if (node.level != 5) {
node.disabled = true;
}
});
formApi.updateSchema([
{
componentProps: () => ({
class: 'w-full',
fieldNames: {
key: 'id',
label: 'label',
value: 'code',
children: 'children',
},
getPopupContainer,
placeholder: '请选择服务地址',
showSearch: true,
treeData: areaList,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
// 筛选的字段
treeNodeFilterProp: 'label',
// 选中后显示在输入框的值
treeNodeLabelProp: 'fullName',
}),
fieldName: 'location',
},
]);
}
2025-06-19 14:26:08 +08:00
</script>
<template>
2025-06-27 18:03:13 +08:00
<BasicModal :title="title">
<BasicForm>
</BasicForm>
2025-06-26 18:02:43 +08:00
<!-- 添加订单详情部分 -->
<div class="mt-4">
2025-06-27 18:03:13 +08:00
<div class="mb-2 flex items-center justify-between">
2025-06-26 18:02:43 +08:00
<h3 class="text-lg font-medium">添加保洁订单详情</h3>
<a-button type="primary" @click="handleAddDetail">
{{ $t('pages.common.add') }}
</a-button>
</div>
2025-06-27 18:03:13 +08:00
<Table
:data-source="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>
2025-06-26 18:02:43 +08:00
</template>
2025-06-27 18:03:13 +08:00
</Table>
<div>费用合计{{ totalSumPeices }}</div>
</div>
2025-06-26 18:02:43 +08:00
<CleanDetailModal @reload="handleDetailReload" />
2025-06-19 14:26:08 +08:00
</BasicModal>
</template>
2025-06-26 18:02:43 +08:00
<style scoped>
.mt-4 {
margin-top: 1rem;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.mb-2 {
margin-bottom: 0.5rem;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.flex {
display: flex;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.items-center {
align-items: center;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.justify-between {
justify-content: space-between;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
2025-06-27 18:03:13 +08:00
2025-06-26 18:02:43 +08:00
.font-medium {
font-weight: 500;
}
2025-06-30 17:42:56 +08:00
/* 使用 :deep() 穿透 scoped 样式,影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item),
:deep(.ant-picker-disabled .ant-picker-input > input) {
/* 设置一个更深的颜色 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
2025-06-26 18:02:43 +08:00
</style>