<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-item label="月份对比">
|
<el-date-picker
|
v-model="result.months"
|
type="monthrange"
|
range-separator="-"
|
start-placeholder="Start month"
|
@change="onSelectedMonthsChange"
|
end-placeholder="End month"
|
/>
|
</el-form-item> -->
|
<el-form-item label="总任务">
|
<!-- <el-input v-model="formSearch.topTaskId" placeholder="总任务" /> -->
|
<el-select
|
multiple
|
value-key="value"
|
v-model="result.topTasks"
|
placeholder="总任务"
|
style="width: 320px; margin-left: 30px"
|
>
|
<el-option
|
v-for="s in topTasks"
|
:key="s.value"
|
:label="s.label"
|
:value="s"
|
/>
|
</el-select>
|
</el-form-item>
|
</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';
|
import taskApi from '@/api/fysp/taskApi.js';
|
import dayjs from 'dayjs';
|
export default {
|
mounted() {
|
this.getTopTasks();
|
},
|
props: {
|
tableHeader: {
|
type: Array,
|
default: () => []
|
}
|
},
|
components: {
|
MutiableOptionScene,
|
CompChangeHeaderTree
|
},
|
data() {
|
return {
|
result: {
|
_locations: {},
|
_scenetype: [],
|
topTasks: [],
|
months: []
|
},
|
topTasks: []
|
};
|
},
|
methods: {
|
onSelectedMonthsChange(val) {
|
// let m1 = dayjs(val[0]).format("YYYY-MM")
|
// let m2 = dayjs(val[0]).format("YYYY-MM")
|
// function
|
// this.topTasks = this.topTasks.filter(item=>{
|
// console.log("dayjs(new Date(item.starttime))", dayjs(item.starttime).format("YYYY-MM"));
|
// return dayjs(new Date(item.starttime)).format("YYYY-MM") == m1 || dayjs(item.starttime).format("YYYY-MM") == m2
|
// })
|
},
|
getTopTasks() {
|
taskApi.getTopTask().then((res) => {
|
const list = res.map((r) => {
|
return {
|
value: r.tguid,
|
label: r.name,
|
data: r
|
};
|
});
|
this.topTasks = list;
|
// this.$refs.dynamicTableRef.onSearch();
|
});
|
},
|
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.result.topTasks = this.result.topTasks.map((item) => item.data);
|
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>
|
