Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2a6120ab 1 parent befdc911

未完成功能

Inline Side-by-side
Showing 7 changed files with 387 additions and 9 deletions
1 +/*
2 + * @Date: 2022-06-17 14:54:29
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-17 16:00:04
5 + * @FilePath: /data-table/src/api/component.js
6 + * @Description: 组件接口
7 + */
8 +import { fn, fetch } from '@/api/fn';
9 +
10 +const Api = {
11 + QUERY_COMPONENT: '/srv/?a=query_component',
12 +}
13 +
14 +/**
15 + * @description: 查询组件
16 + * @param: group_code 分组标识
17 + * @param: component_code 组件标识
18 + * @param: name 组件名称；条件：模糊查询；
19 + */
20 +export const getComponentAPI = (params) => fn(fetch.get(Api.QUERY_COMPONENT, 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-11-17 14:42:30 4 + * @LastEditTime: 2022-11-17 16:30:03
5 * @FilePath: /data-table/src/api/form.js 5 * @FilePath: /data-table/src/api/form.js
6 * @Description: 表单接口 6 * @Description: 表单接口
7 */ 7 */
...@@ -10,6 +10,8 @@ import { fn, fetch } from '@/api/fn'; ...@@ -10,6 +10,8 @@ import { fn, fetch } from '@/api/fn';
10 const Api = { 10 const Api = {
11 FORM_ADD: '/srv/?a=add_form', 11 FORM_ADD: '/srv/?a=add_form',
12 FORM_QUERY: '/srv/?a=query_form', 12 FORM_QUERY: '/srv/?a=query_form',
13 + ADD_FORM_FIELD: '/srv/?a=add_form_field',
14 + ADD_FORM_SETTING: '/srv/?a=add_form_setting',
13 } 15 }
14 16
15 /** 17 /**
...@@ -27,3 +29,20 @@ export const addFormAPI = (params) => fn(fetch.post(Api.FORM_ADD, params)); ...@@ -27,3 +29,20 @@ export const addFormAPI = (params) => fn(fetch.post(Api.FORM_ADD, params));
27 * @param: name 表单名称，模糊查询 29 * @param: name 表单名称，模糊查询
28 */ 30 */
29 export const queryFormAPI = (params) => fn(fetch.get(Api.FORM_QUERY, params)); 31 export const queryFormAPI = (params) => fn(fetch.get(Api.FORM_QUERY, params));
32 +
33 +/**
34 + * @description: 添加表单字段
35 + * @param: form_code 表单唯一标识
36 + * @param: component_code 组件标识
37 + */
38 +export const addFormFieldAPI = (params) => fn(fetch.post(Api.ADD_FORM_FIELD, params));
39 +
40 +/**
41 + * @description: 添加或修改表单字段属性设置
42 + * @param: form_code 表单唯一标识
43 + * @param: field_name 表单字段名。如果设置表单级（非字段级）的属性，可为空。
44 + * @param: component_code 组件标识
45 + * @param: property_code 属性标识
46 + * @param: setting_value 待设置的属性值。json数组，内部必须双引号。如果属性值是单值，数组只有一个元素。
47 + */
48 +export const addFormSettingAPI = (params) => fn(fetch.post(Api.ADD_FORM_SETTING, params));
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-08 13:35:49 4 + * @LastEditTime: 2022-11-08 08:01:23
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
9 <div class="checkbox-field-page"> 9 <div class="checkbox-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.label }} 11 {{ item.label }}
12 - <span v-if="item.required" style="color: red;">&nbsp;*</span> 12 + <span v-if="item.component_props.required" style="color: red;">&nbsp;*</span>
13 <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span> 13 <span v-if="item.component_props.max" style="color: gray;">(最多可选数:&nbsp;{{ item.component_props.max }})</span>
14 </div> 14 </div>
15 - <van-field :name=" item.key" :border="false"> 15 + <van-field :name=" item.key" :rules="item.rules" :border="false">
16 <template #input> 16 <template #input>
17 <van-checkbox-group v-model="item.value" :direction="item.component_props.direction" 17 <van-checkbox-group v-model="item.value" :direction="item.component_props.direction"
18 :max="item.component_props.max"> 18 :max="item.component_props.max">
19 - <van-checkbox v-for="x in item.options" :key="index" :name="x.key" icon-size="1rem" shape="square" 19 + <van-checkbox v-for="x in item.component_props.options" :key="index" :name="x.key" icon-size="1rem" shape="square"
20 style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox> 20 style="margin-bottom: 0.25rem;">{{ x.value }}</van-checkbox>
21 </van-checkbox-group> 21 </van-checkbox-group>
22 </template> 22 </template>
......
1 /* 1 /*
2 * @Date: 2022-11-17 14:46:43 2 * @Date: 2022-11-17 14:46:43
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-17 14:47:46 4 + * @LastEditTime: 2022-11-17 16:32:19
5 * @FilePath: /data-table/src/router/routes/modules/setForm/index.js 5 * @FilePath: /data-table/src/router/routes/modules/setForm/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 const index = [{ 8 const index = [{
9 path: '/addForm', 9 path: '/addForm',
10 - name: '首页', 10 + name: '新增表单',
11 component: () => import('@/views/setForm/addForm.vue'), 11 component: () => import('@/views/setForm/addForm.vue'),
12 meta: { 12 meta: {
13 title: '新增表单', 13 title: '新增表单',
14 name: 'addFormPage' 14 name: 'addFormPage'
15 }, 15 },
16 children: [] 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: []
17 }] 35 }]
18 36
19 export default index; 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-11-17 14:08:01 4 + * @LastEditTime: 2022-11-17 16:02:16
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -73,7 +73,7 @@ onMounted(async () => { ...@@ -73,7 +73,7 @@ onMounted(async () => {
73 const { data } = await queryFormAPI({ form_code: $route.query.code }); 73 const { data } = await queryFormAPI({ form_code: $route.query.code });
74 const form_data = data[0]; 74 const form_data = data[0];
75 table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"; 75 table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
76 - table_title.value = form_data.description; 76 + table_title.value = form_data.name;
77 formData.value = formatData(form_data.field_list); 77 formData.value = formatData(form_data.field_list);
78 // mockData.value = [ 78 // mockData.value = [
79 // { 79 // {
......
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 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>