xk-admin/apps/web-antd/src/views/system/pharmacy/index.vue

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

import { ref } from 'vue';

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

import { useClipboard } from '@vueuse/core';
import { Button, Image, message, Switch, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Icon } from '#/components/icon';
import QrCodePreview from '#/components/modal/QrCodePreview.vue';
import { TableAction } from '#/components/table-action';

// 导入药店管理相关的API（直接使用store的API）
import {
  deleteStore,
  openPcWindowsApiByStore,
  openQrCodeApi,
  updateStoreShippingFree,
  updateStoreSubscribeStatus,
} from '#/views/system/store/api';
// 导入表单弹窗组件
import FormModalDemo from './components/modal.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, // 表格配置（已包含type=1过滤）
  gridEvents, // 表格事件
});

// 初始化二维码预览弹窗
const [QrCodePreviewModal, QrCodePreviewApi] = useVbenModal({
  connectedComponent: QrCodePreview,
});

// 打开二维码预览弹窗
const openQrCodeModal = (url, title, address) => {
  QrCodePreviewApi.setData({
    values: url, // 二维码图片URL
    title, // 标题
    address, // 地址
  });
  QrCodePreviewApi.open();
};

// 初始化表单弹窗
const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

// 显示表单弹窗（新增或编辑）
const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    values: data, // 表单数据
    update: isUpdate, // 是否为更新模式
    gridApi, // 表格API引用（用于刷新表格）
  });
  formModalApi.open();
};

// 删除药店
const deleteApi = (row: any) => {
  let ids = [];
  // 如果传入的是单个ID，则删除单个；否则删除选中的多个
  if (row) {
    ids.push(row);
  } else {
    // 获取所有选中的记录ID
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  // 调用删除API
  deleteStore({ ids }).then(() => {
    message.success('删除成功!');
    // 刷新表格
    gridApi.reload();
  });
};

/**
 * 开通后台账号
 * @param id 药店ID
 */
function openPcWindows(id) {
  openPcWindowsApiByStore(id).then(() => {
    message.success('操作成功!');
    // 刷新表格
    gridApi.reload();
  });
}

/**
 * 生成药店二维码
 * @param id 药店ID
 */
function openQrCode(id) {
  openQrCodeApi(id).then(() => {
    message.success('操作成功!');
    // 刷新表格
    gridApi.reload();
  });
}

// 复制文本到剪贴板
function copyText(source) {
  copy(source);
  message.success('复制成功');
}
const { copy } = useClipboard({ legacy: true });

/**
 * 更新药店包邮状态
 * @param id 药店ID
 */
const updateShippingFree = (id: number) => {
  updateStoreShippingFree({ id }).then(() => {
    message.success('修改成功!');
    // 重新查询表格数据
    gridApi.query();
  });
};

/**
 * 更新药店价格波动订阅状态
 * @param id 药店ID
 */
const updateSubscribe = (id: number) => {
  updateStoreSubscribeStatus({ id }).then(() => {
    message.success('修改成功!');
    gridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="药店管理">
    <FormModal />
    <QrCodePreviewModal />
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, false),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #mobile="{ row }">
        <div>
          药店联系人：{{ row.contact }}
          <Button type="link" @click="copyText(row.contact)">复制</Button>
        </div>
        <div>
          号码：{{ row.mobile }}
          <Button type="link" @click="copyText(row.mobile)">复制</Button>
        </div>
      </template>
      <template #qr_code="{ row }">
        <div class="qr_code">
          <Image
            :preview="false"
            :src="row.qr_code"
            height="30"
            width="30"
            @click="
              openQrCodeModal(
                row.qr_code,
                row.name,
                `${row.province.name}${row.city.name}${row.position}`,
              )
            "
          />
        </div>
      </template>
      <template #is_shipping_free="{ row }">
        <Switch
          :checked="row.is_shipping_free"
          :checked-value="1"
          :un-checked-value="0"
          checked-children="包邮"
          un-checked-children="不包邮"
          @click="updateShippingFree(row.id)"
        />
      </template>
      <template #subscribe_price_change="{ row }">
        <Tag
          :color="row.subscribe_price_change === 0 ? 'success' : 'default'"
          style="cursor: pointer"
          @click="updateSubscribe(row.id)"
        >
          {{ row.subscribe_price_change === 0 ? '订阅' : '不订阅' }}
        </Tag>
      </template>
      <template #start-time="{ row }">
        早：<Tag color="success">{{ row.start_time }}</Tag>
        <br />
        <br />
        晚：<Tag color="error">{{ row.end_time }}</Tag>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              onClick: showModal.bind(null, row, true),
            },
            {
              label: '删除',
              type: 'link',
              icon: 'ant-design:delete-outlined',
              size: 'small',
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, row.id),
              },
            },
          ]"
          :drop-down-actions="[
            {
              label: '开通后台',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              popConfirm: {
                title: '确定开通后台吗？',
                confirm: openPcWindows.bind(null, row.id),
              },
            },
            {
              label: '生成药店二维码',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              popConfirm: {
                title: '确定生成药店二维码吗？',
                confirm: openQrCode.bind(null, row.id),
              },
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>

<style scoped>
.qr_code:hover {
  cursor: pointer;
}
</style>