使用vxetable 弹窗 form 做的一个完整的增删改查的页面
君哥
阅读:1979
2024-01-23 09:01:00
评论:1
使用vxetable 弹窗 form 做的一个完整的增删改查的页面
1. index.vue 首页代码:页面的布局也业务处理
药品自定义权限配置
新增
修改
删除
2.配置文件 .base.data.ts :vxetable 和form 数据的配置
import { VxeGridPropTypes } from 'vxe-table';
import { baseDrugRightDictEnums } from './enum/formEnums';
import { FormSchema } from '/@/components/Table';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const baseDrugRightDictColumns = (): VxeGridPropTypes.Columns => {
return [
{
title: t('basic.base.baseDrugRightDict.columnName'),
field: baseDrugRightDictEnums.COLUMN_NAME,
align: 'center',
minWidth: 120,
},
{
title: t('basic.base.baseDrugRightDict.dataType'),
field: baseDrugRightDictEnums.DATA_TYPE,
align: 'center',
minWidth: 100,
},
{
title: t('basic.base.baseDrugRightDict.expColName'),
field: baseDrugRightDictEnums.EXP_COL_NAME,
align: 'center',
},
{
title: t('basic.base.baseDrugRightDict.rightName'),
field: baseDrugRightDictEnums.RIGHT_NAME,
align: 'center',
minWidth: 200,
},
{
title: t('basic.base.baseDrugRightDict.valQueryUrl'),
field: baseDrugRightDictEnums.VAL_QUERY_URL,
align: 'center',
minWidth: 200,
},
{
title: t('common.title.actionBar'),
field: 'actionBar',
align: 'center',
fixed: 'right',
slots: {
default: 'actionBar',
},
width: 160,
},
];
};
export const baseDrugRightDictSchema = (): FormSchema[] => {
return [
{
label: t('basic.base.baseDrugRightDict.columnName'),
field: baseDrugRightDictEnums.COLUMN_NAME,
labelWidth: 100,
component: 'Input',
colProps: {
span: 24,
},
{
label: t('basic.base.baseDrugRightDict.dataType'),
field: baseDrugRightDictEnums.DATA_TYPE,
labelWidth: 100,
component: 'Select',
componentProps: {
options: [
{ label: '字符', value: 'String' },
{ label: '数字', value: 'Number' },
],
},
colProps: {
span: 24,
},
},
{
label: t('basic.base.baseDrugRightDict.expColName'),
field: baseDrugRightDictEnums.EXP_COL_NAME,
labelWidth: 100,
component: 'Input',
colProps: {
span: 24,
},
},
{
label: t('basic.base.baseDrugRightDict.rightName'),
field: baseDrugRightDictEnums.RIGHT_NAME,
labelWidth: 100,
component: 'Input',
colProps: {
span: 24,
},
},
{
label: t('basic.base.baseDrugRightDict.valQueryUrl'),
field: baseDrugRightDictEnums.VAL_QUERY_URL,
labelWidth: 100,
component: 'Input',
colProps: {
span: 24,
},
},
];
};
3.其他配置文件代码
常量配置
export enum baseDrugRightDictEnums {
COLUMN_NAME = 'columnName',
DATA_TYPE = 'dataType',
EXP_COL_NAME = 'expColName',
RIGHT_NAME = 'rightName',
VAL_QUERY_URL = 'valQueryUrl',
}
4.api接口的编写
接口的封装
import { defHttp } from '/@/utils/http/axios';
import { ServicePrefixEnum } from '/@/enums/commonEnum';
import { RequestEnum } from '/@/enums/httpEnum';
import { PageParams, PageResult } from '/@/api/model/baseModel';
import { baseDrugRightDictNorm, baseDrugRightDictNormVO } from './model/baseDrugRightDictModel';
import type { AxiosRequestConfig } from 'axios';
// 药品自定义权限配置
const baseDrugRightDict = 'baseDrugRightDict';
export const Api = {
Page: {
url: `${ServicePrefixEnum.BASE}/${baseDrugRightDict}/page`,
method: RequestEnum.POST,
} as AxiosRequestConfig,
Add: {
url: `${ServicePrefixEnum.BASE}/${baseDrugRightDict}`,
method: RequestEnum.POST,
} as AxiosRequestConfig,
Update: {
url: `${ServicePrefixEnum.BASE}/${baseDrugRightDict}`,
method: RequestEnum.PUT,
} as AxiosRequestConfig,
Delete: {
url: `${ServicePrefixEnum.BASE}/${baseDrugRightDict}`,
method: RequestEnum.DELETE,
} as AxiosRequestConfig,
};
export const pageApi = (params: PageParams) => {
return defHttp.request>({ ...Api.Page, params });
};
export const addApi = (params: baseDrugRightDictNorm) => {
return defHttp.request({ ...Api.Add, params });
};
export const updateApi = (params: baseDrugRightDictNorm) => {
return defHttp.request({ ...Api.Update, params });
};
export const deleteApi = (params: string[]) => {
return defHttp.request({ ...Api.Delete, params });
};
接口的 类型
export interface baseDrugRightDictNorm {
columnName?: string;
dataType?: string;
expColName?: string;
rightName?: string;
valQueryUrl?: string;
}
export interface baseDrugRightDictNormVO {
columnName: string;
dataType: string;
expColName: string;
rightName: string;
valQueryUrl: string;
}
5.语言包文件
中文
export default {
columnName: '字段代码',
dataType: '值类型',
expColName: '权限表扩展字典名',
rightName: '权限名称',
valQueryUrl: '值字典数据查询接口',
};
英文
export default {
columnName: 'columnName',
dataType: 'dataType',
expColName: 'expColName',
rightName: 'rightName',
valQueryUrl: 'valQueryUrl',
};
支持新文章