多选规则展示属性联调

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-24 14:33:47
- * @FilePath: /data-table/src/components/RuleField/index.vue
+ * @LastEditTime: 2022-12-30 17:17:26
+ * @FilePath: /data-table/src/components/MultiRuleField/index.vue
  * @Description: 多选规则确认控件
 -->
 <template>
-  <div class="multi-rule-field-page">
-    <div class="label">
-      {{ item.component_props.label
-      }}<span v-if="item.component_props.required">&nbsp;*</span>（最少选{{
-        item.component_props.count
-      }}项）
+  <div v-if="HideShow" class="multi-rule-field-page">
+    <div class="label"> {{ item.component_props.label }}<span v-if="item.component_props.required" class="required">&nbsp;*</span>
+    <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">（最少选{{ item.component_props.min_count }}项）</span>
     </div>
     <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
       <template #input>
         <van-checkbox-group v-model="item.value" style="width: 100%">
-          <template v-for="(rule, idx) in item.component_props.rules" :key="idx">
+          <template v-for="(rule, idx) in item.component_props.options" :key="idx">
             <div class="multi-rule-field-box">
               <van-checkbox
-                :name="idx"
+                :name="rule.value"
                 shape="square"
                 :checked-color="themeVars.radioColor"
-                >{{ rule.rule_desc }}</van-checkbox
+                >{{ rule.title }}</van-checkbox
               >
-              <div class="rule-box" @click="showRule(rule)">
-                {{ rule.rule_link }}&nbsp;>>
+              <div class="van-multi-ellipsis--l3 rule-desc-text">{{ rule.desc_text }}</div>
+              <div v-if="rule.desc_type === 'text'" class="rule-box" @click="showRule(rule)">
+                {{ rule.desc_btn_name }}&nbsp;>>
+              </div>
+              <div v-if="rule.desc_type === 'url'" class="rule-box" @click="showUrl(rule)">
+                {{ rule.desc_btn_name }}&nbsp;<van-icon name="link-o" />
               </div>
             </div>
           </template>
@@ -56,7 +57,10 @@ import $ from "jquery";
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 // TAG: 自定义主题颜色
 const themeVars = {
   radioColor: styleColor.baseColor,
@@ -68,28 +72,39 @@ const show = ref(false);
 const checked = ref([]);
 const showRule = (rule) => {
   show.value = true;
-  rule_content.value = rule.rule_content;
+  rule.desc_text = rule.desc_text.replace(/\\n/g, "<br>")
+  rule_content.value = rule.desc_text;
 };
 const closeRule = () => {
   show.value = false;
   rule_content.value = "";
 };
+const showUrl = (rule) => {
+  location.href = rule.desc_url
+}
 const rule_content = ref("");
-
+const required = props.item.component_props.required;
+const min_count = props.item.component_props.min_count;
+const max_count = props.item.component_props.max_count;
 const validator = (val) => {
-  if (!props.item.component_props.required) {
-    // 非必填
-    return true;
+  if (required && !val.length) {
+    return false;
+  } else if (min_count && props.item.value.length < min_count) {
+    return false;
+  } else if (max_count && props.item.value.length > max_count) {
+    return false;
   } else {
-    return props.item.value.length >= props.item.component_props.count ? true : false;
+    return true;
   }
 };
 // 错误提示文案
 const validatorMessage = (val, rule) => {
-  if (!val) {
+  if (required && !val.length) {
     return "选择项不能为空";
-  } else if (props.item.value.length < props.item.component_props.count) {
-    return `最少选择${props.item.component_props.count}项`;
+  } else if (min_count && props.item.value.length < min_count) {
+    return `最少选择${min_count}项`;
+  } else if (max_count && props.item.value.length > max_count) {
+    return `最多选择${max_count}项`;
   }
 };
 const rules = [{ validator, message: validatorMessage }];
@@ -101,10 +116,15 @@ const rules = [{ validator, message: validatorMessage }];
     padding: 1rem 1rem 0 1rem;
     font-size: 0.9rem;
     font-weight: bold;
-    span {
+    span.required {
       color: red;
     }
   }
+  .rule-desc-text {
+    margin: 0.35rem 0.5rem 0.5rem 1.75rem;
+    font-size: 0.8rem;
+    color: #808080;
+  }
   .rule-box {
     font-size: 0.85rem;
     margin-left: 1.8rem;