基于antdv进行二次开发form表单，集成的组件有 CommonForm,BaseForm,FormItem,CommonInput,CommonInputNumber, CommonSelect,CommonCascader,CommonDatePicker,CommonInputPwd, CommonRadioGroup,CommonRangePicker,CommonSwitch,CommonText,CommonTextarea, CommonTimePicker,CommonTimeSelect,CommonTransfer,CommonTreeSelect, CommonUpload,CommonUploadImage等等

安装

pnpm install @mrfzq/simple-common -S
or
yarn add @mrfzq/simple-common

使用

方式一（列表查询时候的form表单，其中默认有查询、重置按钮）

<script setup lang="ts">
import { ref, computed } from "vue";
import { CommonForm } from "@mrfzq/simple-common";
import FormInterface from "@mrfzq/simple-common/dist/components/src/types/formInterface";

const form = ref({
  search: "",
  label: "",
  status: null,
  is_value: 0,
});

const queryFields = computed<FormInterface.FieldItem[]>(() => [
  {
    label: "关键词",
    itemType: "input",
    value: "search",
    field: {
      placeholder: "请输入关键词",
      allowClear: true,
    },
  },
  {
    label: "字典名称",
    itemType: "input",
    value: "label",
    field: {
      placeholder: "请输入字典名称",
      allowClear: true,
    },
  },
  {
    label: "状态",
    itemType: "select",
    value: "status",
    field: {
      placeholder: "请选择状态",
      allowClear: true,
      options: [],
    },
  },
]);
</script>
<template>
  <div>
    <CommonForm v-model:form="form" :fields="queryFields" @query="() => {}" />
  </div>
</template>
<style scoped lang="scss"></style>


方式二(在弹窗中填写表单，包含验证,可以动态显示隐藏单项)
const rowStyle = {
  colStyle: {
    md: 24,
    lg: 24,
    xl: 24,
    xxl: 24,
  }
}
const from: any = ref({
  label: "",
  value: "",
  status: true,
  sort: 1,
  description: "",
});
const fields = computed<FormInterface.FieldItem[]>(() => [
  {
    label: "字典名称",
    itemType: "input",
    value: "label",
    ...rowStyle,
    field: {
      disabled: isDisabled.value,
      placeholder: "请输入字典名称",
      allowClear: true,
    },
    rules: [
      { required: true, message: "请输入字典名称" },
      { max: 20, message: "20个字符以内" },
    ],
  },
  {
    label: "字典编号",
    itemType: "input",
    value: "value",
    ...rowStyle,
    field: {
      disabled: isDisabled.value,
      placeholder: "请输入字典编号",
      allowClear: true,
    },
    rules: [
      { required: true, message: "请输入字典编号" },
      { max: 20, message: "20个字符以内" },
    ],
  },
  {
    label: "状态",
    itemType: "switch",
    value: "status",
    ...rowStyle,
    field: {
      disabled: isDisabled.value,
    },
    rules: [{ required: true, message: "请选择状态" }],
  },
  {
    label: "排序",
    itemType: "input-number",
    value: "sort",
    ...rowStyle,
    field: {
      disabled: isDisabled.value,
      min: 0,
    },
  },
  {
    label: "备注",
    itemType: "textarea",
    value: "description",
    ...rowStyle,
    field: {
      disabled: isDisabled.value,
      placeholder: "请输入备注",
      allowClear: true,
      showCount: true,
      maxlength: 200,
      rows: 3,
    },
    rules: [{ max: 200, message: "200个字符以内" }],
  },
]);

<template>
  <div>
    <BaseForm
      ref="fromRef"
      v-model:form="from"
      :fields="fields"
      label-align="right"
    />
  </div>
</template>
<style scoped lang="scss"></style>