fix: 诊所和药店分开管理
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
CI / Test (windows-latest) (push) Has been cancelled
CI / Lint (ubuntu-latest) (push) Has been cancelled
CI / Lint (windows-latest) (push) Has been cancelled
CI / Check (ubuntu-latest) (push) Has been cancelled
CI / Check (windows-latest) (push) Has been cancelled
CI / CI OK (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
CI / Test (windows-latest) (push) Has been cancelled
CI / Lint (ubuntu-latest) (push) Has been cancelled
CI / Lint (windows-latest) (push) Has been cancelled
CI / Check (ubuntu-latest) (push) Has been cancelled
CI / Check (windows-latest) (push) Has been cancelled
CI / CI OK (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
This commit is contained in:
87
apps/web-antd/src/views/system/pharmacy/components/modal.vue
Normal file
87
apps/web-antd/src/views/system/pharmacy/components/modal.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
// 导入药店管理的表单配置
|
||||
import { modalFormProps } from '#/views/system/pharmacy/config/form';
|
||||
|
||||
// 直接使用store的API接口
|
||||
import { createStore, updateStore } from '#/views/system/store/api';
|
||||
import dayjs from "dayjs";
|
||||
|
||||
// 是否为更新模式(true=编辑,false=新增)
|
||||
const isUpdate = ref(false);
|
||||
// 表格API引用,用于刷新表格数据
|
||||
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 });
|
||||
// 根据是否为更新模式选择不同的API
|
||||
const submitApi = isUpdate.value ? updateStore : createStore;
|
||||
// 提交数据
|
||||
submitApi(values)
|
||||
.then(() => {
|
||||
message.success('保存成功');
|
||||
// 刷新表格数据
|
||||
gridApi.value?.reload();
|
||||
// 关闭弹窗
|
||||
modalApi.close();
|
||||
})
|
||||
.finally(() => {
|
||||
// 取消加载状态
|
||||
modalApi.setState({ loading: false, confirmLoading: false });
|
||||
});
|
||||
}
|
||||
});
|
||||
await formApi.validateAndSubmitForm();
|
||||
},
|
||||
// 弹窗打开/关闭状态变化回调
|
||||
onOpenChange(isOpen: boolean) {
|
||||
// 获取表格API引用
|
||||
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||
if (isOpen) {
|
||||
// 获取传入的数据
|
||||
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||
if (values) {
|
||||
// 设置是否为更新模式
|
||||
isUpdate.value = update;
|
||||
// 处理地址字段(转换为数组格式)
|
||||
values.address = [values.province_id, values.city_id];
|
||||
// 设置表单值,并处理时间字段(转换为dayjs对象)
|
||||
formApi.setValues({
|
||||
...values,
|
||||
start_time: dayjs(values.start_time, 'HH:mm'),
|
||||
end_time: dayjs(values.end_time, 'HH:mm')
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}药店`" class="w-[50%]">
|
||||
<Form />
|
||||
</Modal>
|
||||
</template>
|
||||
342
apps/web-antd/src/views/system/pharmacy/config/form.ts
Normal file
342
apps/web-antd/src/views/system/pharmacy/config/form.ts
Normal file
@@ -0,0 +1,342 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
import { addressOption } from '#/util/address.ts';
|
||||
|
||||
// 药店管理表单配置
|
||||
// 注意:已移除类型选择字段,固定为type=1(药店类型)
|
||||
export const modalFormProps: VbenFormProps = {
|
||||
wrapperClass: 'grid-cols-12', // 24栅格布局
|
||||
commonConfig: {
|
||||
formItemClass: 'col-span-12',
|
||||
// 所有表单项的公共配置
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
layout: 'horizontal', // 水平布局
|
||||
schema: [
|
||||
{
|
||||
// ID字段(隐藏)
|
||||
component: 'VbenInput',
|
||||
fieldName: 'id',
|
||||
label: 'ID',
|
||||
formItemClass: 'col-span-6',
|
||||
dependencies: {
|
||||
show: false, // 隐藏ID字段
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'type',
|
||||
dependencies: {
|
||||
show: false,
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
// 基础信息分隔线
|
||||
component: 'Divider',
|
||||
fieldName: '',
|
||||
label: '',
|
||||
rules: 'required',
|
||||
hideLabel: true,
|
||||
renderComponentContent: () => {
|
||||
return {
|
||||
default: () => {
|
||||
return '基础信息';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
// 公章字段
|
||||
component: 'Avatar',
|
||||
formItemClass: 'col-span-6',
|
||||
fieldName: 'see_rate',
|
||||
label: '公章',
|
||||
},
|
||||
{
|
||||
// 药店名称字段(已从"诊所名称"改为"药店名称")
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入药店名称', // 已从"诊所昵称"改为"药店名称"
|
||||
},
|
||||
fieldName: 'name',
|
||||
label: '药店名称', // 已从"诊所名称"改为"药店名称"
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// ERP ID字段
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入药店ERP ID', // 已从"诊所ERP ID"改为"药店ERP ID"
|
||||
},
|
||||
fieldName: 'erp_id',
|
||||
label: 'ERP ID',
|
||||
rules: 'required',
|
||||
},
|
||||
// 注意:已移除门店类型选择字段,因为药店管理固定为type=1
|
||||
{
|
||||
// 是否包邮字段
|
||||
component: 'Select',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '不包邮', value: 0 },
|
||||
{ label: '包邮', value: 1 },
|
||||
],
|
||||
placeholder: '是否包邮',
|
||||
},
|
||||
fieldName: 'is_shipping_free',
|
||||
label: '是否包邮',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 联系人姓名字段
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入药店联系人姓名', // 已从"诊所联系人姓名"改为"药店联系人姓名"
|
||||
},
|
||||
fieldName: 'contact',
|
||||
label: '联系人姓名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 联系人手机号字段
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入药店联系人手机号', // 已从"诊所联系人手机号"改为"药店联系人手机号"
|
||||
},
|
||||
fieldName: 'mobile',
|
||||
label: '联系人手机号',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 业务码字段
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入业务码',
|
||||
},
|
||||
fieldName: 'code',
|
||||
label: '业务码',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 开始营业时间字段
|
||||
component: 'TimePicker',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请选择开始营业时间',
|
||||
format: 'HH:mm', // 时间格式
|
||||
},
|
||||
fieldName: 'start_time',
|
||||
label: '开始营业时间',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 结束营业时间字段
|
||||
component: 'TimePicker',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请选择结束营业时间',
|
||||
format: 'HH:mm', // 时间格式
|
||||
},
|
||||
fieldName: 'end_time',
|
||||
label: '结束营业时间',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 省市区级联选择字段
|
||||
component: 'Cascader',
|
||||
componentProps: {
|
||||
placeholder: '请选省市区',
|
||||
options: addressOption,
|
||||
},
|
||||
fieldName: 'address',
|
||||
label: '省市区',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 详细地址字段
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入详细地址',
|
||||
},
|
||||
fieldName: 'position',
|
||||
label: '详细地址',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 轮播图上传字段
|
||||
component: 'UploadImage',
|
||||
fieldName: 'url',
|
||||
label: '轮播图',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
maxCount: 9, // 最多上传9张图片
|
||||
},
|
||||
},
|
||||
{
|
||||
// 销售比例信息分隔线
|
||||
component: 'Divider',
|
||||
fieldName: '',
|
||||
label: 'x',
|
||||
rules: 'required',
|
||||
hideLabel: true,
|
||||
renderComponentContent: () => {
|
||||
return {
|
||||
default: () => {
|
||||
return '销售比例信息';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
// 中药采购价比例字段
|
||||
component: 'InputNumber',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入中药采购价比例',
|
||||
},
|
||||
fieldName: 'z_buy_percent',
|
||||
label: '中药采购价比例',
|
||||
rules: 'required',
|
||||
suffix: () => '%', // 后缀显示百分号
|
||||
},
|
||||
{
|
||||
// 中药销售比例字段
|
||||
component: 'InputNumber',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入中药销售比例',
|
||||
},
|
||||
fieldName: 'z_sale_percent',
|
||||
label: '中药销售比例',
|
||||
rules: 'required',
|
||||
suffix: () => '%', // 后缀显示百分号
|
||||
},
|
||||
{
|
||||
// 银行卡信息分隔线(仅在新增时显示)
|
||||
component: 'Divider',
|
||||
fieldName: '',
|
||||
label: 'x',
|
||||
rules: 'required',
|
||||
hideLabel: true,
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
renderComponentContent: () => {
|
||||
return {
|
||||
default: () => {
|
||||
return '银行卡信息';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
// 开户人姓名字段(仅在新增时显示)
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入开户人姓名',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
fieldName: 'bank_user_name',
|
||||
label: '开户人姓名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 银行卡号字段(仅在新增时显示)
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入银行卡号',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
fieldName: 'bank_card',
|
||||
label: '银行卡号',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 开户行字段(仅在新增时显示)
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入开户行',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
fieldName: 'bank_name',
|
||||
label: '开户行',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 银联行号字段(仅在新增时显示,非必填)
|
||||
component: 'VbenInput',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
placeholder: '请输入银联行号',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
fieldName: 'bank_no',
|
||||
label: '银联行号',
|
||||
},
|
||||
{
|
||||
// 银行账户类型字段(仅在新增时显示)
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '对公', value: 1 },
|
||||
{ label: '对私', value: 2 },
|
||||
{ label: '存折', value: 5 },
|
||||
],
|
||||
placeholder: '请选择银行账户类型',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => {
|
||||
// 仅在新增时显示(id为空时)
|
||||
return values.id == null;
|
||||
},
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
fieldName: 'bank_account_type',
|
||||
label: '银行账户类型',
|
||||
rules: 'required',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false, // 不显示默认操作按钮
|
||||
};
|
||||
50
apps/web-antd/src/views/system/pharmacy/config/search.ts
Normal file
50
apps/web-antd/src/views/system/pharmacy/config/search.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
// 药店管理搜索表单配置
|
||||
// 注意:已移除类型筛选字段,因为药店管理页面只显示type=1的数据
|
||||
export const formOptions: VbenFormProps = {
|
||||
// 默认展开搜索表单
|
||||
collapsed: false,
|
||||
schema: [
|
||||
{
|
||||
// 药店名称搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入名称',
|
||||
},
|
||||
defaultValue: '',
|
||||
fieldName: 'name',
|
||||
label: '药店名称', // 已从"诊所名称"改为"药店名称"
|
||||
},
|
||||
{
|
||||
// 药店首字母搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入名称',
|
||||
},
|
||||
defaultValue: '',
|
||||
fieldName: 'shouzimu',
|
||||
label: '药店首字母', // 已从"诊所首字母"改为"药店首字母"
|
||||
},
|
||||
{
|
||||
// 联系人手机号搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入联系人手机号',
|
||||
},
|
||||
defaultValue: '',
|
||||
fieldName: 'mobile',
|
||||
label: '联系人手机号',
|
||||
},
|
||||
// 注意:已移除类型筛选字段,因为药店管理页面固定显示type=1的数据
|
||||
],
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: '查询',
|
||||
},
|
||||
// 是否在字段值改变时提交表单
|
||||
submitOnChange: true,
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
};
|
||||
116
apps/web-antd/src/views/system/pharmacy/config/table.ts
Normal file
116
apps/web-antd/src/views/system/pharmacy/config/table.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
// 直接使用store的API接口
|
||||
import { getStoreList } from '#/views/system/store/api';
|
||||
|
||||
// 表格行数据类型定义
|
||||
interface RowType {
|
||||
id: string;
|
||||
name: string;
|
||||
logo: string;
|
||||
introduce: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// 药店管理表格配置
|
||||
// 注意:查询时会自动添加type=1参数,只显示药店类型的数据
|
||||
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 }, // ID列
|
||||
{ field: 'name', align: 'left', title: '药店名称' }, // 药店名称列(已从"诊所名称"改为"药店名称")
|
||||
{
|
||||
// 类型列(显示为标签)
|
||||
field: 'type',
|
||||
align: 'left',
|
||||
title: '类型',
|
||||
slots: { default: 'type' },
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
// 是否包邮列(显示为开关)
|
||||
field: 'is_shipping_free',
|
||||
align: 'left',
|
||||
title: '是否包邮',
|
||||
slots: { default: 'is_shipping_free' },
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
// 药店二维码列(已从"诊所二维码"改为"药店二维码")
|
||||
field: 'qr_code',
|
||||
align: 'left',
|
||||
title: '药店二维码',
|
||||
slots: { default: 'qr_code' },
|
||||
width: 130,
|
||||
},
|
||||
{ field: 'position', title: '详细地址' }, // 详细地址列
|
||||
{ field: 'new_admin.nick_name', title: '业务员' }, // 业务员列
|
||||
{ field: 'mobile', title: '联系人、电话', slots: { default: 'mobile' } }, // 联系人电话列
|
||||
{
|
||||
// 营业时间列
|
||||
field: 'start_time',
|
||||
title: '营业时间',
|
||||
slots: { default: 'start-time' },
|
||||
},
|
||||
{ field: 'created_at', title: '注册时间' }, // 注册时间列
|
||||
{
|
||||
// 操作列
|
||||
type: 'html',
|
||||
title: '操作',
|
||||
align: 'right',
|
||||
slots: { default: 'action' },
|
||||
},
|
||||
],
|
||||
keepSource: true,
|
||||
// 分页配置
|
||||
pagerConfig: {},
|
||||
// 代理配置(数据请求)
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
// 请求后端接口方法
|
||||
// 注意:会自动添加type=1参数,只查询药店类型的数据
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getStoreList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
type: 1, // 固定为药店类型
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
height: 'auto',
|
||||
border: false,
|
||||
// 工具栏配置
|
||||
toolbarConfig: {
|
||||
// 是否显示搜索表单控制按钮
|
||||
// @ts-ignore 正式环境时有完整的类型声明
|
||||
search: true,
|
||||
refresh: true, // 刷新按钮
|
||||
print: false, // 打印按钮
|
||||
export: false, // 导出按钮
|
||||
zoom: true, // 最大化最小化按钮
|
||||
slots: {
|
||||
buttons: 'toolbar-buttons', // 工具栏按钮插槽
|
||||
},
|
||||
custom: {
|
||||
// 自定义列-图标
|
||||
icon: 'vxe-icon-menu',
|
||||
},
|
||||
},
|
||||
showOverflow: false,
|
||||
};
|
||||
287
apps/web-antd/src/views/system/pharmacy/index.vue
Normal file
287
apps/web-antd/src/views/system/pharmacy/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<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,
|
||||
} 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();
|
||||
});
|
||||
};
|
||||
</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 #type="{ row }">
|
||||
<Tag :color="row.type === 1 ? 'blue' : 'green'">
|
||||
{{ row.type === 1 ? '药店' : '诊所' }}
|
||||
</Tag>
|
||||
</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 #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>
|
||||
@@ -30,6 +30,7 @@ const [Modal, modalApi] = useVbenModal({
|
||||
const values = await formApi.getValues();
|
||||
modalApi.setState({ loading: true, confirmLoading: true });
|
||||
const submitApi = isUpdate.value ? updateStore : createStore;
|
||||
// 固定设置type=0(诊所类型),无论是新增还是编辑
|
||||
submitApi(values)
|
||||
.then(() => {
|
||||
message.success('保存成功');
|
||||
|
||||
@@ -2,6 +2,8 @@ import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
import { addressOption } from '#/util/address.ts';
|
||||
|
||||
// 诊所管理表单配置
|
||||
// 注意:已移除类型选择字段,固定为type=0(诊所类型)
|
||||
export const modalFormProps: VbenFormProps = {
|
||||
wrapperClass: 'grid-cols-12', // 24栅格,
|
||||
commonConfig: {
|
||||
@@ -80,19 +82,15 @@ export const modalFormProps: VbenFormProps = {
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
formItemClass: 'col-span-6',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '诊所', value: 0 },
|
||||
{ label: '药店', value: 1 },
|
||||
],
|
||||
placeholder: '请选择门店类型',
|
||||
},
|
||||
component: 'Input',
|
||||
fieldName: 'type',
|
||||
label: '门店类型',
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show: false,
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
defaultValue: 0,
|
||||
},
|
||||
// 注意:已移除门店类型选择字段,因为诊所管理固定为type=0
|
||||
{
|
||||
component: 'Select',
|
||||
formItemClass: 'col-span-6',
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
// import dayjs from 'dayjs';
|
||||
|
||||
// 诊所管理搜索表单配置
|
||||
// 注意:已移除类型筛选字段,因为诊所管理页面只显示type=0的数据
|
||||
export const formOptions: VbenFormProps = {
|
||||
// 默认展开
|
||||
// 默认展开搜索表单
|
||||
collapsed: false,
|
||||
schema: [
|
||||
{
|
||||
// 诊所名称搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入名称',
|
||||
@@ -16,6 +17,7 @@ export const formOptions: VbenFormProps = {
|
||||
label: '诊所名称',
|
||||
},
|
||||
{
|
||||
// 诊所首字母搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入名称',
|
||||
@@ -25,6 +27,7 @@ export const formOptions: VbenFormProps = {
|
||||
label: '诊所首字母',
|
||||
},
|
||||
{
|
||||
// 联系人手机号搜索字段
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '输入联系人手机号',
|
||||
@@ -33,19 +36,7 @@ export const formOptions: VbenFormProps = {
|
||||
fieldName: 'mobile',
|
||||
label: '联系人手机号',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
placeholder: '请选择类型',
|
||||
options: [
|
||||
{ label: '诊所', value: 0 },
|
||||
{ label: '药店', value: 1 },
|
||||
],
|
||||
},
|
||||
defaultValue: undefined,
|
||||
fieldName: 'type',
|
||||
label: '类型',
|
||||
},
|
||||
// 注意:已移除类型筛选字段,因为诊所管理页面固定显示type=0的数据
|
||||
// {
|
||||
// component: 'RangePicker',
|
||||
// componentProps: {
|
||||
|
||||
@@ -70,10 +70,12 @@ export const gridOptions: VxeGridProps<RowType> = {
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
// 请求后端接口方法
|
||||
// 注意:会自动添加type=0参数,只查询诊所类型的数据
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getStoreList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
type: 0, // 固定为诊所类型
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user