Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
31c4e80a 1 parent fb834d43

✨ feat: 新增多选规则确认控件

Inline Side-by-side
Showing 3 changed files with 151 additions and 4 deletions
1 +<!--
2 + * @Date: 2022-08-30 11:34:19
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-24 14:33:47
5 + * @FilePath: /data-table/src/components/RuleField/index.vue
6 + * @Description: 多选规则确认控件
7 +-->
8 +<template>
9 + <div class="multi-rule-field-page">
10 + <div class="label">
11 + {{ item.component_props.label
12 + }}<span v-if="item.component_props.required">&nbsp;*</span>（最少选{{
13 + item.component_props.count
14 + }}项）
15 + </div>
16 + <van-field :name="item.key" :rules="rules" :border="false" style="padding-bottom: 0">
17 + <template #input>
18 + <van-checkbox-group v-model="item.value">
19 + <template v-for="(rule, idx) in item.component_props.rules" :key="idx">
20 + <van-checkbox :name="idx" shape="square">{{ rule.rule_desc }}</van-checkbox>
21 + <div class="rule-box" @click="showRule(rule)">
22 + {{ rule.rule_link }}&nbsp;>>
23 + </div>
24 + </template>
25 + </van-checkbox-group>
26 + </template>
27 + </van-field>
28 + </div>
29 +
30 + <van-overlay :show="show">
31 + <div class="rule-wrapper" @click.stop>
32 + <div class="rule-block">
33 + <div style="height: 70vh; overflow: scroll" v-html="rule_content"></div>
34 + <div class="close-btn">
35 + <van-button type="primary" block @click="closeRule"
36 + >关&nbsp;&nbsp;闭</van-button
37 + >
38 + </div>
39 + <div></div>
40 + </div>
41 + </div>
42 + </van-overlay>
43 +</template>
44 +
45 +<script setup>
46 +const props = defineProps({
47 + item: Object,
48 +});
49 +
50 +const show = ref(false);
51 +const checked = ref([]);
52 +const showRule = (rule) => {
53 + show.value = true;
54 + rule_content.value = rule.rule_content;
55 +};
56 +const closeRule = () => {
57 + show.value = false;
58 + rule_content.value = "";
59 +};
60 +const rule_content = ref("");
61 +
62 +const validator = (val) => {
63 + if (!props.item.component_props.required) {
64 + // 非必填
65 + return true;
66 + } else {
67 + return props.item.value.length >= props.item.component_props.count ? true : false;
68 + }
69 +};
70 +// 错误提示文案
71 +const validatorMessage = (val, rule) => {
72 + if (!val) {
73 + return "选择项不能为空";
74 + } else if (props.item.value.length < props.item.component_props.count) {
75 + return `最少选择${props.item.component_props.count}项`;
76 + }
77 +};
78 +const rules = [{ validator, message: validatorMessage }];
79 +</script>
80 +
81 +<style lang="less" scoped>
82 +.multi-rule-field-page {
83 + .label {
84 + padding: 1rem 1rem 0 1rem;
85 + font-size: 0.9rem;
86 + font-weight: bold;
87 + span {
88 + color: red;
89 + }
90 + }
91 + .rule-box {
92 + font-size: 0.85rem;
93 + margin-left: 1.8rem;
94 + padding-bottom: 0.5rem;
95 + color: #1989fa;
96 + }
97 +}
98 +.rule-wrapper {
99 + display: flex;
100 + align-items: center;
101 + justify-content: center;
102 + height: 100%;
103 +}
104 +
105 +.rule-block {
106 + position: relative;
107 + width: 80vw;
108 + height: 80vh;
109 + background-color: #fff;
110 + overflow: scroll;
111 + padding: 1rem;
112 + .close-btn {
113 + position: absolute;
114 + bottom: 1rem;
115 + // transform: translateX(100%);
116 + width: calc(100% - 2rem);
117 + }
118 +}
119 +</style>
...@@ -23,6 +23,7 @@ import VideoField from '@/components/VideoField/index.vue' ...@@ -23,6 +23,7 @@ import VideoField from '@/components/VideoField/index.vue'
23 import MarqueeField from '@/components/MarqueeField/index.vue' 23 import MarqueeField from '@/components/MarqueeField/index.vue'
24 import ContactField from '@/components/ContactField/index.vue' 24 import ContactField from '@/components/ContactField/index.vue'
25 import RuleField from '@/components/RuleField/index.vue' 25 import RuleField from '@/components/RuleField/index.vue'
26 +import MultiRuleField from '@/components/MultiRuleField/index.vue'
26 27
27 /** 28 /**
28 * 生成自定义组件类型 29 * 生成自定义组件类型
...@@ -48,6 +49,7 @@ import RuleField from '@/components/RuleField/index.vue' ...@@ -48,6 +49,7 @@ import RuleField from '@/components/RuleField/index.vue'
48 * @type video 视频控件 VideoField 49 * @type video 视频控件 VideoField
49 * @type marquee 跑马灯控件 MarqueeField 50 * @type marquee 跑马灯控件 MarqueeField
50 * @type rule 活动规则控件 RuleField 51 * @type rule 活动规则控件 RuleField
52 + * @type multi_rule 活动规则控件 MultiRuleField
51 */ 53 */
52 export function createComponentType(data) { 54 export function createComponentType(data) {
53 // 判断类型和使用组件 55 // 判断类型和使用组件
...@@ -144,5 +146,10 @@ export function createComponentType(data) { ...@@ -144,5 +146,10 @@ export function createComponentType(data) {
144 item.name = item.key; 146 item.name = item.key;
145 item.component = RuleField; 147 item.component = RuleField;
146 } 148 }
149 + if (item.component_props.name === 'multi_rule') {
150 + item.name = item.key;
151 + item.value = [];
152 + item.component = MultiRuleField;
153 + }
147 }) 154 })
148 } 155 }
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 <van-cell-group> 13 <van-cell-group>
14 <component 14 <component
15 :ref="item.component_props.name" 15 :ref="item.component_props.name"
16 - v-for="(item, index) in formData" 16 + v-for="(item, index) in mockData"
17 :key="index" 17 :key="index"
18 :is="item.component" 18 :is="item.component"
19 :item="item" 19 :item="item"
...@@ -85,9 +85,30 @@ onMounted(async () => { ...@@ -85,9 +85,30 @@ onMounted(async () => {
85 value: "", 85 value: "",
86 component: "", 86 component: "",
87 component_props: { 87 component_props: {
88 - name: "contact", 88 + name: "multi_rule",
89 - tel: "13765765676", 89 + label: "同意活动规则之后才可提交",
90 - qr_code: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", 90 + required: "1",
91 + count: "2",
92 + rules: [
93 + {
94 + rule_desc: "同意规则条款以及后续附录1",
95 + rule_link: "活动规则",
96 + rule_content:
97 + "<div style='text-align:justify;'><h3>1活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
98 + },
99 + {
100 + rule_desc: "同意规则条款以及后续附录2",
101 + rule_link: "活动规则",
102 + rule_content:
103 + "<div style='text-align:justify;'><h3>2活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
104 + },
105 + {
106 + rule_desc: "同意规则条款以及后续附录2",
107 + rule_link: "活动规则",
108 + rule_content:
109 + "<div style='text-align:justify;'><h3>2活动规则</h3><p>这是活动规则</p><p>更多活动规则</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, cupiditate quibusdam debitis nesciunt iste pariatur quisquam in at deserunt nobis! Temporibus excepturi ipsum cum nobis nesciunt unde nemo aliquam odio?</p></div>",
110 + },
111 + ],
91 }, 112 },
92 }, 113 },
93 ]; 114 ];
......