Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
You need to sign in or sign up before continuing.
hookehuyr
576323d7 1 parent 6cd3b0d9

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

Inline Side-by-side
Showing 8 changed files with 83 additions and 82 deletions
<!--
* @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">
......
<!--
* @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>
<van-field v-model="item.value" :name="item.name" type="email" :placeholder="item.placeholder" :rules="rules"
:required="item.required" clearable />
<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.component_props.placeholder" :rules="rules"
:required="item.component_props.required" clearable />
</div>
</template>
......
......@@ -7,9 +7,9 @@
-->
<template>
<div class="identity-page">
<div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
<van-field v-model="item.value" :name="item.name" :placeholder="item.placeholder"
:rules="rules" :required="item.required" readonly @touchstart.stop="show = true" :border="false">
<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.component_props.placeholder"
: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);
......
......@@ -7,9 +7,9 @@
-->
<template>
<div class="phone-field-page">
<div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
<van-field v-model="item.value" :name="item.name" type="digit" maxlength="11" :placeholder="item.placeholder"
:rules="rules" :required="item.required" :readonly="readonly" @touchstart.stop="show = true" :border="false">
<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.component_props.placeholder"
: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>
......
<!--
* @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>
<van-field :name="item.key">
<div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div>
<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>
......
......@@ -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"
......
......@@ -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') {
......
<!--
* @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,
// },
// required: true,
// },
// {
// key: 'username',
// value: 'test',
// label: '用户名',
// placeholder: '请输入用户名',
// component: '',
// component_props: {
// name: 'text',
// // readonly: true,
// // disabled: true,
// // align: 'left',
// label: '用户名',
// placeholder: '请输入用户名',
// required: true,
// readonly: true,
// disabled: true,
// align: 'left',
// },
// required: true,
// },
// {
// key: 'date',
// key: 'email',
// 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, // 最大可选天数
// name: 'email',
// label: '邮箱',
// placeholder: '请输入邮箱',
// required: true,
// },
// required: false,
// },
// {
// key: 'email',
// key: 'id_code',
// value: '',
// label: '邮箱',
// placeholder: '请输入邮箱',
// component: '',
// component_props: {
// name: 'email'
// name: 'id_code',
// label: '身份证号码',
// placeholder: '请输入身份证号码',
// required: true,
// },
// required: true,
// },
{
key: 'id_code',
value: '',
label: '身份证号码',
placeholder: '请输入身份证号码',
component: '',
component_props: {
name: 'id_code'
},
required: true,
},
// {
// key: 'age',
// value: '',
// label: '年龄',
// placeholder: '请输入年龄',
// component: '',
// component_props: {
// name: 'number'
// label: '年龄',
// placeholder: '请输入年龄',
// name: 'number',
// required: true,
// },
// required: true,
// },
// {
// key: 'gender',
// value: '',
// label: '性别',
// placeholder: '',
// component: '',
// component_props: {
// name: 'radio',
// direction: 'horizontal'
// },
// 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,14 +223,29 @@ onMounted(() => {
// {
// key: 'datetime',
// value: '2022-06-01 12:00',
// label: '日期时间',
// placeholder: '请选择日期时间',
// component_props: {
// name: 'datetime_picker',
// title: '请选择',
// label: '日期时间',
// placeholder: '请选择日期时间',
// minDate: new Date(),
// required: true,
// },
// 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',
......