@a2simcode/ui 0.0.164 → 0.0.166

package/docs/examples/form/init.vue

@@ -1,76 +1,76 @@
-<template>
-  <div>
-    <j-form ref="formRef" :config="formConfig" />
-    <div style="margin-top: 16px; padding-left: 100px">
-      <j-button type="primary" label="init 精简表单" @click="handleInitSimple"></j-button>
-      <j-button style="margin-left: 8px" label="init 完整表单" @click="handleInitFull"></j-button>
-      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-
-const formRef = ref()
-
-const formConfig = reactive({
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-})
-
-const simpleSchema = [
-  {
-    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 fullSchema = [
-  ...simpleSchema,
-  {
-    type: 'j-select',
-    config: {
-      label: '状态',
-      field: 'status',
-      placeholder: '请选择',
-      options: [
-        { label: '启用', value: 1 },
-        { label: '停用', value: 0 },
-      ],
-    },
-  },
-]
-
-const schema = fullSchema
-
-const handleInitSimple = async () => {
-  await formRef.value.init(simpleSchema, { username: '张三', age: 18 })
-}
-
-const handleInitFull = async () => {
-  await formRef.value.init(fullSchema, { username: '李四', age: 28, status: 1 })
-}
-
-const handleGetFormData = () => {
-  console.log(formRef.value.getFormData(), 'getFormData')
-}
-</script>
+<template>
+  <div>
+    <j-form ref="formRef" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <j-button type="primary" label="init 精简表单" @click="handleInitSimple"></j-button>
+      <j-button style="margin-left: 8px" label="init 完整表单" @click="handleInitFull"></j-button>
+      <j-button style="margin-left: 8px" label="获取数据" @click="handleGetFormData"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const simpleSchema = [
+  {
+    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 fullSchema = [
+  ...simpleSchema,
+  {
+    type: 'j-select',
+    config: {
+      label: '状态',
+      field: 'status',
+      placeholder: '请选择',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+]
+
+const schema = fullSchema
+
+const handleInitSimple = async () => {
+  await formRef.value.init(simpleSchema, { username: '张三', age: 18 })
+}
+
+const handleInitFull = async () => {
+  await formRef.value.init(fullSchema, { username: '李四', age: 28, status: 1 })
+}
+
+const handleGetFormData = () => {
+  console.log(formRef.value.getFormData(), 'getFormData')
+}
+</script>

package/docs/examples/form/master-detail.vue

@@ -1,203 +1,203 @@
-<template>
-  <div class="demo-form-layout">
-    <j-form ref="formRef" :schema="schema" :config="{ labelWidth: '80px' }" />
-    <div class="demo-actions" style="margin-top: 16px; text-align: right">
-      <j-button type="primary" label="保存" @click="handleSave"></j-button>
-      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
-      <j-button style="margin-left: 8px" label="加载模拟数据" @click="handleLoadMock"></j-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { type FormSchemaConfig, buildUUID } from '@a2simcode/ui'
-
-const formRef = ref()
-
-// 模拟字典数据
-const goodsTypeOptions = [
-  { label: '电子产品', value: 'electronics' },
-  { label: '服装', value: 'clothing' },
-  { label: '食品', value: 'food' },
-  { label: '日用品', value: 'daily' },
-]
-
-// 将原先 page.ts 中的 config 和 formConfig 融合到 schema 中
-const schema: FormSchemaConfig[] = [
-  {
-    type: 'j-layout',
-    config: {
-      label: '上下布局',
-      field: 'layout',
-      top: 100,
-      needRow: { top: true },
-      needFormItem: { top: true },
-    },
-    children: [
-      {
-        type: 'j-input',
-        slot: 'top',
-        config: {
-          label: '订单号',
-          field: 'orderNo',
-
-          rule: [{ required: true, message: '请输入订单号' }],
-        },
-      },
-      {
-        type: 'j-input',
-        slot: 'top',
-        config: {
-          label: '客户名称',
-          field: 'customerName',
-
-          rule: [{ required: true, message: '请输入客户名称' }],
-        },
-      },
-      {
-        type: 'j-date',
-        slot: 'top',
-        config: {
-          label: '订单日期',
-          field: 'orderDate',
-        },
-      },
-      {
-        type: 'j-table',
-        config: {
-          label: '订单明细',
-          field: 'orderDetails',
-          editConfig: { isAddBtn: true, isRemoveBtn: true },
-          addRow: (tableData: Record<string, any>[]) => {
-            tableData.push({
-              j_Id: buildUUID(),
-              goodsName: '',
-              goodsType: 'electronics',
-              quantity: 1,
-              price: 0,
-              isShipped: 0,
-              remark: '',
-            })
-          },
-        },
-        children: [
-          {
-            type: 'j-input',
-            config: {
-              label: '商品名称',
-              field: 'goodsName',
-              minWidth: 120,
-              rule: [{ required: true, message: '请输入商品名称' }],
-            },
-          },
-          {
-            type: 'j-select',
-            config: {
-              label: '商品类型',
-              field: 'goodsType',
-              width: 120,
-              options: goodsTypeOptions,
-              rule: [{ required: true, message: '请选择商品类型' }],
-            },
-          },
-          {
-            type: 'j-number',
-            config: {
-              label: '数量',
-              field: 'quantity',
-              width: 100,
-              min: 1,
-            },
-          },
-          {
-            type: 'j-number',
-            config: {
-              label: '单价',
-              field: 'price',
-              width: 100,
-              min: 0,
-            },
-          },
-          {
-            type: 'j-switch',
-            config: {
-              label: '是否发货',
-              field: 'isShipped',
-              width: 80,
-              size: 'small',
-              activeValue: 1,
-              inactiveValue: 0,
-            },
-          },
-          {
-            type: 'j-input',
-            config: {
-              label: '备注',
-              field: 'remark',
-              minWidth: 150,
-            },
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const handleSave = async () => {
-  // 调用组件内部校验方法
-  const isValid = await formRef.value?.validate()
-  if (!isValid) {
-    console.warn('表单校验未通过')
-    return
-  }
-
-  const formData = formRef.value?.getFormData()
-  const { orderDetails, ...orderEntity } = formData || {}
-
-  const postData = {
-    OrderEntity: orderEntity,
-    OrderDetailsList: orderDetails || [],
-  }
-
-  console.log('保存的数据:', postData)
-  alert('数据已在控制台打印！')
-}
-
-const handleReset = () => {
-  formRef.value?.resetFields()
-}
-
-const handleLoadMock = () => {
-  const mockData = {
-    orderNo: 'ORD-20231001',
-    customerName: '张三',
-    orderDate: '2023-10-01',
-    orderDetails: [
-      {
-        j_Id: buildUUID(),
-        goodsName: '智能手机',
-        goodsType: 'electronics',
-        quantity: 2,
-        price: 4999,
-        isShipped: 1,
-        remark: '加急',
-      },
-    ],
-  }
-
-  // 设置表单数据
-  formRef.value?.setFormData(mockData)
-}
-</script>
-
-<style scoped>
-.demo-form-layout {
-  border: 1px solid var(--el-border-color-lighter);
-  padding: 16px;
-  border-radius: 4px;
-  position: relative;
-  width: 100%;
-  height: 400px;
-}
-</style>
+<template>
+  <div class="demo-form-layout">
+    <j-form ref="formRef" :schema="schema" :config="{ labelWidth: '80px' }" />
+    <div class="demo-actions" style="margin-top: 16px; text-align: right">
+      <j-button type="primary" label="保存" @click="handleSave"></j-button>
+      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
+      <j-button style="margin-left: 8px" label="加载模拟数据" @click="handleLoadMock"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type FormSchemaConfig, buildUUID } from '@a2simcode/ui'
+
+const formRef = ref()
+
+// 模拟字典数据
+const goodsTypeOptions = [
+  { label: '电子产品', value: 'electronics' },
+  { label: '服装', value: 'clothing' },
+  { label: '食品', value: 'food' },
+  { label: '日用品', value: 'daily' },
+]
+
+// 将原先 page.ts 中的 config 和 formConfig 融合到 schema 中
+const schema: FormSchemaConfig[] = [
+  {
+    type: 'j-layout',
+    config: {
+      label: '上下布局',
+      field: 'layout',
+      top: 100,
+      needRow: { top: true },
+      needFormItem: { top: true },
+    },
+    children: [
+      {
+        type: 'j-input',
+        slot: 'top',
+        config: {
+          label: '订单号',
+          field: 'orderNo',
+
+          rule: [{ required: true, message: '请输入订单号' }],
+        },
+      },
+      {
+        type: 'j-input',
+        slot: 'top',
+        config: {
+          label: '客户名称',
+          field: 'customerName',
+
+          rule: [{ required: true, message: '请输入客户名称' }],
+        },
+      },
+      {
+        type: 'j-date',
+        slot: 'top',
+        config: {
+          label: '订单日期',
+          field: 'orderDate',
+        },
+      },
+      {
+        type: 'j-table',
+        config: {
+          label: '订单明细',
+          field: 'orderDetails',
+          editConfig: { isAddBtn: true, isRemoveBtn: true },
+          addRow: (tableData: Record<string, any>[]) => {
+            tableData.push({
+              j_Id: buildUUID(),
+              goodsName: '',
+              goodsType: 'electronics',
+              quantity: 1,
+              price: 0,
+              isShipped: 0,
+              remark: '',
+            })
+          },
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '商品名称',
+              field: 'goodsName',
+              minWidth: 120,
+              rule: [{ required: true, message: '请输入商品名称' }],
+            },
+          },
+          {
+            type: 'j-select',
+            config: {
+              label: '商品类型',
+              field: 'goodsType',
+              width: 120,
+              options: goodsTypeOptions,
+              rule: [{ required: true, message: '请选择商品类型' }],
+            },
+          },
+          {
+            type: 'j-number',
+            config: {
+              label: '数量',
+              field: 'quantity',
+              width: 100,
+              min: 1,
+            },
+          },
+          {
+            type: 'j-number',
+            config: {
+              label: '单价',
+              field: 'price',
+              width: 100,
+              min: 0,
+            },
+          },
+          {
+            type: 'j-switch',
+            config: {
+              label: '是否发货',
+              field: 'isShipped',
+              width: 80,
+              size: 'small',
+              activeValue: 1,
+              inactiveValue: 0,
+            },
+          },
+          {
+            type: 'j-input',
+            config: {
+              label: '备注',
+              field: 'remark',
+              minWidth: 150,
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const handleSave = async () => {
+  // 调用组件内部校验方法
+  const isValid = await formRef.value?.validate()
+  if (!isValid) {
+    console.warn('表单校验未通过')
+    return
+  }
+
+  const formData = formRef.value?.getFormData()
+  const { orderDetails, ...orderEntity } = formData || {}
+
+  const postData = {
+    OrderEntity: orderEntity,
+    OrderDetailsList: orderDetails || [],
+  }
+
+  console.log('保存的数据:', postData)
+  alert('数据已在控制台打印！')
+}
+
+const handleReset = () => {
+  formRef.value?.resetFields()
+}
+
+const handleLoadMock = () => {
+  const mockData = {
+    orderNo: 'ORD-20231001',
+    customerName: '张三',
+    orderDate: '2023-10-01',
+    orderDetails: [
+      {
+        j_Id: buildUUID(),
+        goodsName: '智能手机',
+        goodsType: 'electronics',
+        quantity: 2,
+        price: 4999,
+        isShipped: 1,
+        remark: '加急',
+      },
+    ],
+  }
+
+  // 设置表单数据
+  formRef.value?.setFormData(mockData)
+}
+</script>
+
+<style scoped>
+.demo-form-layout {
+  border: 1px solid var(--el-border-color-lighter);
+  padding: 16px;
+  border-radius: 4px;
+  position: relative;
+  width: 100%;
+  height: 400px;
+}
+</style>