<template>
|
<span class="second-title"> {{ `基本信息` }} </span>
|
<el-form :inline="true">
|
<FYOptionLocation
|
:allOption="false"
|
:level="4"
|
v-model:value="result._locations"
|
></FYOptionLocation>
|
<MutiableOptionScene
|
:allOption="false"
|
:type="2"
|
:multiple="true"
|
:initValue="false"
|
v-model:value="result._scenetype"
|
></MutiableOptionScene>
|
</el-form>
|
<el-divider />
|
<span class="second-title"> {{ `选择表格中需要展示的列信息` }} </span>
|
<CompChangeHeaderTree :table-header="tableHeader" ref="changeHeaderRef"> </CompChangeHeaderTree>
|
|
<div class="center">
|
<div>
|
<el-button type="primary" @click="ok">下一步</el-button>
|
<el-button type="primary" @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import CompChangeHeaderTree from './CompChangeHeaderTree.vue';
|
import MutiableOptionScene from './MutiableOptionScene.vue';
|
import tableCol from '../js/tableCol';
|
export default {
|
mounted() {},
|
props: {
|
tableHeader: {
|
type: Array,
|
default: () => []
|
}
|
},
|
components: {
|
MutiableOptionScene,
|
CompChangeHeaderTree
|
},
|
data() {
|
return {
|
result: {
|
_locations: {},
|
_scenetype: []
|
}
|
};
|
},
|
methods: {
|
ok() {
|
let changedHeaders = this.$refs.changeHeaderRef.getChangedHeaders()
|
let copy = this.tableHeader.map(item=>item)
|
let changedHeadeArray = tableCol.treeToArray(changedHeaders)
|
tableCol.treeToArray(copy).forEach(item=>{
|
for (let index = 0; index < changedHeadeArray.length; index++) {
|
const element = changedHeadeArray[index];
|
if (element.id == item.id) {
|
item.hidden = element.hidden
|
changedHeadeArray.splice(index, 1)
|
}
|
}
|
})
|
this.$emit('next', this.result);
|
},
|
cancel() {
|
this.$emit('next', null);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.center {
|
display: flex;
|
justify-content: center;
|
}
|
.second-title {
|
color: var(--el-text-color-primary);
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 16px;
|
}
|
</style>
|
