feat: 订单

wupengfei

2 天以前 e719d76f10d8b8b3a95437cd5f37458f36bb4abb

 src/views/EmploymentManage/StandardOrderDetail.vue

@@ -1,73 +1,113 @@
<template>
  <LoadingLayout :loading="state.loading">
  <LoadingLayout :loading="isLoading">
    <AppScrollContainer>
      <ChunkCell title="状态">
        <ProForm :model="form" ref="formRef" label-width="120px" :is-read="true">
          <ProFormItemV2 label="预约状态:" prop="cooperationStatus">
            <ProFormRadio v-model="form.access" :value-enum="EnumWalletTransactionStatusText" />
          <ProFormItemV2 label="预约状态:" prop="appointmentStatus">
            <ProFormRadio
              v-model="form.appointmentStatus"
              :value-enum="EnumStandardOrderAppointmentStatusText"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="订单状态:" prop="cooperationStatus">
            <ProFormRadio v-model="form.access" :value-enum="EnumWalletTransactionStatusText" />
          <ProFormItemV2 label="订单状态:" prop="payStatus">
            <ProFormRadio v-model="form.payStatus" :value-enum="EnumStandardOrderPayStatusText" />
          </ProFormItemV2>
          <ProFormItemV2 label="结算状态:" prop="cooperationStatus">
            <ProFormRadio v-model="form.access" :value-enum="EnumWalletTransactionStatusText" />
          <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="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="服务单号:" prop="serviceCode">
            <ProFormText v-model.trim="form.serviceCode" />
          </ProFormItemV2>
          <ProFormItemV2 label="下单用户:" prop="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="下单用户:" prop="createdUserName">
            <ProFormText v-model.trim="form.createdUserName" />
          </ProFormItemV2>
          <ProFormItemV2 label="服务时间:" prop="cooperationStatus">
          <ProFormItemV2 label="服务时间:" prop="time">
            <ProFormDatePicker
              v-model="form.access"
              v-model="form.time"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择日期"
            ></ProFormDatePicker>
          </ProFormItemV2>
          <ProFormItemV2 label="服务地址:" prop="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="服务地址:" prop="address">
            <ProFormText v-model.trim="form.address" />
          </ProFormItemV2>
          <ProFormItemV2 label="服务机构:" prop="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="服务机构:" prop="supplierEnterpriseName">
            <ProFormText v-model.trim="form.supplierEnterpriseName" />
          </ProFormItemV2>
          <ProFormItemV2 label="服务人员:" prop="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="服务人员:" prop="servers">
            <ProFormText v-model.trim="form.servers" />
          </ProFormItemV2>
          <ProFormItemV2 label="备注:" prop="cooperationStatus">
            <ProFormText v-model.trim="form.access" />
          <ProFormItemV2 label="备注:" prop="remark">
            <ProFormText v-model.trim="form.remark" />
          </ProFormItemV2>
          <ProFormItemV2 label="实付款:" prop="invoiceTaxPointRate">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          </ProFormItemV2>
          <ProFormItemV2 label="实收款:" prop="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          </ProFormItemV2>
          <ProFormItemV2 label="服务费:" prop="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          </ProFormItemV2>
          <ProFormItemV2 label="结算款:" prop="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          </ProFormItemV2>
        </ProForm>
          <ProFormItemV2 label="服务:" prop="remark">
        <ProTableV2
          v-bind="proTableProps"
          :columns="column"
          :show-operation-column="false"
          :auto-height="false"
          :table-props="{
            height: '400px',
                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>

        <div class="chuck-add-or-edit-actions">
          <el-button class="chuck-add-or-edit-actions" @click="handleBack">取消预约</el-button>
          <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
          >
@@ -90,25 +130,57 @@
  useTable,
  ProTableV2,
} from '@bole-core/components';
import { EnumWalletTransactionStatusText } from '@/constants';
import * as userServices from '@/services/api/user';
import { format, setOSSLink } from '@/utils';
import { useRouteView } from '@/hooks';
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 { closeViewPush } = useRouteView();
const id = (route.params.id as string) ?? '';
const { closeViewPush } = useRouteView();

const form = reactive({
  identity: '',
  access: '' as any as EnumEnterpriseWalletAccess,
  balance: 0,
  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 = {
@@ -117,64 +189,129 @@

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,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetPersonalUserTransactionsQuery = {
      let list = [...form.serviceItems];
      return Promise.resolve({
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
          totalCount: list.length,
        },
        enterpriseWalletId: id,
      };
      let res = await userServices.getPersonalUserTransactions(params);
      if (res.objectData?.enterpriseWallet) {
        form.identity = res.objectData.enterpriseWallet.identity;
        form.access = res.objectData.enterpriseWallet.access;
        form.balance = res.objectData.enterpriseWallet.balance;
        data: paginateList(list, pageIndex, pageSize),
      });
    } catch (error) {
      console.log('error: ', error);
      }
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
    },
    columnsRenderProps: {
      transDate: { type: 'date' },
      sendTime: { type: 'date' },
      amount: { type: 'money' },
      transactionStatus: { type: 'enum', valueEnum: EnumWalletTransactionStatusText },
      ereceiptDownloadOssUrl: {
        type: 'url',
        formatter: (row: API.GetPersonalUserTransactionsQueryResultItem) =>
          row.ereceiptDownloadOssUrl ? setOSSLink(row.ereceiptDownloadOssUrl) : '',
      },
      specPrice: { type: 'money' },
      payAmount: { type: 'money' },
    },
  }
);

onMounted(() => {
  state.loading = false;
  getList();
});

function handleBack() {
  closeViewPush(route, {
    name: 'TaskManageList',
    name: 'StandardOrder',
  });
}

async function handleSubmit() {}
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>