✨ feat(多选规则控件): 样式和功能调整

hookehuyr
Commit 2114a80789b24c2db4d73d2243970d10dafbd3c2 2114a807 1 parent 0310115a
Showing 3 changed files with 117 additions and 67 deletions
src/components/MultiRuleField/index.vue
src/hooks/useComponentType.js
src/pages/table/index.vue
--- a/src/components/MultiRuleField/index.vue
View file @2114a80
+++ b/src/components/MultiRuleField/index.vue
View file @2114a80
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-10 14:41:52
+ * @LastEditTime: 2023-04-04 15:00:16
- * @FilePath: /data-table/src/components/MultiRuleField/index.vue
+ * @FilePath: /custom_form/src/components/MultiRuleField/index.vue
  * @Description: 多选规则确认控件
 -->
 <template>
   <div v-if="HideShow" class="multi-rule-field-page">
     <div class="label">
-      <span v-if="item.component_props.required" class="required">&nbsp;*</span>
+      <text v-if="item.component_props.required" class="required">&nbsp;*</text>
       {{ item.component_props.label }}
-    <span v-if="item.component_props.min_count" style="color: #999; font-size: 0.85rem;">（最少选{{ item.component_props.min_count }}项）</span>
+    <text v-if="item.component_props.min_count" style="color: #999; font-size: 13px;">（最少选{{ item.component_props.min_count }}项）</text>
     </div>
-    <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
+    <nut-checkbox-group v-model="checkbox_value" style="width: 100%">
-      <template #input>
-        <van-checkbox-group v-model="item.value" style="width: 100%">
       <template v-for="(rule, idx) in item.component_props.options" :key="idx">
         <div class="multi-rule-field-box">
-              <van-checkbox
+          <nut-checkbox @click="onClick(rule)" :label="rule.title">{{ rule.title }}</nut-checkbox>
-                :name="rule.value"
+          <div class="multi-ellipsis--l3 rule-desc-text">{{ rule.desc_text }}</div>
-                shape="square"
-                :checked-color="themeVars.radioColor"
-                >{{ rule.title }}</van-checkbox
-              >
-              <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)">
+          <div v-if="rule.desc_type === 'url' && h5" class="rule-box" @click="showUrl(rule)">
-                {{ rule.desc_btn_name }}&nbsp;<van-icon name="link-o" />
+            {{ rule.desc_btn_name }}&nbsp;<Link size="12" />
           </div>
         </div>
       </template>
-        </van-checkbox-group>
+    </nut-checkbox-group>
-      </template>
+    <div
-    </van-field>
+      v-if="show_error"
+      style="padding: 5px 20px; color: red; font-size: 12px;"
+    >
+      {{ error_msg }}
     </div>
-
+    <nut-overlay v-model:visible="show" :lock-scroll="true">
-  <van-overlay :show="show" :lock-scroll="false">
+      <div class="rule-wrapper">
-    <div class="rule-wrapper" @click.stop>
         <div class="rule-block">
-        <div style="height: 70vh; min-height: 70vh; overflow: scroll; white-space: pre-wrap; line-height: 1.5;" v-html="rule_content"></div>
+          <div style="height: 70vh; min-height: 70vh; overflow: scroll; white-space: pre-wrap; line-height: 1.5;font-size: 15px;" v-html="rule_content"></div>
           <div class="close-btn">
-          <van-button type="primary" block @click="closeRule"
+            <nut-button type="primary" block @click="closeRule">关&nbsp;&nbsp;闭</nut-button>
-            >关&nbsp;&nbsp;闭</van-button
-          >
           </div>
           <div></div>
         </div>
       </div>
-  </van-overlay>
+    </nut-overlay>
+  </div>
 </template>
 <script setup>
+import { ref, computed, watch, onMounted, reactive } from "vue";
 import { styleColor } from "@/constant.js";
-import $ from "jquery";
+import { $ } from '@tarojs/extend';
+import { Link } from '@nutui/icons-vue-taro';
 const props = defineProps({
   item: Object,
@@ -70,8 +66,28 @@ const themeVars = {
 onMounted(() => {
   $(".rule-box").css("color", themeVars.radioColor);
 });
+
+const emit = defineEmits(["active"]);
 const show = ref(false);
-const checked = ref([]);
+const checkbox_value = ref([]);
+const options = props.item.component_props.options;
+
+const onClick = (item) => {
+  item.checked = !item.checked;
+  // 校验输入项数据
+  validMultiRule();
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, type: "multi_rule" };
+  console.warn(props.item.value);
+  emit("active", props.item.value);
+}
+
+onMounted(() => {
+  // 发送自定义数据结构
+  props.item.value = { key: props.item.key, value: checkbox_value.value, type: "multi_rule" };
+  emit("active", props.item.value);
+});
+
 const showRule = (rule) => {
   show.value = true;
   rule.desc_text = rule.desc_text.replace(/\\n/g, "<br>")
@@ -81,55 +97,66 @@ const closeRule = () => {
   show.value = false;
   rule_content.value = "";
 };
-const showUrl = (rule) => {
+const h5 = computed(() => {
+  if (process.env.TARO_ENV === 'h5') {
+    return true
+  } else {
+    return false;
+  }
+})
+const showUrl = (rule) => { // 跳转设置链接
+  if (process.env.TARO_ENV === 'h5') {
     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 (required && !val.length) {
+const show_error = ref(false);
-    return false;
+const error_msg = ref('');
-  } else if (min_count && props.item.value.length < min_count) {
+// 校验模块
-    return false;
+const validMultiRule= () => {
-  } else if (max_count && props.item.value.length > max_count) {
+  // 必填项
-    return false;
+  if (required && !checkbox_value.value.length) {
+    show_error.value = true;
+    error_msg.value = '选择项不能为空';
+  } else if (min_count && checkbox_value.value.length < min_count) {
+    show_error.value = true;
+    error_msg.value = `最少选择 ${min_count} 项`;
+  } else if (max_count && checkbox_value.value.length > max_count) {
+    show_error.value = true;
+    error_msg.value = `最多选择 ${max_count} 项`;
   } else {
-    return true;
+    show_error.value = false;
-  }
+    error_msg.value = '';
-};
-// 错误提示文案
-const validatorMessage = (val, rule) => {
-  if (required && !val.length) {
-    return "选择项不能为空";
-  } 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}项`;
   }
+  return !show_error.value;
 };
-const rules = [{ validator, message: validatorMessage }];
+
+defineExpose({ validMultiRule });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .multi-rule-field-page {
   .label {
-    padding: 1rem 1rem 0 1rem;
+    padding: 30px 30px 0 30px;
-    font-size: 0.9rem;
+    font-size: 26px;
     font-weight: bold;
-    span.required {
+    text.required {
       color: red;
     }
   }
   .rule-desc-text {
-    margin: 0.35rem 0.5rem 0.5rem 1.75rem;
+    margin: 0.35rem 0.5rem 0.5rem 60px;
-    font-size: 0.8rem;
+    font-size: 28px;
     color: #808080;
   }
   .rule-box {
-    font-size: 0.85rem;
+    font-size: 28px;
-    margin-left: 1.8rem;
+    margin-left: 60px;
     padding-bottom: 0.5rem;
     width: fit-content;
   }
@@ -158,8 +185,11 @@ const rules = [{ validator, message: validatorMessage }];
 .multi-rule-field-box {
   border: 1px solid #eaeaea;
   border-radius: 0.25rem;
-  padding: 1rem 0.5rem 0 0.5rem;
+  padding: 25px;
-  // width: 100vw;
+  margin: 25px;
-  margin-bottom: 0.5rem;
+}
+
+.nut-checkbox__label  {
+  margin-left: 20px;
 }
 </style>
--- a/src/hooks/useComponentType.js
View file @2114a80
+++ b/src/hooks/useComponentType.js
View file @2114a80
@@ -23,7 +23,7 @@ import CheckboxField from '@/components/CheckboxField/index.vue'
 // import MarqueeField from '@/components/MarqueeField/index.vue'
 // import ContactField from '@/components/ContactField/index.vue'
 // import RuleField from '@/components/RuleField/index.vue'
-// import MultiRuleField from '@/components/MultiRuleField/index.vue'
+import MultiRuleField from '@/components/MultiRuleField/index.vue'
 // import ButtonField from '@/components/ButtonField/index.vue'
 // import NoteField from '@/components/NoteField/index.vue'
 // import NameField from '@/components/NameField/index.vue'
@@ -163,11 +163,11 @@ export function createComponentType(data) {
     //   item.name = item.key
     //   item.component = ButtonField
     // }
-    // if (item.component_props.tag === 'multi_rule') {
+    if (item.component_props.tag === 'multi_rule') {
-    //   item.name = item.key
+      item.name = item.key
-    //   item.value = []
+      item.value = []
-    //   item.component = MultiRuleField
+      item.component = MultiRuleField
-    // }
+    }
     // if (item.component_props.tag === 'note') {
     //   item.name = item.key
     //   item.component = NoteField
--- a/src/pages/table/index.vue
View file @2114a80
+++ b/src/pages/table/index.vue
View file @2114a80
 <!--
  * @Date: 2023-03-24 09:19:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-04-04 10:21:43
+ * @LastEditTime: 2023-04-04 14:38:13
  * @FilePath: /custom_form/src/pages/table/index.vue
  * @Description: 文件描述
 -->
@@ -130,6 +130,7 @@ const input = ref([]);
 const textarea = ref([]);
 const radio = ref([]);
 const checkbox = ref([]);
+const multi_rule = ref([]);
 const area_picker = ref([]);
 const image_uploader = ref([]);
 const file_uploader = ref([]);
@@ -150,6 +151,9 @@ const setRefMap = (el, item) => {
     if (item.component_props.tag === "checkbox") {
       checkbox.value.push(el);
     }
+    if (item.component_props.tag === "multi_rule") {
+      multi_rule.value.push(el);
+    }
     if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
@@ -393,6 +397,10 @@ const onActive = (item) => {
     });
     postData.value = Object.assign(postData.value, { [item.key]: checkbox_value });
   }
+  if (item.type === "multi_rule") {
+    const checkbox_value = deepClone(item.value)
+    postData.value = Object.assign(postData.value, { [item.key]: checkbox_value });
+  }
   if (item.key === "area_picker") {
     postData.value[item.filed_name] = item.value;
   }
@@ -469,6 +477,18 @@ const validOther = () => {
       }
     });
   }
+  if (multi_rule.value) {
+    // 多选规则控件
+    multi_rule.value.forEach((item, index) => {
+      if (!multi_rule.value[index].validMultiRule()) {
+        valid = {
+          status: multi_rule.value[index].validMultiRule(),
+          key: "multi_rule",
+        };
+        return false;
+      }
+    });
+  }
   if (area_picker.value) {
     // 省市区地址
     area_picker.value.forEach((item, index) => {