<div style="margin: 20px">
<div class="nothingClass" v-if="careerTeamValueVoList.length === 0">
<div>
<img src="../../../assets/images/nothing.png" alt="" />
<p class="nothingTitle">没有更多数据了</p>
</div>
</div>
<template v-if="careerTeamValueVoList.length">
<div
style="margin-bottom: 20px; width: 100%"
v-for="(team, teamIndex) in careerTeamValueVoList"
:key="teamIndex"
>
<!-- 项目循环 -->
<div class="flex">
<div class="shuline" v-if="team.showMore"></div>
<div class="tableWarm" style="margin-bottom: 20px">
<i
:class="[
!team.showMore
? 'el-icon-circle-plus-outline'
: 'el-icon-remove-outline',
'iconClass',
]"
v-if="team.teamValueTaskList.length"
@click="showMore(team)"
></i>
<el-checkbox
v-if="isShowCheckbox"
v-model="team.checked"
:indeterminate="team.indeterminate"
class="checkBox"
style="margin: 0 5px"
@change="(val) => checked(val, team, null, null, null)"
></el-checkbox>
<el-table :data="[team]" border class="large" style="100%">
<el-table-column
v-for="(itemTeam, indexTeam) in TeamTableColumnMore"
:key="indexTeam"
:prop="itemTeam.prop"
:label="itemTeam.label"
min-width="180"
>
<template slot-scope="scope">
<div v-if="itemTeam.prop === 'otherEvaluateList'">
<div
v-if="
scope.row.otherEvaluateList &&
scope.row.otherEvaluateList.length
"
>
<template v-if="scope.row.otherEvaluateShowMore">
<ul
v-for="(item, index) in scope.row.otherEvaluateList"
:key="index"
class="ulClass"
>
<li>
<span>{{
scope.row.otherEvaluateList[index]
.evaluatePeopleName
}}</span>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[index].evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[index].evaluateContent
}}</span>
<i
:class="
scope.row.otherEvaluateShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(scope.row, 'otherEvaluateShowMore')
"
v-if="index === 0"
></i>
</li>
</ul>
</template>
<template v-if="!scope.row.otherEvaluateShowMore">
<ul class="ulClass">
<li>
<span>
{{
scope.row.otherEvaluateList[0].evaluatePeopleName
}}</span
>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[0].evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[0].evaluateContent
}}</span>
<i
v-if="scope.row.otherEvaluateList.length > 1"
class="el-icon-caret-bottom"
@click="
rowClick(scope.row, 'otherEvaluateShowMore')
"
></i>
</li>
</ul>
</template>
</div>
<div v-else></div>
</div>
<div
v-else-if="
itemTeam.prop === 'achievement' && scope.row.achievement
"
>
<span
class="wrapClass"
v-if="scope.row.achievementShowMore"
>{{ scope.row.achievement }}</span
>
<span v-if="!scope.row.achievementShowMore">{{
scope.row.achievement.substr(0, 15)
}}</span
><i
:class="
scope.row.achievementShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="rowClick(scope.row, 'achievementShowMore')"
></i>
</div>
<div v-else>
<span>
{{ scope.row[itemTeam.prop] }}
</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- ---------- -->
<template v-if="team.showMore && team.teamValueTaskList.length">
<div
style="width: 100%"
class="flex"
v-for="(firstTask, firstTaskIndex) in team.teamValueTaskList"
:key="firstTaskIndex + 1111"
>
<!-- 一级循环 -->
<div
class="shuline"
:style="
firstTaskIndex === team.teamValueTaskList.length - 1
? 'display:none'
: ''
"
></div>
<div class="larger flex">
<div
:class="[firstTask.childrens.length ? 'hengxian' : 'hengline']"
></div>
<div class="larger">
<div class="flex" style="width: 100%">
<div class="shuline" v-if="firstTask.showMore && firstTask.childrens.length"></div>
<div class="tableWarm" style="margin-bottom: 20px">
<i
:class="[
!firstTask.showMore
? 'el-icon-circle-plus-outline'
: 'el-icon-remove-outline',
'iconClass',
]"
v-if="firstTask.childrens.length"
@click="showMore(firstTask)"
></i>
<el-checkbox
v-if="isShowCheckbox"
:indeterminate="firstTask.indeterminate"
v-model="firstTask.checked"
@change="(val) => checked(val, team, firstTask, null, null)"
class="checkBox"
style="margin: 0 5px"
></el-checkbox>
<div style="width: 100%; postion: absolute">
<el-table
:data="[firstTask]"
border
class="large"
style="100%"
>
<el-table-column
v-for="(itemFirst, indexFirst) in FirstTableColumn"
:key="indexFirst + 111"
:prop="itemFirst.prop"
:label="itemFirst.label"
min-width="180"
>
<template slot-scope="scope">
<div v-if="itemFirst.prop === 'otherEvaluateList'">
<div
v-if="
scope.row.otherEvaluateList &&
scope.row.otherEvaluateList.length
"
>
<template v-if="scope.row.otherEvaluateShowMore">
<ul
v-for="(item, index) in scope.row
.otherEvaluateList"
:key="index"
class="ulClass"
>
<li>
<span>{{
scope.row.otherEvaluateList[index]
.evaluatePeopleName
}}</span>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[index]
.evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[index]
.evaluateContent
}}</span>
<i
:class="
scope.row.otherEvaluateShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
v-if="index === 0"
></i>
</li>
</ul>
</template>
<template v-if="!scope.row.otherEvaluateShowMore">
<ul class="ulClass">
<li>
<span>
{{
scope.row.otherEvaluateList[0]
.evaluatePeopleName
}}</span
>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[0]
.evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[0]
.evaluateContent
}}</span>
<i
v-if="
scope.row.otherEvaluateList.length > 1
"
class="el-icon-caret-bottom"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
></i>
</li>
</ul>
</template>
</div>
<div v-else></div>
</div>
<div
v-else-if="
itemFirst.prop === 'achievement' &&
scope.row.achievement
"
>
<span
class="wrapClass"
v-if="scope.row.achievementShowMore"
>{{ scope.row.achievement }}</span
>
<span v-if="!scope.row.achievementShowMore">{{
scope.row.achievement.substr(0, 15)
}}</span
><i
:class="
scope.row.achievementShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(scope.row, 'achievementShowMore')
"
></i>
</div>
<div v-else>
<span>{{ scope.row[itemFirst.prop] }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<template v-if="firstTask.showMore && firstTask.childrens.length">
<div
style="width: 100%"
class="flex"
v-for="(sconedTask, sconedTaskIndex) in firstTask.childrens"
:key="sconedTaskIndex + 2222"
>
<!-- 二级循环 -->
<div
class="shuline"
:style="
sconedTaskIndex === firstTask.childrens.length - 1
? 'display:none'
: ''
"
></div>
<div class="larger flex">
<div
:class="[
sconedTask.childrens.length ? 'hengxian' : 'hengline',
]"
></div>
<div class="larger">
<div class="flex" style="width: 100%">
<div class="shuline" v-if="sconedTask.showMore && sconedTask.childrens.length"></div>
<div class="tableWarm" style="margin-bottom: 20px">
<i
:class="[
!sconedTask.showMore
? 'el-icon-circle-plus-outline'
: 'el-icon-remove-outline',
'iconClass',
]"
v-if="sconedTask.childrens.length"
@click="showMore(sconedTask)"
></i>
<el-checkbox
v-if="isShowCheckbox"
:indeterminate="sconedTask.indeterminate"
v-model="sconedTask.checked"
@change="
(val) =>
checked(val, team, firstTask, sconedTask, null)
"
class="checkBox"
style="margin: 0 5px"
></el-checkbox>
<div style="width: 100%; postion: absolute">
<el-table :data="[sconedTask]" border class="large">
<el-table-column
v-for="(
itemSecond, indexSecond
) in SecondTableColumn"
:key="indexSecond + 222"
:prop="itemSecond.prop"
:label="itemSecond.label"
min-width="180"
>
<template slot-scope="scope">
<div
v-if="
itemSecond.prop === 'otherEvaluateList'
"
>
<div
v-if="
scope.row.otherEvaluateList &&
scope.row.otherEvaluateList.length
"
>
<template
v-if="scope.row.otherEvaluateShowMore"
>
<ul
v-for="(item, index) in scope.row
.otherEvaluateList"
:key="index"
class="ulClass"
>
<li>
<span>{{
scope.row.otherEvaluateList[index]
.evaluatePeopleName
}}</span>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[
index
].evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[index]
.evaluateContent
}}</span>
<i
:class="
scope.row.otherEvaluateShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
v-if="index === 0"
></i>
</li>
</ul>
</template>
<template
v-if="!scope.row.otherEvaluateShowMore"
>
<ul class="ulClass">
<li>
<span>
{{
scope.row.otherEvaluateList[0]
.evaluatePeopleName
}}</span
>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row.otherEvaluateList[0]
.evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row.otherEvaluateList[0]
.evaluateContent
}}</span>
<i
v-if="
scope.row.otherEvaluateList
.length > 1
"
class="el-icon-caret-bottom"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
></i>
</li>
</ul>
</template>
</div>
<div v-else></div>
</div>
<div
v-else-if="
itemSecond.prop === 'achievement' &&
scope.row.achievement
"
>
<span
class="wrapClass"
v-if="scope.row.achievementShowMore"
>{{ scope.row.achievement }}</span
>
<span
v-if="!scope.row.achievementShowMore"
>{{
scope.row.achievement.substr(0, 15)
}}</span
><i
:class="
scope.row.achievementShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(
scope.row,
'achievementShowMore'
)
"
></i>
</div>
<div v-else>
<p> {{ scope.row[itemSecond.prop] }}</p>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<template
v-if="
sconedTask.showMore && sconedTask.childrens.length
"
>
<div
style="width: 100%"
class="flex"
v-for="(
thirdTask, thirdTaskIndex
) in sconedTask.childrens"
:key="thirdTaskIndex + 3333"
>
<!-- 三级循环 -->
<div
class="shuline"
:style="
thirdTaskIndex === sconedTask.childrens.length - 1
? 'display:none'
: ''
"
></div>
<div class="larger flex">
<div class="hengline"></div>
<div class="larger" style="">
<div>
<!-- <div class="shuline"></div> -->
<div class="tableWarm">
<!-- <i
:class="[
!thirdTask.showMore
? 'el-icon-circle-plus-outline'
: 'el-icon-remove-outline',
'iconClass',
]"
@click="showMore(thirdTask)"
></i> -->
<el-checkbox
v-if="isShowCheckbox"
v-model="thirdTask.checked"
@change="
(val) =>
checked(
val,
team,
firstTask,
sconedTask,
thirdTask
)
"
class="checkBox"
style="margin: 0 5px"
></el-checkbox>
<div style="width: 100%; postion: absolute">
<el-table
:data="[thirdTask]"
border
class="large"
>
<el-table-column
v-for="(
itemThird, indexThird
) in ThirdTableColumn"
:key="indexThird + 333"
:prop="itemThird.prop"
:label="itemThird.label"
min-width="180"
>
<template slot-scope="scope">
<div
v-if="
itemThird.prop ===
'otherEvaluateList'
"
>
<div
v-if="
scope.row.otherEvaluateList &&
scope.row.otherEvaluateList
.length
"
>
<template
v-if="
scope.row
.otherEvaluateShowMore
"
>
<ul
v-for="(item, index) in scope
.row.otherEvaluateList"
:key="index"
class="ulClass"
>
<li>
<span>{{
scope.row
.otherEvaluateList[
index
].evaluatePeopleName
}}</span>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row
.otherEvaluateList[
index
].evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row
.otherEvaluateList[
index
].evaluateContent
}}</span>
<i
:class="
scope.row
.otherEvaluateShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
v-if="index === 0"
></i>
</li>
</ul>
</template>
<template
v-if="
!scope.row
.otherEvaluateShowMore
"
>
<ul class="ulClass">
<li>
<span>
{{
scope.row
.otherEvaluateList[0]
.evaluatePeopleName
}}</span
>
</li>
<li>
<span>评估结果：</span
><span>{{
EvaluateScoreList[
scope.row
.otherEvaluateList[0]
.evaluateScore
]
}}</span>
</li>
<li>
<span>评语：</span
><span class="wrapClass">{{
scope.row
.otherEvaluateList[0]
.evaluateContent
}}</span>
<i
v-if="
scope.row
.otherEvaluateList
.length > 1
"
class="
el-icon-caret-bottom
"
@click="
rowClick(
scope.row,
'otherEvaluateShowMore'
)
"
></i>
</li>
</ul>
</template>
</div>
<div v-else></div>
</div>
<div
v-else-if="
itemThird.prop ===
'achievement' &&
scope.row.achievement
"
>
<span
class="wrapClass"
v-if="
scope.row.achievementShowMore
"
>{{ scope.row.achievement }}</span
>
<span
v-if="
!scope.row.achievementShowMore
"
>{{
scope.row.achievement.substr(
0,
15
)
}}</span
><i
:class="
scope.row.achievementShowMore
? 'el-icon-caret-top'
: 'el-icon-caret-bottom'
"
@click="
rowClick(
scope.row,
'achievementShowMore'
)
"
></i>
</div>
<div v-else>
<span>
{{ scope.row[itemThird.prop] }}
</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div>
<!-- xuhuan -->
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
</div>
</template>
</div>
</template>
<script>
import {
TeamTableColumnTwo,
TeamTableColumnOne,
FirstTableColumnOne,
SecondTableColumnOne,
ThirdTableColumnOne,
FirstTableColumnTwo,
SecondTableColumnTwo,
ThirdTableColumnTwo,
EvaluateScoreList,
} from "../configure";
import { cloneDeep } from "@/utils/util.js";
export default {
name: "career",
components: {},
props: ["careerData", "isView", "careerEvadataType", "scoreCombinedFlag"],
data() {
return {
careerTeamValueVoList: [
{
showMore: true,
checked: true,
indeterminate: false,
careerTeamId: "团队ID",
teamName: "团队名称",
valueGoal: "创值目标",
achievement:
"创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果创值成果",
roleName: "项目角色名称",
roleId: "",
teamEvaluateResult: "评估结果",
otherEvaluateList: [
{
evaluatePeopleId: 111111,
evaluatePeopleName: 33333,
evaluateContent: 1111,
evaluateScore:
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
},
{
evaluatePeopleId: 2222,
evaluatePeopleName: 33333,
evaluateContent: 1111,
evaluateScore: 100,
},
{
evaluatePeopleId: 33333,
evaluatePeopleName: 33333,
evaluateContent: 1111,
evaluateScore: 100,
},
],
taPing: "任务评估分数",
teamValueTaskList: [
{
showMore: true,
checked: true,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
childrens: [
{
showMore: false,
checked: false,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
childrens: [
{
showMore: true,
checked: true,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
},
],
},
{
showMore: true,
checked: true,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
childrens: [
{
showMore: false,
checked: false,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
},
],
},
],
},
{
showMore: false,
checked: false,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
childrens: [
{
showMore: false,
checked: false,
indeterminate: false,
taskId: "任务ID",
taskName: "任务名称",
achievement: "创值成果",
routeUrl: "",
isValid: "是否参与任务",
roleName: "任务角色",
roleId: "",
valueGoal: "价值目标",
evaluateScore: "任务评估分数",
taskEvaluateResult: "任务评估内容",
childrens: [],
},
],
},
],
},
},
mounted() {
this.careerTeamValueVoList = this.careerData;
},
methods: {
// 选中的数据
checkoutData() {
if (this.careerEvadataType === 2) {
const data = cloneDeep(this.careerTeamValueVoList).filter((team) => {
team.teamValueTaskList = team.teamValueTaskList.filter((first) => {
first.childrens = first.childrens.filter((sconed) => {
sconed.childrens = sconed.childrens.filter((third) => {
return third.checked;
});
return sconed.checked;
});
return first.checked;
});
return team.checked || team.indeterminate;
});
return data;
} else {
return cloneDeep(this.careerTeamValueVoList)
}
},
showMore(val) {
val.showMore = !val.showMore;
},
checked(val, team, firstTask, sconedTask, thirdTask) {
if (thirdTask) {
thirdTask.checked = val;
if (val) {
sconedTask.checked = true;
firstTask.checked = true;
team.checked = true;
}
return;
}
if (sconedTask) {
sconedTask.checked = val;
sconedTask.childrens.forEach((v3) => {
v3.checked = val;
});
if (val) {
firstTask.checked = true;
team.checked = true;
}
return;
}
if (firstTask) {
firstTask.checked = val;
if (
team.teamValueTaskList.every((t) => {
return t.checked;
})
) {
team.checked = true;
team.indeterminate = false;
} else if (
team.teamValueTaskList.every((t) => {
return !t.checked && !t.indeterminate;
})
) {
team.checked = false;
team.indeterminate = false;
} else {
team.indeterminate = true;
team.checked = false;
}
firstTask.childrens.forEach((v2) => {
v2.checked = val;
v2.childrens.forEach((v3) => {
v3.checked = val;
});
});
return;
}
if (team) {
team.checked = val;
team.indeterminate = false;
team.teamValueTaskList.forEach((v1) => {
v1.checked = val;
v1.childrens.forEach((v2) => {
v2.checked = val;
v2.childrens.forEach((v3) => {
v3.checked = val;
});
});
});
return;
}
},
rowClick(row, val) {
if (!row[val]) {
Vue.set(row, val, true);
} else {
Vue.set(row, val, false);
}
},
},
computed: {
isShowCheckbox() {
return this.careerEvadataType === 2 && !this.isView;
},
TeamTableColumnMore() {
return this.scoreCombinedFlag === 1
? TeamTableColumnOne
: TeamTableColumnTwo;
},
FirstTableColumn() {
return this.scoreCombinedFlag === 1
? FirstTableColumnOne
: FirstTableColumnTwo;
},
SecondTableColumn() {
return this.scoreCombinedFlag === 1
? SecondTableColumnOne
: SecondTableColumnTwo;
},
ThirdTableColumn() {
return this.scoreCombinedFlag === 1
? ThirdTableColumnOne
: ThirdTableColumnTwo;
},
EvaluateScoreList() {
return EvaluateScoreList;
},
},
};
</script>
<style lang="less" scoped>
.iconClass {
font-size: 24px;
cursor: pointer;
margin-right: 5px;
}
.shuline {
width: 0;
border: 1px solid #d4d8e2;
position: relative;
top: 21px;
right: -11px;
}
.hengxian {
width: 30px;
border: 1px solid #d4d8e2;
height: 0;
position: relative;
top: 20px;
right: -10px;
}
.hengline {
width: 80px;
border: 1px solid #d4d8e2;
height: 0;
position: relative;
top: 19px;
right: -11px;
}
.tableWarm {
flex: 1;
overflow: hidden;
display: flex;
margin-bottom: 20px;
position: relative;
}
.flex {
display: flex;
}
.larger {
flex: 1;
overflow: hidden;
// position: relative;
}
.hengxian {
width: 60px;
height: 0;
border: 1px solid #d4d8e2;
}
.ulClass {
border-bottom: 1px dotted gainsboro;
}
.wrapClass {
white-space: pre-wrap;
}
.nothingTitle{
color: #9499AA;
font-size: 14px;
line-height: 20px;
text-align: center;
}
.nothingClass{
display: flex;
justify-content: center;
}
</style>
