index.vue
10.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-22 17:59:56
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
<template>
<van-image v-if="table_cover" width="100%" height="200" :src="table_cover" />
<div v-if="table_title" class="table-title">{{ table_title }}</div>
<div class="table-box">
<van-form @submit="onSubmit">
<van-cell-group>
<component
:ref="item.component_props.name"
v-for="(item, index) in formData"
:key="index"
:is="item.component"
:item="item"
@active="onActive"
/>
</van-cell-group>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit"> 提交 </van-button>
</div>
</van-form>
</div>
</template>
<script setup>
import "@vant/touch-emulator";
import { createComponentType } from "@/hooks/useComponentType";
import _ from "lodash";
import { useRoute } from "vue-router";
import { queryFormAPI } from "@/api/form.js";
import { addFormDataAPI } from "@/api/data.js";
import { showSuccessToast, showFailToast } from "vant";
const $route = useRoute();
const table_cover = ref("");
const table_title = ref("");
const mockData = ref([]);
const formData = ref([]);
const postData = ref({});
// 格式化表单数据结构
const formatData = (data) => {
const arr = [];
data.forEach((field) => {
// 解析组件属性
const component_props = {
name: field.component_code,
};
field.property_list.forEach((prop) => {
const key = prop["property_code"];
const obj = {
[key]:
prop["setting_value"].length > 1
? prop["setting_value"]
: prop["setting_value"][0],
};
Object.assign(component_props, obj);
});
// 绑定组件名称标识
const temp = {
key: field.field_name,
value: "",
component: field.component_code,
component_props,
};
arr.push(temp);
});
return arr;
};
onMounted(async () => {
const { data } = await queryFormAPI({ form_code: $route.query.code });
const form_data = data[0];
table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
table_title.value = form_data.name;
formData.value = formatData(form_data.field_list);
// mockData.value = [
// {
// key: "",
// value: "",
// component: "",
// component_props: {
// name: "multi_rule",
// label: "同意活动规则之后才可提交",
// required: "1",
// count: "2",
// rules: [
// {
// rule_desc: "同意规则条款以及后续附录1",
// rule_link: "活动规则",
// rule_content:
// "<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>",
// },
// {
// rule_desc: "同意规则条款以及后续附录2",
// rule_link: "活动规则",
// rule_content:
// "<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>",
// },
// {
// rule_desc: "同意规则条款以及后续附录2",
// rule_link: "活动规则",
// rule_content:
// "<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>",
// },
// ],
// },
// },
// ];
// 生成自定义组件
createComponentType(mockData.value);
createComponentType(formData.value);
});
const sign = ref(null);
const rate_picker = ref(null);
const video = ref(null);
const onSubmit = async (values) => {
// 合并自定义字段到提交表单字段
postData.value = _.assign(postData.value, values);
// 检查非表单输入项
if (validOther()) {
// 通过验证
const result = await addFormDataAPI({
form_code: $route.query.code,
data: JSON.stringify(postData.value),
});
if (result.code) {
showSuccessToast("提交成功");
}
// console.warn(postData.value);
// console.warn("通过验证");
} else {
console.warn("不通过验证");
}
};
const onActive = (item) => {
// 返回自定义字段
if (item.key === "sign") {
postData.value["sign"] = item.value;
}
if (item.type === "rate") {
postData.value = _.assign(postData.value, { [item.key]: item.value });
}
};
const validOther = () => {
// 检验没有绑定name的输入项
let flag = true;
if (sign.value) {
// 检验电子签名
flag = sign.value[0].validSign();
}
if (rate_picker.value) {
// 检验评分
flag = rate_picker.value[0].validRate();
}
return flag;
};
</script>
<style lang="less" scoped>
.table-title {
padding: 1rem;
}
.table-box {
padding: 1rem;
}
</style>