xk-admin/apps/web-antd/src/views/system/store-input/index.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, Tag } from 'ant-design-vue';

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

import {
  createStoreInput,
  getStoreInputDetail,
  updateStoreInput,
} from './api';
import DetailModal from './components/DetailModal.vue';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { inputGridOptions } from './config/table';
import {
  inputUserDisplayName,
  normalizeInputUser,
  resolveAvatarUrl,
} from './utils/inputUser';

const userStore = useUserStore();

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,
  gridOptions: inputGridOptions,
  gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

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

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

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

// 获取类型颜色
const getTypeColor = (type: number) => {
  return type == 0 ? 'blue' : 'green';
};

// 获取类型文本
const getTypeText = (type: number) => {
  return type == 0 ? '诊所' : '药店';
};

// 获取诊所类型颜色
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="门店信息录入">
    <FormModal />
    <DetailModalComponent />
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :actions="[
            {
              label: '新增录入',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
          ]"
        />
      </template>
      <template #type="{ row }">
        <Tag :color="getTypeColor(row.type)">
          {{ getTypeText(row.type) }}
        </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 #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看',
              type: 'link',
              icon: 'uil:eye',
              size: 'small',
              onClick: showDetail.bind(null, row),
            },
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              ifShow: row.status === 0,
              onClick: showModal.bind(null, row, true),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>