xk-admin/apps/web-antd/src/views/system/store-input/audit.vue

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

import { computed, ref } from 'vue';

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

import { Avatar, Button, message, Modal, Tag, Textarea } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import PromoterInfoCard from '#/components/promoter/PromoterInfoCard.vue';

import { auditStoreInput, getStoreInputDetail } from './api';
import AuditModal from './components/AuditModal.vue';
import DetailModal from './components/DetailModal.vue';
import { auditFormOptions } from './config/search';
import { auditGridOptions } from './config/table';
import {
  inputUserDisplayName,
  normalizeInputUser,
  resolveAvatarUrl,
} from './utils/inputUser';
import { isPlatformSuperAdmin } from '#/views/system/admin/_shared/platform-admin-role';

const userStore = useUserStore();

// 仅超管/系统管理员可审核门店录入
const canAuditStoreInput = computed(() => {
  return isPlatformSuperAdmin(userStore?.userInfo);
});

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

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

const [DetailModalComponent, detailModalApi] = useVbenModal({
  connectedComponent: DetailModal,
});

const [AuditModalComponent, auditModalApi] = useVbenModal({
  connectedComponent: AuditModal,
});

const showDetail = (row: any) => {
  detailModalApi.setData({
    values: row,
  });
  detailModalApi.open();
};

const showAudit = (row: any) => {
  auditModalApi.setData({
    values: row,
    gridApi,
  });
  auditModalApi.open();
};

// 获取诊所类型颜色
const getClinicTypeColor = (type: number) => {
  if (type == 1) return 'blue';
  if (type == 2) return 'green';
  return 'default';
};

// 获取诊所类型文本
const getClinicTypeText = (type: number) => {
  if (type == 1) return '西医诊所';
  if (type == 2) return '中医诊所';
  return '未设置';
};

// 获取审核状态颜色
const getStatusColor = (status: number) => {
  if (status == 0) return 'orange';
  if (status == 1) return 'success';
  return 'error';
};

// 获取审核状态文本
const getStatusText = (status: number) => {
  if (status == 0) return '待审核';
  if (status == 1) return '审核通过';
  return '审核拒绝';
};
</script>

<template>
  <Page auto-content-height title="门店信息审核">
    <DetailModalComponent />
    <AuditModalComponent />
    <Grid>
      <template #type="{ row }">
        <Tag :color="row.type == 0 ? 'blue' : 'green'">
          {{ row.type == 0 ? '诊所' : '药店' }}
        </Tag>
      </template>
      <template #clinic_type="{ row }">
        <Tag :color="getClinicTypeColor(row.clinic_type)">
          {{ getClinicTypeText(row.clinic_type) }}
        </Tag>
      </template>
      <template #status="{ row }">
        <Tag :color="getStatusColor(row.status)">
          {{ getStatusText(row.status) }}
        </Tag>
      </template>
      <template #inputUser="{ row }">
        <div v-if="normalizeInputUser(row)" class="flex items-center gap-2">
          <Avatar
            v-if="resolveAvatarUrl(row.inputUser?.avatar)"
            :src="resolveAvatarUrl(row.inputUser?.avatar)"
            :size="28"
          />
          <Avatar v-else :size="28">{{ inputUserDisplayName(row.inputUser).charAt(0) }}</Avatar>
          <span>{{ inputUserDisplayName(row.inputUser) }}</span>
        </div>
        <span v-else>-</span>
      </template>
      <template #promoter_admin="{ row }">
        <PromoterInfoCard :admin="row.promoter_admin" size="compact" />
      </template>
      <template #audit_time="{ row }">
        <span v-if="row.audit_time">
          {{ new Date(row.audit_time * 1000).toLocaleString() }}
        </span>
        <span v-else>-</span>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看详情',
              type: 'link',
              icon: 'uil:eye',
              size: 'small',
              onClick: showDetail.bind(null, row),
            },
            {
              label: '审核',
              type: 'link',
              icon: 'uil:check',
              size: 'small',
              ifShow: row.status === 0 && canAuditStoreInput,
              onClick: showAudit.bind(null, row),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>