Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
10055536 1 parent 5f2c9665

移除非必要模块

Inline Side-by-side
Showing 5 changed files with 15 additions and 469 deletions
1 -/*
2 - * @Date: 2022-11-17 14:46:43
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-17 16:32:19
5 - * @FilePath: /data-table/src/router/routes/modules/setForm/index.js
6 - * @Description: 文件描述
7 - */
8 -const index = [{
9 - path: '/addForm',
10 - name: '新增表单',
11 - component: () => import('@/views/setForm/addForm.vue'),
12 - meta: {
13 - title: '新增表单',
14 - name: 'addFormPage'
15 - },
16 - children: []
17 -}, {
18 - path: '/addField',
19 - name: '新增表单字段',
20 - component: () => import('@/views/setForm/addField.vue'),
21 - meta: {
22 - title: '新增表单字段',
23 - name: 'addFieldPage'
24 - },
25 - children: []
26 -}, {
27 - path: '/setField',
28 - name: '添加表单字段属性设置',
29 - component: () => import('@/views/setForm/setField.vue'),
30 - meta: {
31 - title: '添加表单字段属性设置',
32 - name: 'setFieldPage'
33 - },
34 - children: []
35 -}]
36 -
37 -export default index;
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-12-09 14:22:28 4 + * @LastEditTime: 2022-12-09 15:25:00
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -404,19 +404,20 @@ const onSubmit = async (values) => { ...@@ -404,19 +404,20 @@ const onSubmit = async (values) => {
404 postData.value = _.assign(postData.value, rest_data); 404 postData.value = _.assign(postData.value, rest_data);
405 // 检查非表单输入项 405 // 检查非表单输入项
406 if (validOther().status) { 406 if (validOther().status) {
407 - // 编辑模式不能提交数据 407 + console.warn(postData.value);
408 - if (model === 'edit') return false; 408 + // // 编辑模式不能提交数据
409 - // 通过验证 409 + // if (model === 'edit') return false;
410 - const result = await addFormDataAPI({ 410 + // // 通过验证
411 - form_code: $route.query.code, 411 + // const result = await addFormDataAPI({
412 - data: postData.value, 412 + // form_code: $route.query.code,
413 - }); 413 + // data: postData.value,
414 - if (result.code) { 414 + // });
415 - showSuccessToast("提交成功"); 415 + // if (result.code) {
416 - $router.push({ 416 + // showSuccessToast("提交成功");
417 - path: "/success", 417 + // $router.push({
418 - }); 418 + // path: "/success",
419 - } 419 + // });
420 + // }
420 } else { 421 } else {
421 console.warn(validOther().key + "不通过验证"); 422 console.warn(validOther().key + "不通过验证");
422 // // 图片上传控件报错提示 423 // // 图片上传控件报错提示
......
1 -<!--
2 - * @Date: 2022-11-17 15:44:24
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-17 16:15:33
5 - * @FilePath: /data-table/src/views/setForm/addField.vue
6 - * @Description: 文件描述
7 --->
8 -<template>
9 - <div class="add-field">
10 - <van-nav-bar title="添加表单字段" />
11 - <van-form @submit="onSubmit" style="margin-top: 1rem">
12 - <van-cell-group inset>
13 - <van-field
14 - v-model="form_name"
15 - name="form_name"
16 - is-link
17 - readonly
18 - label="表单名称"
19 - placeholder="表单名称"
20 - @click="showForm = true"
21 - required
22 - :rules="[{ required: true, message: '请选择表单名称' }]"
23 - />
24 - <van-field
25 - v-model="components_name"
26 - name="components_name"
27 - is-link
28 - readonly
29 - label="组件名称"
30 - placeholder="组件名称"
31 - @click="showComponents = true"
32 - required
33 - :rules="[{ required: true, message: '请选择组件名称' }]"
34 - />
35 - </van-cell-group>
36 - <div style="margin: 16px">
37 - <van-button round block type="primary" native-type="submit">确认</van-button>
38 - </div>
39 - </van-form>
40 - </div>
41 - <van-popup v-model:show="showForm" round position="bottom">
42 - <van-picker
43 - :columns="formColumns"
44 - @cancel="showForm = false"
45 - @confirm="onFormConfirm"
46 - />
47 - </van-popup>
48 - <van-popup v-model:show="showComponents" round position="bottom">
49 - <van-picker
50 - :columns="componentsColumns"
51 - @cancel="showComponents = false"
52 - @confirm="onComponentsConfirm"
53 - />
54 - </van-popup>
55 -</template>
56 -
57 -<script setup>
58 -import { ref } from "vue";
59 -import { useRoute, useRouter } from "vue-router";
60 -import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
61 -import { getComponentAPI } from "@/api/component.js";
62 -import { showSuccessToast, showFailToast } from "vant";
63 -
64 -import {
65 - Cookies,
66 - $,
67 - _,
68 - axios,
69 - storeToRefs,
70 - mainStore,
71 - Toast,
72 - useTitle,
73 -} from "@/utils/generatePackage.js";
74 -//import { } from '@/utils/generateModules.js'
75 -//import { } from '@/utils/generateIcons.js'
76 -//import { } from '@/composables'
77 -const $route = useRoute();
78 -const $router = useRouter();
79 -useTitle($route.meta.title);
80 -
81 -const form_name = ref("");
82 -const form_code = ref("");
83 -const components_name = ref("");
84 -const components_code = ref("");
85 -
86 -const formColumns = ref([]);
87 -const componentsColumns = ref([]);
88 -const showForm = ref(false);
89 -const showComponents = ref(false);
90 -
91 -onMounted(async () => {
92 - const form = await queryFormAPI({ form_code: $route.query.code });
93 - formColumns.value = form.data.map((item) => {
94 - return { text: item.name, value: item.code };
95 - });
96 - const components = await getComponentAPI({ form_code: $route.query.code });
97 - componentsColumns.value = components.data.map((item) => {
98 - return { text: item.name, value: item.code };
99 - });
100 -});
101 -
102 -const onFormConfirm = ({ selectedOptions }) => {
103 - showForm.value = false;
104 - form_name.value = selectedOptions[0].text;
105 - form_code.value = selectedOptions[0].value;
106 -};
107 -const onComponentsConfirm = ({ selectedOptions }) => {
108 - showComponents.value = false;
109 - components_name.value = selectedOptions[0].text;
110 - components_code.value = selectedOptions[0].value;
111 -};
112 -
113 -const onSubmit = async (values) => {
114 - const result = await addFormFieldAPI({
115 - form_code: form_code.value,
116 - component_code: components_code.value,
117 - });
118 - if (result.code) {
119 - showSuccessToast("新增成功");
120 - }
121 -};
122 -</script>
123 -
124 -<style lang="less" scoped></style>
1 -<!--
2 - * @Date: 2022-11-17 14:38:04
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-17 15:42:23
5 - * @FilePath: /data-table/src/views/setForm/addForm.vue
6 - * @Description: 添加表单
7 --->
8 -<template>
9 - <div class="add-form">
10 - <van-nav-bar title="添加表单" />
11 - <van-form @submit="onSubmit" style="margin-top: 1rem">
12 - <van-cell-group inset>
13 - <van-field
14 - v-model="client"
15 - name="client"
16 - is-link
17 - readonly
18 - label="主体客户"
19 - placeholder="主体客户"
20 - @click="showPicker = true"
21 - required
22 - :rules="[{ required: true, message: '请填写主体客户' }]"
23 - />
24 - <van-field
25 - v-model="name"
26 - name="name"
27 - label="表单名称"
28 - placeholder="表单名称"
29 - required
30 - :rules="[{ required: true, message: '请填写表单名称' }]"
31 - />
32 - <van-field v-model="note" name="note" label="表单描述" placeholder="表单描述" />
33 - </van-cell-group>
34 - <div style="margin: 16px">
35 - <van-button round block type="primary" native-type="submit">确认</van-button>
36 - </div>
37 - </van-form>
38 - </div>
39 -
40 - <van-popup v-model:show="showPicker" round position="bottom">
41 - <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
42 - </van-popup>
43 -</template>
44 -
45 -<script setup>
46 -import { ref } from "vue";
47 -import { useRoute, useRouter } from "vue-router";
48 -import { addFormAPI } from "@/api/form.js";
49 -import { showSuccessToast, showFailToast } from "vant";
50 -import {
51 - Cookies,
52 - $,
53 - _,
54 - axios,
55 - storeToRefs,
56 - mainStore,
57 - Toast,
58 - useTitle,
59 -} from "@/utils/generatePackage.js";
60 -//import { } from '@/utils/generateModules.js'
61 -//import { } from '@/utils/generateIcons.js'
62 -//import { } from '@/composables'
63 -const $route = useRoute();
64 -const $router = useRouter();
65 -useTitle($route.meta.title);
66 -
67 -const client = ref("");
68 -const client_id = ref("");
69 -const name = ref("");
70 -const note = ref("");
71 -
72 -const columns = [
73 - { text: "弥陀", value: 120463 },
74 - { text: "观宗", value: 81661 },
75 -];
76 -const result = ref("");
77 -const showPicker = ref(false);
78 -
79 -const onConfirm = ({ selectedOptions }) => {
80 - showPicker.value = false;
81 - client.value = selectedOptions[0].text;
82 - client_id.value = selectedOptions[0].value;
83 -};
84 -
85 -const onSubmit = async (values) => {
86 - const result = await addFormAPI({
87 - client_id: client_id.value,
88 - name: values.name,
89 - note: values.note,
90 - });
91 - if (result.code) {
92 - showSuccessToast("新增成功");
93 - }
94 -};
95 -</script>
96 -
97 -<style lang="less" scoped></style>
1 -<!--
2 - * @Date: 2022-11-17 15:44:24
3 - * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-17 17:24:07
5 - * @FilePath: /data-table/src/views/setForm/setField.vue
6 - * @Description: 添加或修改表单字段属性设置
7 --->
8 -<template>
9 - <div class="add-field">
10 - <van-nav-bar title="添加表单字段属性设置" />
11 - <van-form @submit="onSubmit" style="margin-top: 1rem">
12 - <van-cell-group inset>
13 - <van-field
14 - v-model="form_name"
15 - name="form_name"
16 - is-link
17 - readonly
18 - label="表单名称"
19 - placeholder="表单名称"
20 - @click="showForm = true"
21 - required
22 - :rules="[{ required: true, message: '请选择表单名称' }]"
23 - />
24 - <van-field
25 - v-model="field_name"
26 - name="field_name"
27 - is-link
28 - readonly
29 - label="字段名称"
30 - placeholder="字段名称"
31 - @click="showField = true"
32 - required
33 - :rules="[{ required: true, message: '请选择字段名称' }]"
34 - />
35 - <van-field
36 - v-model="components_name"
37 - name="components_name"
38 - is-link
39 - readonly
40 - label="组件名称"
41 - placeholder="组件名称"
42 - @click="showComponents = true"
43 - required
44 - :rules="[{ required: true, message: '请选择组件名称' }]"
45 - />
46 - <van-field readonly label="组件属性" />
47 - <van-row v-for="(item, index) in propertyList" :key="index">
48 - <van-col>
49 - <van-field v-model="item.property_code" />
50 - </van-col>
51 - <van-col>
52 - <van-field v-model="item.setting_value" />
53 - </van-col>
54 - </van-row>
55 - </van-cell-group>
56 - <div style="margin: 16px">
57 - <van-button round block type="primary" native-type="submit">确认</van-button>
58 - </div>
59 - </van-form>
60 - </div>
61 - <van-popup v-model:show="showForm" round position="bottom">
62 - <van-picker
63 - :columns="formColumns"
64 - @cancel="showForm = false"
65 - @confirm="onFormConfirm"
66 - />
67 - </van-popup>
68 - <van-popup v-model:show="showField" round position="bottom">
69 - <van-picker
70 - :columns="fieldColumns"
71 - @cancel="showField = false"
72 - @confirm="onFieldConfirm"
73 - />
74 - </van-popup>
75 - <van-popup v-model:show="showComponents" round position="bottom">
76 - <van-picker
77 - :columns="componentsColumns"
78 - @cancel="showComponents = false"
79 - @confirm="onComponentsConfirm"
80 - />
81 - </van-popup>
82 -</template>
83 -
84 -<script setup>
85 -import { ref } from "vue";
86 -import { useRoute, useRouter } from "vue-router";
87 -import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
88 -import { getComponentAPI } from "@/api/component.js";
89 -import { showSuccessToast, showFailToast } from "vant";
90 -
91 -import {
92 - Cookies,
93 - $,
94 - _,
95 - axios,
96 - storeToRefs,
97 - mainStore,
98 - Toast,
99 - useTitle,
100 -} from "@/utils/generatePackage.js";
101 -//import { } from '@/utils/generateModules.js'
102 -//import { } from '@/utils/generateIcons.js'
103 -//import { } from '@/composables'
104 -const $route = useRoute();
105 -const $router = useRouter();
106 -useTitle($route.meta.title);
107 -
108 -const form_name = ref("");
109 -const form_code = ref("");
110 -const field_name = ref("");
111 -const components_name = ref("");
112 -const components_code = ref("");
113 -
114 -const formColumns = ref([]);
115 -const fieldColumns = ref([]);
116 -const propertyList = ref([]);
117 -const componentsColumns = ref([]);
118 -const showForm = ref(false);
119 -const showField = ref(false);
120 -const showComponents = ref(false);
121 -
122 -const formData = ref("");
123 -const componentsData = ref("");
124 -
125 -onMounted(async () => {
126 - const form = await queryFormAPI({ form_code: $route.query.code });
127 - formData.value = form.data;
128 - formColumns.value = form.data.map((item) => {
129 - return { text: item.name, value: item.code };
130 - });
131 - const components = await getComponentAPI({ form_code: $route.query.code });
132 - componentsData.value = components.data;
133 - componentsColumns.value = components.data.map((item) => {
134 - return { text: item.name, value: item.code };
135 - });
136 -});
137 -
138 -const onFormConfirm = ({ selectedOptions }) => {
139 - showForm.value = false;
140 - form_name.value = selectedOptions[0].text;
141 - form_code.value = selectedOptions[0].value;
142 - // 生成相应下级字段列表
143 - formData.value.forEach((element) => {
144 - if (element.code === form_code.value) {
145 - fieldColumns.value = element.field_list.map((item) => {
146 - return { text: item.field_name, value: item.field_name };
147 - });
148 - }
149 - });
150 - // 重置选择字段名称
151 - field_name.value = "";
152 -};
153 -const onFieldConfirm = ({ selectedOptions }) => {
154 - showField.value = false;
155 - field_name.value = selectedOptions[0].text;
156 - //
157 - formData.value.forEach((element) => {
158 - if (element.code === form_code.value) {
159 - element.field_list.forEach((field) => {
160 - if (field.field_name === field_name.value) {
161 - // 查询组件名称
162 - components_name.value = field.component_name;
163 - propertyList.value = field.property_list;
164 - }
165 - });
166 - }
167 - });
168 -};
169 -const onComponentsConfirm = ({ selectedOptions }) => {
170 - showComponents.value = false;
171 - components_name.value = selectedOptions[0].text;
172 - components_code.value = selectedOptions[0].value;
173 - formData.value.forEach((element) => {
174 - if (element.code === form_code.value) {
175 - element.field_list.forEach((field) => {
176 - if (field.field_name === field_name.value) {
177 - // 查询组件名称
178 - components_name.value = field.component_name;
179 - propertyList.value = field.property_list;
180 - }
181 - });
182 - }
183 - });
184 -};
185 -
186 -const onSubmit = async (values) => {
187 - const result = await addFormFieldAPI({
188 - form_code: form_code.value,
189 - component_code: components_code.value,
190 - });
191 - if (result.code) {
192 - showSuccessToast("新增成功");
193 - }
194 -};
195 -</script>
196 -
197 -<style lang="less" scoped></style>