feat: 订单

wupengfei

昨天 6c4510ab6dfd1f0962e77268fa6e49e17861a00a

 src/views/StandardOrderManage/OrderManageDetail.vue

@@ -3,68 +3,104 @@
    <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 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="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />

          <ProFormItemV2 label="实付款:" prop="payAmount">
            <ProFormInputNumber
              v-model="form.payAmount"
              :controls="false"
              :min="0"
              :precision="2"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="服务费:" prop="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          <ProFormItemV2 label="实收款:" prop="receiveAmount">
            <ProFormInputNumber
              v-model="form.receiveAmount"
              :controls="false"
              :min="0"
              :precision="2"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="结算款:" prop="cooperationStatus">
            <ProFormInputNumber v-model="form.balance" :controls="false" :min="0" :precision="2" />
          <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>
        <ProTableV2
          v-bind="proTableProps"
          :columns="column"
          :show-operation-column="false"
          :auto-height="false"
          :table-props="{
            height: '400px',
          }"
        >
        </ProTableV2>
      </ChunkCell>
    </AppScrollContainer>
  </LoadingLayout>
@@ -83,23 +119,53 @@
  useTable,
  ProTableV2,
} from '@bole-core/components';
import { EnumWalletTransactionStatusText } from '@/constants';
import * as userServices from '@/services/api/user';
import { format, setOSSLink } from '@/utils';
import {
  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';

defineOptions({
  name: 'OrderManageDetail',
});

type ServiceItem = {
  serviceName: string;
  serviceFile: string;
  specName: string;
  specNumber: number;
  specPrice: number;
  payAmount: number;
};

const { column, operationBtns } = useAccess({});

const route = useRoute();
const id = (route.params.id as string) ?? '';

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 = {
@@ -108,75 +174,98 @@

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;
      }
      return res;
    } catch (error) {}
        data: paginateList(list, pageIndex, pageSize),
      });
    } catch (error) {
      console.log('error: ', 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();
});
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.step-wrapper {
  margin: 0 auto;
  padding: 24px 0;
}
.service-name-wrapper {
  display: flex;
  align-items: center;

.settlement-user-list-chunk {
  :deep() {
    .no-data img {
      width: 280px;
    }
  .service-name-img {
    margin-right: 10px;
    width: 120px;
    height: 120px;
    object-fit: cover;
  }
}
</style>
<style lang="scss">
.text-over-tooltip-content {
  max-width: 600px;
  word-break: break-all;
}
</style>