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

feat: 保洁接口对接
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Details

Browse Source
This commit is contained in:
fyy
2025-06-27 18:03:13 +08:00
parent f01cb4abce
commit 3e8ba86305
10 changed files with 62158 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61596
apps/web-antd/src/components/roomSelect/room-select.vue Normal file
View File

File diff suppressed because it is too large Load Diff

24
apps/web-antd/src/store/clean.ts Normal file
View File

@@ -0,0 +1,24 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
export const useCleanStore = defineStore('clean', () => {
// 当前选中的服务地址ID
const selectedLocationId = ref<null | number | string>(null);
// 申请人是否可用
const isPersionEnabled = ref(false);
function setLocation(id: number | string) {
selectedLocationId.value = id;
isPersionEnabled.value = !!id;
console.log(selectedLocationId.value);
console.log(isPersionEnabled.value);
}
return {
selectedLocationId,
isPersionEnabled,
setLocation,
};
});

1
apps/web-antd/src/store/index.ts
View File

@@ -1,2 +1,3 @@
export * from './auth'; export * from './auth';
export * from './clean';
export * from './notify'; export * from './notify';

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

@@ -1,31 +1,45 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { CleanVO } from '#/api/property/clean/model';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils'; import { cloneDeep } from '@vben/utils';
import { Button, Table } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
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 { useVbenVxeGrid } from '#/adapter/vxe-table';
import type { VxeGridProps } from '#/adapter/vxe-table'; 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 RoomSelect from '#/components/roomSelect/room-select.vue';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import cleanDetailModal from './clean-detail-modal.vue'; import cleanDetailModal from './clean-detail-modal.vue';
import { Table, Button } from 'ant-design-vue';
import { modalSchema } from './data'; import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
// 计算合计费用
const totalSumPeices = computed(() => { const totalSumPeices = computed(() => {
return detailTable.value return detailTable.value
.reduce((total: number, item: any) => total + (Number(item.sumPeices) || 0), 0) .reduce(
(total: number, item: any) => total + (Number(item.sumPeices) || 0),
0,
)
.toFixed(2); .toFixed(2);
}); });
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false); const isUpdate = ref(false);
const isReadonly = ref(false);
const title = computed(() => { const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add'); return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
}); });
@@ -46,9 +60,10 @@ const [BasicForm, formApi] = useVbenForm({
// 默认label宽度 px // 默认label宽度 px
labelWidth: 120, labelWidth: 120,
// 通用配置项 会影响到所有表单项 // 通用配置项 会影响到所有表单项
componentProps: { componentProps: computed(() => ({
class: 'w-full', class: 'w-full',
} disabled: isReadonly.value,
})),
}, },
// 1. 使用正确的属性名 handleValuesChange // 1. 使用正确的属性名 handleValuesChange
handleValuesChange: async (values, fieldsChanged) => { handleValuesChange: async (values, fieldsChanged) => {
@@ -59,23 +74,23 @@ const [BasicForm, formApi] = useVbenForm({
try { try {
const res = await cleanList(); // 查询所有 const res = await cleanList(); // 查询所有
cleanListData = res.rows || []; cleanListData = res.rows || [];
} catch (e) { } catch (error) {
console.error('获取劳务列表失败:', e); console.error('获取劳务列表失败:', error);
cleanListData = []; // 出错时清空 cleanListData = []; // 出错时清空
} }
} }
// 3. 从 values 中获取当前选中的 id // 3. 从 values 中获取当前选中的 id
const selectedId = values.name; const selectedId = values.name;
const selectedItem = cleanListData.find(item => item.id === selectedId); const selectedItem = cleanListData.find((item) => item.id === selectedId);
if (selectedItem) { if (selectedItem) {
// 4. 使用正确的 formApi.setValues 方法 // 4. 使用正确的 formApi.setValues 方法
await formApi.setValues({ await formApi.setValues({
prices: selectedItem.peices, // 服务单价 prices: selectedItem.peices, // 服务单价
frequency: selectedItem.frequency, // 保洁频率 frequency: selectedItem.frequency, // 保洁频率
standard: selectedItem.standard, // 保洁内容 standard: selectedItem.standard, // 保洁内容
peices: selectedItem.peices, // 保洁标准 peices: selectedItem.peices, // 保洁标准
}); });
} }
} }
@@ -104,12 +119,14 @@ const [BasicModal, modalApi] = useVbenModal({
return null; return null;
} }
modalApi.modalLoading(true); modalApi.modalLoading(true);
const { id, readonly } = modalApi.getData() as {
const { id } = modalApi.getData() as { id?: number | string }; id?: number | string;
readonly?: boolean;
};
isUpdate.value = !!id; isUpdate.value = !!id;
isReadonly.value = !!readonly;
if (isUpdate.value && id) { if (isUpdate.value && id) {
const record:any = await clean_orderInfo(id); const record: any = await clean_orderInfo(id);
if (record.starTime) record.starTime = dayjs(record.starTime); if (record.starTime) record.starTime = dayjs(record.starTime);
if (record.endTime) record.endTime = dayjs(record.endTime); if (record.endTime) record.endTime = dayjs(record.endTime);
editUnitId.value = record.unitId || ''; editUnitId.value = record.unitId || '';
@@ -125,11 +142,10 @@ const [BasicModal, modalApi] = useVbenModal({
const detailGridOptions: VxeGridProps = { const detailGridOptions: VxeGridProps = {
height: '300px', height: '300px',
columns: [ columns: [
{ {
title: '序号', title: '序号',
field: 'index', field: 'index',
width: 'auto', width: 'auto',
slots: { slots: {
default: ({ rowIndex }) => { default: ({ rowIndex }) => {
return (rowIndex + 1).toString(); return (rowIndex + 1).toString();
@@ -139,97 +155,112 @@ const detailGridOptions: VxeGridProps = {
{ {
title: '劳务名称', title: '劳务名称',
field: 'name', field: 'name',
width: 'auto', width: 'auto',
}, },
{ {
title: '计量单位', title: '计量单位',
field: 'measure', field: 'measure',
width: 'auto', width: 'auto',
}, },
{ {
title: '计算方式', title: '计算方式',
field: 'method', field: 'method',
width: 'auto', width: 'auto',
}, },
{ {
title: '申报单价含税（元）', title: '申报单价含税（元）',
field: 'peices', field: 'peices',
width: 'auto', width: 'auto',
}, },
{ {
title: '保洁频率', title: '保洁频率',
field: 'frequency', field: 'frequency',
width: 'auto', width: 'auto',
}, },
{ {
title: '保洁标准', title: '保洁标准',
field: 'standard', field: 'standard',
width: 'auto', width: 'auto',
}, },
{ {
title: '备注', title: '备注',
field: 'remark', field: 'remark',
width: 'auto', width: 'auto',
}, },
{ {
title: '状态', title: '状态',
field: 'stater', field: 'stater',
width: 'auto', width: 'auto',
slots: { slots: {
default: ({ row }) => row.stater === 1 ? '启用' : '禁用', default: ({ row }) => (row.stater === 1 ? '启用' : '禁用'),
}, },
}, },
{ {
title: '保洁面积', title: '保洁面积',
field: 'area', field: 'area',
width: 'auto', width: 'auto',
}, },
{ {
title: '合计费用', title: '合计费用',
field: 'sumPeices', field: 'sumPeices',
width: 'auto', width: 'auto',
}, },
{ {
field: 'action', field: 'action',
fixed: 'right', fixed: 'right',
slots: { default: 'action' }, slots: { default: 'action' },
title: '操作', title: '操作',
width: 'auto', width: 'auto',
}, },
], ],
data: [], data: [],
}; };
const detailColumns = [ const detailColumns = [
{ title: '序号', key: 'index', width: 'auto'}, { title: '序号', key: 'index', width: 'auto' },
{ title: '劳务名称', dataIndex: 'name', key: 'name', width: 'auto' }, { title: '劳务名称', dataIndex: 'name', key: 'name', width: 'auto' },
{ title: '计量单位', dataIndex: 'measure', key: 'measure', width: 'auto' }, { title: '计量单位', dataIndex: 'measure', key: 'measure', width: 'auto' },
{ title: '计算方式', dataIndex: 'method', key: 'method', width: 'auto' }, { title: '计算方式', dataIndex: 'method', key: 'method', width: 'auto' },
{ title: '申报单价含税（元）', dataIndex: 'peices', key: 'peices' , width: 'auto'}, {
{ title: '保洁频率', dataIndex: 'frequency', key: 'frequency' , width: 'auto'}, title: '申报单价含税（元）',
{ title: '保洁标准', dataIndex: 'standard', key: 'standard' , width: 'auto'}, dataIndex: 'peices',
{ title: '备注', dataIndex: 'remark', key: 'remark' , width: 'auto'}, 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: '状态', title: '状态',
dataIndex: 'stater', dataIndex: 'stater',
key: 'stater', key: 'stater',
width: 'auto', width: 'auto',
customRender: ({ value }: { value: number }) => (value === 1 ? '启用' : '禁用') customRender: ({ value }: { value: number }) =>
value === 1 ? '启用' : '禁用',
}, },
{ title: '保洁面积', dataIndex: 'area', key: 'area', width: 'auto' }, { title: '保洁面积', dataIndex: 'area', key: 'area', width: 'auto' },
{ title: '合计费用', dataIndex: 'sumPeices', key: 'sumPeices', width: 'auto' }, {
title: '合计费用',
dataIndex: 'sumPeices',
key: 'sumPeices',
width: 'auto',
},
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
fixed: 'right' as const, fixed: 'right' as const,
width: 'auto', width: 'auto',
}, },
] ];
const [DetailTable, detailTableApi] = useVbenVxeGrid({ const [DetailTable, detailTableApi] = useVbenVxeGrid({
gridOptions: detailGridOptions, gridOptions: detailGridOptions,
}); });
const detailTable = ref<any>([]) const detailTable = ref<any>([]);
const [CleanDetailModal, detailModalApi] = useVbenModal({ const [CleanDetailModal, detailModalApi] = useVbenModal({
connectedComponent: cleanDetailModal, connectedComponent: cleanDetailModal,
@@ -241,15 +272,19 @@ function handleAddDetail() {
} }
function handleDetailReload(data: any) { function handleDetailReload(data: any) {
detailTable.value.push(data) detailTable.value.push(data);
} }
function handleDeleteDetail(record: any,index: number) { function handleDeleteDetail(record: any, index: number) {
console.log(record,index); console.log(record, index);
detailTable.value.splice(index,1) detailTable.value.splice(index, 1);
} }
async function handleConfirm() { async function handleConfirm() {
if (isReadonly.value) {
modalApi.close();
return;
}
try { try {
modalApi.lock(true); modalApi.lock(true);
const { valid } = await formApi.validate(); const { valid } = await formApi.validate();
@@ -265,14 +300,18 @@ async function handleConfirm() {
} }
// 劳务数据缓存 cleanListData 已有 // 劳务数据缓存 cleanListData 已有
// 查找label // 查找label
const unitObj = unitListData.find(item => item.id === data.unit); const unitObj = unitListData.find((item) => item.id === data.unit);
const cleanObj = cleanListData.find(item => item.id === data.name); 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.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 = totalSumPeices;
// 组装 cleanIds // 组装 cleanIds
data.cleanIds = detailTable.value.map((item: any) => item.id); data.cleanIds = detailTable.value.map((item: any) => item.id);
data.details = detailTable.value; data.details = detailTable.value;
@@ -295,28 +334,38 @@ async function handleClosed() {
</script> </script>
<template> <template>
<BasicModal :title="title" > <BasicModal :title="title">
<BasicForm /> <BasicForm>
<template #location="soltProps">
<RoomSelect v-bind="soltProps" />
</template>
</BasicForm>
<!-- 添加订单详情部分 --> <!-- 添加订单详情部分 -->
<div class="mt-4"> <div class="mt-4">
<div class="flex items-center justify-between mb-2"> <div class="mb-2 flex items-center justify-between">
<h3 class="text-lg font-medium">添加保洁订单详情</h3> <h3 class="text-lg font-medium">添加保洁订单详情</h3>
<a-button type="primary" @click="handleAddDetail"> <a-button type="primary" @click="handleAddDetail">
{{ $t('pages.common.add') }} {{ $t('pages.common.add') }}
</a-button> </a-button>
</div> </div>
<Table :dataSource="detailTable" :columns="detailColumns" :pagination="false" > <Table
<template #bodyCell="{ column, index,record }"> :data-source="detailTable"
<template v-if="column.key === 'index'"> :columns="detailColumns"
{{ index + 1 }} :pagination="false"
</template> >
<template v-else-if="column.key === 'action'"> <template #bodyCell="{ column, index, record }">
<Button danger @click="handleDeleteDetail(record,index)">删除</Button> <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> </template>
</template> </Table>
</Table> <div>费用合计：{{ totalSumPeices }}元</div>
<div>费用合计：{{ totalSumPeices }}元</div> </div>
</div>
<CleanDetailModal @reload="handleDetailReload" /> <CleanDetailModal @reload="handleDetailReload" />
</BasicModal> </BasicModal>
</template> </template>
@@ -325,24 +374,29 @@ async function handleClosed() {
.mt-4 { .mt-4 {
margin-top: 1rem; margin-top: 1rem;
} }
.mb-2 { .mb-2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.flex { .flex {
display: flex; display: flex;
} }
.items-center { .items-center {
align-items: center; align-items: center;
} }
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
.text-lg { .text-lg {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
.font-medium { .font-medium {
font-weight: 500; font-weight: 500;
} }
</style> </style>

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

@@ -1,10 +1,10 @@
import type { FormSchemaGetter } from '#/adapter/form'; import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table'; import type { VxeGridProps } from '#/adapter/vxe-table';
import { cleanList } from '#/api/property/clean';
import type { PageResult } from '#/api/common'; import { resident_unitList } from '#/api/property/resident/unit';
import type { CleanVO } from '#/api/property/clean/model'; import { useCleanStore } from '#/store';
import { resident_unitList } from '#/api/property/resident/unit';
import dayjs from 'dayjs'; const cleanStore = useCleanStore();
export const querySchema: FormSchemaGetter = () => [ export const querySchema: FormSchemaGetter = () => [
{ {
@@ -12,6 +12,36 @@ export const querySchema: FormSchemaGetter = () => [
fieldName: 'location', fieldName: 'location',
label: '服务地址', label: '服务地址',
}, },
// {
// 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', component: 'Input',
fieldName: 'persion', fieldName: 'persion',
@@ -21,7 +51,7 @@ export const querySchema: FormSchemaGetter = () => [
component: 'Select', component: 'Select',
fieldName: 'payState', fieldName: 'payState',
label: '支付状态', label: '支付状态',
componentProps: { componentProps: {
options: [ options: [
{ {
label: '待支付', label: '待支付',
@@ -42,8 +72,8 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '序号', title: '序号',
field: 'id', field: 'id',
width:'60', width: '60',
slots: { slots: {
default: ({ rowIndex }) => { default: ({ rowIndex }) => {
return (rowIndex + 1).toString(); return (rowIndex + 1).toString();
}, },
@@ -52,58 +82,55 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '服务地址', title: '服务地址',
field: 'location', field: 'location',
width: 'auto', width: '180',
}, },
// {
// title: '服务面积（㎡）',
// field: 'area',
// width: 'auto',
// },
// {
// title: '劳务名称',
// field: 'name',
// width: 'auto',
// },
// {
// title: '申报单价含税（元）',
// field: 'prices',
// width: 'auto',
// },
{ {
title: '服务面积（㎡）', title: '合计费用（元）',
field: 'area',
width: 'auto',
},
{
title: '劳务名称',
field: 'name',
width: 'auto',
},
{
title: '申报单价含税（元）',
field: 'prices',
width: 'auto',
},
{
title: '合计费用',
field: 'sumPeices', field: 'sumPeices',
width: 'auto', width: '120',
}, },
{ {
title: '支付状态', title: '支付状态',
field: 'payState', field: 'payState',
width: 'auto', width: '120',
slots: { slots: {
default: ({ row }) => row.stater === 1 ? '已支付' : '待支付', default: ({ row }) => (row.stater === 1 ? '已支付' : '待支付'),
}, },
}, },
{ {
title: '服务开始时间', title: '服务开始时间',
field: 'starTime', field: 'starTime',
width: 'auto', width: 'auto',
}, },
{ {
title: '服务结束时间', title: '服务结束时间',
field: 'endTime', field: 'endTime',
width: 'auto', width: 'auto',
}, },
{ {
title: '申请单位', title: '申请单位',
field: 'unit', field: 'unit',
width: 'auto', width: '150',
}, },
{ {
title: '申请人', title: '申请人',
field: 'persion', field: 'persion',
width: 'auto', width: '150',
}, },
{ {
title: '联系电话', title: '联系电话',
@@ -135,16 +162,22 @@ export const modalSchema: FormSchemaGetter = () => [
{ {
label: '服务地址（房间号）', label: '服务地址（房间号）',
fieldName: 'location', fieldName: 'location',
component: 'Input', componentProps: {
rules: 'required', placeholder: '请选择房间',
}, },
{ slots: {
label: '服务面积（㎡）', default: 'location',
fieldName: 'area', },
component: 'Input', formItemClass: 'col-span-2',
rules: 'required', rules: 'required',
}, },
// { // {
// label: '服务面积（㎡）',
// fieldName: 'area',
// component: 'Input',
// rules: 'required',
// },
// {
// label: '劳务名称', // label: '劳务名称',
// fieldName: 'name', // fieldName: 'name',
// component: 'ApiSelect', // component: 'ApiSelect',
@@ -196,25 +229,25 @@ export const modalSchema: FormSchemaGetter = () => [
// disabled: true, // disabled: true,
// }, // },
// }, // },
{ {
label: '开始时间', label: '开始时间',
fieldName: 'starTime', fieldName: 'starTime',
component: 'DatePicker', component: 'DatePicker',
componentProps: { componentProps: {
showTime: true, showTime: true,
format: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择开始时间' placeholder: '请选择开始时间',
}, },
rules: 'required', rules: 'required',
}, },
{ {
label: '结束时间', label: '结束时间',
fieldName: 'endTime', fieldName: 'endTime',
component: 'DatePicker', component: 'DatePicker',
componentProps: { componentProps: {
showTime: true, showTime: true,
format: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss',
placeholder: '请选择结束时间' placeholder: '请选择结束时间',
}, },
rules: 'required', rules: 'required',
}, },
@@ -243,7 +276,7 @@ export const modalSchema: FormSchemaGetter = () => [
}, },
rules: 'required', rules: 'required',
}, },
{ {
label: '支付状态', label: '支付状态',
fieldName: 'payState', fieldName: 'payState',
component: 'Select', component: 'Select',

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

@@ -1,31 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Recordable } from '@vben/types'; import type { VbenFormProps } from '@vben/common-ui';
import { ref } from 'vue'; import type { VxeGridProps } from '#/adapter/vxe-table';
import type { CleanForm } from '#/api/property/clean/model';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils'; import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
cleanExport,
cleanList,
cleanRemove,
} from '#/api/property/clean';
import { import {
clean_orderExport, clean_orderExport,
clean_orderList, clean_orderList,
clean_orderRemove, clean_orderRemove,
} from '#/api/property/clean_order'; } from '#/api/property/clean_order';
import type { CleanForm } from '#/api/property/clean/model';
import { commonDownloadExcel } from '#/utils/file/download'; import { commonDownloadExcel } from '#/utils/file/download';
import cleanModal from './clean-modal.vue'; import cleanModal from './clean-modal.vue';
@@ -81,7 +70,7 @@ const gridOptions: VxeGridProps = {
keyField: 'id', keyField: 'id',
}, },
// 表格全局唯一表示 保存列配置需要用到 // 表格全局唯一表示 保存列配置需要用到
id: 'property-clean-index' id: 'property-clean-index',
}; };
const [BasicTable, tableApi] = useVbenVxeGrid({ const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -123,9 +112,19 @@ function handleMultiDelete() {
} }
function handleDownloadExcel() { function handleDownloadExcel() {
commonDownloadExcel(clean_orderExport, '保洁订单数据', tableApi.formApi.form.values, { commonDownloadExcel(
fieldMappingTime: formOptions.fieldMappingTime, clean_orderExport,
}); '保洁订单数据',
tableApi.formApi.form.values,
{
fieldMappingTime: formOptions.fieldMappingTime,
},
);
}
async function handleView(row: Required<CleanForm>) {
modalApi.setData({ id: row.id, readonly: true });
modalApi.open();
} }
</script> </script>
@@ -143,9 +142,10 @@ function handleDownloadExcel() {
<a-button <a-button
:disabled="!vxeCheckboxChecked(tableApi)" :disabled="!vxeCheckboxChecked(tableApi)"
danger danger
type="primary" type="primary"
v-access:code="['property:clean:remove']" v-access:code="['property:clean:remove']"
@click="handleMultiDelete"> @click="handleMultiDelete"
>
{{ $t('pages.common.delete') }} {{ $t('pages.common.delete') }}
</a-button> </a-button>
<a-button <a-button
@@ -159,6 +159,7 @@ function handleDownloadExcel() {
</template> </template>
<template #action="{ row }"> <template #action="{ row }">
<Space> <Space>
<ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
<ghost-button <ghost-button
v-access:code="['property:clean:edit']" v-access:code="['property:clean:edit']"
@click.stop="handleEdit(row)" @click.stop="handleEdit(row)"

49
apps/web-antd/src/views/property/clean/cleanSettings/clean-modal.vue
View File

@@ -14,7 +14,9 @@ import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>(); const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false); const isUpdate = ref(false);
const isReadonly = ref(false);
const title = computed(() => { const title = computed(() => {
if (isReadonly.value) return '详情';
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add'); return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
}); });
@@ -27,7 +29,10 @@ const [BasicForm, formApi] = useVbenForm({
// 通用配置项 会影响到所有表单项 // 通用配置项 会影响到所有表单项
componentProps: { componentProps: {
class: 'w-full', class: 'w-full',
} get disabled() {
return isReadonly.value;
},
},
}, },
schema: modalSchema(), schema: modalSchema(),
showDefaultActions: false, showDefaultActions: false,
@@ -53,21 +58,32 @@ const [BasicModal, modalApi] = useVbenModal({
return null; return null;
} }
modalApi.modalLoading(true); modalApi.modalLoading(true);
try {
const { id } = modalApi.getData() as { id?: number | string }; const { id, readonly } = modalApi.getData() as {
isUpdate.value = !!id; id?: number | string;
readonly?: boolean;
if (isUpdate.value && id) { };
const record = await cleanInfo(id); isUpdate.value = !!id;
await formApi.setValues(record); isReadonly.value = !!readonly;
if (isUpdate.value && id) {
const record = await cleanInfo(id);
await formApi.setValues(record);
}
await markInitialized();
} catch (error) {
// 可以根据需要弹出错误提示
console.error(error);
} finally {
modalApi.modalLoading(false);
} }
await markInitialized();
modalApi.modalLoading(false);
}, },
}); });
async function handleConfirm() { async function handleConfirm() {
if (isReadonly.value) {
modalApi.close();
return;
}
try { try {
modalApi.lock(true); modalApi.lock(true);
const { valid } = await formApi.validate(); const { valid } = await formApi.validate();
@@ -98,4 +114,15 @@ async function handleClosed() {
<BasicForm /> <BasicForm />
</BasicModal> </BasicModal>
</template> </template>
<style scoped>
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
:deep(.ant-input[disabled]),
:deep(.ant-input-number-disabled .ant-input-number-input),
:deep(.ant-select-disabled .ant-select-selection-item) {
/* 设置一个更深的颜色，可以自己调整 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
</style>

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

@@ -1,14 +1,12 @@
import type { FormSchemaGetter } from '#/adapter/form'; import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table'; import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [ export const querySchema: FormSchemaGetter = () => [
{ {
component: 'Input', component: 'Input',
fieldName: 'name', fieldName: 'name',
label: '劳务名称', label: '劳务名称',
}, },
{ {
component: 'Input', component: 'Input',
fieldName: 'method', fieldName: 'method',
@@ -18,7 +16,7 @@ export const querySchema: FormSchemaGetter = () => [
component: 'Select', component: 'Select',
fieldName: 'stater', fieldName: 'stater',
label: '状态', label: '状态',
componentProps: { componentProps: {
options: [ options: [
{ label: '下架', value: 0 }, { label: '下架', value: 0 },
{ label: '上架', value: 1 }, { label: '上架', value: 1 },
@@ -34,7 +32,8 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '序号', title: '序号',
field: 'id', field: 'id',
slots: { width: '60',
slots: {
default: ({ rowIndex }) => { default: ({ rowIndex }) => {
return (rowIndex + 1).toString(); return (rowIndex + 1).toString();
}, },
@@ -43,17 +42,17 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '劳务名称', title: '劳务名称',
field: 'name', field: 'name',
width:'120' width: '120',
}, },
{ {
title: '计量单位', title: '计量单位',
field: 'measure', field: 'measure',
width:'120' width: '120',
}, },
{ {
title: '计算方式', title: '计算方式',
field: 'method', field: 'method',
width:'120' width: '120',
}, },
{ {
title: '申报单价含税（元）', title: '申报单价含税（元）',
@@ -63,30 +62,30 @@ export const columns: VxeGridProps['columns'] = [
{ {
title: '保洁频率', title: '保洁频率',
field: 'frequency', field: 'frequency',
width:'120' width: '120',
}, },
// { // {
// title: '保洁内容', // title: '保洁内容',
// field: 'standard', // field: 'standard',
// }, // },
{ {
title: '保洁标准', title: '保洁标准',
field: 'standard', field: 'standard',
width:'200' width: '200',
}, },
{ {
title: '备注', title: '备注',
field: 'remark', field: 'remark',
width:'200' width: '200',
}, },
{ {
title: '状态', title: '状态',
field: 'stater', field: 'stater',
width:'120', width: '120',
slots: { slots: {
default: ({ row }) => row.stater === 1 ? '上架' : '下架', default: ({ row }) => (row.stater === 1 ? '上架' : '下架'),
}, },
}, },
// { // {
// title: '创建时间', // title: '创建时间',
// field: 'stater', // field: 'stater',
@@ -147,7 +146,7 @@ export const modalSchema: FormSchemaGetter = () => [
// component: 'Input', // component: 'Input',
// rules: 'required', // rules: 'required',
// }, // },
{ {
label: '保洁标准', label: '保洁标准',
fieldName: 'standard', fieldName: 'standard',
component: 'Input', component: 'Input',
@@ -175,7 +174,7 @@ export const modalSchema: FormSchemaGetter = () => [
// }, // },
// rules: 'required', // rules: 'required',
// }, // },
{ {
label: '状态', label: '状态',
fieldName: 'stater', fieldName: 'stater',
component: 'Select', component: 'Select',

51
apps/web-antd/src/views/property/clean/cleanSettings/index.vue
View File

@@ -1,26 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Recordable } from '@vben/types'; import type { VbenFormProps } from '@vben/common-ui';
import { ref } from 'vue'; import type { VxeGridProps } from '#/adapter/vxe-table';
import type { CleanForm } from '#/api/property/clean/model';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils'; import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue'; import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
useVbenVxeGrid, import { cleanExport, cleanList, cleanRemove } from '#/api/property/clean';
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
cleanExport,
cleanList,
cleanRemove,
} from '#/api/property/clean';
import type { CleanForm } from '#/api/property/clean/model';
import { commonDownloadExcel } from '#/utils/file/download'; import { commonDownloadExcel } from '#/utils/file/download';
import cleanModal from './clean-modal.vue'; import cleanModal from './clean-modal.vue';
@@ -28,7 +18,8 @@ import { columns, querySchema } from './data';
const formOptions: VbenFormProps = { const formOptions: VbenFormProps = {
commonConfig: { commonConfig: {
labelWidth: 120, componentProps: { labelWidth: 120,
componentProps: {
allowClear: true, allowClear: true,
}, },
}, },
@@ -75,7 +66,7 @@ const gridOptions: VxeGridProps = {
keyField: 'id', keyField: 'id',
}, },
// 表格全局唯一表示 保存列配置需要用到 // 表格全局唯一表示 保存列配置需要用到
id: 'property-clean-index' id: 'property-clean-index',
}; };
const [BasicTable, tableApi] = useVbenVxeGrid({ const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -102,6 +93,11 @@ async function handleDelete(row: Required<CleanForm>) {
await tableApi.query(); await tableApi.query();
} }
async function handleView(row: Required<CleanForm>) {
modalApi.setData({ id: row.id, readonly: true });
modalApi.open();
}
function handleMultiDelete() { function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords(); const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<CleanForm>) => row.id); const ids = rows.map((row: Required<CleanForm>) => row.id);
@@ -117,9 +113,14 @@ function handleMultiDelete() {
} }
function handleDownloadExcel() { function handleDownloadExcel() {
commonDownloadExcel(cleanExport, '保洁管理数据', tableApi.formApi.form.values, { commonDownloadExcel(
fieldMappingTime: formOptions.fieldMappingTime, cleanExport,
}); '保洁管理数据',
tableApi.formApi.form.values,
{
fieldMappingTime: formOptions.fieldMappingTime,
},
);
} }
</script> </script>
@@ -137,9 +138,10 @@ function handleDownloadExcel() {
<a-button <a-button
:disabled="!vxeCheckboxChecked(tableApi)" :disabled="!vxeCheckboxChecked(tableApi)"
danger danger
type="primary" type="primary"
v-access:code="['property:clean:remove']" v-access:code="['property:clean:remove']"
@click="handleMultiDelete"> @click="handleMultiDelete"
>
{{ $t('pages.common.delete') }} {{ $t('pages.common.delete') }}
</a-button> </a-button>
<a-button <a-button
@@ -153,6 +155,7 @@ function handleDownloadExcel() {
</template> </template>
<template #action="{ row }"> <template #action="{ row }">
<Space> <Space>
<ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
<ghost-button <ghost-button
v-access:code="['property:clean:edit']" v-access:code="['property:clean:edit']"
@click.stop="handleEdit(row)" @click.stop="handleEdit(row)"

396
apps/web-antd/src/views/property/greenPlantRentalManagement/reportStatistics/index.vue
View File

@@ -1,7 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, ref } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { Button } from 'ant-design-vue'; import { Button } from 'ant-design-vue';
import { ref, onMounted } from 'vue';
import { EchartsUI, useEcharts, type EchartsUIType } from '@vben/plugins/echarts';
const orderLineRef = ref<EchartsUIType>(); const orderLineRef = ref<EchartsUIType>();
const leasePieRef = ref<EchartsUIType>(); const leasePieRef = ref<EchartsUIType>();
@@ -12,10 +16,17 @@ const maintenanceQualityScoresPeiRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(orderLineRef); const { renderEcharts } = useEcharts(orderLineRef);
const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef); const { renderEcharts: renderLeasePie } = useEcharts(leasePieRef);
const {renderEcharts: renderCustomerTypesBar} = useEcharts(customerTypesBarRef); const { renderEcharts: renderCustomerTypesBar } =
const {renderEcharts: renderCustomerRenewalLine} = useEcharts(customerRenewalLineRef); useEcharts(customerTypesBarRef);
const {renderEcharts: renderConservationTasksBar} = useEcharts(conservationTasksBarRef); const { renderEcharts: renderCustomerRenewalLine } = useEcharts(
const {renderEcharts: renderMaintenanceQualityScoresPei} = useEcharts(maintenanceQualityScoresPeiRef); customerRenewalLineRef,
);
const { renderEcharts: renderConservationTasksBar } = useEcharts(
conservationTasksBarRef,
);
const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
maintenanceQualityScoresPeiRef,
);
onMounted(() => { onMounted(() => {
renderEcharts({ renderEcharts({
@@ -85,7 +96,7 @@ onMounted(() => {
], ],
}); });
renderCustomerRenewalLine({ renderCustomerRenewalLine({
title: { text: '客户续租率趋势' }, title: { text: '客户续租率趋势' },
tooltip: { trigger: 'axis' }, tooltip: { trigger: 'axis' },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -103,191 +114,234 @@ onMounted(() => {
], ],
}); });
renderConservationTasksBar({ renderConservationTasksBar({
title: { text: '养护任务完成情况' }, title: { text: '养护任务完成情况' },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' } axisPointer: { type: 'shadow' },
},
legend: {
data: ['计划任务数', '已完成数', '完成率']
},
xAxis: [
{
type: 'category',
data: ['朝阳区', '海淀区', '西城区', '东城区']
}
],
yAxis: [
{
type: 'value',
name: '任务数',
min: 0,
max: 200,
position: 'left'
}, },
{ legend: {
type: 'value', data: ['计划任务数', '已完成数', '完成率'],
name: '完成率',
min: 0,
max: 100,
position: 'right',
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '计划任务数',
type: 'bar',
data: [156, 140, 130, 120]
}, },
{ xAxis: [
name: '已完成数', {
type: 'bar', type: 'category',
data: [152, 135, 125, 110] data: ['朝阳区', '海淀区', '西城区', '东城区'],
}, },
{ ],
name: '完成率', yAxis: [
type: 'line', {
yAxisIndex: 1, type: 'value',
data: [97.4, 96.4, 96.2, 91.7] name: '任务数',
} min: 0,
] max: 200,
position: 'left',
},
{
type: 'value',
name: '完成率',
min: 0,
max: 100,
position: 'right',
axisLabel: {
formatter: '{value}%',
},
},
],
series: [
{
name: '计划任务数',
type: 'bar',
data: [156, 140, 130, 120],
},
{
name: '已完成数',
type: 'bar',
data: [152, 135, 125, 110],
},
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
data: [97.4, 96.4, 96.2, 91.7],
},
],
}); });
renderMaintenanceQualityScoresPei({ renderMaintenanceQualityScoresPei({
title: { text: '养护质量评分分布', left: 'center' }, title: { text: '养护质量评分分布', left: 'center' },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b} : {d}%' formatter: '{b} : {d}%',
}, },
legend: { legend: {
orient: 'horizontal', orient: 'horizontal',
left: 'center', left: 'center',
bottom: 10, bottom: 10,
data: ['一星', '两星', '三星', '四星', '五星'] data: ['一星', '两星', '三星', '四星', '五星'],
}, },
series: [ series: [
{ {
name: '评分', name: '评分',
type: 'pie', type: 'pie',
radius: '60%', radius: '60%',
center: ['50%', '50%'], center: ['50%', '50%'],
data: [ data: [
{ value: 12.43, name: '一星' }, { value: 12.43, name: '一星' },
{ value: 12.26, name: '两星' }, { value: 12.26, name: '两星' },
{ value: 16.87, name: '三星' }, { value: 16.87, name: '三星' },
{ value: 25.75, name: '四星' }, { value: 25.75, name: '四星' },
{ value: 32.68, name: '五星' } { value: 32.68, name: '五星' },
], ],
label: { label: {
formatter: '{b} {d}%', formatter: '{b} {d}%',
show: true show: true,
} },
} },
] ],
}); });
}); });
</script> </script>
<template> <template>
<div class="main"> <div class="main">
<div class="box"> <div class="box">
<div class="title"> <div class="title">
<div class="title-text">绿植租赁业务统计报表：</div> <div class="title-text">绿植租赁业务统计报表：</div>
<div class="title-operate"> <div class="title-operate">
<div class="export"> <div class="export">
<Button size="large" style="background-color: #22C55E; color: #fff;">导出数据</Button> <Button size="large" style="color: #fff; background-color: #22c55e">
</div> 导出数据
</div> </Button>
</div>
</div> </div>
<div class="content"> </div>
<div class="row"> <div class="content">
</div> <div class="row"></div>
<div class="row-first"> <div class="row-first">
<div class="item1"> <div class="item1">
<EchartsUI ref="orderLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" /> <EchartsUI
</div> ref="orderLineRef"
<div class="item2"> height="350px"
<EchartsUI ref="leasePieRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" /> width="100%"
</div> style="background: #fff; border-radius: 8px"
</div> />
<div class="row-second"> </div>
<div class="item1"> <div class="item2">
<EchartsUI ref="customerTypesBarRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" /> <EchartsUI
</div> ref="leasePieRef"
<div class="item2"> height="350px"
<EchartsUI ref="customerRenewalLineRef" height="350px" width="100%" style="background:#fff;border-radius:8px;" /> width="100%"
</div> style="background: #fff; border-radius: 8px"
</div> />
<div class="row-third"> </div>
<EchartsUI ref="conservationTasksBarRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
</div>
<div class="row-fouth">
<EchartsUI ref="maintenanceQualityScoresPeiRef" height="100%" width="100%" style="background:#fff;border-radius:8px;" />
</div>
</div> </div>
<div class="row-second">
<div class="item1">
<EchartsUI
ref="customerTypesBarRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
<div class="item2">
<EchartsUI
ref="customerRenewalLineRef"
height="350px"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
</div>
<div class="row-third">
<EchartsUI
ref="conservationTasksBarRef"
height="100%"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
<div class="row-fouth">
<EchartsUI
ref="maintenanceQualityScoresPeiRef"
height="100%"
width="100%"
style="background: #fff; border-radius: 8px"
/>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
width: 100%; width: 100%;
.box{
margin: 40px; .box {
height: 100%; height: 100%;
.title{ margin: 40px;
.title {
display: flex;
justify-content: space-between;
.title-text {
font-size: 25px;
font-weight: bold;
}
.title-operate {
display: flex;
.calendar {
}
.export {
margin-left: 20px;
}
}
}
.content {
flex: 1;
height: 100%;
padding: 10px;
background-color: #962020;
.row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title-text{ }
font-size: 25px;
font-weight: bold; .row-first {
} display: flex;
.title-operate{ justify-content: space-between;
display: flex; height: 400px;
.calendar{ }
}
.export{ .row-second {
margin-left: 20px; display: flex;
} justify-content: space-between;
} height: 400px;
} }
.content{
flex:1; .row-third {
padding: 10px; height: 400px;
background-color: #962020; margin-bottom: 50px;
}
.row-fouth {
height: 400px;
}
.item1 {
width: 45%;
height: 100%; height: 100%;
.row{ }
display: flex;
justify-content: space-between; .item2 {
} width: 50%;
.row-first{ height: 100%;
display: flex; }
justify-content: space-between;
height: 400px;
}
.row-second{
display: flex;
justify-content: space-between;
height: 400px;
}
.row-third{
height: 400px;
margin-bottom: 50px;
}
.row-fouth{
height: 400px;
}
.item1{
width: 45%;
height: 100%;
}
.item2{
width: 50%;
height: 100%;
}
} }
} }
} }
</style> </style>