单选多选控件新增补充选项功能完善

hookehuyr
Commit a6daac25fffdd3bc7ee38494374b08b426c100f7 a6daac25 1 parent eb95734e
Showing 4 changed files with 126 additions and 63 deletions
src/components/CheckboxField/index.vue
src/components/RadioField/index.vue
src/components/RatePickerField/index.vue
src/views/index.vue
--- a/src/components/CheckboxField/index.vue
View file @a6daac2
+++ b/src/components/CheckboxField/index.vue
View file @a6daac2
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-30 14:23:30
+ * @LastEditTime: 2023-02-01 00:19:34
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
@@ -15,26 +15,33 @@
       </span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
-    <van-field :name="item.key" :rules="item.rules" :border="false">
+    <van-field :rules="item.rules" :border="false">
       <template #input>
         <van-checkbox-group
-          v-model="item.value"
+          v-model="checkbox_value"
-          @change="onChange(item)"
           :direction="item.component_props.direction"
           :max="item.component_props.max"
           style="width: 100%"
         >
-          <van-checkbox
+          <template v-for="x in item.component_props.options" :key="x.title">
-            v-for="x in item.component_props.options"
+            <van-checkbox
-            :key="x.value"
+              @click="onClick(x)"
-            :name="x.value"
+              :name="x.title"
-            icon-size="1rem"
+              icon-size="1rem"
-            shape="square"
+              shape="square"
-            :checked-color="themeVars.radioColor"
+              :checked-color="themeVars.radioColor"
-            style="margin-bottom: 0.25rem"
+              style="margin-bottom: 0.25rem"
-            >{{ x.title }}</van-checkbox
+              >{{ x.title }}</van-checkbox
-          >
+            >
-          <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
+            <van-field
+              v-if="checkbox_value.includes(x.value)"
+              @blur="onBlur(x)"
+              v-model="x.affix"
+              label=""
+              placeholder="请输入补充信息"
+              style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
+            />
+          </template>
         </van-checkbox-group>
       </template>
     </van-field>
@@ -59,17 +66,34 @@ onMounted(() => {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
-// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
+
-// 绑定值发生变化时回调，处理选项为其他时的输入项录入
+const emit = defineEmits(["active"]);
-const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+const checkbox_value = ref(props.item.component_props.default);
-const add_info = ref('');
+const affix_value = ref({});
-const add_info_name = ref(props.item.key + '#');
+
-const add_info_key = ref('其他'); // TODO: 以后动态获取
+const onClick = (item) => {
-const onChange = (item) => {
+  item.checked = !item.checked;
-  console.warn(item);
+  handleEmit(item)
+}
+const onBlur = (item) => {
+  handleEmit(item)
+}
+const handleEmit = (item) => {
+  // 选中状态添加属性
+  if (item.checked) {
+    affix_value.value[item.value] = item.affix
+  } else {
+    // 为选中删除属性
+    delete affix_value.value[item.value]
+  }
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
+  emit("active", props.item.value);
 }
 onMounted(() => {
-  add_info_name.value = `${props.item.key}#${add_info_key.value}`
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
+  emit("active", props.item.value);
 })
 </script>
--- a/src/components/RadioField/index.vue
View file @a6daac2
+++ b/src/components/RadioField/index.vue
View file @a6daac2
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-30 14:22:57
+ * @LastEditTime: 2023-01-31 23:22:38
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
@@ -12,24 +12,31 @@
       }}<span v-if="item.component_props.required">&nbsp;*</span>
     </div>
     <div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
-    <van-field :name="item.key" :rules="item.rules">
+    <van-field :rules="item.rules">
       <template #input>
         <van-radio-group
           @change="onChange(item)"
-          v-model="item.value"
+          v-model="radio_value"
           :direction="item.component_props.direction"
           style="width: 100%"
         >
-          <van-radio
+          <template v-for="x in item.component_props.options" :key="x.value">
-            v-for="x in item.component_props.options"
+            <van-radio
-            :key="x.value"
+              :name="x.value"
-            :name="x.value"
+              icon-size="1rem"
-            icon-size="1rem"
+              :checked-color="themeVars.radioColor"
-            :checked-color="themeVars.radioColor"
+              style="margin-bottom: 0.25rem"
-            style="margin-bottom: 0.25rem"
+              >{{ x.title }}</van-radio
-            >{{ x.title }}</van-radio
+            >
-          >
+            <van-field
-          <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;" />
+              v-if="radio_value === x.value"
+              @blur="onBlur(x)"
+              v-model="x.affix"
+              label=""
+              placeholder="请输入补充信息"
+              style="border: 1px solid #eaeaea;border-radius: 0.25rem; padding: 0.25rem 0.5rem;"
+            />
+          </template>
         </van-radio-group>
       </template>
     </van-field>
@@ -51,17 +58,34 @@ const themeVars = {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
-// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
+
-// 绑定值发生变化时回调，处理选项为其他时的输入项录入
+const emit = defineEmits(["active"]);
-const has_add_info = ref(true); // TODO: 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+const radio_value = ref(props.item.component_props.default);
-const add_info = ref('');
+const affix_value = ref('');
-const add_info_name = ref(props.item.key + '#');
+
-const add_info_key = ref('其他'); // TODO: 以后动态获取
 const onChange = (item) => {
-  console.warn(item);
+  clearAffix()
+}
+const onBlur = (item) => {
+  clearAffix()
+  affix_value.value = item.affix
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
+  emit("active", props.item.value);
+}
+const clearAffix = () => {
+  const options = props.item.component_props.options;
+  // 为选中项目的补充清空
+  options.forEach(element => {
+    if (element.value !== radio_value.value) {
+      element.affix = ''
+    }
+  });
 }
 onMounted(() => {
-  add_info_name.value = `${props.item.key}#${add_info_key.value}`
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
+  emit("active", props.item.value);
 })
 </script>
--- a/src/components/RatePickerField/index.vue
View file @a6daac2
+++ b/src/components/RatePickerField/index.vue
View file @a6daac2
 <!--
  * @Date: 2022-09-08 15:47:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-28 18:51:11
+ * @LastEditTime: 2023-01-31 22:57:40
  * @FilePath: /data-table/src/components/RatePickerField/index.vue
  * @Description: 评分选择控件
 -->
--- a/src/views/index.vue
View file @a6daac2
+++ b/src/views/index.vue
View file @a6daac2
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-30 12:39:07
+ * @LastEditTime: 2023-02-01 00:19:00
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -287,6 +287,20 @@ const onActive = (item) => {
   if (item.type === "rate") {
     postData.value = _.assign(postData.value, { [item.key]: item.value });
   }
+  if (item.type === "radio") {
+    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
+  }
+  if (item.type === "checkbox") {
+    const checkbox_value = _.cloneDeep(item.value)
+    checkbox_value.forEach((element, index) => {
+      for (const key in item.affix) {
+        if (item.affix[key] && element === key) {
+          checkbox_value[index] = item.affix[key]
+        }
+      }
+    });
+    postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
+  }
 };
 // 检验没有绑定name的输入项
@@ -363,22 +377,23 @@ const preValidData = (values) => {
   // 过滤掉标识为 ignore，undefined 的字段数据
   let { ignore, undefined, ...rest_data } = values;
   // TAG: 处理其他补充消息输入框内容
-  for (const key in rest_data) {
+  // for (const key in rest_data) {
-    if (key.includes('#')) { // #号为自定义标识
+  //   if (key.includes('#')) { // #号为自定义标识
-      const [input_key, input_value] = key.split('#'); // 原始key值标记
+  //     const [input_key, input_value] = key.split('#'); // 原始key值标记
-      if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
+  //     if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
-        rest_data[input_key].forEach((element, index)=> {
+  //       rest_data[input_key].forEach((element, index)=> {
-          if (element === input_value) { // 标签名等于选择的值
+  //         if (element === input_value) { // 标签名等于选择的值
-            rest_data[input_key][index] = rest_data[key];
+  //           // rest_data[input_key][index] = rest_data[key] ? rest_data[key] : input_value;
-          }
+  //           rest_data[input_key][index] = rest_data[key];
-        });
+  //         }
-      } else { // 单选框值为字符串
+  //       });
-        if (rest_data[input_key] === input_value) { // 标签名等于选择的值
+  //     } else { // 单选框值为字符串
-          rest_data[input_key] = rest_data[key];
+  //       if (rest_data[input_key] === input_value) { // 标签名等于选择的值
-        }
+  //         rest_data[input_key] = rest_data[key] ? rest_data[key] : input_value;
-      }
+  //       }
-    }
+  //     }
-  }
+  //   }
+  // }
   // console.warn(postData.value);
   // 合并自定义字段到提交表单字段
   return _.assign(postData.value, rest_data);