Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
daf28ce1 1 parent a9e5fa18

✨ feat(测试表单渲染结构和保存表单数据):

Inline Side-by-side
Showing 9 changed files with 366 additions and 271 deletions
...@@ -14,7 +14,7 @@ VITE_ID = 13761653761 ...@@ -14,7 +14,7 @@ VITE_ID = 13761653761
14 VITE_PIN = 14 VITE_PIN =
15 15
16 # 反向代理服务器地址 16 # 反向代理服务器地址
17 -# VITE_PROXY_TARGET = http://oa-dev.onwall.cn 17 +VITE_PROXY_TARGET = http://oa-dev.onwall.cn
18 # VITE_PROXY_TARGET = http://guanzong.onwall.cn 18 # VITE_PROXY_TARGET = http://guanzong.onwall.cn
19 19
20 # PC端地址 20 # PC端地址
......
...@@ -11,7 +11,7 @@ VITE_APP_ID = ...@@ -11,7 +11,7 @@ VITE_APP_ID =
11 VITE_APP_PIN = 11 VITE_APP_PIN =
12 12
13 # 反向代理服务器地址 13 # 反向代理服务器地址
14 -# VITE_PROXY_TARGET = http://guanzong.onwall.cn 14 +VITE_PROXY_TARGET = http://oa.onwall.cn
15 15
16 # PC端地址 16 # PC端地址
17 # VITE_MOBILE_URL = http://oa.onwall.cn/f/guanzong/web/ 17 # VITE_MOBILE_URL = http://oa.onwall.cn/f/guanzong/web/
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-09-06 16:24:19 5 + * @LastEditTime: 2022-11-17 13:34:07
6 * @FilePath: /data-table/src/App.vue 6 * @FilePath: /data-table/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -16,37 +16,39 @@ ...@@ -16,37 +16,39 @@
16 </template> 16 </template>
17 17
18 <script setup> 18 <script setup>
19 -import { mainStore, useTitle } from '@/utils/generatePackage' 19 +import { mainStore, useTitle } from "@/utils/generatePackage";
20 -import { computed, watchEffect, onMounted } from 'vue'; 20 +import { computed, watchEffect, onMounted } from "vue";
21 -import { useRoute, useRouter } from 'vue-router' 21 +import { useRoute, useRouter } from "vue-router";
22 -import { Toast } from 'vant'; 22 +import { Toast } from "vant";
23 // 会根据配置判断是否显示调试控件 23 // 会根据配置判断是否显示调试控件
24 // eslint-disable-next-line no-unused-vars 24 // eslint-disable-next-line no-unused-vars
25 -import vConsole from '@/utils/vconsole' 25 +import vConsole from "@/utils/vconsole";
26 // 初始化WX环境 26 // 初始化WX环境
27 // import wx from 'weixin-js-sdk' 27 // import wx from 'weixin-js-sdk'
28 // import { wxJsAPI } from '@/api/wx/config' 28 // import { wxJsAPI } from '@/api/wx/config'
29 // import { apiList } from '@/api/wx/jsApiList.js' 29 // import { apiList } from '@/api/wx/jsApiList.js'
30 -import { wxInfo } from '@/utils/tools' 30 +import { wxInfo } from "@/utils/tools";
31 31
32 // 使用 include + pinia 状态管理动态缓存页面 32 // 使用 include + pinia 状态管理动态缓存页面
33 -const store = mainStore() 33 +const store = mainStore();
34 -const keepPages = computed(() => store.getKeepPages) 34 +const keepPages = computed(() => store.getKeepPages);
35 35
36 // // TAG: 全局设置页面标题 36 // // TAG: 全局设置页面标题
37 // const $route = useRoute(); 37 // const $route = useRoute();
38 -watchEffect( 38 +watchEffect(() => useTitle("表单标题"));
39 - () => useTitle('表单标题')
40 -)
41 // 监听路由变化 39 // 监听路由变化
42 // 切换路由页面返回顶部 40 // 切换路由页面返回顶部
43 const $router = useRouter(); 41 const $router = useRouter();
44 -watch(() => $router.currentRoute.value, (newValue, oldValue) => { 42 +watch(
43 + () => $router.currentRoute.value,
44 + (newValue, oldValue) => {
45 nextTick(() => { 45 nextTick(() => {
46 // document.getElementById('app')?.scrollIntoView(); 46 // document.getElementById('app')?.scrollIntoView();
47 - }) 47 + });
48 // console.warn(wxInfo().isMobile); 48 // console.warn(wxInfo().isMobile);
49 -}, { immediate: true }) 49 + },
50 + { immediate: true }
51 +);
50 52
51 // TAG: 全局配置Toast 53 // TAG: 全局配置Toast
52 // Toast.setDefaultOptions({ 54 // Toast.setDefaultOptions({
...@@ -55,7 +57,7 @@ watch(() => $router.currentRoute.value, (newValue, oldValue) => { ...@@ -55,7 +57,7 @@ watch(() => $router.currentRoute.value, (newValue, oldValue) => {
55 // }); 57 // });
56 58
57 // web端判断 59 // web端判断
58 -const is_pc = computed(() => wxInfo().isPC) 60 +const is_pc = computed(() => wxInfo().isPC);
59 61
60 onMounted(async () => { 62 onMounted(async () => {
61 // const { data } = await wxJsAPI(); 63 // const { data } = await wxJsAPI();
...@@ -67,18 +69,20 @@ onMounted(async () => { ...@@ -67,18 +69,20 @@ onMounted(async () => {
67 // wx.error((err) => { 69 // wx.error((err) => {
68 // console.warn(err); 70 // console.warn(err);
69 // }); 71 // });
70 -}) 72 +});
71 </script> 73 </script>
72 74
73 <style lang="less"> 75 <style lang="less">
74 -@prefix: ~'@{namespace}-x'; 76 +@prefix: ~"@{namespace}-x";
75 77
76 html, 78 html,
77 body { 79 body {
78 width: 100%; 80 width: 100%;
79 height: 100%; 81 height: 100%;
80 color: @base-font-color; 82 color: @base-font-color;
81 - background-color: #F7F8FA; 83 + background-color: #f7f8fa;
84 + padding: 0;
85 + margin: 0;
82 } 86 }
83 87
84 body { 88 body {
......
1 +/*
2 + * @Date: 2022-06-17 14:54:29
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-17 13:49:35
5 + * @FilePath: /data-table/src/api/data.js
6 + * @Description: 表单数据接口
7 + */
8 +import { fn, fetch } from '@/api/fn';
9 +
10 +const Api = {
11 + ADD_FORM_DATA: '/srv/?a=add_formdata',
12 +}
13 +/**
14 + * @description: 添加表单数据
15 + * @param: form_code 表单唯一标识
16 + * @param: data 待添加的数据，json对象结构；键值对记录变更的字段和值；
17 + */
18 +export const addFormDataAPI = (params) => fn(fetch.post(Api.ADD_FORM_DATA, params));
1 +/*
2 + * @Date: 2022-06-17 14:54:29
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-17 10:41:39
5 + * @FilePath: /data-table/src/api/form.js
6 + * @Description: 表单接口
7 + */
8 +import { fn, fetch } from '@/api/fn';
9 +
10 +const Api = {
11 + FORM_QUERY: '/srv/?a=query_form',
12 +}
13 +/**
14 + * @description: 查询表单
15 + * @param: client_id 主体客户id
16 + * @param: form_code 表单唯一标识
17 + * @param: name 表单名称，模糊查询
18 + */
19 +export const queryFormAPI = (params) => fn(fetch.get(Api.FORM_QUERY, params));
1 /* 1 /*
2 * @Date: 2022-06-17 14:54:29 2 * @Date: 2022-06-17 14:54:29
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-08-29 13:58:16 4 + * @LastEditTime: 2022-11-17 13:46:01
5 * @FilePath: /data-table/src/api/index.js 5 * @FilePath: /data-table/src/api/index.js
6 * @Description: 首页接口 6 * @Description: 首页接口
7 */ 7 */
...@@ -9,7 +9,7 @@ import { fn, fetch } from '@/api/fn'; ...@@ -9,7 +9,7 @@ import { fn, fetch } from '@/api/fn';
9 9
10 const Api = { 10 const Api = {
11 INDEX: '/srv/?a=home_page', 11 INDEX: '/srv/?a=home_page',
12 - 12 +}
13 /** 13 /**
14 * @description: 首页接口 14 * @description: 首页接口
15 * @returns HOMEBANNER 轮播区 15 * @returns HOMEBANNER 轮播区
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-28 10:17:40 3 * @Date: 2022-05-28 10:17:40
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-09-06 18:01:36 5 + * @LastEditTime: 2022-11-17 10:17:01
6 * @FilePath: /data-table/src/utils/axios.js 6 * @FilePath: /data-table/src/utils/axios.js
7 * @Description: 7 * @Description:
8 */ 8 */
...@@ -13,7 +13,7 @@ import { strExist } from '@/utils/tools' ...@@ -13,7 +13,7 @@ import { strExist } from '@/utils/tools'
13 // import { parseQueryString } from '@/utils/tools' 13 // import { parseQueryString } from '@/utils/tools'
14 14
15 axios.defaults.params = { 15 axios.defaults.params = {
16 - f: 'customize', 16 + f: 'custom_form',
17 }; 17 };
18 18
19 /** 19 /**
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-16 17:32:55 4 + * @LastEditTime: 2022-11-17 14:08:01
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -11,302 +11,355 @@ ...@@ -11,302 +11,355 @@
11 <div class="table-box"> 11 <div class="table-box">
12 <van-form @submit="onSubmit"> 12 <van-form @submit="onSubmit">
13 <van-cell-group> 13 <van-cell-group>
14 - <component :ref="item.component_props.name" v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" @active="onActive" /> 14 + <component
15 + :ref="item.component_props.name"
16 + v-for="(item, index) in formData"
17 + :key="index"
18 + :is="item.component"
19 + :item="item"
20 + @active="onActive"
21 + />
15 </van-cell-group> 22 </van-cell-group>
16 - <div style="margin: 16px;"> 23 + <div style="margin: 16px">
17 - <van-button round block type="primary" native-type="submit"> 24 + <van-button round block type="primary" native-type="submit"> 提交 </van-button>
18 - 提交
19 - </van-button>
20 </div> 25 </div>
21 </van-form> 26 </van-form>
22 </div> 27 </div>
23 </template> 28 </template>
24 29
25 <script setup> 30 <script setup>
26 -import { createComponentType } from '@/hooks/useComponentType' 31 +import { createComponentType } from "@/hooks/useComponentType";
27 -import _ from 'lodash' 32 +import _ from "lodash";
33 +import { useRoute } from "vue-router";
34 +import { queryFormAPI } from "@/api/form.js";
35 +import { addFormDataAPI } from "@/api/data.js";
28 36
29 -const table_cover = ref(''); 37 +const $route = useRoute();
30 -const table_title = ref(''); 38 +const table_cover = ref("");
39 +const table_title = ref("");
31 const mockData = ref([]); 40 const mockData = ref([]);
32 -const postData = ref({}) 41 +const formData = ref([]);
42 +const postData = ref({});
33 43
34 -onMounted(() => { 44 +// 格式化表单数据结构
35 - table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg' 45 +const formatData = (data) => {
36 - table_title.value = '这是一个表单的描述' 46 + const arr = [];
37 - mockData.value = [ 47 + data.forEach((field) => {
48 + // 解析组件属性
49 + const component_props = {
50 + name: field.component_code,
51 + };
52 + field.property_list.forEach((prop) => {
53 + const key = prop["property_code"];
54 + const obj = {
55 + [key]:
56 + prop["setting_value"].length > 1
57 + ? prop["setting_value"]
58 + : prop["setting_value"][0],
59 + };
60 + Object.assign(component_props, obj);
61 + });
62 + arr.push({
63 + key: field.field_name,
64 + value: "",
65 + component: "",
66 + component_props,
67 + });
68 + });
69 + return arr;
70 +};
71 +
72 +onMounted(async () => {
73 + const { data } = await queryFormAPI({ form_code: $route.query.code });
74 + const form_data = data[0];
75 + table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
76 + table_title.value = form_data.description;
77 + formData.value = formatData(form_data.field_list);
78 + // mockData.value = [
38 // { 79 // {
39 - // key: 'phone', 80 + // key: "phone",
40 - // value: '', 81 + // value: "",
41 - // component: '', 82 + // component: "",
42 // component_props: { 83 // component_props: {
43 - // name: 'phone', 84 + // name: "phone",
44 - // label: '手机号', 85 + // label: "手机号",
45 - // placeholder: '请输入手机号', 86 + // placeholder: "请输入手机号",
46 // required: true, 87 // required: true,
47 // }, 88 // },
48 // }, 89 // },
49 // { 90 // {
50 - // key: 'username', 91 + // key: "field_1",
51 - // value: 'test', 92 + // value: "test",
52 - // component: '', 93 + // component: "",
53 // component_props: { 94 // component_props: {
54 - // name: 'text', 95 + // name: "text",
55 - // label: '用户名', 96 + // label: "用户名",
56 - // placeholder: '请输入用户名', 97 + // placeholder: "请输入用户名",
57 // required: true, 98 // required: true,
58 // readonly: true, 99 // readonly: true,
59 // disabled: true, 100 // disabled: true,
60 - // align: 'left', 101 + // align: "left",
61 - // },
62 - // },
63 - // {
64 - // key: 'email',
65 - // value: '',
66 - // component: '',
67 - // component_props: {
68 - // name: 'email',
69 - // label: '邮箱',
70 - // placeholder: '请输入邮箱',
71 - // required: true,
72 - // },
73 - // },
74 - // {
75 - // key: 'id_code',
76 - // value: '',
77 - // component: '',
78 - // component_props: {
79 - // name: 'id_code',
80 - // label: '身份证号码',
81 - // placeholder: '请输入身份证号码',
82 - // required: true,
83 - // },
84 - // },
85 - // {
86 - // key: 'age',
87 - // value: '',
88 - // component: '',
89 - // component_props: {
90 - // label: '年龄',
91 - // placeholder: '请输入年龄',
92 - // name: 'number',
93 - // required: true,
94 - // },
95 - // },
96 - {
97 - key: 'gender',
98 - value: '',
99 - component: '',
100 - component_props: {
101 - name: 'radio',
102 - label: '性别',
103 - placeholder: '',
104 - direction: 'horizontal',
105 - options: [{
106 - key: '男',
107 - value: '男'
108 - }, {
109 - key: '女',
110 - value: '女'
111 - }],
112 - required: true,
113 - },
114 - },
115 - // {
116 - // key: 'hobby',
117 - // value: [],
118 - // label: '兴趣爱好',
119 - // component: '',
120 - // component_props: {
121 - // name: 'checkbox',
122 - // direction: 'horizontal',
123 - // max: '3'
124 - // },
125 - // options: [{
126 - // key: '足球',
127 - // value: '足球'
128 - // }, {
129 - // key: '篮球',
130 - // value: '篮球'
131 - // }, {
132 - // key: '羽毛球',
133 - // value: '羽毛球'
134 - // }, {
135 - // key: '乒乓球',
136 - // value: '乒乓球'
137 - // }]
138 - // },
139 - // {
140 - // key: 'message',
141 - // value: '一种可以用来记录，展示文字信息的载体，有比较强的时效性。一般以黑板、木板为载体。用来留言。各种各样的留言使用。留言板还有引申的“网络留言板”。这个和网络留言本不一样的地方是留言板一般比较集中的反应信息的。',
142 - // label: '留言',
143 - // placeholder: '请输入留言',
144 - // component: '',
145 - // component_props: {
146 - // name: 'textarea',
147 - // rows: 3,
148 - // maxlength: null,
149 - // },
150 - // },
151 - // {
152 - // key: 'vehicle',
153 - // value: '自行车',
154 - // label: '交通工具',
155 - // placeholder: '请选择交通工具',
156 - // component: '',
157 - // component_props: {
158 - // name: 'picker'
159 // }, 102 // },
160 - // options: [
161 - // { text: '自行车', value: '自行车' },
162 - // { text: '汽车', value: '汽车' },
163 - // { text: '地铁', value: '地铁' },
164 - // ],
165 - // required: true,
166 - // },
167 - // {
168 - // key: 'sign',
169 - // value: '',
170 - // label: '电子签名',
171 - // placeholder: '',
172 - // component: '',
173 - // component_props: {
174 - // name: 'sign',
175 - // },
176 - // required: true,
177 - // },
178 - // {
179 - // key: 'city',
180 - // value: '天津市/天津市/和平区',
181 - // city_code: '120101',
182 - // label: '地址',
183 - // address: '',
184 - // placeholder: '请选择省市区',
185 - // component_props: {
186 - // name: 'area_picker'
187 // }, 103 // },
188 - // }, 104 + // // {
189 - // { 105 + // // key: 'email',
190 - // key: 'date', 106 + // // value: '',
191 - // value: '2022-10', 107 + // // component: '',
192 - // label: '日期选择', 108 + // // component_props: {
193 - // placeholder: '请选择日期', 109 + // // name: 'email',
194 - // component_props: { 110 + // // label: '邮箱',
195 - // name: 'date_picker', 111 + // // placeholder: '请输入邮箱',
196 - // title: '请选择', 112 + // // required: true,
197 - // min_date: new Date(), 113 + // // },
198 - // columns_type: ['year', 'month'] 114 + // // },
199 - // }, 115 + // // {
200 - // }, 116 + // // key: 'id_code',
201 - // { 117 + // // value: '',
202 - // key: 'time', 118 + // // component: '',
203 - // value: '', 119 + // // component_props: {
204 - // label: '时间选择', 120 + // // name: 'id_code',
205 - // placeholder: '请选择时间', 121 + // // label: '身份证号码',
206 - // component_props: { 122 + // // placeholder: '请输入身份证号码',
207 - // name: 'time_picker', 123 + // // required: true,
208 - // title: '请选择', 124 + // // },
209 - // columns_type: ['hour', 'minute'] 125 + // // },
210 - // }, 126 + // // {
211 - // required: true, 127 + // // key: 'age',
212 - // }, 128 + // // value: '',
213 - // { 129 + // // component: '',
214 - // key: 'image_src', 130 + // // component_props: {
215 - // value: '', 131 + // // label: '年龄',
216 - // label: '图片上传', 132 + // // placeholder: '请输入年龄',
217 - // component_props: { 133 + // // name: 'number',
218 - // name: 'image_uploader', 134 + // // required: true,
219 - // image_type: ['jpg', 'png'], 135 + // // },
220 - // multiple: false 136 + // // },
221 - // } 137 + // // {
222 - // } 138 + // // key: 'gender',
223 - // { 139 + // // value: '',
224 - // key: 'datetime', 140 + // // component: '',
225 - // value: '2022-06-01 12:00', 141 + // // component_props: {
226 - // component_props: { 142 + // // name: 'radio',
227 - // name: 'datetime_picker', 143 + // // label: '性别',
228 - // title: '请选择', 144 + // // placeholder: '',
229 - // label: '日期时间', 145 + // // direction: 'horizontal',
230 - // placeholder: '请选择日期时间', 146 + // // options: [{
231 - // minDate: new Date(), 147 + // // key: '男',
232 - // required: true, 148 + // // value: '男'
233 - // }, 149 + // // }, {
234 - // }, 150 + // // key: '女',
235 - // { 151 + // // value: '女'
236 - // key: 'date', 152 + // // }],
237 - // value: '', 153 + // // required: true,
238 - // label: '日历选择', 154 + // // },
239 - // placeholder: '请选择日历日期', 155 + // // },
240 - // component: '', 156 + // // {
241 - // component_props: { 157 + // // key: 'hobby',
242 - // name: 'calendar', 158 + // // value: [],
243 - // type: 'range', // 日期区间 ['multiple', 'range'] 159 + // // component: '',
244 - // minDate: new Date(2022, 0, 1), // 最小日期 160 + // // component_props: {
245 - // maxDate: new Date(2023, 0, 31), // 最大日期 161 + // // name: 'checkbox',
246 - // maxRange: 5, // 最大可选天数 162 + // // label: '兴趣爱好',
247 - // }, 163 + // // placeholder: '',
248 - // required: false, 164 + // // direction: 'horizontal',
249 - // }, 165 + // // max: '3',
250 - // { 166 + // // options: [{
251 - // key: 'rate', 167 + // // key: '足球',
252 - // value: '', 168 + // // value: '足球'
253 - // label: '评分', 169 + // // }, {
254 - // placeholder: '请选择评分', 170 + // // key: '篮球',
255 - // component_props: { 171 + // // value: '篮球'
256 - // name: 'rate_picker', 172 + // // }, {
257 - // count: 10 173 + // // key: '羽毛球',
258 - // }, 174 + // // value: '羽毛球'
259 - // required: true, 175 + // // }, {
260 - // } 176 + // // key: '乒乓球',
261 - ]; 177 + // // value: '乒乓球'
178 + // // }],
179 + // // },
180 + // // },
181 + // // {
182 + // // key: 'message',
183 + // // value: '一种可以用来记录，展示文字信息的载体，有比较强的时效性。一般以黑板、木板为载体。用来留言。各种各样的留言使用。留言板还有引申的“网络留言板”。这个和网络留言本不一样的地方是留言板一般比较集中的反应信息的。',
184 + // // label: '留言',
185 + // // placeholder: '请输入留言',
186 + // // component: '',
187 + // // component_props: {
188 + // // name: 'textarea',
189 + // // rows: 3,
190 + // // maxlength: null,
191 + // // },
192 + // // },
193 + // // {
194 + // // key: 'vehicle',
195 + // // value: '自行车',
196 + // // label: '交通工具',
197 + // // placeholder: '请选择交通工具',
198 + // // component: '',
199 + // // component_props: {
200 + // // name: 'picker'
201 + // // },
202 + // // options: [
203 + // // { text: '自行车', value: '自行车' },
204 + // // { text: '汽车', value: '汽车' },
205 + // // { text: '地铁', value: '地铁' },
206 + // // ],
207 + // // required: true,
208 + // // },
209 + // // {
210 + // // key: 'sign',
211 + // // value: '',
212 + // // label: '电子签名',
213 + // // placeholder: '',
214 + // // component: '',
215 + // // component_props: {
216 + // // name: 'sign',
217 + // // },
218 + // // required: true,
219 + // // },
220 + // // {
221 + // // key: 'city',
222 + // // value: '天津市/天津市/和平区',
223 + // // city_code: '120101',
224 + // // label: '地址',
225 + // // address: '',
226 + // // placeholder: '请选择省市区',
227 + // // component_props: {
228 + // // name: 'area_picker'
229 + // // },
230 + // // },
231 + // // {
232 + // // key: 'date',
233 + // // value: '2022-10',
234 + // // label: '日期选择',
235 + // // placeholder: '请选择日期',
236 + // // component_props: {
237 + // // name: 'date_picker',
238 + // // title: '请选择',
239 + // // min_date: new Date(),
240 + // // columns_type: ['year', 'month']
241 + // // },
242 + // // },
243 + // // {
244 + // // key: 'time',
245 + // // value: '',
246 + // // label: '时间选择',
247 + // // placeholder: '请选择时间',
248 + // // component_props: {
249 + // // name: 'time_picker',
250 + // // title: '请选择',
251 + // // columns_type: ['hour', 'minute']
252 + // // },
253 + // // required: true,
254 + // // },
255 + // // {
256 + // // key: 'image_src',
257 + // // value: '',
258 + // // label: '图片上传',
259 + // // component_props: {
260 + // // name: 'image_uploader',
261 + // // image_type: ['jpg', 'png'],
262 + // // multiple: false
263 + // // }
264 + // // }
265 + // // {
266 + // // key: 'datetime',
267 + // // value: '2022-06-01 12:00',
268 + // // component_props: {
269 + // // name: 'datetime_picker',
270 + // // title: '请选择',
271 + // // label: '日期时间',
272 + // // placeholder: '请选择日期时间',
273 + // // minDate: new Date(),
274 + // // required: true,
275 + // // },
276 + // // },
277 + // // {
278 + // // key: 'date',
279 + // // value: '',
280 + // // label: '日历选择',
281 + // // placeholder: '请选择日历日期',
282 + // // component: '',
283 + // // component_props: {
284 + // // name: 'calendar',
285 + // // type: 'range', // 日期区间 ['multiple', 'range']
286 + // // minDate: new Date(2022, 0, 1), // 最小日期
287 + // // maxDate: new Date(2023, 0, 31), // 最大日期
288 + // // maxRange: 5, // 最大可选天数
289 + // // },
290 + // // required: false,
291 + // // },
292 + // // {
293 + // // key: 'rate',
294 + // // value: '',
295 + // // label: '评分',
296 + // // placeholder: '请选择评分',
297 + // // component_props: {
298 + // // name: 'rate_picker',
299 + // // count: 10
300 + // // },
301 + // // required: true,
302 + // // }
303 + // ];
262 // 生成自定义组件 304 // 生成自定义组件
263 - createComponentType(mockData.value) 305 + createComponentType(formData.value);
264 -}) 306 +});
265 307
266 const sign = ref(null); 308 const sign = ref(null);
267 const rate_picker = ref(null); 309 const rate_picker = ref(null);
268 310
269 -const onSubmit = (values) => { 311 +const onSubmit = async (values) => {
270 // 合并自定义字段到提交表单字段 312 // 合并自定义字段到提交表单字段
271 postData.value = _.assign(postData.value, values); 313 postData.value = _.assign(postData.value, values);
272 // console.warn(mockData.value); 314 // console.warn(mockData.value);
273 // 检查非表单输入项 315 // 检查非表单输入项
274 - if (validOther()) { // 通过验证 316 + if (validOther()) {
275 - console.warn(postData.value); 317 + // 通过验证
276 - console.warn('通过验证'); 318 + const result = await addFormDataAPI({
319 + form_code: $route.query.code,
320 + data: JSON.stringify(postData.value),
321 + });
322 + console.warn(result);
323 + // if (code) {
324 + // console.warn("提交成功");
325 + // console.warn(data);
326 + // }
327 + // console.warn("通过验证");
277 } else { 328 } else {
278 - console.warn('不通过验证'); 329 + console.warn("不通过验证");
279 } 330 }
280 }; 331 };
281 332
282 const onActive = (item) => { 333 const onActive = (item) => {
283 // 返回自定义字段 334 // 返回自定义字段
284 - if (item.key === 'sign') { 335 + if (item.key === "sign") {
285 - postData.value['sign'] = item.value 336 + postData.value["sign"] = item.value;
286 } 337 }
287 - if (item.key === 'rate') { 338 + if (item.key === "rate") {
288 - postData.value['rate'] = item.value 339 + postData.value["rate"] = item.value;
289 } 340 }
290 -} 341 +};
291 342
292 const validOther = () => { 343 const validOther = () => {
293 // 检验没有绑定name的输入项 344 // 检验没有绑定name的输入项
294 let flag = true; 345 let flag = true;
295 - if (sign.value) { // 检验电子签名 346 + if (sign.value) {
347 + // 检验电子签名
296 flag = sign.value[0].validSign(); 348 flag = sign.value[0].validSign();
297 } 349 }
298 - if (rate_picker.value) { // 检验评分 350 + if (rate_picker.value) {
351 + // 检验评分
299 flag = rate_picker.value[0].validRate(); 352 flag = rate_picker.value[0].validRate();
300 } 353 }
301 return flag; 354 return flag;
302 -} 355 +};
303 </script> 356 </script>
304 357
305 <style lang="less" scoped> 358 <style lang="less" scoped>
306 - .table-title { 359 +.table-title {
307 padding: 1rem; 360 padding: 1rem;
308 - } 361 +}
309 - .table-box { 362 +.table-box {
310 padding: 1rem; 363 padding: 1rem;
311 - } 364 +}
312 </style> 365 </style>
......
...@@ -62,6 +62,7 @@ export default ({ command, mode }) => { ...@@ -62,6 +62,7 @@ export default ({ command, mode }) => {
62 "@css": path.resolve(__dirname, "src/assets/css"), 62 "@css": path.resolve(__dirname, "src/assets/css"),
63 "@mock": path.resolve(__dirname, "src/assets/mock"), 63 "@mock": path.resolve(__dirname, "src/assets/mock"),
64 "common": path.resolve(__dirname, "src/common"), 64 "common": path.resolve(__dirname, "src/common"),
65 + "@api": path.resolve(__dirname, "src/api"),
65 }, 66 },
66 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。 67 // dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
67 // conditions: [''], // 在解析包的 情景导出 时允许的附加条件。 68 // conditions: [''], // 在解析包的 情景导出 时允许的附加条件。
......