Compare commits
2 Commits
b6f7558aaa
...
0a56fa2194
| Author | SHA1 | Date | |
|---|---|---|---|
| 0a56fa2194 | |||
| ea185bfcea |
@ -77,7 +77,7 @@ export interface Clean_orderForm extends BaseEntity {
|
||||
/**
|
||||
* 主键
|
||||
*/
|
||||
id?: string | number;
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* 位置
|
||||
|
||||
@ -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: '劳务名称',
|
||||
@ -50,7 +58,7 @@ const detailSchema = [
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
{
|
||||
label: '保洁面积',
|
||||
fieldName: 'area',
|
||||
component: 'InputNumber',
|
||||
@ -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,9 +236,10 @@ async function handleClosed() {
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
<BasicForm >
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
||||
</template>
|
||||
<style scoped>
|
||||
/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
|
||||
:deep(.ant-input[disabled]),
|
||||
@ -229,4 +250,4 @@ async function handleClosed() {
|
||||
/* 有些浏览器需要这个来覆盖默认颜色 */
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'location',
|
||||
export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
|
||||
{
|
||||
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,
|
||||
|
||||
@ -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时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
|
||||
Loading…
Reference in New Issue
Block a user