xk-admin/apps/web-antd/src/views/business/order/register/index.vue

<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { nextTick, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import {
  Page,
  useVbenModal,
} from '@vben/common-ui';

import { Button, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

const route = useRoute();

onMounted(() => {
  void nextTick(async () => {
    const raw = route.query.order_no;
    const orderNo = Array.isArray(raw) ? raw[0] : raw;
    if (!orderNo || !gridApi.formApi?.setValues) {
      return;
    }
    await gridApi.formApi.setValues({ order_no: String(orderNo) });
    await gridApi.query();
  });
});

const [PrescriptionDetailModal, PrescriptionDetailModalApi] = useVbenModal({
  connectedComponent: PrescriptionDetail,
});
const openPrescriptionDetail = (values) => {
  // 打开西药处方模态框逻辑
  PrescriptionDetailModalApi.setData({
    values,
  });
  PrescriptionDetailModalApi.open();
};

function formatRegisterPrice(price: unknown) {
  const n = Number(price);
  if (!Number.isFinite(n)) {
    return '—';
  }
  return `¥${n.toFixed(2)}`;
}
</script>

<template>
  <Page auto-content-height title="订单管理">
    <PrescriptionDetailModal />
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :actions="[]"
          :drop-down-actions="[]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #prescription="{ row }">
        <div v-for="item in row.prescription">
          <Button type="link" @click="openPrescriptionDetail(item.id)">{{ item.prescription_no }}</Button>
        </div>

      </template>
      <template #price="{ row }">
        <span>{{ formatRegisterPrice(row.price) }}</span>
      </template>
      <template #is_pay="{ row }">
        <Tag :color="row.is_pay === 1 ? 'green' : 'red'">
          {{ row.is_pay === 1 ? '已支付' : '未支付' }}
        </Tag>
      </template>
      <template #type="{ row }">
        <div class="mt-3">
          <Tag v-if="row.type === 0" color="purple">线下就诊</Tag>
          <Tag v-else-if="row.type === 1" color="blue">在线问诊</Tag>
          <Tag v-else-if="row.type === 3" color="green">在线复诊</Tag>
          <Tag v-else color="default">未知</Tag>
        </div>
      </template>
      <template #status="{ row }">
        <div class="mt-3">
<!--          状态:0待支付1已支付待接诊2接诊中3已结束4已取消5待评价6已评价7已拒诊-->
          <Tag v-if="row.status === 0" color="red">代支付</Tag>
          <Tag v-else-if="row.status === 1" color="green">待接诊</Tag>
          <Tag v-else-if="row.status === 2" color="red">接诊中</Tag>
          <Tag v-else-if="row.status === 3" color="purple">已结束</Tag>
          <Tag v-else-if="row.status === 4" color="orange">已取消</Tag>
          <Tag v-else-if="row.status === 5" color="purple">待评价</Tag>
          <Tag v-else-if="row.status === 6" color="purple">已评价</Tag>
          <Tag v-else-if="row.status === 7" color="red">已拒诊</Tag>
<!--          <p>{{ row.created_at }}</p>-->
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看处方',
              type: 'link',
              icon: 'marketeq:eye',
              // auth: ['超级订单', 'sys:user:save'],
              onClick: openPrescriptionDetail.bind(null, row.id),
            },
          ]"
          :drop-down-actions="[
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.custom-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-list-item {
  background-color: rgba(64, 158, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>