使用vxetable 弹窗 form 做的一个完整的增删改查的页面

君哥阅读：2116 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',
};

本文链接：https://yanjun202.com/post/94.html

分享到：

标签:vxetable

可以去百度分享获取分享代码输入这里。