Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e89d449d 1 parent 77d90328

组件注释调整优化

Inline Side-by-side
Showing 13 changed files with 148 additions and 89 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 14:32:11 2 * @Date: 2022-08-30 14:32:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-07 16:05:51 4 + * @LastEditTime: 2022-11-21 14:32:24
5 * @FilePath: /data-table/src/components/AreaPickerField/index.vue 5 * @FilePath: /data-table/src/components/AreaPickerField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 省市区选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="area-picker-field"> 9 <div class="area-picker-field">
10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 - <van-field v-model="item.value" is-link readonly :name="item.key" :required="item.required" 11 + <van-field
12 - :placeholder="item.placeholder" :rules="item.rules" @click="showPicker = true" :border="false" /> 12 + v-model="item.value"
13 - <van-field name="address" v-model="item.address" placeholder="详细地址" :border="false" /> 13 + is-link
14 + readonly
15 + :name="item.key"
16 + :required="item.required"
17 + :placeholder="item.placeholder"
18 + :rules="item.rules"
19 + @click="showPicker = true"
20 + :border="false"
21 + />
22 + <van-field
23 + name="address"
24 + v-model="item.address"
25 + placeholder="详细地址"
26 + :border="false"
27 + />
14 <van-popup v-model:show="showPicker" position="bottom"> 28 <van-popup v-model:show="showPicker" position="bottom">
15 - <van-area name="city_code" v-model="item.city_code" title="" :area-list="areaList" @confirm="onConfirm" 29 + <van-area
16 - @cancel="showPicker = false" /> 30 + name="city_code"
31 + v-model="item.city_code"
32 + title=""
33 + :area-list="areaList"
34 + @confirm="onConfirm"
35 + @cancel="showPicker = false"
36 + />
17 </van-popup> 37 </van-popup>
18 </div> 38 </div>
19 </template> 39 </template>
20 40
21 <script setup> 41 <script setup>
22 -import { areaList } from '@vant/area-data'; 42 +import { areaList } from "@vant/area-data";
23 43
24 const props = defineProps({ 44 const props = defineProps({
25 - item: Object 45 + item: Object,
26 }); 46 });
27 47
28 -const address = ref('') 48 +const address = ref("");
29 49
30 const showPicker = ref(false); 50 const showPicker = ref(false);
31 -const fieldValue = ref(''); 51 +const fieldValue = ref("");
32 52
33 const onConfirm = ({ selectedOptions }) => { 53 const onConfirm = ({ selectedOptions }) => {
34 - props.item.value = selectedOptions.map((option) => option.text).join('/'); 54 + props.item.value = selectedOptions.map((option) => option.text).join("/");
35 props.item.city_code = selectedOptions[2]?.value; 55 props.item.city_code = selectedOptions[2]?.value;
36 showPicker.value = false; 56 showPicker.value = false;
37 }; 57 };
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 11:00:01 2 * @Date: 2022-09-14 11:00:01
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-14 14:24:41 4 + * @LastEditTime: 2022-11-21 14:38:06
5 * @FilePath: /data-table/src/components/CalendarField/index.vue 5 * @FilePath: /data-table/src/components/CalendarField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 日历选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="calendar-page"> 9 <div class="calendar-page">
10 <div class="label"> 10 <div class="label">
11 - {{ item.component_props.label 11 + {{ item.component_props.label }}
12 - }}<span v-if="item.component_props.required">&nbsp;*</span> 12 + <span v-if="item.component_props.required">&nbsp;*</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-08 08:01:23 4 + * @LastEditTime: 2022-11-21 14:42:00
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 多项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="checkbox-field-page"> 9 <div class="checkbox-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.label }} 11 {{ item.label }}
12 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span> 12 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
13 - <span v-if="item.component_props.max" style="color: gray" 13 + <span v-if="item.component_props.max" style="color: gray">
14 - >(最多可选数:&nbsp;{{ item.component_props.max }})</span 14 + (最多可选数:&nbsp;{{ item.component_props.max }})
15 - > 15 + </span>
16 </div> 16 </div>
17 <van-field :name="item.key" :rules="item.rules" :border="false"> 17 <van-field :name="item.key" :rules="item.rules" :border="false">
18 <template #input> 18 <template #input>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-07 13:52:57 4 + * @LastEditTime: 2022-11-21 14:43:16
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="date-picker-field"> 9 <div class="date-picker-field">
10 <div class="label"> 10 <div class="label">
11 - {{ item.component_props.label 11 + {{ item.component_props.label }}
12 - }}<span v-if="item.component_props.required">&nbsp;*</span> 12 + <span v-if="item.component_props.required">&nbsp;*</span>
13 </div> 13 </div>
14 <van-field 14 <van-field
15 v-model="item.value" 15 v-model="item.value"
......
1 <!-- 1 <!--
2 * @Date: 2022-09-08 15:02:45 2 * @Date: 2022-09-08 15:02:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-16 15:04:37 4 + * @LastEditTime: 2022-11-21 14:47:52
5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue 5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 日期时间选择器
7 --> 7 -->
8 <template> 8 <template>
9 <div class="datetime-picker"> 9 <div class="datetime-picker">
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-14 14:55:53 4 + * @LastEditTime: 2022-11-21 14:49:52
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 身份证输入控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="identity-page"> 9 <div class="identity-page">
10 - <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" :name="item.name" :placeholder="item.component_props.placeholder" 11 + {{ item.component_props.label
12 - :rules="rules" :required="item.component_props.required" readonly @touchstart.stop="show = true" :border="false"> 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 + </div>
14 + <van-field
15 + v-model="item.value"
16 + :name="item.name"
17 + :placeholder="item.component_props.placeholder"
18 + :rules="rules"
19 + :required="item.component_props.required"
20 + readonly
21 + @touchstart.stop="show = true"
22 + :border="false"
23 + >
13 </van-field> 24 </van-field>
14 <van-number-keyboard 25 <van-number-keyboard
15 v-model="item.value" 26 v-model="item.value"
...@@ -25,7 +36,7 @@ ...@@ -25,7 +36,7 @@
25 36
26 <script setup> 37 <script setup>
27 const props = defineProps({ 38 const props = defineProps({
28 - item: Object 39 + item: Object,
29 }); 40 });
30 41
31 const show = ref(false); 42 const show = ref(false);
...@@ -33,8 +44,9 @@ const show = ref(false); ...@@ -33,8 +44,9 @@ const show = ref(false);
33 // 校验函数返回 true 表示校验通过，false 表示不通过 44 // 校验函数返回 true 表示校验通过，false 表示不通过
34 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 45 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
35 const validator = (val) => { 46 const validator = (val) => {
36 - if (!props.item.component_props.required) { // 非必填 47 + if (!props.item.component_props.required) {
37 - return true 48 + // 非必填
49 + return true;
38 } else { 50 } else {
39 return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val); 51 return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
40 } 52 }
...@@ -42,12 +54,12 @@ const validator = (val) => { ...@@ -42,12 +54,12 @@ const validator = (val) => {
42 // 错误提示文案 54 // 错误提示文案
43 const validatorMessage = (val, rule) => { 55 const validatorMessage = (val, rule) => {
44 if (!val) { 56 if (!val) {
45 - return '身份证号码不能为空'; 57 + return "身份证号码不能为空";
46 } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) { 58 } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
47 - return '请输入正确身份证号码'; 59 + return "请输入正确身份证号码";
48 } 60 }
49 -} 61 +};
50 -const rules = [{ validator, message: validatorMessage }] 62 +const rules = [{ validator, message: validatorMessage }];
51 63
52 const onInput = (value) => {}; 64 const onInput = (value) => {};
53 const onDelete = () => {}; 65 const onDelete = () => {};
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 16:16:49 2 * @Date: 2022-08-31 16:16:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-07 13:56:29 4 + * @LastEditTime: 2022-11-21 14:54:30
5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue 5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 图片上传控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="image-uploader-field"> 9 <div class="image-uploader-field">
10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div> 10 <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
11 - <div style="padding: 1rem;"> 11 + <div style="padding: 1rem">
12 - <van-uploader upload-icon="add" :before-read="beforeRead" :after-read="afterRead" v-model="fileList" 12 + <van-uploader
13 - :multiple="item.component_props.multiple" /> 13 + upload-icon="add"
14 + :before-read="beforeRead"
15 + :after-read="afterRead"
16 + v-model="fileList"
17 + :multiple="item.component_props.multiple"
18 + />
14 </div> 19 </div>
15 <div class="type-text">上传格式：{{ type_text }}</div> 20 <div class="type-text">上传格式：{{ type_text }}</div>
16 </div> 21 </div>
...@@ -22,33 +27,37 @@ ...@@ -22,33 +27,37 @@
22 * @param name[String] 组件名称 27 * @param name[String] 组件名称
23 * @param image_type[Array] 图片上传类型 28 * @param image_type[Array] 图片上传类型
24 * @param multiple[Boolean] 图片多选 29 * @param multiple[Boolean] 图片多选
25 -*/ 30 + */
26 -import { Toast } from 'vant'; 31 +import { Toast } from "vant";
27 -import _ from 'lodash' 32 +import _ from "lodash";
28 -import { v4 as uuidv4 } from 'uuid'; 33 +import { v4 as uuidv4 } from "uuid";
29 -import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common' 34 +import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
30 35
31 const props = defineProps({ 36 const props = defineProps({
32 - item: Object 37 + item: Object,
33 -}) 38 +});
34 39
35 const type_text = computed(() => { 40 const type_text = computed(() => {
36 - return props.item.component_props.image_type.join('/') 41 + return props.item.component_props.image_type.join("/");
37 -}) 42 +});
38 43
39 // 上传前置处理 44 // 上传前置处理
40 const beforeRead = (file) => { 45 const beforeRead = (file) => {
41 - const image_types = _.map(props.item.component_props.image_type, item => `image/${item}`) 46 + const image_types = _.map(
47 + props.item.component_props.image_type,
48 + (item) => `image/${item}`
49 + );
42 let flag = true; 50 let flag = true;
43 - if (_.isArray(file)) { // 多张图片 51 + if (_.isArray(file)) {
44 - const types = _.difference(_.uniq(_.map(file, item => item.type)), image_types); // 数组返回不能上传的类型 52 + // 多张图片
53 + const types = _.difference(_.uniq(_.map(file, (item) => item.type)), image_types); // 数组返回不能上传的类型
45 if (types.length) { 54 if (types.length) {
46 flag = false; 55 flag = false;
47 - Toast('请上传指定格式图片'); 56 + Toast("请上传指定格式图片");
48 } 57 }
49 } else { 58 } else {
50 if (!_.includes(image_types, file.type)) { 59 if (!_.includes(image_types, file.type)) {
51 - Toast('请上传指定格式图片'); 60 + Toast("请上传指定格式图片");
52 flag = false; 61 flag = false;
53 } 62 }
54 } 63 }
...@@ -58,28 +67,41 @@ const beforeRead = (file) => { ...@@ -58,28 +67,41 @@ const beforeRead = (file) => {
58 const afterRead = async (file) => { 67 const afterRead = async (file) => {
59 // 此时可以自行将文件上传至服务器 68 // 此时可以自行将文件上传至服务器
60 let affix = uuidv4(); 69 let affix = uuidv4();
61 - let base64url = file.content.slice(file.content.indexOf(',') + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA....... 70 + let base64url = file.content.slice(file.content.indexOf(",") + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
62 // 获取七牛token 71 // 获取七牛token
63 - const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_image_upload`, file: base64url }); 72 + const { token, key, code } = await qiniuTokenAPI({
73 + filename: `${affix}_image_upload`,
74 + file: base64url,
75 + });
64 if (code) { 76 if (code) {
65 const config = { 77 const config = {
66 headers: { 78 headers: {
67 - 'Content-Type': 'application/octet-stream', 79 + "Content-Type": "application/octet-stream",
68 - 'Authorization': 'UpToken ' + token, // UpToken后必须有一个 ' '(空格) 80 + Authorization: "UpToken " + token, // UpToken后必须有一个 ' '(空格)
69 - } 81 + },
70 - } 82 + };
71 // 上传七牛服务器 83 // 上传七牛服务器
72 - const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config) 84 + const { filekey, hash, image_info } = await qiniuUploadAPI(
85 + "http://upload.qiniup.com/putb64/-1/key/" + key,
86 + base64url,
87 + config
88 + );
73 if (filekey) { 89 if (filekey) {
74 // 保存图片 90 // 保存图片
75 - const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width }); 91 + const { data } = await saveFileAPI({
92 + filekey,
93 + hash,
94 + format: image_info.format,
95 + height: image_info.height,
96 + width: image_info.width,
97 + });
76 console.warn(data.src); 98 console.warn(data.src);
77 } 99 }
78 } 100 }
79 }; 101 };
80 102
81 const fileList = ref([ 103 const fileList = ref([
82 - { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' }, 104 + { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
83 // Uploader 根据文件后缀来判断是否为图片文件 105 // Uploader 根据文件后缀来判断是否为图片文件
84 // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明 106 // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
85 // { url: 'https://cloud-image', isImage: true }, 107 // { url: 'https://cloud-image', isImage: true },
......
1 <!-- 1 <!--
2 * @Date: 2022-09-02 10:46:03 2 * @Date: 2022-09-02 10:46:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-18 11:08:29 4 + * @LastEditTime: 2022-11-21 14:59:02
5 * @FilePath: /data-table/src/components/PhoneField/index.vue 5 * @FilePath: /data-table/src/components/PhoneField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 手机输入框
7 --> 7 -->
8 <template> 8 <template>
9 <div class="phone-field-page"> 9 <div class="phone-field-page">
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-16 17:40:39 4 + * @LastEditTime: 2022-11-21 15:15:51
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 单项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="radio-field-page"> 9 <div class="radio-field-page">
......
1 <!-- 1 <!--
2 * @Date: 2022-09-08 15:47:54 2 * @Date: 2022-09-08 15:47:54
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-08 16:20:11 4 + * @LastEditTime: 2022-11-21 15:16:10
5 * @FilePath: /data-table/src/components/RatePickerField/index.vue 5 * @FilePath: /data-table/src/components/RatePickerField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 评分选择控件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="rate-field"> 9 <div class="rate-field">
......
...@@ -7,24 +7,34 @@ ...@@ -7,24 +7,34 @@
7 --> 7 -->
8 <template> 8 <template>
9 <div class="text-field-page"> 9 <div class="text-field-page">
10 - <div class="label">{{ item.component_props.label }}<span v-if="item.component_props.required">&nbsp;*</span></div> 10 + <div class="label">
11 - <van-field v-model="item.value" 11 + {{ item.component_props.label
12 - :name="item.name" :type="item.type" :placeholder="item.component_props.placeholder" 12 + }}<span v-if="item.component_props.required">&nbsp;*</span>
13 - :rules="item.rules" :required="item.required" 13 + </div>
14 - :readonly="item.component_props.readonly" :disabled="item.component_props.disabled" 14 + <van-field
15 + v-model="item.value"
16 + :name="item.name"
17 + :type="item.type"
18 + :placeholder="item.component_props.placeholder"
19 + :rules="item.rules"
20 + :required="item.required"
21 + :readonly="item.component_props.readonly"
22 + :disabled="item.component_props.disabled"
15 :input-align="item.component_props.align" 23 :input-align="item.component_props.align"
16 - clearable :border="false" /> 24 + clearable
25 + :border="false"
26 + />
17 </div> 27 </div>
18 </template> 28 </template>
19 29
20 <script setup> 30 <script setup>
21 const props = defineProps({ 31 const props = defineProps({
22 - item: Object 32 + item: Object,
23 -}) 33 +});
24 </script> 34 </script>
25 35
26 <style lang="less" scoped> 36 <style lang="less" scoped>
27 - .text-field-page { 37 +.text-field-page {
28 .label { 38 .label {
29 padding: 1rem 1rem 0 1rem; 39 padding: 1rem 1rem 0 1rem;
30 font-size: 0.9rem; 40 font-size: 0.9rem;
...@@ -33,5 +43,5 @@ const props = defineProps({ ...@@ -33,5 +43,5 @@ const props = defineProps({
33 color: red; 43 color: red;
34 } 44 }
35 } 45 }
36 - } 46 +}
37 </style> 47 </style>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-08 10:06:46 4 + * @LastEditTime: 2022-11-21 15:21:56
5 * @FilePath: /data-table/src/components/TimePickerField/index.vue 5 * @FilePath: /data-table/src/components/TimePickerField/index.vue
6 - * @Description: 日期选择组件 6 + * @Description: 时间选择组件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="time-picker-field"> 9 <div class="time-picker-field">
......
...@@ -57,11 +57,6 @@ export function createComponentType(data) { ...@@ -57,11 +57,6 @@ export function createComponentType(data) {
57 item.autosize = true; 57 item.autosize = true;
58 item.component = TextareaField; 58 item.component = TextareaField;
59 } 59 }
60 - // if (item.component_props.name === 'number') {
61 - // item.type = 'number';
62 - // item.name = item.key;
63 - // item.component = TextField;
64 - // }
65 if (item.component_props.name === 'number') { 60 if (item.component_props.name === 'number') {
66 item.name = item.key; 61 item.name = item.key;
67 item.component = NumberField; 62 item.component = NumberField;
......