@a2simcode/ui 0.0.256 → 0.0.258

package/docs/examples/form/view-table.vue

@@ -1,378 +1,378 @@
-<template>
-  <div class="demo-form-view-table">
-    <j-form ref="formRef" :schema="schema" :config="formConfig" />
-    <div style="margin-top: 16px; text-align: right">
-      <j-button type="primary" label="加载模拟数据" @click="handleLoadMock" />
-      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData" />
-    </div>
-    <div style="margin-top: 16px">
-      <pre class="demo-form-view-table__pre">{{ JSON.stringify(formData, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-
-const formRef = ref<any>()
-const formData = ref<Record<string, any>>({})
-
-const formConfig = reactive({
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-})
-
-const createId = () => Math.random().toString(36).slice(2, 10)
-
-const dataViewOptions = [
-  { label: '用户列表视图', value: 'userView' },
-  { label: '订单列表视图', value: 'orderView' },
-]
-
-const paramsOptionsMap: Record<string, { label: string; value: string }[]> = {
-  userView: [
-    { label: '关键字', value: 'keyword' },
-    { label: '状态', value: 'status' },
-  ],
-  orderView: [
-    { label: '订单号', value: 'orderNo' },
-    { label: '客户名称', value: 'customerName' },
-  ],
-}
-
-const componentOptions = [
-  { label: '输入框', value: 'j-input' },
-  { label: '选择器', value: 'j-select' },
-  { label: '日期', value: 'j-date' },
-]
-
-const mockData = () => ({
-  dataCode: 'userView',
-  paramsSetting: [
-    { paramId: 'keyword', compId: 'j-input', dValue: '' },
-    { paramId: 'status', compId: 'j-select', dValue: 'enabled' },
-  ],
-  columns: [
-    {
-      id: createId(),
-      name: 'name',
-      width: 160,
-      align: 'left',
-      fixed: 'none',
-      hide: false,
-      type: 'text',
-      dataType: 'options',
-    },
-    {
-      id: createId(),
-      name: 'status',
-      width: 120,
-      align: 'center',
-      fixed: 'none',
-      hide: false,
-      type: 'j-tag',
-      dataType: 'options',
-    },
-  ],
-  isPage: true,
-  display: true,
-})
-
-const schema = [
-  {
-    type: 'j-collapse',
-    config: {
-      label: '视图列表配置',
-      field: 'viewTableConfig',
-    },
-    children: [
-      {
-        config: {
-          label: '数据选项',
-          active: true,
-        },
-        children: [
-          {
-            type: 'j-select',
-            config: {
-              label: '数据视图',
-              field: 'dataCode',
-              options: dataViewOptions,
-            },
-          },
-          {
-            type: 'j-input-cards',
-            config: {
-              label: '参数设置',
-              field: 'paramsSetting',
-              editConfig: {
-                isAddBtn: true,
-                isRemoveBtn: true,
-                addBtnText: '添加参数',
-              },
-            },
-            children: [
-              {
-                type: 'j-select',
-                config: {
-                  label: '参数',
-                  field: 'paramId',
-                },
-                getCompConfig: ({ formData: currentFormData }: any) => ({
-                  options: paramsOptionsMap[currentFormData?.dataCode] || [],
-                }),
-              },
-              {
-                type: 'j-select',
-                config: {
-                  label: '组件',
-                  field: 'compId',
-                  options: componentOptions,
-                },
-              },
-              {
-                type: 'j-input',
-                config: {
-                  label: '默认值',
-                  field: 'dValue',
-                },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        config: {
-          label: '列表设置',
-        },
-        children: [
-          {
-            type: 'j-layer-form',
-            config: {
-              label: '列表设置',
-              type: 'primary',
-              layerLabel: '列表设置',
-              layerWidth: 1000,
-              layerHeight: 800,
-            },
-            children: [
-              {
-                type: 'j-table',
-                config: {
-                  label: '字段列表',
-                  field: 'columns',
-                  heightMode: 'auto',
-                  maxHeight: 520,
-                  editConfig: {
-                    isAddBtn: true,
-                    isRemoveBtn: true,
-                    addBtnText: '添加字段',
-                  },
-                  addRow: (tableData: Record<string, any>[]) => {
-                    tableData.push({
-                      id: createId(),
-                      name: '',
-                      width: 120,
-                      align: 'left',
-                      fixed: 'none',
-                      hide: false,
-                      type: 'text',
-                      dataType: 'options',
-                    })
-                  },
-                },
-                children: [
-                  {
-                    type: 'span',
-                    config: {
-                      label: 'ID',
-                      field: 'id',
-                      width: 120,
-                    },
-                  },
-                  {
-                    type: 'j-input',
-                    config: {
-                      label: '字段名',
-                      field: 'name',
-                      minWidth: 160,
-                    },
-                  },
-                  {
-                    type: 'j-number',
-                    config: {
-                      label: '宽度',
-                      field: 'width',
-                      min: 100,
-                      width: 110,
-                    },
-                  },
-                  {
-                    type: 'j-select',
-                    config: {
-                      label: '对齐方式',
-                      field: 'align',
-                      width: 110,
-                      options: [
-                        { label: '左对齐', value: 'left' },
-                        { label: '居中', value: 'center' },
-                        { label: '右对齐', value: 'right' },
-                      ],
-                    },
-                  },
-                  {
-                    type: 'j-select',
-                    config: {
-                      label: '固定',
-                      field: 'fixed',
-                      width: 110,
-                      options: [
-                        { label: '左固定', value: 'left' },
-                        { label: '右固定', value: 'right' },
-                        { label: '不固定', value: 'none' },
-                      ],
-                    },
-                  },
-                  {
-                    type: 'j-switch',
-                    config: {
-                      label: '隐藏',
-                      field: 'hide',
-                      width: 80,
-                      activeValue: true,
-                      inactiveValue: false,
-                    },
-                  },
-                  {
-                    type: 'j-layer-form',
-                    config: {
-                      label: '设置',
-                      field: 'more',
-                      width: 90,
-                      align: 'center',
-                      buttonLabel: '设置',
-                      layerLabel: '字段设置',
-                      layerWidth: 560,
-                      layerHeight: 260,
-                      formConfig: {
-                        labelWidth: 80,
-                        labelPosition: 'right',
-                        size: 'default',
-                        gutter: 16,
-                        span: 12,
-                      },
-                    },
-                    children: [
-                      {
-                        id: 'columns.type',
-                        type: 'j-select',
-                        config: {
-                          label: '类型',
-                          options: [
-                            { label: '文本', value: 'text' },
-                            { label: '标签', value: 'j-tag' },
-                            { label: '开关', value: 'j-switch' },
-                            { label: '评分', value: 'j-rate' },
-                            { label: '滑块', value: 'j-slider' },
-                            { label: '图标', value: 'j-icon' },
-                          ],
-                        },
-                      },
-                      {
-                        id: 'dataType',
-                        type: 'j-select',
-                        config: {
-                          label: '数据类型',
-                          options: [
-                            { label: '静态', value: 'options' },
-                            { label: '字典', value: 'dataItem' },
-                            { label: '视图', value: 'dataView' },
-                            { label: '日期', value: 'date' },
-                            { label: '日期时间', value: 'dateTime' },
-                            { label: '人员', value: 'user' },
-                            { label: '部门', value: 'department' },
-                            { label: '公司', value: 'company' },
-                          ],
-                        },
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        config: {
-          label: '更多属性',
-        },
-        children: [
-          {
-            type: 'j-switch',
-            config: {
-              label: '分页设置',
-              field: 'isPage',
-              activeValue: true,
-              inactiveValue: false,
-            },
-          },
-        ],
-      },
-      {
-        config: {
-          label: '状态属性',
-        },
-        children: [
-          {
-            type: 'j-switch',
-            config: {
-              label: '可见',
-              field: 'display',
-              activeValue: true,
-              inactiveValue: false,
-            },
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const syncFormData = () => {
-  formData.value = formRef.value?.getFormData?.() || {}
-}
-
-const handleLoadMock = () => {
-  formRef.value?.setFormData?.(mockData())
-  syncFormData()
-}
-
-const handleGetFormData = () => {
-  syncFormData()
-}
-
-onMounted(() => {
-  handleLoadMock()
-})
-</script>
-
-<style scoped>
-.demo-form-view-table {
-  border: 1px solid var(--el-border-color-lighter);
-  padding: 16px;
-  border-radius: 4px;
-}
-
-.demo-form-view-table__pre {
-  margin: 0;
-  padding: 12px;
-  background: #f7f8fa;
-  border-radius: 4px;
-  overflow: auto;
-  max-height: 240px;
-}
-</style>
+<template>
+  <div class="demo-form-view-table">
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+    <div style="margin-top: 16px; text-align: right">
+      <j-button type="primary" label="加载模拟数据" @click="handleLoadMock" />
+      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData" />
+    </div>
+    <div style="margin-top: 16px">
+      <pre class="demo-form-view-table__pre">{{ JSON.stringify(formData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+
+const formRef = ref<any>()
+const formData = ref<Record<string, any>>({})
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const createId = () => Math.random().toString(36).slice(2, 10)
+
+const dataViewOptions = [
+  { label: '用户列表视图', value: 'userView' },
+  { label: '订单列表视图', value: 'orderView' },
+]
+
+const paramsOptionsMap: Record<string, { label: string; value: string }[]> = {
+  userView: [
+    { label: '关键字', value: 'keyword' },
+    { label: '状态', value: 'status' },
+  ],
+  orderView: [
+    { label: '订单号', value: 'orderNo' },
+    { label: '客户名称', value: 'customerName' },
+  ],
+}
+
+const componentOptions = [
+  { label: '输入框', value: 'j-input' },
+  { label: '选择器', value: 'j-select' },
+  { label: '日期', value: 'j-date' },
+]
+
+const mockData = () => ({
+  dataCode: 'userView',
+  paramsSetting: [
+    { paramId: 'keyword', compId: 'j-input', dValue: '' },
+    { paramId: 'status', compId: 'j-select', dValue: 'enabled' },
+  ],
+  columns: [
+    {
+      id: createId(),
+      name: 'name',
+      width: 160,
+      align: 'left',
+      fixed: 'none',
+      hide: false,
+      type: 'text',
+      dataType: 'options',
+    },
+    {
+      id: createId(),
+      name: 'status',
+      width: 120,
+      align: 'center',
+      fixed: 'none',
+      hide: false,
+      type: 'j-tag',
+      dataType: 'options',
+    },
+  ],
+  isPage: true,
+  display: true,
+})
+
+const schema = [
+  {
+    type: 'j-collapse',
+    config: {
+      label: '视图列表配置',
+      field: 'viewTableConfig',
+    },
+    children: [
+      {
+        config: {
+          label: '数据选项',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-select',
+            config: {
+              label: '数据视图',
+              field: 'dataCode',
+              options: dataViewOptions,
+            },
+          },
+          {
+            type: 'j-input-cards',
+            config: {
+              label: '参数设置',
+              field: 'paramsSetting',
+              editConfig: {
+                isAddBtn: true,
+                isRemoveBtn: true,
+                addBtnText: '添加参数',
+              },
+            },
+            children: [
+              {
+                type: 'j-select',
+                config: {
+                  label: '参数',
+                  field: 'paramId',
+                },
+                getCompConfig: ({ formData: currentFormData }: any) => ({
+                  options: paramsOptionsMap[currentFormData?.dataCode] || [],
+                }),
+              },
+              {
+                type: 'j-select',
+                config: {
+                  label: '组件',
+                  field: 'compId',
+                  options: componentOptions,
+                },
+              },
+              {
+                type: 'j-input',
+                config: {
+                  label: '默认值',
+                  field: 'dValue',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        config: {
+          label: '列表设置',
+        },
+        children: [
+          {
+            type: 'j-layer-form',
+            config: {
+              label: '列表设置',
+              type: 'primary',
+              layerLabel: '列表设置',
+              layerWidth: 1000,
+              layerHeight: 800,
+            },
+            children: [
+              {
+                type: 'j-table',
+                config: {
+                  label: '字段列表',
+                  field: 'columns',
+                  heightMode: 'auto',
+                  maxHeight: 520,
+                  editConfig: {
+                    isAddBtn: true,
+                    isRemoveBtn: true,
+                    addBtnText: '添加字段',
+                  },
+                  addRow: (tableData: Record<string, any>[]) => {
+                    tableData.push({
+                      id: createId(),
+                      name: '',
+                      width: 120,
+                      align: 'left',
+                      fixed: 'none',
+                      hide: false,
+                      type: 'text',
+                      dataType: 'options',
+                    })
+                  },
+                },
+                children: [
+                  {
+                    type: 'span',
+                    config: {
+                      label: 'ID',
+                      field: 'id',
+                      width: 120,
+                    },
+                  },
+                  {
+                    type: 'j-input',
+                    config: {
+                      label: '字段名',
+                      field: 'name',
+                      minWidth: 160,
+                    },
+                  },
+                  {
+                    type: 'j-number',
+                    config: {
+                      label: '宽度',
+                      field: 'width',
+                      min: 100,
+                      width: 110,
+                    },
+                  },
+                  {
+                    type: 'j-select',
+                    config: {
+                      label: '对齐方式',
+                      field: 'align',
+                      width: 110,
+                      options: [
+                        { label: '左对齐', value: 'left' },
+                        { label: '居中', value: 'center' },
+                        { label: '右对齐', value: 'right' },
+                      ],
+                    },
+                  },
+                  {
+                    type: 'j-select',
+                    config: {
+                      label: '固定',
+                      field: 'fixed',
+                      width: 110,
+                      options: [
+                        { label: '左固定', value: 'left' },
+                        { label: '右固定', value: 'right' },
+                        { label: '不固定', value: 'none' },
+                      ],
+                    },
+                  },
+                  {
+                    type: 'j-switch',
+                    config: {
+                      label: '隐藏',
+                      field: 'hide',
+                      width: 80,
+                      activeValue: true,
+                      inactiveValue: false,
+                    },
+                  },
+                  {
+                    type: 'j-layer-form',
+                    config: {
+                      label: '设置',
+                      field: 'more',
+                      width: 90,
+                      align: 'center',
+                      buttonLabel: '设置',
+                      layerLabel: '字段设置',
+                      layerWidth: 560,
+                      layerHeight: 260,
+                      formConfig: {
+                        labelWidth: 80,
+                        labelPosition: 'right',
+                        size: 'default',
+                        gutter: 16,
+                        span: 12,
+                      },
+                    },
+                    children: [
+                      {
+                        id: 'columns.type',
+                        type: 'j-select',
+                        config: {
+                          label: '类型',
+                          options: [
+                            { label: '文本', value: 'text' },
+                            { label: '标签', value: 'j-tag' },
+                            { label: '开关', value: 'j-switch' },
+                            { label: '评分', value: 'j-rate' },
+                            { label: '滑块', value: 'j-slider' },
+                            { label: '图标', value: 'j-icon' },
+                          ],
+                        },
+                      },
+                      {
+                        id: 'dataType',
+                        type: 'j-select',
+                        config: {
+                          label: '数据类型',
+                          options: [
+                            { label: '静态', value: 'options' },
+                            { label: '字典', value: 'dataItem' },
+                            { label: '视图', value: 'dataView' },
+                            { label: '日期', value: 'date' },
+                            { label: '日期时间', value: 'dateTime' },
+                            { label: '人员', value: 'user' },
+                            { label: '部门', value: 'department' },
+                            { label: '公司', value: 'company' },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        config: {
+          label: '更多属性',
+        },
+        children: [
+          {
+            type: 'j-switch',
+            config: {
+              label: '分页设置',
+              field: 'isPage',
+              activeValue: true,
+              inactiveValue: false,
+            },
+          },
+        ],
+      },
+      {
+        config: {
+          label: '状态属性',
+        },
+        children: [
+          {
+            type: 'j-switch',
+            config: {
+              label: '可见',
+              field: 'display',
+              activeValue: true,
+              inactiveValue: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const syncFormData = () => {
+  formData.value = formRef.value?.getFormData?.() || {}
+}
+
+const handleLoadMock = () => {
+  formRef.value?.setFormData?.(mockData())
+  syncFormData()
+}
+
+const handleGetFormData = () => {
+  syncFormData()
+}
+
+onMounted(() => {
+  handleLoadMock()
+})
+</script>
+
+<style scoped>
+.demo-form-view-table {
+  border: 1px solid var(--el-border-color-lighter);
+  padding: 16px;
+  border-radius: 4px;
+}
+
+.demo-form-view-table__pre {
+  margin: 0;
+  padding: 12px;
+  background: #f7f8fa;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 240px;
+}
+</style>