hookehuyr

联调身份证控件和评分控件

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-11-21 16:00:36 4 + * @LastEditTime: 2022-12-28 18:54:38
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 * @Description: 身份证输入控件 6 * @Description: 身份证输入控件
7 --> 7 -->
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
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 + <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div>
14 <van-field 15 <van-field
16 + v-else
15 v-model="item.value" 17 v-model="item.value"
16 :id="item.name" 18 :id="item.name"
17 :name="item.name" 19 :name="item.name"
...@@ -63,8 +65,9 @@ watch( ...@@ -63,8 +65,9 @@ watch(
63 } 65 }
64 } 66 }
65 ); 67 );
66 - 68 +const readonly = props.item.component_props.readonly;
67 const openKeyboard = (e) => { 69 const openKeyboard = (e) => {
70 + if (readonly) return false; // 如果为只读,不能设置
68 // // 键盘上移动 71 // // 键盘上移动
69 // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度 72 // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
70 // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度 73 // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
...@@ -106,19 +109,21 @@ const blurKeyboard = () => { ...@@ -106,19 +109,21 @@ const blurKeyboard = () => {
106 109
107 // 校验函数返回 true 表示校验通过,false 表示不通过 110 // 校验函数返回 true 表示校验通过,false 表示不通过
108 // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X 111 // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
112 +const required = props.item.component_props.required;
109 const validator = (val) => { 113 const validator = (val) => {
110 - if (!props.item.component_props.required) { 114 + if (required && !val) {
111 - // 非必填 115 + return false;
112 - return true; 116 + } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
117 + return false;
113 } else { 118 } else {
114 - return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val); 119 + return true;
115 } 120 }
116 }; 121 };
117 // 错误提示文案 122 // 错误提示文案
118 const validatorMessage = (val, rule) => { 123 const validatorMessage = (val, rule) => {
119 - if (!val) { 124 + if (required && !val) {
120 return "身份证号码不能为空"; 125 return "身份证号码不能为空";
121 - } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) { 126 + } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
122 return "请输入正确身份证号码"; 127 return "请输入正确身份证号码";
123 } 128 }
124 }; 129 };
......
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-11-21 15:16:10 4 + * @LastEditTime: 2022-12-28 18:51:11
5 * @FilePath: /data-table/src/components/RatePickerField/index.vue 5 * @FilePath: /data-table/src/components/RatePickerField/index.vue
6 * @Description: 评分选择控件 6 * @Description: 评分选择控件
7 --> 7 -->
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
13 </div> 13 </div>
14 <van-rate 14 <van-rate
15 v-model="rate_value" 15 v-model="rate_value"
16 - :count="item.component_props.count" 16 + :count="item.component_props.data_length"
17 + :readonly="item.component_props.readonly"
17 :color="styleColor.baseColor" 18 :color="styleColor.baseColor"
18 @change="onChange" 19 @change="onChange"
19 style="padding: 1rem" 20 style="padding: 1rem"
...@@ -37,7 +38,7 @@ const props = defineProps({ ...@@ -37,7 +38,7 @@ const props = defineProps({
37 }); 38 });
38 const emit = defineEmits(["active"]); 39 const emit = defineEmits(["active"]);
39 const show_empty = ref(false); 40 const show_empty = ref(false);
40 -const rate_value = ref(0); 41 +const rate_value = ref(props.item.component_props.default);
41 42
42 const onChange = (value) => { 43 const onChange = (value) => {
43 props.item.value = { key: props.item.key, value, type: "rate" }; 44 props.item.value = { key: props.item.key, value, type: "rate" };
......
...@@ -115,7 +115,7 @@ export function createComponentType(data) { ...@@ -115,7 +115,7 @@ export function createComponentType(data) {
115 item.name = item.key; 115 item.name = item.key;
116 item.component = SignField; 116 item.component = SignField;
117 } 117 }
118 - if (item.component_props.tag === 'rate_picker') { 118 + if (item.component_props.tag === 'rate') {
119 item.name = item.key; 119 item.name = item.key;
120 item.component = RatePickerField; 120 item.component = RatePickerField;
121 } 121 }
...@@ -123,7 +123,7 @@ export function createComponentType(data) { ...@@ -123,7 +123,7 @@ export function createComponentType(data) {
123 item.name = item.key; 123 item.name = item.key;
124 item.component = CalendarField; 124 item.component = CalendarField;
125 } 125 }
126 - if (item.component_props.tag === 'id_code') { 126 + if (item.component_props.tag === 'id_card') {
127 item.name = item.key; 127 item.name = item.key;
128 item.component = IdentityField; 128 item.component = IdentityField;
129 } 129 }
......