fix: 仓库药品管理
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
const prefix = 'warehouse-drug-management/';
|
||||
|
||||
/**
|
||||
* 分页查询用户列表
|
||||
* @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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入西药
|
||||
* @param data
|
||||
*/
|
||||
export async function importWesternMedicineApi(data: Record<string, any>) {
|
||||
return requestClient.upload(`${prefix}import`, data);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message, UploadDragger } from 'ant-design-vue';
|
||||
|
||||
import { importWesternMedicineApi } from '../api';
|
||||
|
||||
const gridApi = ref();
|
||||
const fileList = ref([]);
|
||||
|
||||
const importWesternMedicine = (file) => {
|
||||
const submitApi = importWesternMedicineApi;
|
||||
submitApi({
|
||||
file: file.file,
|
||||
})
|
||||
.then(() => {
|
||||
message.success('导入成功');
|
||||
gridApi.value?.reload();
|
||||
modalApi.close();
|
||||
})
|
||||
.finally(() => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
fullscreenButton: false,
|
||||
draggable: true,
|
||||
onCancel() {
|
||||
modalApi.close();
|
||||
},
|
||||
onConfirm: async () => {
|
||||
modalApi.setState({ loading: true, confirmLoading: true });
|
||||
const submitApi = importWesternMedicineApi;
|
||||
submitApi({
|
||||
file: fileList.value,
|
||||
})
|
||||
.then(() => {
|
||||
message.success('导入成功');
|
||||
gridApi.value?.reload();
|
||||
modalApi.close();
|
||||
})
|
||||
.finally(() => {
|
||||
modalApi.setState({ loading: false, confirmLoading: false });
|
||||
});
|
||||
},
|
||||
onOpenChange(isOpen: boolean) {
|
||||
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal class="w-[30%]" title="上传Excel">
|
||||
<UploadDragger
|
||||
v-model:file-list="fileList"
|
||||
:custom-request="importWesternMedicine"
|
||||
:max-count="1"
|
||||
name="file"
|
||||
>
|
||||
<p class="flex justify-center">
|
||||
<svg
|
||||
height="64"
|
||||
viewBox="0 0 32 32"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="vscodeIconsFileTypeExcel0"
|
||||
gradientTransform="translate(0 2100)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="4.494"
|
||||
x2="13.832"
|
||||
y1="-2092.086"
|
||||
y2="-2075.914"
|
||||
>
|
||||
<stop offset="0" stop-color="#18884f" />
|
||||
<stop offset=".5" stop-color="#117e43" />
|
||||
<stop offset="1" stop-color="#0b6631" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"
|
||||
fill="#185c37"
|
||||
/>
|
||||
<path
|
||||
d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"
|
||||
fill="#21a366"
|
||||
/>
|
||||
<path d="M8.512 9.5h11.069V16H8.512Z" fill="#107c41" />
|
||||
<path
|
||||
d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2"
|
||||
opacity="0.1"
|
||||
/>
|
||||
<path
|
||||
d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
|
||||
opacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
|
||||
opacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191"
|
||||
opacity="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"
|
||||
fill="url(#vscodeIconsFileTypeExcel0)"
|
||||
/>
|
||||
<path
|
||||
d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"
|
||||
fill="#33c481"
|
||||
/>
|
||||
<path d="M19.581 16H30v6.5H19.581Z" fill="#107c41" />
|
||||
</svg>
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖动文件到此区域进行上传</p>
|
||||
<p class="ant-upload-hint">
|
||||
支持单个上传，xlsx格式文件。严禁上传公司数据或其他带格式文件。
|
||||
</p>
|
||||
</UploadDragger>
|
||||
<!-- <Form />-->
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,132 @@
|
||||
<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';
|
||||
import {getDrugUseList} from "#/views/doctor/doctor-reception/api";
|
||||
|
||||
defineOptions({
|
||||
name: 'FormModelDemo',
|
||||
});
|
||||
const userStore = useUserStore();
|
||||
|
||||
const drugTime = ref([]);
|
||||
const drugType = ref([]);
|
||||
const drugUnit = ref([]);
|
||||
const drugFrequency = ref([]);
|
||||
getDrugUseList().then((res) => {
|
||||
drugTime.value = res.drug_time.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
drugType.value = res.drug_use_type.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
drugUnit.value = res.drug_unit.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
drugFrequency.value = res.drug_use_frequency.map((item) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
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) {
|
||||
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: {
|
||||
options: drugTime.value,
|
||||
},
|
||||
fieldName: 'time_id',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
options: drugUnit.value,
|
||||
},
|
||||
fieldName: 'unit_id',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
options: drugType.value,
|
||||
},
|
||||
fieldName: 'type_id',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
options: drugFrequency.value,
|
||||
},
|
||||
fieldName: 'frequency_id',
|
||||
},
|
||||
]);
|
||||
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||
if (values) {
|
||||
console.log(values, 'sssssssssssss')
|
||||
isUpdate.value = update;
|
||||
formApi.setValues(values);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal
|
||||
:title="`${isUpdate === true ? '编辑' : '新增'}西（中成）药`"
|
||||
class="w-[30%]"
|
||||
>
|
||||
<Form />
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -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,
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
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: 'VbenSelect',
|
||||
componentProps: {
|
||||
placeholder: '输入名称',
|
||||
options: [
|
||||
{
|
||||
label: '中药',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '西药',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '服务包',
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
defaultValue: 1,
|
||||
fieldName: 'type',
|
||||
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,
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
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.drug_name', align: 'left', title: '药品名称' },
|
||||
{ field: 'drug.pinyin_simple', title: '拼音' },
|
||||
{
|
||||
field: 'image',
|
||||
align: 'left',
|
||||
title: '产品图片',
|
||||
slots: { default: 'image' },
|
||||
width: 130,
|
||||
},
|
||||
{ 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,
|
||||
};
|
||||
@@ -0,0 +1,204 @@
|
||||
<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 { downloadByData } from '#/util/tool';
|
||||
|
||||
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';
|
||||
|
||||
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 [ExcelUploadModal, ExcelUploadModalApi] = useVbenModal({
|
||||
connectedComponent: ExcelUpload,
|
||||
});
|
||||
|
||||
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('导出成功!');
|
||||
});
|
||||
};
|
||||
|
||||
const openExcelUploadModal = () => {
|
||||
ExcelUploadModalApi.setData({
|
||||
gridApi,
|
||||
});
|
||||
ExcelUploadModalApi.open();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height title="西（中成）药管理">
|
||||
<ExcelUploadModal />
|
||||
<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: openExcelUploadModal.bind(null),
|
||||
},
|
||||
{
|
||||
label: '导出',
|
||||
type: 'primary',
|
||||
icon: 'mingcute:download-3-fill',
|
||||
// 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.drug?.image || '/public/img/traditional-chinese-medicine.jpg'" height="30" width="30" />
|
||||
</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 === 2 ? 'green' : 'red'">{{
|
||||
row.status === 2 ? '上架' : '下架'
|
||||
}}</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>
|
||||
Reference in New Issue
Block a user