diff --git a/apps/web-antd/src/views/business/order/product-order/index.vue b/apps/web-antd/src/views/business/order/product-order/index.vue index 331e552a..be4c207a 100644 --- a/apps/web-antd/src/views/business/order/product-order/index.vue +++ b/apps/web-antd/src/views/business/order/product-order/index.vue @@ -26,7 +26,6 @@ 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); diff --git a/apps/web-antd/src/views/business/product/china-medicine/api/index.ts b/apps/web-antd/src/views/business/product/china-medicine/api/index.ts new file mode 100644 index 00000000..f8181198 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/api/index.ts @@ -0,0 +1,68 @@ +import type { RequestResponse } from '@vben/request'; + +import { requestClient } from '#/api/request'; + +const prefix = 'china-medicine/'; + +/** + * 分页查询用户列表 + * @param data + */ +export async function getChinaMedicineList(data: any) { + return requestClient.get(`${prefix}list`, { params: data }); +} + +/** + * 分页查询用户列表 + * @param data + */ +export async function getChinaMedicineOption(data: any) { + return requestClient.get(`${prefix}option`, { params: data }); +} + +/** + * 获取中药详情 + * @param id + */ +export async function getChinaMedicineInfo(id: number) { + return requestClient.get(`${prefix}detail`, { params: { id } }); +} + +/** + * 导出中药药品 + */ +export async function exportChinaMedicineApi() { + return requestClient.download(`${prefix}export`); +} + +/** + * 新增中药 + * @param data + */ +export async function createChinaMedicine(data: Record) { + return requestClient.post(`${prefix}create`, data); +} + +/** + * 编辑中药 + * @param data + */ +export async function updateChinaMedicine(data: Record) { + return requestClient.post(`${prefix}update`, data); +} + +/** + * 删除中药 + * @param data + */ +export async function deleteChinaMedicine(data: Record) { + return requestClient.post(`${prefix}delete`, data); +} + +/** + * 导入中药 + * @param data + */ +export async function importChinaMedicineApi(data: Record) { + return requestClient.upload(`${prefix}import`, data); +} diff --git a/apps/web-antd/src/views/business/product/china-medicine/components/ExcelUpload.vue b/apps/web-antd/src/views/business/product/china-medicine/components/ExcelUpload.vue new file mode 100644 index 00000000..54065b66 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/components/ExcelUpload.vue @@ -0,0 +1,131 @@ + + diff --git a/apps/web-antd/src/views/business/product/china-medicine/components/modal.vue b/apps/web-antd/src/views/business/product/china-medicine/components/modal.vue new file mode 100644 index 00000000..91992418 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/components/modal.vue @@ -0,0 +1,132 @@ + + diff --git a/apps/web-antd/src/views/business/product/china-medicine/config/form.ts b/apps/web-antd/src/views/business/product/china-medicine/config/form.ts new file mode 100644 index 00000000..6646ed74 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/config/form.ts @@ -0,0 +1,222 @@ +import type {VbenFormProps} from '#/adapter/form'; + +import {getSupplierOption} from '#/views/system/supplier/api'; + + +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: '请选择', + }, + 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: 'VbenSelect', + componentProps: { + options: [], + placeholder: '请选择', + }, + fieldName: 'time_id', + formItemClass: 'col-span-6', + label: '使用时间', + rules: 'required', + }, + { + component: 'VbenSelect', + componentProps: { + options: [], + placeholder: '请选择', + }, + fieldName: 'type_id', + formItemClass: 'col-span-6', + label: '使用方法', + rules: 'required', + }, + { + component: 'VbenSelect', + componentProps: { + options: [], + placeholder: '请选择', + }, + fieldName: 'unit_id', + formItemClass: 'col-span-6', + label: '单位', + rules: 'required', + }, + { + component: 'VbenSelect', + componentProps: { + options: [], + placeholder: '请选择', + }, + fieldName: 'frequency_id', + 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, +}; +export const uploadExcelProps: VbenFormProps = { + wrapperClass: 'grid-cols-12', // 24栅格, + commonConfig: { + formItemClass: 'col-span-12', + // 所有表单项 + componentProps: { + class: 'w-full', + }, + }, + // handleSubmit: onSubmit, + layout: 'horizontal', + schema: [ + { + component: 'Upload', + componentProps: { + placeholder: '请选择', + multiple: true, + }, + fieldName: 'frequency_id', + formItemClass: 'col-span-12', + label: '导入excel', + rules: 'file', + }, + ], + showDefaultActions: false, +}; diff --git a/apps/web-antd/src/views/business/product/china-medicine/config/search.ts b/apps/web-antd/src/views/business/product/china-medicine/config/search.ts new file mode 100644 index 00000000..c76683e2 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-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, +}; diff --git a/apps/web-antd/src/views/business/product/china-medicine/config/table.ts b/apps/web-antd/src/views/business/product/china-medicine/config/table.ts new file mode 100644 index 00000000..de957d5b --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/config/table.ts @@ -0,0 +1,70 @@ +import type { VxeGridProps } from '#/adapter/vxe-table'; + +import { getChinaMedicineList } from '../api'; + +interface RowType { + id: string; + name: string; + logo: string; + introduce: string; + created_at: string; +} + +export const gridOptions: VxeGridProps = { + 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: '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 getChinaMedicineList({ + 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, +}; diff --git a/apps/web-antd/src/views/business/product/china-medicine/index.vue b/apps/web-antd/src/views/business/product/china-medicine/index.vue new file mode 100644 index 00000000..659abc53 --- /dev/null +++ b/apps/web-antd/src/views/business/product/china-medicine/index.vue @@ -0,0 +1,194 @@ + + + diff --git a/apps/web-antd/src/views/business/product/western-medicine/api/index.ts b/apps/web-antd/src/views/business/product/western-medicine/api/index.ts index 7dac930d..189d9f8b 100644 --- a/apps/web-antd/src/views/business/product/western-medicine/api/index.ts +++ b/apps/web-antd/src/views/business/product/western-medicine/api/index.ts @@ -1,5 +1,3 @@ -import type { RequestResponse } from '@vben/request'; - import { requestClient } from '#/api/request'; const prefix = 'western-medicine/'; @@ -58,3 +56,11 @@ export async function updateWesternMedicine(data: Record) { export async function deleteWesternMedicine(data: Record) { return requestClient.post(`${prefix}delete`, data); } + +/** + * 导入西药 + * @param data + */ +export async function importWesternMedicineApi(data: Record) { + return requestClient.upload(`${prefix}import`, data); +} diff --git a/apps/web-antd/src/views/business/product/western-medicine/components/ExcelUpload.vue b/apps/web-antd/src/views/business/product/western-medicine/components/ExcelUpload.vue new file mode 100644 index 00000000..79597eea --- /dev/null +++ b/apps/web-antd/src/views/business/product/western-medicine/components/ExcelUpload.vue @@ -0,0 +1,131 @@ + + diff --git a/apps/web-antd/src/views/business/product/western-medicine/config/form.ts b/apps/web-antd/src/views/business/product/western-medicine/config/form.ts index 5d9fd282..6646ed74 100644 --- a/apps/web-antd/src/views/business/product/western-medicine/config/form.ts +++ b/apps/web-antd/src/views/business/product/western-medicine/config/form.ts @@ -194,3 +194,29 @@ export const modalFormProps: VbenFormProps = { ], showDefaultActions: false, }; +export const uploadExcelProps: VbenFormProps = { + wrapperClass: 'grid-cols-12', // 24栅格, + commonConfig: { + formItemClass: 'col-span-12', + // 所有表单项 + componentProps: { + class: 'w-full', + }, + }, + // handleSubmit: onSubmit, + layout: 'horizontal', + schema: [ + { + component: 'Upload', + componentProps: { + placeholder: '请选择', + multiple: true, + }, + fieldName: 'frequency_id', + formItemClass: 'col-span-12', + label: '导入excel', + rules: 'file', + }, + ], + showDefaultActions: false, +}; diff --git a/apps/web-antd/src/views/business/product/western-medicine/index.vue b/apps/web-antd/src/views/business/product/western-medicine/index.vue index cd80066a..c7948522 100644 --- a/apps/web-antd/src/views/business/product/western-medicine/index.vue +++ b/apps/web-antd/src/views/business/product/western-medicine/index.vue @@ -9,12 +9,13 @@ import { Button, Image, message, Tag } from 'ant-design-vue'; import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { TableAction } from '#/components/table-action'; +import { downloadByData } from '#/util/tool'; -import {deleteWesternMedicine, exportWesternMedicineApi} from './api'; +import { deleteWesternMedicine, exportWesternMedicineApi } from './api'; import FormModalDemo from './components/modal.vue'; +import ExcelUpload from './components/ExcelUpload.vue'; import { formOptions } from './config/search'; import { gridOptions } from './config/table'; -import {downloadByData} from "#/util/tool"; const hasTopTableDropDownActions = ref(false); @@ -41,6 +42,10 @@ const [FormModal, formModalApi] = useVbenModal({ connectedComponent: FormModalDemo, }); +const [ExcelUploadModal, ExcelUploadModalApi] = useVbenModal({ + connectedComponent: ExcelUpload, +}); + const showModal = (data = {}, isUpdate = false) => { formModalApi.setData({ // 表单值 @@ -73,11 +78,19 @@ const passApplication = () => { downloadByData(res.data, '萧康云医-西药导出.xlsx'); message.success('导出成功!'); }); -} +}; + +const openExcelUploadModal = () => { + ExcelUploadModalApi.setData({ + gridApi, + }); + ExcelUploadModalApi.open(); +};