fix: 首页药店分区入口、平台资质管理
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
const prefix = 'platform-qualifications/';
|
||||
/**
|
||||
* 分页查询资质列表
|
||||
* @param data
|
||||
*/
|
||||
export async function getPlatformQualificationsList(data: any) {
|
||||
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||
}
|
||||
/**
|
||||
* 获取资质下拉列表
|
||||
* @param data
|
||||
*/
|
||||
export async function getPlatformQualificationsOption(data: any) {
|
||||
return requestClient.get<any>(`${prefix}option`, { params: data });
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取资质详情
|
||||
* @param id
|
||||
*/
|
||||
export async function getPlatformQualificationsInfo(id: number) {
|
||||
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增资质
|
||||
* @param data
|
||||
*/
|
||||
export async function createPlatformQualifications(data: Record<string, any>) {
|
||||
return requestClient.post<any>(`${prefix}create`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑资质
|
||||
* @param data
|
||||
*/
|
||||
export async function updatePlatformQualifications(data: Record<string, any>) {
|
||||
return requestClient.post<any>(`${prefix}update`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除资质
|
||||
* @param data
|
||||
*/
|
||||
export async function deletePlatformQualifications(data: Record<string, any>) {
|
||||
return requestClient.post<any>(`${prefix}delete`, data);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<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 {
|
||||
createPlatformQualifications,
|
||||
updatePlatformQualifications,
|
||||
} from '#/views/system/platform-qualifications/api';
|
||||
import { modalFormProps } from '#/views/system/platform-qualifications/config/form';
|
||||
|
||||
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();
|
||||
// 处理 store_id，如果为空字符串则设为 null
|
||||
if (values.store_id === '' || values.store_id === undefined) {
|
||||
values.store_id = null;
|
||||
}
|
||||
modalApi.setState({ loading: true, confirmLoading: true });
|
||||
const submitApi = isUpdate.value ? updatePlatformQualifications : createPlatformQualifications;
|
||||
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 && update) {
|
||||
// 编辑时，确保所有字段都有值
|
||||
isUpdate.value = true;
|
||||
const formData: any = {
|
||||
id: values.id || '',
|
||||
name: values.name || '',
|
||||
type: values.type,
|
||||
image: values.image || '',
|
||||
sort_order: values.sort_order ?? 0,
|
||||
status: values.status ?? 1,
|
||||
store_id: values.store_id ?? null,
|
||||
};
|
||||
formApi.setValues(formData);
|
||||
} else {
|
||||
// 新增时重置表单并设置默认值
|
||||
isUpdate.value = false;
|
||||
formApi.resetFields();
|
||||
formApi.setValues({
|
||||
id: '',
|
||||
name: '',
|
||||
type: undefined,
|
||||
image: '',
|
||||
sort_order: 0,
|
||||
status: 1,
|
||||
store_id: null,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 关闭时重置表单
|
||||
formApi.resetFields();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台资质`" class="w-[60%]">
|
||||
<Form />
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,97 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
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',
|
||||
defaultValue: '',
|
||||
dependencies: {
|
||||
show: false,
|
||||
triggerFields: ['id'],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'VbenInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入资质名称',
|
||||
},
|
||||
fieldName: 'name',
|
||||
label: '资质名称',
|
||||
rules: 'required',
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
component: 'VbenSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择资质类型',
|
||||
options: [
|
||||
{ label: '药品经营许可证', value: 1 },
|
||||
{ label: '营业执照', value: 2 },
|
||||
{ label: '医疗器械经营许可证', value: 3 },
|
||||
{ label: '食品经营许可证', value: 4 },
|
||||
{ label: '药师资格证', value: 5 },
|
||||
],
|
||||
},
|
||||
fieldName: 'type',
|
||||
label: '资质类型',
|
||||
rules: 'required',
|
||||
defaultValue: undefined,
|
||||
},
|
||||
{
|
||||
component: 'Avatar',
|
||||
fieldName: 'image',
|
||||
label: '资质图片',
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
placeholder: '请输入排序顺序',
|
||||
min: 0,
|
||||
},
|
||||
fieldName: 'sort_order',
|
||||
label: '排序顺序',
|
||||
formItemClass: 'col-span-6',
|
||||
defaultValue: 0,
|
||||
},
|
||||
{
|
||||
component: 'VbenSelect',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
formItemClass: 'col-span-6',
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
component: 'VbenInputNumber',
|
||||
componentProps: {
|
||||
placeholder: '门店ID（留空表示平台通用）',
|
||||
min: 0,
|
||||
},
|
||||
fieldName: 'store_id',
|
||||
label: '门店ID',
|
||||
formItemClass: 'col-span-6',
|
||||
defaultValue: 0,
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
|
||||
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: 3 },
|
||||
{ label: '食品经营许可证', value: 4 },
|
||||
{ label: '药师资格证', value: 5 },
|
||||
],
|
||||
},
|
||||
defaultValue: '',
|
||||
fieldName: 'type',
|
||||
label: '资质类型',
|
||||
},
|
||||
{
|
||||
component: 'VbenSelect',
|
||||
componentProps: {
|
||||
placeholder: '选择状态',
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
defaultValue: '',
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
},
|
||||
],
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: '查询',
|
||||
},
|
||||
// 是否在字段值改变时提交表单
|
||||
submitOnChange: true,
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
};
|
||||
@@ -0,0 +1,92 @@
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { getPlatformQualificationsList } from '#/views/system/platform-qualifications/api';
|
||||
|
||||
interface RowType {
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
type: number;
|
||||
type_txt: string;
|
||||
store_id: number | null;
|
||||
sort_order: number;
|
||||
status: number;
|
||||
status_txt: string;
|
||||
created_at: string;
|
||||
updated_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: 'name', align: 'left', title: '资质名称' },
|
||||
{
|
||||
field: 'type_txt',
|
||||
align: 'left',
|
||||
title: '资质类型',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'image',
|
||||
align: 'left',
|
||||
title: '资质图片',
|
||||
slots: { default: 'image' },
|
||||
width: 130,
|
||||
},
|
||||
{ field: 'store_id', align: 'left', title: '门店ID', width: 120 },
|
||||
{ field: 'sort_order', align: 'left', title: '排序', width: 100 },
|
||||
{
|
||||
field: 'status_txt',
|
||||
align: 'left',
|
||||
title: '状态',
|
||||
width: 100,
|
||||
},
|
||||
{ field: 'created_at', title: '创建时间', width: 180 },
|
||||
{ type: 'html', title: '操作', slots: { default: 'action' }, width: 150 },
|
||||
],
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
// 请求后端接口方法
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getPlatformQualificationsList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
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,
|
||||
};
|
||||
131
apps/web-antd/src/views/system/platform-qualifications/index.vue
Normal file
131
apps/web-antd/src/views/system/platform-qualifications/index.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<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 } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { TableAction } from '#/components/table-action';
|
||||
|
||||
import { deletePlatformQualifications } from './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,
|
||||
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);
|
||||
}
|
||||
deletePlatformQualifications({ ids }).then(() => {
|
||||
message.success('删除成功!');
|
||||
gridApi.reload();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height title="平台资质管理">
|
||||
<FormModal />
|
||||
<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 #image="{ row }">
|
||||
<Image v-if="row.image" :src="row.image" height="30" width="30" />
|
||||
<span v-else>暂无图片</span>
|
||||
</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),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user