124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<template>
|
|
<PageWrapper>
|
|
<n-card shadow="never" size="small" class="proCard tabsCard">
|
|
<n-tabs v-model="activeName" v-if="tabData.length > 0">
|
|
<n-tab-pane
|
|
:name="item.configName"
|
|
:tab="item.configName"
|
|
v-for="(item, index) in tabData"
|
|
:key="index"
|
|
>
|
|
<BasicSetting
|
|
:dataList="item.dataList"
|
|
v-if="activeName == item.configName"
|
|
@success="getReshTabData"
|
|
:activeName="activeName"
|
|
/>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</n-card>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { getWebInfo } from '@/api/setting/web';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import BasicSetting from './BasicSetting.vue';
|
|
|
|
/**
|
|
* 定义参数
|
|
*/
|
|
const activeName = ref();
|
|
const tabData = ref([]);
|
|
|
|
/**
|
|
* 获取TAB数据
|
|
*/
|
|
const getTabData = async (name) => {
|
|
let res = await getWebInfo();
|
|
res.map((item) => {
|
|
item.dataList.map((sub) => {
|
|
if (sub.type == 'checkbox' || sub.type == 'selects') {
|
|
const values = sub.value.split(',');
|
|
sub.value = values;
|
|
console.log(values);
|
|
}
|
|
if (sub.type == 'select' || sub.type == 'selects') {
|
|
const arrs = Object.entries(sub.param).map(([key, value]) => ({
|
|
label: value,
|
|
value: key,
|
|
}));
|
|
sub.param = arrs;
|
|
console.log(arrs);
|
|
}
|
|
if (sub.type == 'images') {
|
|
sub.filePath = [];
|
|
sub.value = [];
|
|
if (sub.valueList && sub.valueList.length) {
|
|
sub.valueList.map((path) => {
|
|
sub.filePath.push({ url: path, filePath: path });
|
|
sub.value.push(path);
|
|
});
|
|
}
|
|
}
|
|
if (sub.type == 'file') {
|
|
let files = sub.value?.split('|');
|
|
sub.fileName = files[0];
|
|
sub.filePath = files[1];
|
|
}
|
|
if (sub.type == 'files') {
|
|
sub.filePath = [];
|
|
sub.value = [];
|
|
if (sub.valueList && sub.valueList.length) {
|
|
sub.valueList.map((path) => {
|
|
let files = path.split('|');
|
|
sub.filePath.push({ name: files[0], url: files[1] });
|
|
sub.value.push(`${files[0]}|${files[1]}`);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
tabData.value = res;
|
|
activeName.value = name ? name : tabData.value[0].configName;
|
|
};
|
|
|
|
/**
|
|
* 刷新TAB数据
|
|
*/
|
|
const getReshTabData = (name) => {
|
|
getTabData(name);
|
|
};
|
|
|
|
/**
|
|
* 钩子函数
|
|
*/
|
|
onMounted(() => {
|
|
getTabData();
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.thing-cell {
|
|
margin: 0 -16px 10px;
|
|
padding: 5px 16px;
|
|
|
|
&:hover {
|
|
background: #f3f3f3;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.thing-cell-on {
|
|
background: #f0faff;
|
|
color: #165dff;
|
|
|
|
:deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
|
color: #165dff;
|
|
}
|
|
|
|
&:hover {
|
|
background: #f0faff;
|
|
}
|
|
}
|
|
</style>
|