Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
80d6d566 1 parent 8d24a310

group组件删除和提交逻辑调整

Inline Side-by-side
Showing 3 changed files with 188 additions and 375 deletions
......@@ -77,8 +77,10 @@ declare module '@vue/runtime-core' {
VanSearch: typeof import('vant/es')['Search']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTa: typeof import('vant/es')['Ta']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
VanTag: typeof import('vant/es')['Tag']
VanTimePicker: typeof import('vant/es')['TimePicker']
VanUploader: typeof import('vant/es')['Uploader']
VideoField: typeof import('./src/components/VideoField/index.vue')['default']
......
<!--
* @Date: 2024-05-27 14:28:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-05-28 10:28:26
* @LastEditTime: 2024-06-03 17:22:17
* @FilePath: /data-table/src/components/GroupField/index.vue
* @Description: 组集合输入控件
-->
......@@ -14,7 +14,7 @@
<div v-if="item.component_props.note" class="note" v-html="item.component_props.note" />
<div>
<div v-for="(data, idx) in listData" :key="idx" style="border: 1px solid #eee; border-top: 0; margin: 1rem; position: relative;">
<van-icon @click="onRemove(idx)" v-if="listData.length > 1" size="1.5rem" color="#ee0a24" name="clear" style="position: absolute; right: -0.5rem; top: -0.5rem;" />
<van-icon @click="onRemove(data, idx)" v-if="listData.length > 1" size="1.5rem" color="#ee0a24" name="clear" style="position: absolute; right: -0.5rem; top: -0.5rem;" />
<van-cell-group :border="false">
<component v-for="(item, index) in data" :id="item.key" :key="index"
:is="item.component" :item="item" @active="onActive" />
......@@ -28,10 +28,12 @@
</template>
<script setup>
import { v4 as uuidv4 } from "uuid";
import { styleColor } from "@/constant.js";
import { queryFormAPI } from "@/api/form.js";
import { useRoute } from "vue-router";
import { createComponentType } from "@/hooks/useComponentType";
import _ from 'lodash';
const props = defineProps({
item: Object,
......@@ -46,306 +48,19 @@ const HideShow = computed(() => {
return !props.item.component_props.disabled
});
// TODO：模拟集合组数据源
const testData = props.item.component_props.field_groups;
// TAG: 测试调整了input和name两个组件头部显示
// let obj = {
// "field_10_group[0]_7653" : "1",
// "field_10_group[1]_4154" : "11",
// "field_11_group[0]_3440" : "2",
// "field_11_group[1]_4282" : "22"
// }
/*const testData = [
// {
// "tag": "radio",
// "name": "radio_8",
// "note": "",
// "index": 8,
// "label": "组别",
// "options": [
// {
// "title": "少年组",
// "value": "少年组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// {
// "title": "成人组",
// "value": "成人组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// {
// "title": "老年组",
// "value": "老年组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// ],
// "disabled": false,
// "field_id": 799497,
// "required": true,
// "data_type": "text",
// "direction": "vertical",
// "field_name": "field_6",
// "option_map": {
// "少年组": {
// "title": "少年组",
// "value": "少年组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// "成人组": {
// "title": "成人组",
// "value": "成人组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// "老年组": {
// "title": "老年组",
// "value": "老年组",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// },
// "interaction_type": "h5edit",
// "default": ""
// },
{
"tag": "input",
"name": "input_21",
"index": 2,
"label": "物品描述",
"unique": false,
"default": "",
"disabled": false,
"field_id": 7985071,
"readonly": false,
"required": false,
"data_type": "text",
"field_name": "field_21",
"placeholder": "请输入",
"is_camera_scan": false,
"camera_scan_type": "",
"interaction_type": "h5edit",
"is_edit_camera_scan_result": false
},
// {
// "tag": "radio",
// "name": "radio_3",
// "note": "",
// "index": 3,
// "label": "单选框",
// "options": [
// {
// "title": "选项标题1",
// "value": "选项标题1",
// "checked": true,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// {
// "title": "选项标题2",
// "value": "选项标题2",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// ],
// "disabled": false,
// "field_id": 798510,
// "required": false,
// "data_type": "text",
// "direction": "vertical",
// "field_name": "field_4",
// "option_map": {
// "选项标题1": {
// "title": "选项标题1",
// "value": "选项标题1",
// "checked": true,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// "选项标题2": {
// "title": "选项标题2",
// "value": "选项标题2",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// },
// "interaction_type": "h5edit",
// "default": "选项标题1"
// },
// {
// "tag": "datetime",
// "name": "datetime_4",
// "index": 4,
// "label": "日期时间",
// "default": "",
// "disabled": false,
// "field_id": 798512,
// "readonly": false,
// "required": false,
// "data_type": "text",
// "field_name": "field_5",
// "placeholder": "请选择",
// "data_maxvalue": "",
// "data_minvalue": "",
// "data_dateformat": "YYYY-MM-DD HH:mm:ss",
// "interaction_type": "h5edit"
// },
// {
// "tag": "email",
// "name": "email_5",
// "index": 5,
// "label": "邮箱",
// "unique": false,
// "default": "",
// "disabled": false,
// "field_id": 799499,
// "readonly": false,
// "required": true,
// "data_type": "text",
// "field_name": "field_7",
// "placeholder": "请输入",
// "interaction_type": "h5edit"
// },
// {
// "tag": "gender",
// "name": "gender_6",
// "note": "",
// "index": 6,
// "label": "性别",
// "options": [
// {
// "title": "男",
// "value": "男",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// {
// "title": "女",
// "value": "女",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// ],
// "disabled": false,
// "field_id": 799501,
// "required": true,
// "data_type": "text",
// "direction": "vertical",
// "field_name": "field_8",
// "option_map": {
// "女": {
// "title": "女",
// "value": "女",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// },
// "男": {
// "title": "男",
// "value": "男",
// "checked": false,
// "desc_url": "",
// "is_input": false,
// "desc_text": "",
// "desc_type": "",
// "desc_btn_name": "",
// "input_required": false,
// "input_placeholder": "请输入补充信息"
// }
// },
// "interaction_type": "h5edit"
// },
{
"tag": "name",
"name": "name_71",
"index": 7,
"label": "序列号",
"unique": false,
"default": "",
"disabled": false,
"field_id": 7995031,
"readonly": false,
"required": true,
"data_type": "text",
"field_name": "field_91",
"placeholder": "请输入",
"interaction_type": "h5edit"
},
]*/
// TODO：模拟集合组数据源
const groupData = _.cloneDeep(props.item.component_props.field_groups);
groupData.forEach(item => {
let randomNum = Math.floor(1000 + Math.random() * 9000);
item.field_name = item.field_name + "_group" + '[0]_' + randomNum; // 组合唯一标识
})
const listData = ref([]);
const formData = ref([]);
......@@ -367,15 +82,12 @@ const formatData = (data) => {
return arr;
};
const onRemove = (idx) => { // 移除列表item
listData.value.splice(idx, 1)
}
// const gender_value = ref(props.item.component_props.default);
const $route = useRoute();
onMounted(async () => {
const form_data = testData;
const form_data = groupData;
let page_form = [];
form_data.forEach((element) => {
page_form.push(element);
......@@ -384,38 +96,44 @@ onMounted(async () => {
// 生成自定义组件
createComponentType(formData.value);
listData.value.push(formData.value)
// gender_value.value = props.item.component_props.default ? props.item.component_props.default : '';
// // 发送自定义数据结构
// props.item.value = { key: props.item.key, value: gender_value.value, type: "gender" };
// emit("active", props.item.value);
listData.value.push(formData.value);
});
const emit = defineEmits(["active"]);
const emit = defineEmits(["active", "remove"]);
const onChange = (item) => {
// // 发送自定义数据结构
// props.item.value = { key: props.item.key, value: gender_value.value, type: "gender" };
// emit("active", props.item.value);
}
// 操作绑定自定义字段回调
const onActive = (item) => {
emit("active", item);
};
const addData = async () => { // 添加一行数据
const groupData = _.cloneDeep(props.item.component_props.field_groups);
groupData.forEach(item => {
let randomNum = Math.floor(1000 + Math.random() * 9000);
item.field_name = `${item.field_name}_group[${listData.value.length}]_${randomNum}`; // 组合唯一标识
})
const addData = async () => {
const form_data = testData;
const form_data = groupData;
let page_form = [];
form_data.forEach((element) => {
page_form.push(element);
});
formData.value = formatData(page_form);
// 生成自定义组件
createComponentType(formData.value);
listData.value.push(formData.value)
}
const onRemove = (data, idx) => { // 移除列表item
let item = listData.value.splice(idx, 1);
emit("remove", item);
}
// 操作绑定自定义字段回调
const onActive = (item) => {
emit("active", item);
};
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-05-29 14:28:37
* @LastEditTime: 2024-06-03 17:06:34
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -25,7 +25,7 @@
<van-form @submit="onSubmit" :scroll-to-error="true">
<van-cell-group :border="false">
<component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
:is="item.component" :item="item" @active="onActive" />
:is="item.component" :item="item" @active="onActive" @remove="onRemove" />
</van-cell-group>
<div v-if="formData.length && PCommit.visible" style="margin: 16px">
<van-button round block type="primary" native-type="submit" :disabled="submitStatus">
......@@ -253,63 +253,129 @@ onMounted(async () => {
// name : "name_41",
// placeholder : "请输入",
// readonly : false,
// required : false,
// required : true,
// tag : "tree",
// unique : false,
// });
// page_form.unshift({
// data_type : "text",
// default : "",
// disabled : false,
// field_id : 1414832,
// field_name : "field_4",
// index : 41,
// interaction_type : "h5edit",
// label : "物品详情",
// name : "name_41",
// placeholder : "请输入",
// readonly : false,
// required : false,
// tag : "group",
// unique : false,
// field_groups: [{
// "tag": "input",
// "name": "input_21",
// "index": 2,
// "label": "物品描述",
// "unique": false,
// "default": "",
// "disabled": false,
// "field_id": 7985071,
// "readonly": false,
// "required": false,
// "data_type": "text",
// "field_name": "field_21",
// "placeholder": "请输入",
// "is_camera_scan": false,
// "camera_scan_type": "",
// "interaction_type": "h5edit",
// "is_edit_camera_scan_result": false,
// "group_field_name" : "field_4",
// },{
// "tag": "name",
// "name": "name_71",
// "index": 7,
// "label": "序列号",
// "unique": false,
// "default": "",
// "disabled": false,
// "field_id": 7995031,
// "readonly": false,
// "required": true,
// "data_type": "text",
// "field_name": "field_91",
// "placeholder": "请输入",
// "interaction_type": "h5edit",
// "group_field_name" : "field_4",
// },]
// });
page_form.unshift({
data_type : "text",
default : "",
disabled : false,
field_id : 1414832,
field_name : "field_4",
index : 41,
interaction_type : "h5edit",
label : "物品详情",
name : "name_41",
placeholder : "请输入",
readonly : false,
required : false,
tag : "group",
unique : false,
field_groups: [{
"tag": "input",
"name": "input_21",
"index": 2,
"label": "物品描述",
"unique": false,
"default": "",
"disabled": false,
"field_id": 7985071,
"readonly": false,
"required": false,
"data_type": "text",
"field_name": "field_10",
"placeholder": "请输入",
"is_camera_scan": false,
"camera_scan_type": "",
"interaction_type": "h5edit",
"is_edit_camera_scan_result": false,
"group_field_name" : "field_4",
},{
"tag": "gender",
"name": "gender_3",
"note": "",
"index": 3,
"label": "性别",
"options": [
{
"title": "男",
"value": "男",
"checked": false,
"desc_url": "",
"is_input": false,
"desc_text": "",
"desc_type": "",
"desc_btn_name": "",
"input_required": false,
"input_placeholder": "请输入补充信息"
},
{
"title": "女",
"value": "女",
"checked": false,
"desc_url": "",
"is_input": false,
"desc_text": "",
"desc_type": "",
"desc_btn_name": "",
"input_required": false,
"input_placeholder": "请输入补充信息"
}
],
"disabled": false,
"field_id": 799603,
"required": false,
"data_type": "text",
"direction": "vertical",
"field_name": "field_4",
"option_map": {
"女": {
"title": "女",
"value": "女",
"checked": false,
"desc_url": "",
"is_input": false,
"desc_text": "",
"desc_type": "",
"desc_btn_name": "",
"input_required": false,
"input_placeholder": "请输入补充信息"
},
"男": {
"title": "男",
"value": "男",
"checked": false,
"desc_url": "",
"is_input": false,
"desc_text": "",
"desc_type": "",
"desc_btn_name": "",
"input_required": false,
"input_placeholder": "请输入补充信息"
}
},
"interaction_type": "h5edit"
},]
});
page_form.push({
"tag": "name",
"name": "name_2",
"index": 2,
"label": "姓名",
"unique": false,
"default": "",
"disabled": false,
"field_id": 799599,
"readonly": false,
"required": true,
"data_type": "text",
"field_name": "field_2",
"placeholder": "请输入",
"interaction_type": "h5edit"
})
formData.value = formatData(page_form);
// TODO：再次提交测试, 需要获取原来表单数据
// formData.value.forEach((item) => {
......@@ -645,6 +711,33 @@ const preValidData = (values) => {
return _.assign(postData.value, rest_data);
}
const onRemove = (value) => { // 处理组件删除事件回调, 数据结构是二维数组，删除时返回被删除的一组数据
value[0].forEach(item => {
for (const key in postData.value) {
if (item.key === key) {
delete postData.value[key]; // 删除对应的键值对
}
}
});
}
const adjGroupData = (values) => { // 调整group组件的数据结构
// let obj = {
// "field_10_group[0]_7653" : "1",
// "field_10_group[1]_4154" : "11",
// "field_11_group[0]_3440" : "2",
// "field_11_group[1]_4282" : "22"
// }
// let arr = [{
// "field_10": "1",
// "field_11": "2",
// }, {
// "field_10": "11",
// "field_11": "22",
// }]
}
const submitStatus = ref(false);
const onSubmit = async (values) => {
......