Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b8477185 1 parent c7759031

fix

Inline Side-by-side
Showing 1 changed file with 38 additions and 57 deletions
...@@ -89,7 +89,7 @@ const model = $route.query.model; ...@@ -89,7 +89,7 @@ const model = $route.query.model;
89 const formatData = (data) => { 89 const formatData = (data) => {
90 const arr = []; 90 const arr = [];
91 data.forEach((field) => { 91 data.forEach((field) => {
92 - // 解析组件属性 92 + // 生成组件属性
93 const component_props = { 93 const component_props = {
94 name: field.component_code, 94 name: field.component_code,
95 }; 95 };
...@@ -160,26 +160,6 @@ onMounted(async () => { ...@@ -160,26 +160,6 @@ onMounted(async () => {
160 // label: "同意活动规则之后才可提交", 160 // label: "同意活动规则之后才可提交",
161 // required: "1", 161 // required: "1",
162 // count: "2", 162 // count: "2",
163 - // rules: [
164 - // {
165 - // rule_desc: "同意规则条款以及后续附录1",
166 - // rule_link: "活动规则",
167 - // rule_content:
168 - // "<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>",
169 - // },
170 - // {
171 - // rule_desc: "同意规则条款以及后续附录2",
172 - // rule_link: "活动规则",
173 - // rule_content:
174 - // "<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>",
175 - // },
176 - // {
177 - // rule_desc: "同意规则条款以及后续附录2",
178 - // rule_link: "活动规则",
179 - // rule_content:
180 - // "<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>",
181 - // },
182 - // ],
183 // }, 163 // },
184 // }, 164 // },
185 // ]; 165 // ];
...@@ -188,43 +168,14 @@ onMounted(async () => { ...@@ -188,43 +168,14 @@ onMounted(async () => {
188 createComponentType(formData.value); 168 createComponentType(formData.value);
189 }); 169 });
190 170
171 +// 处理没有绑定值的组件的赋值
172 +// 图片上传，电子签名，评分组件
191 const image_uploader = ref(null); 173 const image_uploader = ref(null);
192 const sign = ref(null); 174 const sign = ref(null);
193 const rate_picker = ref(null); 175 const rate_picker = ref(null);
194 -const video = ref(null);
195 -
196 -const onSubmit = async (values) => {
197 - // 合并自定义字段到提交表单字段
198 - postData.value = _.assign(postData.value, values);
199 - // 格式化value值为json格式, 提交格式有问题
200 - for (let key in postData.value) {
201 - key = JSON.stringify(key);
202 - // postData.value[key] = postData.value[key];
203 - }
204 - // 检查非表单输入项
205 - if (validOther().status) {
206 - // 通过验证
207 - const result = await addFormDataAPI({
208 - form_code: $route.query.code,
209 - // data: JSON.stringify(postData.value),
210 - data: postData.value,
211 - });
212 - if (result.code) {
213 - showSuccessToast("提交成功");
214 - }
215 - // console.warn(postData.value);
216 - // console.warn("通过验证");
217 - } else {
218 - console.warn(validOther().key + "不通过验证");
219 - // 图片上传控件报错提示
220 - if (validOther().key === "image_uploader") {
221 - showFailToast("图片上传为空");
222 - }
223 - }
224 -};
225 176
177 +// 操作绑定自定义字段回调
226 const onActive = (item) => { 178 const onActive = (item) => {
227 - // 返回自定义字段
228 if (item.key === "image_uploader") { 179 if (item.key === "image_uploader") {
229 postData.value[item.filed_name] = item.value; 180 postData.value[item.filed_name] = item.value;
230 } 181 }
...@@ -236,28 +187,28 @@ const onActive = (item) => { ...@@ -236,28 +187,28 @@ const onActive = (item) => {
236 } 187 }
237 }; 188 };
238 189
190 +// 检验没有绑定name的输入项
239 const validOther = () => { 191 const validOther = () => {
240 - // 检验没有绑定name的输入项
241 let valid = { 192 let valid = {
242 status: true, 193 status: true,
243 key: "", 194 key: "",
244 }; 195 };
245 if (image_uploader.value) { 196 if (image_uploader.value) {
246 - // 检验图片上传 197 + // 图片上传
247 valid = { 198 valid = {
248 status: image_uploader.value[0].validImageUploader(), 199 status: image_uploader.value[0].validImageUploader(),
249 key: "image_uploader", 200 key: "image_uploader",
250 }; 201 };
251 } 202 }
252 if (sign.value) { 203 if (sign.value) {
253 - // 检验电子签名 204 + // 电子签名
254 valid = { 205 valid = {
255 status: sign.value[0].validSign(), 206 status: sign.value[0].validSign(),
256 key: "sign", 207 key: "sign",
257 }; 208 };
258 } 209 }
259 if (rate_picker.value) { 210 if (rate_picker.value) {
260 - // 检验评分 211 + // 评分组件
261 valid = { 212 valid = {
262 status: rate_picker.value[0].validRate(), 213 status: rate_picker.value[0].validRate(),
263 key: "rate_picker", 214 key: "rate_picker",
...@@ -265,6 +216,36 @@ const validOther = () => { ...@@ -265,6 +216,36 @@ const validOther = () => {
265 } 216 }
266 return valid; 217 return valid;
267 }; 218 };
219 +
220 +const onSubmit = async (values) => {
221 + // 合并自定义字段到提交表单字段
222 + postData.value = _.assign(postData.value, values);
223 + // 格式化value值为json格式, 提交格式有问题
224 + for (let key in postData.value) {
225 + key = JSON.stringify(key);
226 + // postData.value[key] = postData.value[key];
227 + }
228 + // 检查非表单输入项
229 + if (validOther().status) {
230 + // 通过验证
231 + const result = await addFormDataAPI({
232 + form_code: $route.query.code,
233 + // data: JSON.stringify(postData.value),
234 + data: postData.value,
235 + });
236 + if (result.code) {
237 + showSuccessToast("提交成功");
238 + }
239 + // console.warn(postData.value);
240 + // console.warn("通过验证");
241 + } else {
242 + console.warn(validOther().key + "不通过验证");
243 + // 图片上传控件报错提示
244 + if (validOther().key === "image_uploader") {
245 + showFailToast("图片上传为空");
246 + }
247 + }
248 +};
268 </script> 249 </script>
269 250
270 <style lang="less" scoped> 251 <style lang="less" scoped>
......