fix: 西药管理、西药、订单导出

apps/web-antd/src/api/request.ts

@@ -19,6 +19,7 @@ import { Base64 } from 'js-base64';
 import { useAuthStore } from '#/store';
 
 import { refreshTokenApi } from './core';
+import {downloadByData} from "#/util/tool";
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
@@ -130,9 +131,12 @@ function createRequestClient(baseURL: string) {
             throw Object.assign({}, response, { response });
           }
         }
+      } else if (response.data instanceof Blob) {
+        return response;
       }
 
-      throw Object.assign({}, response, { response });
+      return response;
+      // throw Object.assign({}, response, { response });
     },
   });
 

apps/web-antd/src/util/tool.ts

@@ -373,3 +373,34 @@ export function formatTimeToRelative(time: string) {
   }
   return time;
 }
+
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(
+  data: BlobPart,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const blobData = bom === undefined ? [data] : [bom, data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+
+  const blobURL = window.URL.createObjectURL(blob);
+  const tempLink = document.createElement('a');
+  tempLink.style.display = 'none';
+  tempLink.href = blobURL;
+  tempLink.setAttribute('download', filename);
+  if (tempLink.download === undefined) {
+    tempLink.setAttribute('target', '_blank');
+  }
+  document.body.append(tempLink);
+  tempLink.click();
+  tempLink.remove();
+  window.URL.revokeObjectURL(blobURL);
+}

apps/web-antd/src/views/business/order/product-order/api/index.ts

@@ -70,3 +70,10 @@ export async function sendOrder(data: Record<string, any>) {
 export async function expressDetailByOrderId(data: Record<string, any>) {
   return requestClient.post<any>(`express-detail/detail-by-order`, data);
 }
+
+/**
+ * 导出订单数据
+ */
+export async function exportOrderApi() {
+  return requestClient.download(`${prefix}export`);
+}

apps/web-antd/src/views/business/order/product-order/index.vue

@@ -11,11 +11,12 @@ import {
 } from '@vben/common-ui';
 import { SvgCakeIcon } from '@vben/icons';
 
-import { Button, Image, Tag } from 'ant-design-vue';
+import {Button, Image, message, Tag} from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 import {
+  exportOrderApi,
   getOrderList,
   saleAmountApi,
 } from '#/views/business/order/product-order/api';
@@ -25,6 +26,8 @@ import DetailModal from './components/detail.vue';
 import FormModalDemo from './components/modal.vue';
 import { formOptions } from './config/search';
 import { gridOptions } from './config/table';
+import {exportWesternMedicineApi} from "#/views/business/product/western-medicine/api";
+import {downloadByData} from "#/util/tool";
 
 const hasTopTableDropDownActions = ref(false);
 
@@ -138,6 +141,18 @@ const openPrescriptionDetail = (values) => {
   });
   PrescrtionDetailModalApi.open();
 };
+
+/**
+ * 西药导出
+ */
+const passApplication = () => {
+  // 新标签跳转到 exportWesternMedicineApi
+  exportOrderApi().then((res) => {
+    // 创建新的URL表示指定的File对象或者Blob对象。
+    downloadByData(res.data, '萧康云医-西药导出.xlsx');
+    message.success('导出成功!');
+  });
+};
 </script>
 
 <template>
@@ -150,6 +165,13 @@ const openPrescriptionDetail = (values) => {
       <template #toolbar-buttons>
         <TableAction
           :actions="[
+            {
+              label: '导出',
+              type: 'primary',
+              icon: 'ix:export-check',
+              // auth: ['超级西（中成）药', 'sys:user:save'],
+              onClick: passApplication.bind(null),
+            },
             {
               label: '展开全部',
               type: 'primary',

apps/web-antd/src/views/business/product/western-medicine/api/index.ts

@@ -0,0 +1,60 @@
+import type { RequestResponse } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+const prefix = 'western-medicine/';
+
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getWesternMedicineList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getWesternMedicineOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取西（中成）药详情
+ * @param id
+ */
+export async function getWesternMedicineInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 导出西药药品
+ */
+export async function exportWesternMedicineApi() {
+  return requestClient.download(`${prefix}export`);
+}
+
+/**
+ * 新增西（中成）药
+ * @param data
+ */
+export async function createWesternMedicine(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑西（中成）药
+ * @param data
+ */
+export async function updateWesternMedicine(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除西（中成）药
+ * @param data
+ */
+export async function deleteWesternMedicine(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/business/product/western-medicine/components/modal.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createWesternMedicine, updateWesternMedicine } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+const userStore = useUserStore();
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value
+          ? updateWesternMedicine
+          : createWesternMedicine;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}西（中成）药`"
+    class="w-[30%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/business/product/western-medicine/config/form.ts

@@ -0,0 +1,161 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { useUserStore } from '@vben/stores';
+
+import { getSupplierOption } from '#/views/system/supplier/api';
+
+const userStore = useUserStore();
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'showSelect',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'image',
+      label: '产品图片',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          // 自定义过滤逻辑，确保可以根据 name 进行搜索
+          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        },
+        // 菜单接口转options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        api: getSupplierOption,
+        placeholder: '请选择',
+      },
+      dependencies: {
+        disabled() {
+          return userStore?.userInfo?.roles?.user_type === 3;
+        },
+        triggerFields: ['supplier_id'],
+      },
+      fieldName: 'supplier_id',
+      formItemClass: 'col-span-6',
+      label: '所属供应商',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入药品昵称',
+      },
+      fieldName: 'drug_name',
+      formItemClass: 'col-span-6',
+      label: '药品昵称',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入药品别名',
+      },
+      fieldName: 'drug_alias',
+      formItemClass: 'col-span-6',
+      label: '药品别名',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入药品编号',
+      },
+      fieldName: 'drug_number',
+      formItemClass: 'col-span-6',
+      label: '药品编号',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入规格',
+      },
+      fieldName: 'specification',
+      formItemClass: 'col-span-6',
+      label: '规格',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        placeholder: '请选择',
+        options: [
+          {
+            label: '草稿',
+            value: 1,
+          },
+          {
+            label: '下架',
+            value: 2,
+          },
+          {
+            label: '上架',
+            value: 3,
+          },
+        ],
+      },
+      defaultValue: 1,
+      formItemClass: 'col-span-12',
+      fieldName: 'status',
+      label: '商品状态',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入药品主治功能',
+      },
+      fieldName: 'function',
+      label: '药品主治功能',
+      rules: 'required',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'instruction',
+      label: '产品说明书',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/business/product/western-medicine/config/search.ts

@@ -0,0 +1,37 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '西（中成）药名称',
+    },
+    // {
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     format: 'YYYY-MM-DD', // 确保格式与你需要的一致
+    //   },
+    //   // defaultValue: [dayjs().startOf('month'), dayjs()],
+    //   fieldName: 'search_time',
+    //   label: '时间范围',
+    // },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/business/product/western-medicine/config/table.ts

@@ -0,0 +1,87 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getWesternMedicineList } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'drug_name', align: 'left', title: '药品名称' },
+    { field: 'pinyin_simple', title: '拼音' },
+    { field: 'supplier.name', title: '供应商', slots: { default: 'supplier' } },
+    {
+      field: 'image',
+      align: 'left',
+      title: '产品图片',
+      slots: { default: 'image' },
+      width: 130,
+    },
+    {
+      field: 'instruction',
+      align: 'left',
+      title: '说明书',
+      slots: { default: 'instruction' },
+      width: 130,
+    },
+    { field: 'function', title: '主要功能' },
+    { field: 'specification', title: '规格' },
+    { field: 'status', title: '状态', slots: { default: 'status' } },
+    { field: 'created_at', title: '发布时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getWesternMedicineList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  // exportConfig: {
+  //   api: passApplicationApi,
+  // },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/business/product/western-medicine/index.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import {deleteWesternMedicine, exportWesternMedicineApi} from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+import {downloadByData} from "#/util/tool";
+
+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 [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteWesternMedicine({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+/**
+ * 西药导出
+ */
+const passApplication = () => {
+  // 新标签跳转到 exportWesternMedicineApi
+  exportWesternMedicineApi().then((res) => {
+    // 创建新的URL表示指定的File对象或者Blob对象。
+    downloadByData(res.data, '萧康云医-西药导出.xlsx');
+    message.success('导出成功!');
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height title="西（中成）药管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级西（中成）药', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+            {
+              label: '导出',
+              type: 'primary',
+              icon: 'ix:export-check',
+              // auth: ['超级西（中成）药', 'sys:user:save'],
+              onClick: passApplication.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级西（中成）药', 'sys:user:save'],
+              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 #image="{ row }">
+        <Image :src="row.image" height="30" width="30" />
+      </template>
+      <template #supplier="{ row }">
+        {{ row.supplier?.name || row.source }}
+      </template>
+      <template #instruction="{ row }">
+        <div class="div" style="width: 120px;height: 120px; overflow: scroll">
+          <Image :src="row.instruction" height="30" width="30" />
+        </div>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status_color">{{ row.status_txt }}</Tag>
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['western-medicine', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['western-medicine', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            // {
+            //   label: '编辑',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['western-medicine', 'sys:role:detail'],
+            //   onClick: showModal.bind(null, row, true),
+            // },
+            // {
+            //   label: '删除',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['western-medicine', 'sys:role:detail'],
+            //   popConfirm: {
+            //     title: '确定删除吗？',
+            //     confirm: deleteApi.bind(null, row.id),
+            //   },
+            // },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>