117 lines
3.4 KiB
Vue
117 lines
3.4 KiB
Vue
<template>
|
|
<div class="table-box">
|
|
<div style="padding-bottom: 16px">
|
|
<el-button @click="getSetList"> 重置 </el-button>
|
|
<el-button type="primary" @click="handleClick"> 提交 </el-button>
|
|
</div>
|
|
<!-- @tab-click="handleTabsClick" -->
|
|
<div class="card table-main">
|
|
<el-tabs v-model="activeName" class="demo-tabs">
|
|
<el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in dataStore.list" :key="index">
|
|
<el-form :model="dataStore.formData" label-position="top">
|
|
<RecursiveForm :configs="item.configs" />
|
|
</el-form>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="webSetIndex">
|
|
import { getSetListApi, getConfigUpApi } from "@/api/modules/set";
|
|
import { ref, reactive } from "vue";
|
|
import RecursiveForm from "./components/RecursiveForm.vue";
|
|
import { cloneDeep } from "lodash-es";
|
|
import { useMsg } from "@/hooks/useMsg";
|
|
const activeName = ref<any>(null);
|
|
|
|
//数据集合
|
|
const dataStore = reactive<any>({
|
|
list: [],
|
|
formData: []
|
|
});
|
|
|
|
const convertCheckboxValuesToArray = (data: any) => {
|
|
// 遍历外层数组
|
|
data.forEach((item: any) => {
|
|
// 检查 item 是否有 configs 属性
|
|
if (item.configs) {
|
|
// 遍历 configs 数组
|
|
item.configs.forEach((config: any) => {
|
|
// 检查 type 是否为 checkbox
|
|
if (config.type === "checkbox") {
|
|
// 将 value 转换为数组
|
|
config.value = config.value.split(",").map((value: any) => value.trim());
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return data;
|
|
};
|
|
|
|
const getSetList = async () => {
|
|
const result = await getSetListApi();
|
|
if (result?.code === 0) {
|
|
// let obj = {
|
|
// name: "图片",
|
|
// id: 2,
|
|
// configs: []
|
|
// };
|
|
let dataClone = cloneDeep(result?.data);
|
|
dataStore.list = convertCheckboxValuesToArray(dataClone);
|
|
// dataStore.list.push(obj);
|
|
activeName.value = result?.data[0].name;
|
|
}
|
|
};
|
|
getSetList();
|
|
|
|
// const handleTabsClick = (value: any) => {
|
|
// console.log(value, "=value=");
|
|
// };
|
|
const extractData = (item: any) => {
|
|
let result: any = [];
|
|
let value = item.value;
|
|
if (item.type === "checkbox" && Array.isArray(value)) {
|
|
value = value.join(",");
|
|
}
|
|
result.push({
|
|
value: value,
|
|
id: item.id
|
|
});
|
|
|
|
if (item.extra) {
|
|
item.extra.forEach((extra: any) => {
|
|
if (extra.children) {
|
|
extra.children.forEach((child: any) => {
|
|
result = result.concat(extractData(child));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
return result;
|
|
};
|
|
const getConfigUp = async (data: any) => {
|
|
const result = await getConfigUpApi(data);
|
|
if (result?.code === 0) {
|
|
const { msg } = result;
|
|
useMsg("success", msg);
|
|
}
|
|
};
|
|
const handleClick = () => {
|
|
let finalResult: any = [];
|
|
dataStore.list.forEach((item: any) => {
|
|
item.configs.forEach((config: any) => {
|
|
finalResult.push(...extractData(config));
|
|
});
|
|
});
|
|
getConfigUp(finalResult);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep(.el-form-item__label) {
|
|
font-weight: 900;
|
|
color: #333333;
|
|
}
|
|
</style>
|