✨ feat: 调整测试数据渲染结构

hookehuyr
Commit 576323d7385eea42b2017b8c2994017f378195b6 576323d7 1 parent 6cd3b0d9
Showing 8 changed files with 82 additions and 81 deletions
src/components/DateTimePickerField/index.vue
src/components/EmailField/index.vue
src/components/IdentityField/index.vue
src/components/PhoneField/index.vue
src/components/RadioField/index.vue
src/components/TextField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
--- a/src/components/DateTimePickerField/index.vue
View file @576323d
+++ b/src/components/DateTimePickerField/index.vue
View file @576323d
 <!--
  * @Date: 2022-09-08 15:02:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 15:18:22
+ * @LastEditTime: 2022-09-16 15:04:37
  * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="datetime-picker">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
     <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required"
-      :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" />
+      :placeholder="item.component_props.placeholder" :rules="item.rules" @click="showPicker = true" />
     <van-popup v-model:show="showPicker" position="bottom">
       <van-picker-group :title="item.component_props.title" :tabs="['选择日期', '选择时间']" @confirm="onConfirm"
         @cancel="onCancel">
--- a/src/components/EmailField/index.vue
View file @576323d
+++ b/src/components/EmailField/index.vue
View file @576323d
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-06 15:20:47
+ * @LastEditTime: 2022-09-16 17:13:01
  * @FilePath: /data-table/src/components/EmailField/index.vue
  * @Description: 单行文本输入框
 -->
 <template>
   <div class="text-field-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
-    <van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.placeholder" :rules="rules"
+    <van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.component_props.placeholder" :rules="rules"
-      :required="item.required" clearable />
+      :required="item.component_props.required" clearable />
   </div>
 </template>
--- a/src/components/IdentityField/index.vue
View file @576323d
+++ b/src/components/IdentityField/index.vue
View file @576323d
@@ -7,9 +7,9 @@
 -->
 <template>
   <div class="identity-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
-    <van-field v-model="item.value" :name="item.name" :placeholder="item.placeholder"
+    <van-field v-model="item.value" :name="item.name" :placeholder="item.component_props.placeholder"
-      :rules="rules" :required="item.required" readonly @touchstart.stop="show = true" :border="false">
+      :rules="rules" :required="item.component_props.required" readonly @touchstart.stop="show = true" :border="false">
     </van-field>
     <van-number-keyboard
       v-model="item.value"
@@ -33,7 +33,7 @@ const show = ref(false);
 // 校验函数返回 true 表示校验通过，false 表示不通过
 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
 const validator = (val) => {
-  if (!props.item.required) { // 非必填
+  if (!props.item.component_props.required) { // 非必填
     return true
   } else {
     return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
--- a/src/components/PhoneField/index.vue
View file @576323d
+++ b/src/components/PhoneField/index.vue
View file @576323d
@@ -7,9 +7,9 @@
 -->
 <template>
   <div class="phone-field-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
-    <van-field v-model="item.value" :name="item.name" type="digit" maxlength="11" :placeholder="item.placeholder"
+    <van-field v-model="item.value" :name="item.name" type="digit" maxlength="11" :placeholder="item.component_props.placeholder"
-      :rules="rules" :required="item.required" :readonly="readonly" @touchstart.stop="show = true" :border="false">
+      :rules="rules" :required="item.component_props.required" :readonly="readonly" @touchstart.stop="show = true" :border="false">
     </van-field>
     <van-number-keyboard v-model="item.value" :show="show" :maxlength="11" @blur="show = false" />
   </div>
--- a/src/components/RadioField/index.vue
View file @576323d
+++ b/src/components/RadioField/index.vue
View file @576323d
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-08 11:37:01
+ * @LastEditTime: 2022-09-16 17:40:39
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="radio-field-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
-    <van-field :name="item.key">
+    <van-field :name="item.key" :rules="item.rules">
       <template #input>
         <van-radio-group v-model="item.value" :direction="item.component_props.direction">
-          <van-radio v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem"
+          <van-radio v-for="x in item.component_props.options" :key="index" :name="x.key" icon-size="1rem"
             style="margin-bottom: 0.25rem;">{{ x.value }}</van-radio>
         </van-radio-group>
       </template>
--- a/src/components/TextField/index.vue
View file @576323d
+++ b/src/components/TextField/index.vue
View file @576323d
@@ -7,9 +7,9 @@
 -->
 <template>
   <div class="text-field-page">
-    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
     <van-field v-model="item.value"
-      :name="item.name" :type="item.type" :placeholder="item.placeholder"
+      :name="item.name" :type="item.type" :placeholder="item.component_props.placeholder"
       :rules="item.rules" :required="item.required"
       :readonly="item.component_props.readonly" :disabled="item.component_props.disabled"
       :input-align="item.component_props.align"
--- a/src/hooks/useComponentType.js
View file @576323d
+++ b/src/hooks/useComponentType.js
View file @576323d
@@ -41,7 +41,7 @@ export function createComponentType(data) {
   // 判断类型和使用组件
   _.each(data, (item, index) => {
     // 必填项规则添加
-    if (item.required) {
+    if (item.component_props.required) {
       item.rules = [{ required: true, message: item.placeholder ? item.placeholder : '必填项不能为空' }]
     }
     if (item.component_props.name === 'text') {
--- a/src/views/index.vue
View file @576323d
+++ b/src/views/index.vue
View file @576323d
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-14 14:56:30
+ * @LastEditTime: 2022-09-16 17:32:55
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -38,94 +38,80 @@ onMounted(() => {
   // {
   //   key: 'phone',
   //   value: '',
-  //   label: '手机号',
-  //   placeholder: '请输入手机号',
   //   component: '',
   //   component_props: {
-  //     name: 'phone'
+  //     name: 'phone',
-  //   },
+  //     label: '手机号',
+  //     placeholder: '请输入手机号',
   //     required: true,
   //   },
+  // },
   // {
   //   key: 'username',
   //   value: 'test',
-  //   label: '用户名',
-  //   placeholder: '请输入用户名',
   //   component: '',
   //   component_props: {
   //     name: 'text',
-  //     // readonly: true,
+  //     label: '用户名',
-  //     // disabled: true,
+  //     placeholder: '请输入用户名',
-  //     // align: 'left',
-  //   },
   //     required: true,
+  //     readonly: true,
+  //     disabled: true,
+  //     align: 'left',
   //   },
-  // {
-  //   key: 'date',
-  //   value: '',
-  //   label: '日历选择',
-  //   placeholder: '请选择日历日期',
-  //   component: '',
-  //   component_props: {
-  //     name: 'calendar',
-  //     type: 'range', // 日期区间 ['multiple', 'range']
-  //     minDate: new Date(2022, 0, 1), // 最小日期
-  //     maxDate: new Date(2023, 0, 31), // 最大日期
-  //     maxRange: 5, // 最大可选天数
-  //   },
-  //   required: false,
   // },
   // {
   //   key: 'email',
   //   value: '',
-  //   label: '邮箱',
-  //   placeholder: '请输入邮箱',
   //   component: '',
   //   component_props: {
-  //     name: 'email'
+  //     name: 'email',
-  //   },
+  //     label: '邮箱',
+  //     placeholder: '请输入邮箱',
   //     required: true,
   //   },
-  {
+  // },
-    key: 'id_code',
-    value: '',
-    label: '身份证号码',
-    placeholder: '请输入身份证号码',
-    component: '',
-    component_props: {
-      name: 'id_code'
-    },
-    required: true,
-  },
   // {
-  //   key: 'age',
+  //   key: 'id_code',
   //   value: '',
-  //   label: '年龄',
-  //   placeholder: '请输入年龄',
   //   component: '',
   //   component_props: {
-  //     name: 'number'
+  //     name: 'id_code',
-  //   },
+  //     label: '身份证号码',
+  //     placeholder: '请输入身份证号码',
   //     required: true,
   //   },
+  // },
   // {
-  //   key: 'gender',
+  //   key: 'age',
   //   value: '',
-  //   label: '性别',
-  //   placeholder: '',
   //   component: '',
   //   component_props: {
-  //     name: 'radio',
+  //     label: '年龄',
-  //     direction: 'horizontal'
+  //     placeholder: '请输入年龄',
+  //     name: 'number',
+  //     required: true,
   //   },
-  //   options: [{
-  //     key: '男',
-  //     value: '男'
-  //   }, {
-  //     key: '女',
-  //     value: '女'
-  //   }]
   // },
+  {
+    key: 'gender',
+    value: '',
+    component: '',
+    component_props: {
+      name: 'radio',
+      label: '性别',
+      placeholder: '',
+      direction: 'horizontal',
+      options: [{
+        key: '男',
+        value: '男'
+      }, {
+        key: '女',
+        value: '女'
+      }],
+      required: true,
+    },
+  },
   // {
   //   key: 'hobby',
   //   value: [],
@@ -237,15 +223,30 @@ onMounted(() => {
   // {
   //   key: 'datetime',
   //   value: '2022-06-01 12:00',
-  //   label: '日期时间',
-  //   placeholder: '请选择日期时间',
   //   component_props: {
   //     name: 'datetime_picker',
   //     title: '请选择',
+  //     label: '日期时间',
+  //     placeholder: '请选择日期时间',
   //     minDate: new Date(),
-  //   },
   //     required: true,
   //   },
+  // },
+  // {
+  //   key: 'date',
+  //   value: '',
+  //   label: '日历选择',
+  //   placeholder: '请选择日历日期',
+  //   component: '',
+  //   component_props: {
+  //     name: 'calendar',
+  //     type: 'range', // 日期区间 ['multiple', 'range']
+  //     minDate: new Date(2022, 0, 1), // 最小日期
+  //     maxDate: new Date(2023, 0, 31), // 最大日期
+  //     maxRange: 5, // 最大可选天数
+  //   },
+  //   required: false,
+  // },
   // {
   //   key: 'rate',
   //   value: '',