fix 修复多选组件默认值还原和只读状态的显示问题

hookehuyr
Commit 7a727f8b77be7b2719bdcd316e6362268b609c8d 7a727f8b 1 parent 17908767
Showing 1 changed file with 35 additions and 3 deletions
src/components/CheckboxField/index.vue
--- a/src/components/CheckboxField/index.vue
View file @7a727f8
+++ b/src/components/CheckboxField/index.vue
View file @7a727f8
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-06 15:41:04
+ * @LastEditTime: 2024-06-13 15:27:37
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
@@ -21,12 +21,12 @@
           :max="item.component_props.max" style="width: 100%">
           <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper">
             <div v-if="item.component_props.readonly">
-              <div v-if="item.component_props.default.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
+              <div v-if="checkbox_value.includes(x.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
               <div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""><!----><!----><!----></i></div><span class="van-checkbox__label">{{ x.title }}</span></div>
             </div>
             <van-checkbox v-else @click="onClick(x)" :name="x.title" icon-size="1rem" shape="square"
               :checked-color="themeVars.radioColor" style="margin-bottom: 0.25rem">{{ x.title }}</van-checkbox>
-            <van-field v-if="checkbox_value.includes(x.value) && x.is_input && (item.component_props.readonly && x.affix)" @blur="onBlur(x)" v-model="x.affix"
+            <van-field v-if="checkbox_value.includes(x.value) && x.is_input" @blur="onBlur(x)" v-model="x.affix"
               label=" " label-width="5px" :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''"
               :required="x.input_required" :readonly="item.component_props.readonly" class="affix-input" />
           </div>
@@ -96,6 +96,38 @@ const handleEmit = (item) => {
   emit("active", props.item.value);
 }
 onMounted(() => {
+  // TAG：默认值处理
+  let arr = props.item.component_props.default;
+  let hasColonSome = arr.some(item => item.includes(':')); // 检查是否有元素包含冒号
+  if (hasColonSome) { // 带补充信息输入框
+    // 提取冒号前的部分生成新的数组
+    let titles = arr.map(item => {
+      if (item.includes(':')) {
+        return item.split(': ')[0]
+      } else {
+        return item
+      }
+    });
+    // 生成对象
+    let obj = {};
+    arr.forEach(item => {
+      if (item.includes(':')) {
+        let parts = item.split(': ');
+        obj[parts[0]] = parseInt(parts[1]);
+      }
+    });
+    checkbox_value.value = titles;
+    //
+    props.item.component_props.options.forEach(item => {
+      for (const key in obj) {
+        if (item.value === key) {
+          item.affix = obj[key]
+        }
+      }
+    })
+  } else { // 纯多选情况
+    checkbox_value.value = arr;
+  }
   // 发送自定义数据结构
   props.item.value = { key: props.item.key, value: checkbox_value.value, affix: affix_value.value, type: "checkbox" };
   emit("active", props.item.value);