✨ feat(单选/多选控件): 新增补充信息属性控制

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 00:26:07
+ * @LastEditTime: 2023-02-01 10:32:38
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
@@ -34,11 +34,13 @@
               >{{ x.title }}</van-checkbox
             >
             <van-field
-              v-if="checkbox_value.includes(x.value)"
+              v-if="checkbox_value.includes(x.value) && x.is_input"
               @blur="onBlur(x)"
               v-model="x.affix"
               label=""
-              placeholder="请输入补充信息"
+              :placeholder="x.input_placeholder"
+              :rules="x.input_required ? rules : ''"
+              :required="x.input_required"
               style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
             />
           </template>
@@ -67,6 +69,23 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 
+// TODO: 等待数据结构更新，看看怎么判断必填
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const validator = (val) => {
+  if (!val) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (!val) {
+    return "补充信息不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
 const emit = defineEmits(["active"]);
 const checkbox_value = ref(props.item.component_props.default);
 const affix_value = ref({});
@@ -81,7 +100,7 @@ const onBlur = (item) => {
 const handleEmit = (item) => {
   // 选中状态添加属性
   if (item.checked) {
-    affix_value.value[item.value] = item.affix
+    affix_value.value[item.value] = `${item.title}: ${item.affix}`;
   } else {
     // 为选中删除属性
     delete affix_value.value[item.value]

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 00:25:55
+ * @LastEditTime: 2023-02-01 10:32:14
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
@@ -29,11 +29,13 @@
               >{{ x.title }}</van-radio
             >
             <van-field
-              v-if="radio_value === x.value"
+              v-if="radio_value === x.value && x.is_input"
               @blur="onBlur(x)"
               v-model="x.affix"
               label=""
-              placeholder="请输入补充信息"
+              :placeholder="x.input_placeholder"
+              :rules="x.input_required ? rules : ''"
+              :required="x.input_required"
               style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin-bottom: 0.25rem;"
             />
           </template>
@@ -59,6 +61,23 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
 
+// TODO: 等待数据结构更新，看看怎么判断必填
+// 校验函数返回 true 表示校验通过，false 表示不通过
+const validator = (val) => {
+  if (!val) {
+    return false;
+  } else {
+    return true;
+  }
+};
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (!val) {
+    return "补充信息不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+
 const emit = defineEmits(["active"]);
 const radio_value = ref(props.item.component_props.default);
 const affix_value = ref('');
@@ -68,7 +87,7 @@ const onChange = (item) => {
 }
 const onBlur = (item) => {
   clearAffix()
-  affix_value.value = item.affix
+  affix_value.value = `${item.title}: ${item.affix}`
   // 发送自定义数据结构
   props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
   emit("active", props.item.value);

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 11:13:58
+ * @LastEditTime: 2023-02-01 10:08:34
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框
 -->