@corgicoding-el/data-form-grid

为 @corgicoding/web-quick-start 工程模板设定的表单设计器，通过数据驱动表单视图的快速生成绘制。

绑定依赖

1. @corgicoding/web-types
   • NormalizedError: 统一错误返回
   • NormalizedResponse: 统一接口返回
2. @corgicoding/axios-hook
   • useService: 获取当前 axios 实例
3. @corgicoding/permission-hook
   • 权限指令方法
4. @corgicoding-el/dict
   • 字典集组件
5. @corgicoding-el/remote-select
   • 远程下拉组件
6. @corgicoding-el/upload
   • 上传组件

{
  "peerDependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.7.2",
    "lodash-es": "^4.17.21",
    "axios": "^1.4.0",
    "vue-i18n": "^9.7.1",
    "vue": "^3.4.25"
  },
  "dependencies": {
    "@corgicoding/web-types": "workspace:^",
    "@corgicoding/axios-hook": "workspace:^",
    "@corgicoding/permission-hook": "workspace:^",
    "@corgicoding-el/dict": "workspace:^",
    "@corgicoding-el/remote-select": "workspace:^",
    "@corgicoding-el/upload": "workspace:^"
  },
  "devDependencies": {
    "@types/lodash-es": "^4.17.12"
  }
}

前置依赖

• element-plus
• axios
• @vueuse/core
• vue (3.x)
• vue-i18n
• lodash-es

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue @vueuse/core vue-i18n lodash-es axios -S

如何使用

安装工程到本地，并按需使用或全局使用

安装

使用 pnpm 下载

pnpm install @corgicoding-el/data-form-grid -S

使用

假设要设计一个用户的简单编辑操作，可以将表单设计为：

1. username 的 input
2. birthday 的 date
3. userType 的 dictRadio

<script setup>
import { DataFormGrid } from '@corgicoding-el/data-form-grid';
// 若使用全局则可以不引入 （ 按需引入则为必引 ）
import '@corgicoding-el/data-form-grid/style.css';

const formValue = ref({
  username: 'charleschan',
  birthday: '1998-03-12',
  userType: '2'
});
// 推荐使用 computed 以用于后续各种外部变量导致表单的配置变动
const formConfigs = computed(() => [
  {
    type: 'input',
    name: '用户名称',
    key: 'username'
  },
  {
    type: 'date',
    name: '出生日期',
    key: 'birthday'
  },
  {
    type: 'dictRadio',
    name: '用户类型',
    key: 'userType',
    options: [
      {
        dictCode: 'user_type'
      }
    ]
  }
]);
</script>

<template>
  <DataFormGrid v-model="formValue" :configs="formConfigs"></DataFormGrid>
</template>

props入参

import type { FormEmits, FormProps, FormRules } from 'element-plus';

export type DataFormGridProps = {
  modelValue: any; // 表单绑定值
  configs: Array<FormGridConfig>; // 配置项
  labelWidth?: string | number; // 表单默认label宽度
  labelPosition?: 'left' | 'right' | 'top'; // label位置
  disabled?: boolean; // 禁用
  formName?: string; // 表单名（用于提示）
  type?: 'text' | 'form'; // 文本值显示模式 / 表单编辑模式
  autoTrim?: boolean; // 自动去除空格检验
  componentOptions?: FormProps; // 原生 el-form props
  eventOptions?: FormEmits; // 原生 el-form emits
};

表单数组配置对象定义

export interface FormGridConfig {
  required?: boolean; // 是否必填
  requiredText?: string; // 必填校验悬浮提示显示
  name: string; // 显示名称
  key: string; // 取值key
  span?: number; // 栅格占据
  mdSpan?: number; // 中屏大小占据
  type?: FormItemTypes; // 类型;
  component?: any;
  placeholder?: string; // 悬浮显示内容
  labelWidth?: string; // 显示名称宽度
  textFormatter?: (value: any, data: any) => string; // (!!! 文本模式优先级最高) 查看禁用时，取值转换
  hidden?: boolean; // 隐藏显示
  isIgnoreText?: boolean; // 是否忽略文本模式显示
  options?: Array<{
    // 选项，字典类型则取第一个option
    label?: string;
    value?: any;
    dictCode?: string; // 字典类型 - 字典编码
    url?: string; // 远程类型 - 地址
    /**
     * @deprecated 即将删除的功能，配置无意义
     */
    noDictText?: boolean; // 远程类型 - 无字典翻译
    hasSuffix?: boolean; // 标题类型 - 插槽使用
  }>;
  rules?: FormRules; // 表单规则
  auth?: string;
  componentOptions?: any;
  eventOptions?: any;
}

emits 事件

const Emits = defineEmits(['update:modelValue', 'click-col']);

• click-col
  • 点击当前表单项触发的事件

暴露参数

defineExpose({
  elRef: formRef,
  formValidate, // 表单校验
  formReset // 表单重置回初始值
});

按需使用

完整的案例如下

<script setup lang="ts">
import {
  DataFormGrid,
  type FormGridConfig
} from '@corgicoding-el/data-form-grid';
// import '@corgicoding-el/data-form-grid/style.css';
import { computed, ref } from 'vue';

const formRef = ref<InstanceType<typeof DataFormGrid>>();
const formValue = ref<any>({});
const formConfigs = computed<FormGridConfig[]>(() => [
  {
    type: 'input',
    span: 12,
    name: '测试输入',
    key: 'testInput'
  }
]);

const submitForm = async () => {
  const targetForm = await formRef.value?.formValidate();

  // 校验过，则执行以下操作
  console.log(targetForm);
};

const resetForm = () => {
  formRef.value?.formReset();
};
</script>

<template>
  <div>
    <DataFormGrid
      ref="formRef"
      v-model="formValue"
      :configs="formConfigs"
    ></DataFormGrid>
  </div>

  <div>
    <el-button @click="resetForm">重置</el-button>
    <el-button @click="submitForm">提交</el-button>
  </div>
</template>

全局引入

在 main.ts 引入

import {
  DataFormGrid,
  type FormGridConfig
} from '@corgicoding-el/data-form-grid';
import '@corgicoding-el/data-form-grid/style.css';

app.use(DataFormGrid);

场景说明

支持的表单类型

export type FormItemTypes =
  | 'select'
  | 'remoteSelect'
  | 'remoteTreeSelect'
  | 'dictSelect'
  | 'dictCheckbox'
  | 'dictRadio'
  | 'checkbox'
  | 'radio'
  | 'input'
  | 'numberInput'
  | 'uploadImage'
  | 'uploadFiles'
  | 'textarea'
  | 'date'
  | 'daterange'
  | 'datetime'
  | 'datetimerange'
  | 'year'
  | 'month'
  | 'week'
  | 'title'
  | 'null'
  | 'itemSlot'
  | 'component'
  | 'slot';

表单组件归类

/**
 * @description 选择类型
 */
export const selectType = [
  'select',
  'remoteSelect',
  'remoteTreeSelect',
  'dictSelect',
  'dictCheckbox',
  'dictRadio',
  'checkbox',
  'radio',
  'date',
  'datetime',
  'datetimerange',
  'daterange',
  'year',
  'yearrange',
  'month',
  'monthrange',
  'week',
  'weekrange'
];

/**
 * @description 时间类型
 */
export const timeType: Array<string> = [
  'date',
  'datetime',
  'daterange',
  'year',
  'month',
  'week',
  'datetimerange'
];

/**
 * @description 时间格式化默认
 */
export const timeFormat = {
  date: 'YYYY-MM-DD',
  datetime: 'YYYY-MM-DD HH:mm:ss',
  daterange: 'YYYY-MM-DD',
  year: 'YYYY',
  month: 'MM',
  datetimerange: 'YYYY-MM-DD HH:mm:ss'
};

/**
 * 字典类型组件
 */
export const dictTextType: Array<string> = [
  'dictSelect',
  'dictCheckbox',
  'dictRadio'
];

/**
 * @description 固定数据选型类型
 */
export const localOptionType: Array<string> = ['select', 'radio', 'checkbox'];

/**
 * @description 特殊组件
 */
export const ignoreType: Array<string> = [
  'uploadImage',
  'uploadFiles',
  'remoteSelect',
  'remoteTreeSelect'
];

特殊场景实现

待完善