@a2simcode/ui 0.0.127 → 0.0.128

package/docs/examples/form/basic.vue

@@ -1,502 +1,539 @@
-<template>
-  <div>
-    <j-form ref="formRef" :schema="schema" :config="formConfig" />
-    <div style="margin-top: 16px; padding-left: 100px">
-      <j-button type="primary" label="提交" @click="handleSubmit"></j-button>
-      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
-      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, h, onMounted } from 'vue'
-
-const formRef = ref()
-
-const formConfig = reactive({
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-})
-
-const handleGetFormData = () => {
-  console.log(formRef.value.getFormData(), 'getFormData')
-}
-const schema = [
-  {
-    type: 'el-segmented',
-    config: {
-      label: 'el分段控制器',
-      isInput: true,
-      defaultValue: '1',
-      options: [
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' },
-      ],
-    },
-  },
-  {
-    type: 'j-barcode',
-    config: {
-      label: '条码',
-      bcid: 'code128',
-      defaultValue: '1234567890',
-      height: 8,
-      scale: 2,
-    },
-  },
-  {
-    type: 'j-time',
-    config: {
-      label: '时间选择',
-      field: 'time1',
-      placeholder: '请选择时间',
-      isRange: true,
-    },
-    getCompConfig: (data) => {
-      console.log(data, 'getCompConfig')
-      return {}
-    },
-  },
-  {
-    type: 'j-now-time',
-    config: {
-      label: '当前时间',
-      field: 'nowTime',
-      placeholder: '请选择当前时间',
-      mode: 'create',
-    },
-  },
-  {
-    type: 'j-input-layer',
-    config: {
-      label: '弹窗选择',
-      field: 'dataItem1',
-      placeholder: '请选择类型',
-      dataType: 'dataItem',
-      dataCode: 'dataItem1',
-    },
-  },
-  {
-    type: 'j-input',
-    config: {
-      label: '用户名',
-      field: 'username',
-      placeholder: '请输入用户名',
-      rule: [{ required: true, message: '请输入用户名' }],
-    },
-  },
-  {
-    type: 'j-input',
-    config: {
-      label: '邮箱',
-      field: 'email',
-      placeholder: '请输入邮箱',
-      rule: [
-        { required: true, message: '请输入邮箱' },
-        { type: 'email', message: '请输入正确的邮箱格式' },
-      ],
-    },
-  },
-  {
-    type: 'j-number',
-    config: {
-      label: '年龄',
-      field: 'age',
-      placeholder: '请输入年龄',
-      min: 0,
-      max: 150,
-    },
-  },
-  {
-    type: 'j-select',
-    config: {
-      label: '选择器',
-      field: 'select',
-      placeholder: '请选择',
-      options: [
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' },
-      ],
-    },
-  },
-  {
-    type: 'j-radio',
-    config: {
-      label: '单选框',
-      field: 'radio',
-      options: [
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' },
-      ],
-      // isColor: true,
-      // colors: [{ color: '#409eff', value: '1' }, { color: '#67c23a', value: '2' }]
-    },
-  },
-  {
-    type: 'j-checkbox',
-    config: {
-      label: '多选框',
-      field: 'checkbox',
-      options: [
-        { label: '选项1', value: '1' },
-        { label: '选项2', value: '2' },
-      ],
-      defaultValue: '1',
-    },
-  },
-  {
-    type: 'j-switch',
-    config: {
-      label: '开关',
-      field: 'switch',
-    },
-  },
-  {
-    type: 'j-slider',
-    config: {
-      label: '滑块',
-      field: 'slider',
-    },
-  },
-  {
-    type: 'j-rate',
-    config: {
-      label: '评分',
-      field: 'rate',
-    },
-  },
-  {
-    type: 'j-cascader-select',
-    config: {
-      label: '级联选择',
-      field: 'cascader',
-      options: [
-        {
-          label: '指南',
-          value: 'guide',
-          children: [
-            { label: '设计原则', value: 'design' },
-            { label: '导航', value: 'navigation' },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    type: 'j-input-tag',
-    config: {
-      label: '标签输入',
-      field: 'tags',
-      placeholder: '请输入标签',
-    },
-  },
-  {
-    type: 'j-input-color',
-    config: {
-      label: '颜色选择',
-      field: 'color',
-      placeholder: '请选择颜色',
-    },
-  },
-  {
-    type: 'j-autocomplete',
-    config: {
-      label: '自动补全',
-      field: 'autocomplete',
-      placeholder: '请输入内容',
-      options: [
-        { value: 'Vue', link: 'https://github.com/vuejs/vue' },
-        { value: 'React', link: 'https://github.com/facebook/react' },
-      ],
-    },
-  },
-  {
-    type: 'j-tree-select',
-    config: {
-      label: '树形选择',
-      field: 'tree',
-      placeholder: '请选择',
-      options: [
-        {
-          label: '指南',
-          value: 'guide',
-          children: [
-            { label: '设计原则', value: 'design' },
-            { label: '导航', value: 'navigation' },
-          ],
-        },
-      ],
-    },
-  },
-  {
-    type: 'j-upload',
-    config: {
-      label: '上传',
-      field: 'upload',
-      placeholder: '点击上传',
-      isNotApi: true,
-    },
-  },
-  {
-    type: 'j-code-mirror',
-    config: {
-      label: '代码编辑',
-      field: 'code',
-      height: 200,
-      style: { 'margin-bottom': '18px' },
-    },
-  },
-  {
-    type: 'j-tabs',
-    config: {
-      field: 'j_Type',
-    },
-    children: [
-      {
-        config: {
-          label: '常规',
-        },
-        children: [
-          {
-            type: 'j-input',
-            config: {
-              label: '主机',
-              field: 'j_Server',
-            },
-          },
-        ],
-      },
-      {
-        config: {
-          label: '高级',
-        },
-        children: [
-          {
-            type: 'j-input',
-            config: {
-              label: '连接串',
-              field: 'j_DbConnection',
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'j-collapse',
-    config: {
-      label: '属性设置',
-      field: 'collapse',
-    },
-    children: [
-      {
-        config: {
-          label: '基础信息',
-        },
-        children: [
-          {
-            type: 'j-input',
-            config: {
-              label: '名称',
-              field: 'j_Name',
-              rule: [{ required: true, message: '请输入名称' }],
-            },
-          },
-          {
-            type: 'j-input',
-            config: {
-              label: '编码',
-              field: 'j_Code',
-              rule: [
-                { required: true, message: '请输入编码' },
-                {
-                  type: 'only',
-                  table: 'base_datasource',
-                  key: 'j_Id',
-                },
-              ],
-            },
-          },
-          {
-            type: 'j-tree-select',
-            config: {
-              label: '分类',
-              field: 'j_Category',
-              dataType: 'dataItem',
-              dataCode: 'datasourceType',
-              rule: [{ required: true, message: '请选择' }],
-            },
-          },
-          {
-            type: 'j-input',
-            config: {
-              label: '备注',
-              field: 'j_Des',
-              type: 'textarea',
-            },
-          },
-        ],
-      },
-      {
-        config: {
-          label: '排序字段',
-        },
-        children: [
-          {
-            type: 'j-input-cards',
-            config: {
-              field: 'orders',
-              labelWidth: '48px',
-            },
-            children: [
-              {
-                // id: 'field',
-                type: 'j-autocomplete',
-                config: {
-                  label: '字段',
-                  field: 'field',
-                },
-              },
-              {
-                // id: 'isDESC',
-                type: 'j-switch',
-                config: {
-                  label: '倒序',
-                  field: 'isDESC',
-                  activeValue: true,
-                  inactiveValue: false,
-                },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        config: {
-          label: '字段信息',
-        },
-        children: [
-          {
-            type: 'j-input-rows',
-            config: {
-              // label: '字段信息',
-              field: 'fields',
-              labelWidth: '48px',
-              // isRemoveBtn: false,
-              // isAddBtn: false,
-              // drag: false,
-            },
-            children: [
-              {
-                type: 'j-input',
-                config: {
-                  label: '',
-                  field: 'name',
-                },
-                getCompConfig: ({ row }) => {
-                  return {
-                    prepend: row.type,
-                    prependStyle: { color: 'blue', display: 'inline-block', width: '30px' },
-                  }
-                },
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'j-table',
-    config: {
-      label: '规则格式',
-      field: 'ruleFormat',
-      heightMode: 'auto',
-      maxHeight: 300,
-      editConfig: { isAddBtn: true, isRemoveBtn: true },
-    },
-    children: [
-      {
-        type: 'j-select',
-        config: {
-          label: '前缀',
-          width: 120,
-          field: 'itemType',
-          dataType: 'options',
-          options: [
-            { value: '0', label: '自定义' },
-            { value: '1', label: '日期' },
-            { value: '2', label: '流水号' },
-            { value: '3', label: '公司' },
-            { value: '4', label: '部门' },
-            { value: '5', label: '用户' },
-            { value: '6', label: '表字段' },
-          ],
-          change: (data) => {
-            console.log(data)
-            data.row.Product = 'xxx'
-          },
-        },
-      },
-      {
-        type: 'j-input',
-        config: {
-          label: '格式',
-          field: 'formatStr',
-        },
-      },
-      {
-        type: 'j-input',
-        config: {
-          label: '步长',
-          field: 'step',
-        },
-      },
-      {
-        id: 'Product',
-        config: {
-          label: 'Product Name',
-          width: 'auto',
-          align: 'left',
-        },
-      },
-    ],
-    // on: {
-    //   change: (data: any) => {
-    //     console.log(data, 'change')
-    //   }
-    // }
-  },
-]
-
-onMounted(() => {
-  formRef.value.setFormData({
-    fields: [
-      {
-        name: '字段1',
-        type: '字符串',
-      },
-      {
-        name: '字段2',
-        type: '数字',
-      },
-    ],
-  })
-})
-const handleSubmit = async () => {
-  const valid = await formRef.value.validate()
-  if (valid) {
-    const formData = formRef.value.getFormData()
-    console.log('表单数据:', formData)
-    alert('提交成功！')
-  }
-}
-
-const handleReset = () => {
-  formRef.value.reset()
-}
-</script>
+<template>
+  <div>
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <j-button type="primary" label="提交" @click="handleSubmit"></j-button>
+      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
+      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
+      <j-button
+        style="margin-left: 8px"
+        label="init 重新初始化"
+        @click="handleInitWithSchema"
+      ></j-button>
+      <j-button style="margin-left: 8px" label="init 恢复" @click="handleInitReset"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, h, onMounted } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const handleGetFormData = () => {
+  console.log(formRef.value.getFormData(), 'getFormData')
+}
+
+const initSchema = [
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+]
+
+const handleInitWithSchema = async () => {
+  await formRef.value.init(initSchema, { username: '张三', age: 18 })
+}
+
+const handleInitReset = async () => {
+  await formRef.value.init(schema)
+}
+
+const schema = [
+  {
+    type: 'el-segmented',
+    config: {
+      label: 'el分段控制器',
+      isInput: true,
+      defaultValue: '1',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+  },
+  {
+    type: 'j-barcode',
+    config: {
+      label: '条码',
+      bcid: 'code128',
+      defaultValue: '1234567890',
+      height: 8,
+      scale: 2,
+    },
+  },
+  {
+    type: 'j-time',
+    config: {
+      label: '时间选择',
+      field: 'time1',
+      placeholder: '请选择时间',
+      isRange: true,
+    },
+    getCompConfig: (data) => {
+      console.log(data, 'getCompConfig')
+      return {}
+    },
+  },
+  {
+    type: 'j-now-time',
+    config: {
+      label: '当前时间',
+      field: 'nowTime',
+      placeholder: '请选择当前时间',
+      mode: 'create',
+    },
+  },
+  {
+    type: 'j-input-layer',
+    config: {
+      label: '弹窗选择',
+      field: 'dataItem1',
+      placeholder: '请选择类型',
+      dataType: 'dataItem',
+      dataCode: 'dataItem1',
+    },
+  },
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-input',
+    config: {
+      label: '邮箱',
+      field: 'email',
+      placeholder: '请输入邮箱',
+      rule: [
+        { required: true, message: '请输入邮箱' },
+        { type: 'email', message: '请输入正确的邮箱格式' },
+      ],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+  {
+    type: 'j-select',
+    config: {
+      label: '选择器',
+      field: 'select',
+      placeholder: '请选择',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+  },
+  {
+    type: 'j-radio',
+    config: {
+      label: '单选框',
+      field: 'radio',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+      // isColor: true,
+      // colors: [{ color: '#409eff', value: '1' }, { color: '#67c23a', value: '2' }]
+    },
+  },
+  {
+    type: 'j-checkbox',
+    config: {
+      label: '多选框',
+      field: 'checkbox',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+      defaultValue: '1',
+    },
+  },
+  {
+    type: 'j-switch',
+    config: {
+      label: '开关',
+      field: 'switch',
+    },
+  },
+  {
+    type: 'j-slider',
+    config: {
+      label: '滑块',
+      field: 'slider',
+    },
+  },
+  {
+    type: 'j-rate',
+    config: {
+      label: '评分',
+      field: 'rate',
+    },
+  },
+  {
+    type: 'j-cascader-select',
+    config: {
+      label: '级联选择',
+      field: 'cascader',
+      options: [
+        {
+          label: '指南',
+          value: 'guide',
+          children: [
+            { label: '设计原则', value: 'design' },
+            { label: '导航', value: 'navigation' },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    type: 'j-input-tag',
+    config: {
+      label: '标签输入',
+      field: 'tags',
+      placeholder: '请输入标签',
+    },
+  },
+  {
+    type: 'j-input-color',
+    config: {
+      label: '颜色选择',
+      field: 'color',
+      placeholder: '请选择颜色',
+    },
+  },
+  {
+    type: 'j-autocomplete',
+    config: {
+      label: '自动补全',
+      field: 'autocomplete',
+      placeholder: '请输入内容',
+      options: [
+        { value: 'Vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'React', link: 'https://github.com/facebook/react' },
+      ],
+    },
+  },
+  {
+    type: 'j-tree-select',
+    config: {
+      label: '树形选择',
+      field: 'tree',
+      placeholder: '请选择',
+      options: [
+        {
+          label: '指南',
+          value: 'guide',
+          children: [
+            { label: '设计原则', value: 'design' },
+            { label: '导航', value: 'navigation' },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    type: 'j-upload',
+    config: {
+      label: '上传',
+      field: 'upload',
+      placeholder: '点击上传',
+      isNotApi: true,
+    },
+  },
+  {
+    type: 'j-code-mirror',
+    config: {
+      label: '代码编辑',
+      field: 'code',
+      height: 200,
+      style: { 'margin-bottom': '18px' },
+    },
+  },
+  {
+    type: 'j-tabs',
+    config: {
+      field: 'j_Type',
+    },
+    children: [
+      {
+        config: {
+          label: '常规',
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '主机',
+              field: 'j_Server',
+            },
+          },
+        ],
+      },
+      {
+        config: {
+          label: '高级',
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '连接串',
+              field: 'j_DbConnection',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'j-collapse',
+    config: {
+      label: '属性设置',
+      field: 'collapse',
+    },
+    children: [
+      {
+        config: {
+          label: '基础信息',
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '名称',
+              field: 'j_Name',
+              rule: [{ required: true, message: '请输入名称' }],
+            },
+          },
+          {
+            type: 'j-input',
+            config: {
+              label: '编码',
+              field: 'j_Code',
+              rule: [
+                { required: true, message: '请输入编码' },
+                {
+                  type: 'only',
+                  table: 'base_datasource',
+                  key: 'j_Id',
+                },
+              ],
+            },
+          },
+          {
+            type: 'j-tree-select',
+            config: {
+              label: '分类',
+              field: 'j_Category',
+              dataType: 'dataItem',
+              dataCode: 'datasourceType',
+              rule: [{ required: true, message: '请选择' }],
+            },
+          },
+          {
+            type: 'j-input',
+            config: {
+              label: '备注',
+              field: 'j_Des',
+              type: 'textarea',
+            },
+          },
+        ],
+      },
+      {
+        config: {
+          label: '排序字段',
+        },
+        children: [
+          {
+            type: 'j-input-cards',
+            config: {
+              field: 'orders',
+              labelWidth: '48px',
+            },
+            children: [
+              {
+                // id: 'field',
+                type: 'j-autocomplete',
+                config: {
+                  label: '字段',
+                  field: 'field',
+                },
+              },
+              {
+                // id: 'isDESC',
+                type: 'j-switch',
+                config: {
+                  label: '倒序',
+                  field: 'isDESC',
+                  activeValue: true,
+                  inactiveValue: false,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        config: {
+          label: '字段信息',
+        },
+        children: [
+          {
+            type: 'j-input-rows',
+            config: {
+              // label: '字段信息',
+              field: 'fields',
+              labelWidth: '48px',
+              // isRemoveBtn: false,
+              // isAddBtn: false,
+              // drag: false,
+            },
+            children: [
+              {
+                type: 'j-input',
+                config: {
+                  label: '',
+                  field: 'name',
+                },
+                getCompConfig: ({ row }) => {
+                  return {
+                    prepend: row.type,
+                    prependStyle: { color: 'blue', display: 'inline-block', width: '30px' },
+                  }
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'j-table',
+    config: {
+      label: '规则格式',
+      field: 'ruleFormat',
+      heightMode: 'auto',
+      maxHeight: 300,
+      editConfig: { isAddBtn: true, isRemoveBtn: true },
+    },
+    children: [
+      {
+        type: 'j-select',
+        config: {
+          label: '前缀',
+          width: 120,
+          field: 'itemType',
+          dataType: 'options',
+          options: [
+            { value: '0', label: '自定义' },
+            { value: '1', label: '日期' },
+            { value: '2', label: '流水号' },
+            { value: '3', label: '公司' },
+            { value: '4', label: '部门' },
+            { value: '5', label: '用户' },
+            { value: '6', label: '表字段' },
+          ],
+          change: (data) => {
+            console.log(data)
+            data.row.Product = 'xxx'
+          },
+        },
+      },
+      {
+        type: 'j-input',
+        config: {
+          label: '格式',
+          field: 'formatStr',
+        },
+      },
+      {
+        type: 'j-input',
+        config: {
+          label: '步长',
+          field: 'step',
+        },
+      },
+      {
+        id: 'Product',
+        config: {
+          label: 'Product Name',
+          width: 'auto',
+          align: 'left',
+        },
+      },
+    ],
+    // on: {
+    //   change: (data: any) => {
+    //     console.log(data, 'change')
+    //   }
+    // }
+  },
+]
+
+onMounted(() => {
+  formRef.value.setFormData({
+    fields: [
+      {
+        name: '字段1',
+        type: '字符串',
+      },
+      {
+        name: '字段2',
+        type: '数字',
+      },
+    ],
+  })
+})
+const handleSubmit = async () => {
+  const valid = await formRef.value.validate()
+  if (valid) {
+    const formData = formRef.value.getFormData()
+    console.log('表单数据:', formData)
+    alert('提交成功！')
+  }
+}
+
+const handleReset = () => {
+  formRef.value.reset()
+}
+</script>