<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<!-- 你的 -->
<!-- <el-table-column prop="name" v-for="process in processList" :key="process.processId" :label="process.processName">
<template slot-scope="scope">
<el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionManager')"
type="danger">组长</el-tag>
<el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionMembers')"
type="primary">组员</el-tag>
<el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionReviewer')"
type="warning">主审</el-tag>
<el-tag style="margin: 0 2px;" v-if="!hasRole(scope.row, process.processId, 'intentionManager') &&
!hasRole(scope.row, process.processId, 'intentionMembers') &&
!hasRole(scope.row, process.processId, 'intentionReviewer')
">无角色</el-tag>
<el-select size="mini" v-model="value" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column> -->
<!-- 我写的 -->
<el-table-column
prop="name"
v-for="jsonHand in jsonHandList"
:key="jsonHand.oa"
:label="jsonHand.name"
>
<template slot-scope="scope">
<el-tag
style="margin: 0 2px"
v-if="hasRole(scope.row, jsonHand.oa, 'intentionManager')"
type="danger"
>组长</el-tag
>
<el-tag
style="margin: 0 2px"
v-if="hasRole(scope.row, jsonHand.oa, 'intentionMembers')"
type="primary"
>组员</el-tag
>
<el-tag
style="margin: 0 2px"
v-if="hasRole(scope.row, jsonHand.oa, 'intentionReviewer')"
type="warning"
>主审</el-tag
>
<el-tag
style="margin: 0 2px"
v-if="
!hasRole(scope.row, jsonHand.oa, 'intentionManager') &&
!hasRole(scope.row, jsonHand.oa, 'intentionMembers') &&
!hasRole(scope.row, jsonHand.oa, 'intentionReviewer')
"
>无角色</el-tag
>
<el-select size="mini" v-model="value" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
options: [
{
value: "apportionManager",
label: "项目组长",
},
{
value: "apportionMembers",
label: "项目组员",
},
{
value: "apportionReviewer",
label: "项目主审",
},
],
value: "",
intentionHandlerList: {
jsonHand: [
{ name: "宋会", oa: "SH" },
{ name: "李高", oa: "LIGAO" },
{ name: "王小明", oa: "WANGXIAOMING" },
{ name: "1明", oa: "W3AOMING" },
{ name: "3明", oa: "3XIAOMING" },
],
processList: [
{ processId: 289, processName: "33333333333" },
{ processId: 288, processName: "2222222222222" },
{ processId: 287, processName: "项目11111111" },
],
},
planProcessIntentionListByProcess: [
{
id: 28,
intentionManager: "WANGXIAOMING",
intentionMembers: "WANGXIAOMING",
intentionReviewer: "WANGXIAOMING",
planProcessId: 289,
},
{
id: 29,
intentionManager: "",
intentionMembers: "WANGXIAOMING",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 30,
intentionManager: "",
intentionMembers: "",
intentionReviewer: "WANGXIAOMING",
planProcessId: 287,
},
{
id: 31,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 289,
},
{
id: 32,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 33,
intentionManager: "",
intentionMembers: "LIGAO",
intentionReviewer: "",
planProcessId: 287,
},
{
id: 34,
intentionManager: "",
intentionMembers: "",
intentionReviewer: "SH",
planProcessId: 289,
},
{
id: 35,
intentionManager: "",
intentionMembers: "SH",
intentionReviewer: "",
planProcessId: 288,
},
{
id: 36,
intentionManager: "SH",
intentionMembers: "",
intentionReviewer: "",
planProcessId: 287,
},
],
};
},
computed: {
tableData() {
const tableData = [];
// 你的
// for (const handler of this.intentionHandlerList.jsonHand) {
// const rowData = { name: handler.name };
// for (const process of this.intentionHandlerList.processList) {
// const intention = this.planProcessIntentionListByProcess.find(
// (item) =>
// item.planProcessId === process.processId &&
// (item.intentionManager === handler.oa ||
// item.intentionMembers === handler.oa ||
// item.intentionReviewer === handler.oa)
// );
// rowData[process.processName] = intention ? intention : null;
// }
// tableData.push(rowData);
// }
// 我写的
for (const process of this.intentionHandlerList.processList) {
const rowData = { name: process.processName };
rowData.id = process.processId;
for (const handler of this.intentionHandlerList.jsonHand) {
const intention = this.planProcessIntentionListByProcess.find(
(item) => {
return (
item.planProcessId === process.processId &&
(item.intentionManager == handler.oa ||
item.intentionMembers == handler.oa ||
item.intentionMembers === handler.oa)
);
}
);
rowData[handler.name] = intention ? intention : null;
}
tableData.push(rowData);
}
console.log(tableData);
return tableData;
},
// 我写的
jsonHandList() {
return this.intentionHandlerList.jsonHand;
},
// 你写的
processList() {
return this.intentionHandlerList.processList;
},
},
methods: {
hasRole(row, oa, role) {
const intention =
row[this.jsonHandList.find((item) => item.oa === oa).name];
return intention && intention[role] !== "";
},
},
};
</script>
<style scoped>
.el-select {
width: 100px;
}
</style>