<template>
|
<LoadingLayout :loading="isLoading">
|
<AppScrollContainer>
|
<ChunkCell title="状态">
|
<ProForm :model="form" ref="formRef" label-width="120px" :is-read="true">
|
<ProFormItemV2 label="预约状态:" prop="appointmentStatus">
|
<ProFormRadio
|
v-model="form.appointmentStatus"
|
:value-enum="EnumStandardOrderAppointmentStatusText"
|
/>
|
</ProFormItemV2>
|
<ProFormItemV2 label="订单状态:" prop="payStatus">
|
<ProFormRadio v-model="form.payStatus" :value-enum="EnumStandardOrderPayStatusText" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="结算状态:" prop="settlementStatus">
|
<ProFormRadio
|
v-model="form.settlementStatus"
|
:value-enum="EnumStandardOrderSettlementStatusText"
|
/>
|
</ProFormItemV2>
|
</ProForm>
|
</ChunkCell>
|
<ChunkCell title="订单信息">
|
<ProForm :model="form" ref="formRef" label-width="120px" :is-read="true">
|
<ProFormItemV2 label="服务单号:" prop="serviceCode">
|
<ProFormText v-model.trim="form.serviceCode" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="下单用户:" prop="createdUserName">
|
<ProFormText v-model.trim="form.createdUserName" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务时间:" prop="time">
|
<ProFormDatePicker
|
v-model="form.time"
|
type="date"
|
format="YYYY-MM-DD HH:mm:ss"
|
placeholder="请选择日期"
|
></ProFormDatePicker>
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务地址:" prop="address">
|
<ProFormText v-model.trim="form.address" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务机构:" prop="supplierEnterpriseName">
|
<ProFormText v-model.trim="form.supplierEnterpriseName" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务人员:" prop="servers">
|
<ProFormText v-model.trim="form.servers" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="备注:" prop="remark">
|
<ProFormText v-model.trim="form.remark" />
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务:" prop="remark">
|
<ProTableV2
|
v-bind="proTableProps"
|
:columns="column"
|
:show-operation-column="false"
|
:auto-height="false"
|
:table-props="{
|
height: '185px',
|
}"
|
:show-pagination="false"
|
>
|
<template #serviceName="{ row }">
|
<div class="service-name-wrapper">
|
<img class="service-name-img" :src="setOSSLink(row.serviceFile)" alt="" />
|
<div class="service-name-text">{{ row.serviceName }}</div>
|
</div>
|
</template>
|
</ProTableV2>
|
</ProFormItemV2>
|
|
<ProFormItemV2 label="实付款:" prop="payAmount">
|
<ProFormInputNumber
|
v-model="form.payAmount"
|
:controls="false"
|
:min="0"
|
:precision="2"
|
/>
|
</ProFormItemV2>
|
<ProFormItemV2 label="实收款:" prop="receiveAmount">
|
<ProFormInputNumber
|
v-model="form.receiveAmount"
|
:controls="false"
|
:min="0"
|
:precision="2"
|
/>
|
</ProFormItemV2>
|
<ProFormItemV2 label="服务费:" prop="serviceFee">
|
<ProFormInputNumber
|
v-model="form.serviceFee"
|
:controls="false"
|
:min="0"
|
:precision="2"
|
/>
|
</ProFormItemV2>
|
<ProFormItemV2 label="结算款:" prop="settlementAmount">
|
<ProFormInputNumber
|
v-model="form.settlementAmount"
|
:controls="false"
|
:min="0"
|
:precision="2"
|
/>
|
</ProFormItemV2>
|
</ProForm>
|
<div
|
class="chuck-add-or-edit-actions"
|
v-if="form.appointmentStatus === EnumStandardOrderAppointmentStatus.WaitSure"
|
>
|
<el-button class="chuck-add-or-edit-actions" @click="cancelStandardOrderAppointment"
|
>取消预约</el-button
|
>
|
<el-button type="primary" class="chuck-add-or-edit-actions" @click="handleSubmit"
|
>确认预约</el-button
|
>
|
</div>
|
</ChunkCell>
|
</AppScrollContainer>
|
</LoadingLayout>
|
</template>
|
<script setup lang="ts">
|
import {
|
LoadingLayout,
|
AppScrollContainer,
|
ChunkCell,
|
ProForm,
|
ProFormItemV2,
|
ProFormText,
|
ProFormRadio,
|
ProFormDatePicker,
|
ProFormInputNumber,
|
useTable,
|
ProTableV2,
|
} from '@bole-core/components';
|
import {
|
EnumStandardOrderAppointmentStatus,
|
EnumStandardOrderAppointmentStatusText,
|
EnumStandardOrderPayStatusText,
|
EnumStandardOrderSettlementStatusText,
|
} from '@/constants';
|
import * as standardOrderServices from '@/services/api/standardOrder';
|
import { format, paginateList, setOSSLink } from '@/utils';
|
import { useQuery } from '@tanstack/vue-query';
|
import { ModelValueType } from 'element-plus';
|
import { Message } from '@bole-core/core';
|
|
defineOptions({
|
name: 'StandardOrderDetail',
|
});
|
|
type ServiceItem = {
|
serviceName: string;
|
serviceFile: string;
|
specName: string;
|
specNumber: number;
|
specPrice: number;
|
payAmount: number;
|
};
|
|
const { column, operationBtns } = useAccess({});
|
const eventContext = useGlobalEventContext();
|
|
const route = useRoute();
|
const id = (route.params.id as string) ?? '';
|
const { closeViewPush } = useRouteView();
|
|
const form = reactive({
|
appointmentStatus: '' as any as EnumStandardOrderAppointmentStatus,
|
payStatus: '' as any as EnumStandardOrderPayStatus,
|
settlementStatus: '' as any as EnumStandardOrderSettlementStatus,
|
serviceCode: '',
|
createdUserName: '',
|
time: [] as unknown as ModelValueType,
|
address: '',
|
supplierEnterpriseName: '',
|
serviceName: '',
|
servers: '',
|
remark: '',
|
|
payAmount: 0,
|
receiveAmount: 0,
|
serviceFee: 0,
|
settlementAmount: 0,
|
|
serviceItems: [] as ServiceItem[],
|
});
|
|
const BaseState = {
|
loading: true,
|
};
|
|
const state = reactive({ ...BaseState });
|
|
const { isLoading } = useQuery({
|
queryKey: ['standardOrderServices/getStandardOrder', id],
|
queryFn: async () => {
|
return await standardOrderServices.getStandardOrder(
|
{ id: id },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.GetStandardOrderQueryResult),
|
onSuccess(data) {
|
form.appointmentStatus = data.appointmentStatus;
|
form.payStatus = data.payStatus;
|
form.settlementStatus = data.settlementStatus;
|
form.serviceCode = data.serviceCode;
|
form.createdUserName = data.createdUserName;
|
form.time = [data.beginTime, data.endTime];
|
form.address = `${data.provinceContent}${data.cityContent}${data.addressName}${data.addressName}${data.addressDetail}\t${data.name}\t${data.contactPhoneNumber}`;
|
form.serviceName = data.serviceName;
|
form.supplierEnterpriseName = data.supplierEnterpriseName;
|
form.servers = data.servers?.length ? data.servers.map((x) => x.name).join(',') : '';
|
form.remark = data.remark;
|
form.payAmount = data.payAmount;
|
form.receiveAmount = data.receiveAmount;
|
form.serviceFee = data.serviceFee;
|
form.settlementAmount = data.settlementAmount;
|
|
form.serviceItems = [
|
{
|
serviceName: data.serviceName,
|
serviceFile: data.serviceFile,
|
specName: data.specName,
|
specNumber: data.specNumber,
|
specPrice: data.specPrice,
|
payAmount: data.payAmount,
|
},
|
];
|
getList();
|
},
|
enabled: computed(() => !!id),
|
});
|
|
const {
|
getDataSource: getList,
|
proTableProps,
|
paginationState,
|
extraParamState,
|
} = useTable(
|
async ({ pageIndex, pageSize }, extraParamState) => {
|
try {
|
let list = [...form.serviceItems];
|
return Promise.resolve({
|
pageModel: {
|
rows: pageSize,
|
page: pageIndex,
|
totalCount: list.length,
|
},
|
data: paginateList(list, pageIndex, pageSize),
|
});
|
} catch (error) {
|
console.log('error: ', error);
|
}
|
},
|
{
|
defaultExtraParams: {
|
orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
|
},
|
columnsRenderProps: {
|
specPrice: { type: 'money' },
|
payAmount: { type: 'money' },
|
},
|
}
|
);
|
|
function handleBack() {
|
closeViewPush(route, {
|
name: 'StandardOrder',
|
});
|
}
|
|
async function cancelStandardOrderAppointment() {
|
try {
|
await Message.tipMessage('确认要取消预约吗？');
|
let params: API.CancelStandardOrderAppointmentCommand = {
|
id: id,
|
};
|
let res = await standardOrderServices.cancelStandardOrderAppointment(params);
|
if (res) {
|
Message.successMessage('操作成功');
|
eventContext.emit('standardOrder:confirm');
|
handleBack();
|
}
|
} catch (error) {}
|
}
|
|
async function handleSubmit() {
|
try {
|
let params: API.SureStandardOrderAppointmentCommand = {
|
id: id,
|
};
|
let res = await standardOrderServices.sureStandardOrderAppointment(params);
|
if (res) {
|
Message.successMessage('操作成功');
|
eventContext.emit('standardOrder:confirm');
|
handleBack();
|
}
|
} catch (error) {}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.service-name-wrapper {
|
display: flex;
|
align-items: center;
|
|
.service-name-img {
|
margin-right: 10px;
|
width: 120px;
|
height: 120px;
|
object-fit: cover;
|
}
|
}
|
</style>
|
