|
|
@@ -0,0 +1,147 @@
|
|
|
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
|
|
|
+<script setup lang="ts">
|
|
|
+import { request } from '@/utils/request'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { renderMap, type CustomerOptions } from './H5-form'
|
|
|
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
|
|
+
|
|
|
+const customerOptions = ref<CustomerOptions>({} as CustomerOptions)
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const defaultValue = ref<Record<string, string | string[]>>({})
|
|
|
+const rules = ref<Record<string, FormRules>>({})
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+const hasOptions = (type: string) => type === 'select' || type === 'checkbox' || type === 'radio'
|
|
|
+
|
|
|
+const onSubmit = async (formEl: FormInstance | undefined) => {
|
|
|
+ // 预览不需要提交
|
|
|
+ console.log(formEl, ElMessage)
|
|
|
+
|
|
|
+ // loading.value = true
|
|
|
+ // if (!formEl) return
|
|
|
+ // const result = []
|
|
|
+ // for (const field_name in defaultValue.value) {
|
|
|
+ // if (field_name in rules.value) {
|
|
|
+ // if (defaultValue.value[field_name] === '' || defaultValue.value[field_name] === undefined) {
|
|
|
+ // loading.value = false
|
|
|
+ // ElMessage.error('请填写' + field_name)
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // const item = customerOptions.value.form_field.find((item) => item.field_name === field_name)
|
|
|
+ // result.push({
|
|
|
+ // field_name,
|
|
|
+ // field_content: defaultValue.value[field_name],
|
|
|
+ // field_type: item?.props?.type || item?.field_type,
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // request({
|
|
|
+ // method: 'post',
|
|
|
+ // url: '/customer_form/submit_data',
|
|
|
+ // data: {
|
|
|
+ // submit_data: result,
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // loading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ const id = location.search?.substring(1).split('=')[1] || ''
|
|
|
+ if (!id) return
|
|
|
+ const res = await request<CustomerOptions>({
|
|
|
+ url: '/customer_form/get_detail',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ res.data.form_field = res.data.form_field.map((item) => {
|
|
|
+ // 将文本域改为输入框
|
|
|
+ if (item.field_type === 'textarea') {
|
|
|
+ item.field_type = 'input'
|
|
|
+ item.props = {
|
|
|
+ type: 'textarea',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 自定义组件
|
|
|
+ if (hasOptions(item.field_type)) {
|
|
|
+ item.render = renderMap[item.field_type]
|
|
|
+ }
|
|
|
+ // 设置校验规则
|
|
|
+ if (item.is_required) {
|
|
|
+ // @ts-ignore
|
|
|
+ rules.value[item.field_name] = [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: item.field_name + '是必须的',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if (!item.default_text) return item
|
|
|
+ // 设置默认值
|
|
|
+ if (item.field_type === 'checkbox') {
|
|
|
+ defaultValue.value[item.field_name] = [item.default_text]
|
|
|
+ } else {
|
|
|
+ defaultValue.value[item.field_name] = item.default_text
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ customerOptions.value = res.data
|
|
|
+})
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <el-scrollbar height="100%" class="contariner">
|
|
|
+ <img :src="customerOptions.cover" width="100%" alt="" />
|
|
|
+ <div class="title">{{ customerOptions.title }}</div>
|
|
|
+ <div class="form" v-if="customerOptions.form_field">
|
|
|
+ <el-form ref="ruleFormRef" :model="defaultValue" label-width="auto" label-position="top">
|
|
|
+ <el-form-item
|
|
|
+ :label="`${index + 1}、${field.field_name} ${field.is_required ? '(必填)' : ''}`"
|
|
|
+ v-for="(field, index) in customerOptions.form_field"
|
|
|
+ :key="field.field_name"
|
|
|
+ :props="field.field_name"
|
|
|
+ class="form-item"
|
|
|
+ >
|
|
|
+ <component
|
|
|
+ v-if="!hasOptions(field.field_type)"
|
|
|
+ :is="`el-${field.field_type}`"
|
|
|
+ v-model="defaultValue[field.field_name]"
|
|
|
+ />
|
|
|
+ <component v-else :is="field.render?.(field, defaultValue)" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="width: 100%"
|
|
|
+ @click="onSubmit(ruleFormRef)"
|
|
|
+ :loading="loading"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+</template>
|
|
|
+<style>
|
|
|
+body {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ color: #333;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bolder;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.form {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+</style>
|
