pms-front/src/views/worklog/components/rightTable.vue

238 lines
7.2 KiB
Vue

<template>
<div class="container">
<div class="topBox">
<div>
<div class="topTitle">当日日志</div>
<div class="topText">总计填报工时:<span>1</span></div>
</div>
<div>
<el-button type="primary" @click="handleAdd">
<el-icon class="el-icon-plus" />
添加日志
</el-button>
</div>
</div>
<!-- 表格区域 -->
<el-table
:data="tableData"
style="width: 100%"
class="tableBox"
>
<el-table-column label="序号" width="70" prop="id" />
<el-table-column label="项目名称" prop="versionNumber">
<template #default="scope">
<div>
<el-dropdown
trigger="click"
placement="bottom"
@command="
(data) => {
changeRow(data, 'demandStatus', scope.row);
}
"
>
<el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
>
{{
statusList[scope.row.demandStatus]
? statusList[scope.row.demandStatus].dictLabel
: ""
}}</el-radio
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in statusList"
:key="item.dictValue"
:command="item.dictValue"
:class="{
tableSelect1: true,
selectedItem1: item.dictValue == scope.row.demandStatus,
}"
><el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(item.dictValue)]"
>
{{
statusList[item.dictValue]
? statusList[item.dictValue].dictLabel
: ""
}}</el-radio
></el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
<el-table-column label="版本" prop="title">
<template #default="scope">
<div>
<el-dropdown
trigger="click"
placement="bottom"
@command="
(data) => {
changeRow(data, 'demandStatus', scope.row);
}
"
>
<el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
>
{{
statusList[scope.row.demandStatus]
? statusList[scope.row.demandStatus].dictLabel
: ""
}}</el-radio
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in statusList"
:key="item.dictValue"
:command="item.dictValue"
:class="{
tableSelect1: true,
selectedItem1: item.dictValue == scope.row.demandStatus,
}"
><el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(item.dictValue)]"
>
{{
statusList[item.dictValue]
? statusList[item.dictValue].dictLabel
: ""
}}</el-radio
></el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
<el-table-column label="项目需求">
<template #default="scope">
<div>
<el-dropdown
trigger="click"
placement="bottom"
@command="
(data) => {
changeRow(data, 'demandStatus', scope.row);
}
"
>
<el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(scope.row.demandStatus)]"
>
{{
statusList[scope.row.demandStatus]
? statusList[scope.row.demandStatus].dictLabel
: ""
}}</el-radio
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in statusList"
:key="item.dictValue"
:command="item.dictValue"
:class="{
tableSelect1: true,
selectedItem1: item.dictValue == scope.row.demandStatus,
}"
><el-radio
v-model="scope.row.demandStatus"
:label="scope.row.demandStatus"
:class="['status-tag', getStatusClass(item.dictValue)]"
>
{{
statusList[item.dictValue]
? statusList[item.dictValue].dictLabel
: ""
}}</el-radio
></el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
<el-table-column label="工作内容" prop="responsiblePersonName">
<template #default="scope">
<div @click="openUser('change', scope.row)" style="cursor: pointer">
{{ scope.row.responsiblePersonName }}
</div>
</template>
</el-table-column>
<el-table-column label="工时分配" prop="estimatedWorkHours" />
<el-table-column label="操作" width="120">
<template #default="scope">
<div>
<el-button type="text" @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button
type="text"
@click="handleDelete(scope.row)"
style="color: #666"
>
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "RightTable",
data() {
return {
statusList: [],
};
},
};
</script>
<style scoped lang="scss">
.container {
padding: 20px;
background-color: #ffffff;
min-width: 1200px;
}
.topBox {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.topTitle {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.topText {
color: #999999;
font-weight: 600;
font-size: 16px;
span {
margin: 0 5px;
color: #333;
}
}
}
</style>