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

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 16:00:36
+ * @LastEditTime: 2022-12-28 18:54:38
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
@@ -11,7 +11,9 @@
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
     </div>
+    <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div>
     <van-field
+      v-else
       v-model="item.value"
       :id="item.name"
       :name="item.name"
@@ -63,8 +65,9 @@ watch(
     }
   }
 );
-
+const readonly = props.item.component_props.readonly;
 const openKeyboard = (e) => {
+  if (readonly) return false; // 如果为只读，不能设置
   // // 键盘上移动
   // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
   // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
@@ -106,19 +109,21 @@ const blurKeyboard = () => {
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+const required = props.item.component_props.required;
 const validator = (val) => {
-  if (!props.item.component_props.required) {
-    // 非必填
-    return true;
+  if (required && !val) {
+    return false;
+  } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+    return false;
   } else {
-    return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
+    return true;
   }
 };
 // 错误提示文案
 const validatorMessage = (val, rule) => {
-  if (!val) {
+  if (required && !val) {
     return "身份证号码不能为空";
-  } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+  } else if (val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
     return "请输入正确身份证号码";
   }
 };

 <!--
  * @Date: 2022-09-08 15:47:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 15:16:10
+ * @LastEditTime: 2022-12-28 18:51:11
  * @FilePath: /data-table/src/components/RatePickerField/index.vue
  * @Description: 评分选择控件
 -->
@@ -13,7 +13,8 @@
     </div>
     <van-rate
       v-model="rate_value"
-      :count="item.component_props.count"
+      :count="item.component_props.data_length"
+      :readonly="item.component_props.readonly"
       :color="styleColor.baseColor"
       @change="onChange"
       style="padding: 1rem"
@@ -37,7 +38,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["active"]);
 const show_empty = ref(false);
-const rate_value = ref(0);
+const rate_value = ref(props.item.component_props.default);
 
 const onChange = (value) => {
   props.item.value = { key: props.item.key, value, type: "rate" };

@@ -115,7 +115,7 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = SignField;
     }
-    if (item.component_props.tag === 'rate_picker') {
+    if (item.component_props.tag === 'rate') {
       item.name = item.key;
       item.component = RatePickerField;
     }
@@ -123,7 +123,7 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = CalendarField;
     }
-    if (item.component_props.tag === 'id_code') {
+    if (item.component_props.tag === 'id_card') {
       item.name = item.key;
       item.component = IdentityField;
     }