vue3-components-plus 3.0.10

package/dist/ComponentDemo/DynamicFormCascadeDemo.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="cascade-demo">
+    <h1>级联表单示例</h1>
+
+    <el-card class="demo-card">
+      <template #header>
+        <span>省市区三级联动</span>
+      </template>
+
+      <DynamicFormPlus
+        ref="formRef"
+        v-model="formData"
+        :config="formConfig"
+        :col-span="8"
+        :gutter="16"
+        label-width="100px"
+        @submit="handleSubmit"
+      />
+    </el-card>
+
+    <el-card class="demo-card" style="margin-top: 20px">
+      <template #header>
+        <span>表单数据</span>
+      </template>
+      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { DynamicFormPlus } from '../../packages/components/DynamicFormPlus'
+import type { FormConfig } from '../../packages/components/DynamicFormPlus'
+
+// 模拟数据源
+const provinces = [
+  { label: '广东省', value: 'guangdong' },
+  { label: '浙江省', value: 'zhejiang' },
+  { label: '江苏省', value: 'jiangsu' },
+]
+
+const citiesMap: Record<string, Array<{ label: string; value: string }>> = {
+  guangdong: [
+    { label: '广州市', value: 'guangzhou' },
+    { label: '深圳市', value: 'shenzhen' },
+    { label: '东莞市', value: 'dongguan' },
+  ],
+  zhejiang: [
+    { label: '杭州市', value: 'hangzhou' },
+    { label: '宁波市', value: 'ningbo' },
+    { label: '温州市', value: 'wenzhou' },
+  ],
+  jiangsu: [
+    { label: '南京市', value: 'nanjing' },
+    { label: '苏州市', value: 'suzhou' },
+    { label: '无锡市', value: 'wuxi' },
+  ],
+}
+
+const districtsMap: Record<string, Array<{ label: string; value: string }>> = {
+  guangzhou: [
+    { label: '天河区', value: 'tianhe' },
+    { label: '越秀区', value: 'yuexiu' },
+    { label: '海珠区', value: 'haizhu' },
+  ],
+  shenzhen: [
+    { label: '南山区', value: 'nanshan' },
+    { label: '福田区', value: 'futian' },
+    { label: '罗湖区', value: 'luohu' },
+  ],
+  dongguan: [
+    { label: '莞城区', value: 'guancheng' },
+    { label: '南城区', value: 'nancheng' },
+    { label: '东城区', value: 'dongcheng' },
+  ],
+  hangzhou: [
+    { label: '西湖区', value: 'xihu' },
+    { label: '滨江区', value: 'binjiang' },
+    { label: '余杭区', value: 'yuhang' },
+  ],
+  ningbo: [
+    { label: '海曙区', value: 'haishu' },
+    { label: '江北区', value: 'jiangbei' },
+    { label: '鄞州区', value: 'yinzhou' },
+  ],
+  wenzhou: [
+    { label: '鹿城区', value: 'lucheng' },
+    { label: '龙湾区', value: 'longwan' },
+    { label: '瓯海区', value: 'ouhai' },
+  ],
+  nanjing: [
+    { label: '玄武区', value: 'xuanwu' },
+    { label: '秦淮区', value: 'qinhuai' },
+    { label: '建邺区', value: 'jianye' },
+  ],
+  suzhou: [
+    { label: '姑苏区', value: 'gusu' },
+    { label: '吴中区', value: 'wuzhong' },
+    { label: '相城区', value: 'xiangcheng' },
+  ],
+  wuxi: [
+    { label: '梁溪区', value: 'liangxi' },
+    { label: '滨湖区', value: 'binhu' },
+    { label: '惠山区', value: 'huishan' },
+  ],
+}
+
+// 表单数据
+const formData = ref({
+  province: '',
+  city: '',
+  district: '',
+  address: '',
+})
+
+// 表单配置
+const formConfig: FormConfig = {
+  items: [
+    {
+      prop: 'province',
+      label: '省份',
+      component: 'el-select',
+      componentProps: {
+        placeholder: '请选择省份',
+        clearable: true,
+      },
+      rules: [{ required: true, message: '请选择省份', trigger: 'change' }],
+      span: 8,
+      // 静态数据源
+      valueTransform: {
+        input: (value) => value,
+        output: (value) => value,
+      },
+    },
+    {
+      prop: 'city',
+      label: '城市',
+      component: 'el-select',
+      componentProps: {
+        placeholder: '请先选择省份',
+        clearable: true,
+        disabled: true,
+      },
+      rules: [{ required: true, message: '请选择城市', trigger: 'change' }],
+      span: 8,
+      // 级联配置：依赖省份字段
+      cascade: {
+        dependOn: 'province',
+        clearFields: ['city', 'district'], // 省份变化时清除城市和区县
+        handler: ({ dependValues, setComponentProps, clearValue }) => {
+          const province = dependValues.province
+
+          if (!province) {
+            // 如果省份为空，禁用城市选择器
+            setComponentProps({
+              placeholder: '请先选择省份',
+              disabled: true,
+              options: [],
+            })
+            clearValue()
+            return
+          }
+
+          // 根据省份加载城市数据
+          const cities = citiesMap[province] || []
+          setComponentProps({
+            placeholder: '请选择城市',
+            disabled: false,
+            options: cities,
+          })
+        },
+      },
+    },
+    {
+      prop: 'district',
+      label: '区县',
+      component: 'el-select',
+      componentProps: {
+        placeholder: '请先选择城市',
+        clearable: true,
+        disabled: true,
+      },
+      rules: [{ required: true, message: '请选择区县', trigger: 'change' }],
+      span: 8,
+      // 级联配置：依赖城市字段
+      cascade: {
+        dependOn: 'city',
+        clearFields: ['district'], // 城市变化时清除区县
+        handler: ({ dependValues, setComponentProps, clearValue }) => {
+          const city = dependValues.city
+
+          if (!city) {
+            // 如果城市为空，禁用区县选择器
+            setComponentProps({
+              placeholder: '请先选择城市',
+              disabled: true,
+              options: [],
+            })
+            clearValue()
+            return
+          }
+
+          // 根据城市加载区县数据
+          const districts = districtsMap[city] || []
+          setComponentProps({
+            placeholder: '请选择区县',
+            disabled: false,
+            options: districts,
+          })
+        },
+      },
+    },
+    {
+      prop: 'address',
+      label: '详细地址',
+      component: 'el-input',
+      componentProps: {
+        type: 'textarea',
+        rows: 3,
+        placeholder: '请输入详细地址',
+      },
+      rules: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
+      span: 24,
+    },
+  ],
+}
+
+// 为省份选择器添加静态选项
+formConfig.items[0].componentProps!.options = provinces
+
+// 表单引用
+const formRef = ref()
+
+// 处理提交
+function handleSubmit(data: Record<string, any>) {
+  console.log('表单提交:', data)
+  ElMessage.success('表单提交成功！')
+}
+</script>
+
+<style scoped lang="scss">
+.cascade-demo {
+  padding: 20px;
+
+  h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .demo-card {
+    margin-bottom: 20px;
+  }
+
+  pre {
+    background-color: #f5f5f5;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+}
+</style>

package/dist/ComponentDemo/DynamicFormPlusDemo.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="dynamic-form-plus-demo">
+    <h1>DynamicFormPlus 组件演示</h1>
+
+    <el-card class="demo-card">
+      <template #header>
+        <div class="card-header">
+          <span>基础表单示例</span>
+          <div>
+            <el-radio-group v-model="currentMode" size="small">
+              <el-radio-button label="create">新增</el-radio-button>
+              <el-radio-button label="edit">编辑</el-radio-button>
+              <el-radio-button label="view">查看</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+      </template>
+
+      <DynamicFormPlus
+        ref="formRef"
+        v-model="formData"
+        :config="formConfig"
+        :mode="currentMode"
+        :layout="layoutMode"
+        :col-span="12"
+        :gutter="16"
+        label-width="120px"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @change="handleChange"
+      />
+    </el-card>
+
+    <el-card class="demo-card" style="margin-top: 20px;">
+      <template #header>
+        <span>表单数据</span>
+      </template>
+      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { DynamicFormPlus } from '../../packages/components/DynamicFormPlus'
+import type { FormConfig, FormMode, LayoutMode } from '../../packages/components/DynamicFormPlus'
+
+// 表单模式
+const currentMode = ref<FormMode>('create')
+const layoutMode = ref<LayoutMode>('grid')
+
+// 表单数据
+const formData = ref({
+  name: '',
+  email: '',
+  age: null,
+  gender: '',
+  description: '',
+})
+
+// 表单配置
+const formConfig: FormConfig = {
+  items: [
+    {
+      prop: 'name',
+      label: '姓名',
+      component: 'el-input',
+      componentProps: {
+        placeholder: '请输入姓名',
+        clearable: true,
+      },
+      rules: [
+        { required: true, message: '请输入姓名', trigger: 'blur' },
+        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+      ],
+      span: 12,
+    },
+    {
+      prop: 'email',
+      label: '邮箱',
+      component: 'el-input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+        clearable: true,
+      },
+      rules: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
+      ],
+      span: 12,
+    },
+    {
+      prop: 'age',
+      label: '年龄',
+      component: 'el-input-number',
+      componentProps: {
+        min: 1,
+        max: 120,
+        controlsPosition: 'right',
+      },
+      span: 12,
+    },
+    {
+      prop: 'gender',
+      label: '性别',
+      component: 'el-select',
+      componentProps: {
+        placeholder: '请选择性别',
+        clearable: true,
+      },
+      span: 12,
+    },
+    {
+      prop: 'description',
+      label: '描述',
+      component: 'el-input',
+      componentProps: {
+        type: 'textarea',
+        rows: 4,
+        placeholder: '请输入描述',
+        maxlength: 200,
+        showWordLimit: true,
+      },
+      span: 24,
+    },
+  ],
+}
+
+// 表单引用
+const formRef = ref()
+
+// 处理提交
+function handleSubmit(data: Record<string, any>) {
+  console.log('表单提交:', data)
+  ElMessage.success('表单提交成功！')
+}
+
+// 处理重置
+function handleReset() {
+  console.log('表单重置')
+  ElMessage.info('表单已重置')
+}
+
+// 处理字段变更
+function handleChange(prop: string, value: any) {
+  console.log('字段变更:', prop, value)
+}
+</script>
+
+<style scoped lang="scss">
+.dynamic-form-plus-demo {
+  padding: 20px;
+
+  h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .demo-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  pre {
+    background-color: #f5f5f5;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+}
+</style>

package/dist/ComponentDemo/ExampleFormConfig.js

@@ -0,0 +1,270 @@
+// 动态表单配置文件
+export const formConfig = {
+  // 表单数据初始值
+  formData: {
+    name: "",
+    email: "",
+    age: null,
+    gender: "",
+    hobbies: [],
+    isVip: false,
+    score: 0,
+    birthday: null,
+    city: [],
+    description: "",
+    customField: "",
+    province: "",
+    citySelect: "",
+    district: "",
+    category: "",
+    subcategory: "",
+  },
+
+  // 表单配置项
+  formItems: [
+    {
+      label: "输入框",
+      prop: "name",
+      component: "input",
+      span: 12,
+      required: true,
+      placeholder: "请输入输入框",
+      props: {
+        clearable: true,
+      },
+    },
+    {
+      label: "邮箱",
+      prop: "email",
+      component: "input",
+      span: 12,
+      required: true,
+      props: {
+        clearable: true,
+      },
+      rules: [
+        { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
+      ],
+    },
+    {
+      label: "数值输入",
+      prop: "age",
+      component: "number",
+      span: 12,
+      props: {
+        min: 1,
+        max: 120,
+        controlsPosition: "right",
+      },
+    },
+    {
+      label: "单选",
+      prop: "gender",
+      component: "radio-group",
+      span: 12,
+      options: [
+        { label: "AAA", value: "male" },
+        { label: "BBB", value: "female" },
+      ],
+    },
+    {
+      label: "多选",
+      prop: "hobbies",
+      component: "checkbox-group",
+      span: 24,
+      options: [
+        { label: "读书", value: "reading" },
+        { label: "运动", value: "sports" },
+        { label: "音乐", value: "music" },
+        { label: "旅行", value: "travel" },
+      ],
+    },
+    {
+      label: "滑块",
+      prop: "isVip",
+      component: "switch",
+      span: 12,
+    },
+    {
+      label: "评分",
+      prop: "score",
+      component: "el-slider",
+      span: 12,
+      props: {
+        min: 0,
+        max: 100,
+        showStops: true,
+        showTooltip: false,
+      },
+    },
+    {
+      label: "日期选择",
+      prop: "birthday",
+      component: "date-picker",
+      span: 12,
+      props: {
+        type: "date",
+        format: "YYYY-MM-DD",
+        valueFormat: "YYYY-MM-DD",
+      },
+    },
+    {
+      label: "城市",
+      prop: "city",
+      component: "cascader",
+      span: 12,
+      options: [
+        {
+          value: "jiangsu",
+          label: "江苏省",
+          children: [
+            { value: "nanjing", label: "南京市" },
+            { value: "suzhou", label: "苏州市" },
+          ],
+        },
+        {
+          value: "zhejiang",
+          label: "浙江省",
+          children: [
+            { value: "hangzhou", label: "杭州市" },
+            { value: "ningbo", label: "宁波市" },
+          ],
+        },
+      ],
+      props: {
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      label: "长文本",
+      prop: "description",
+      component: "textarea",
+      span: 24,
+      props: {
+        rows: 4,
+        maxlength: 200,
+        showWordLimit: true,
+      },
+    },
+    {
+      label: "关联字段",
+      prop: "customField",
+      component: "input",
+      span: 24,
+      slot: "customSlot",
+    },
+    {
+      label: "级联A",
+      prop: "province",
+      component: "select",
+      span: 8,
+      optionsKey: "provinces",
+      props: {
+        clearable: true,
+      },
+    },
+    {
+      label: "城市",
+      prop: "citySelect",
+      component: "select",
+      span: 8,
+      dependsOn: {
+        field: "province",
+        optionsKey: "cities",
+      },
+      props: {
+        clearable: true,
+      },
+    },
+    {
+      label: "区县",
+      prop: "district",
+      component: "select",
+      span: 8,
+      dependsOn: {
+        field: "citySelect",
+        optionsKey: "districts",
+      },
+      props: {
+        clearable: true,
+      },
+    },
+  ],
+
+  // 表单验证规则
+  formRules: {
+    name: [
+      { required: true, message: "请输入输入框", trigger: "blur" },
+      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
+    ],
+    email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
+  },
+
+  // 下拉框选项数据源
+  optionsData: {
+    provinces: [
+      { label: "江苏省", value: "jiangsu" },
+      { label: "浙江省", value: "zhejiang" },
+      { label: "上海市", value: "shanghai" },
+    ],
+    cities: {
+      jiangsu: [
+        { label: "南京市", value: "nanjing" },
+        { label: "苏州市", value: "suzhou" },
+        { label: "无锡市", value: "wuxi" },
+      ],
+      zhejiang: [
+        { label: "杭州市", value: "hangzhou" },
+        { label: "宁波市", value: "ningbo" },
+        { label: "温州市", value: "wenzhou" },
+      ],
+      shanghai: [
+        { label: "黄浦区", value: "huangpu" },
+        { label: "徐汇区", value: "xuhui" },
+        { label: "长宁区", value: "changning" },
+      ],
+    },
+    districts: {
+      nanjing: [
+        { label: "玄武区", value: "xuanwu" },
+        { label: "秦淮区", value: "qinhuai" },
+        { label: "建邺区", value: "jianye" },
+      ],
+      suzhou: [
+        { label: "姑苏区", value: "gusu" },
+        { label: "虎丘区", value: "huqiu" },
+        { label: "吴中区", value: "wuzhong" },
+      ],
+      hangzhou: [
+        { label: "西湖区", value: "xihu" },
+        { label: "拱墅区", value: "gongshu" },
+        { label: "江干区", value: "jianggan" },
+      ],
+    },
+    categories: [
+      { label: "电子产品", value: "electronics" },
+      { label: "服装鞋帽", value: "clothing" },
+      { label: "图书音像", value: "books" },
+    ],
+    subcategories: {
+      electronics: [
+        { label: "手机", value: "phone" },
+        { label: "电脑", value: "computer" },
+        { label: "平板", value: "tablet" },
+      ],
+      clothing: [
+        { label: "男装", value: "mens" },
+        { label: "女装", value: "womens" },
+        { label: "童装", value: "kids" },
+      ],
+      books: [
+        { label: "小说", value: "novel" },
+        { label: "技术书籍", value: "tech" },
+        { label: "教育", value: "education" },
+      ],
+    },
+  },
+};
+
+export default formConfig;