<template>
<div class="list-config-container">
<div class="config-header">待办事项配置</div>
<div class="config-content">
<div class="content-left">
<p class="sub-title">需跟进事件</p>
<div class="content-text">
<el-input
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="listConfig.text1">
</el-input>
</div>
<div class="content-table">
<div class="table-header">
<div class="common-item">名称</div>
<div class="common-item">内容</div>
<div class="common-item">责任人</div>
<div class="common-item">责任领导</div>
<div class="common-item">办理进度</div>
<div class="operation"></div>
</div>
<div v-for="(item, index) in listConfig.followPoliceData" :key="index" class="table-body">
<div class="common-item">
<el-input v-model="item.name" class="progress-inputStyle"></el-input>
</div>
<div class="common-item">
<el-input v-model="item.content" class="progress-inputStyle"></el-input>
</div>
<div class="common-item">
<el-input v-model="item.responsiblePolice" class="progress-inputStyle"></el-input>
</div>
<div class="common-item">
<el-input v-model="item.leaderPolice" class="progress-inputStyle"></el-input>
</div>
<div class="common-item">
<el-input v-model="item.progress" class="progress-inputStyle"></el-input>
</div>
<div class="operation">
<i
v-show="index == 0"
class="el-icon-circle-plus custom-icon"
@click="addFollowData()"
>
</i>
<i
v-show="index != 0"
class="el-icon-remove custom-icon"
@click="reduceFollowData(index)"
>
</i>
</div>
</div>
</div>
</div>
</div>
<div class="config-bottom">
<span class="save" @click="save">保存</span>
</div>
</div>
</template>
<script>
export default {
name: "toDoListConfig",
data() {
return {
listConfig: {
text1: "",
text2: "",
followPoliceData: [
{
name: "- -",
content: "- -",
responsiblePolice: "- -",
leaderPolice: "- -",
progress: "- -",
}
],
leaderSetData: [
{
name: "- -",
content: "- -",
responsiblePolice: "- -",
leaderPolice: "- -",
progress: "- -",
}
]
}
}
},
methods: {
save() {
},
addFollowData() {
this.listConfig.followPoliceData.push(
{
name: "- -",
content: "- -",
responsiblePolice: "- -",
leaderPolice: "- -",
progress: "- -",
}
)
},
reduceFollowData(index) {
this.listConfig.followPoliceData.splice(index, 1);
},
}
}
</script>
<style lang="less" scoped>
.list-config-container {
width: 100%;
height: 100%;
background: url("../../images/container_bg.png") no-repeat 100% 100%;
background-size: 100% 100%;
position: relative;
font-size: 14px;
color: #fff;
.custom-icon {
font-size: 20px;
cursor: pointer;
}
.config-header {
width: 100%;
text-align: center;
color: #fff;
font-size: 22px;
font-weight: bold;
height: 80px;
letter-spacing: 3px;
line-height: 80px;
}
.config-content {
width: 100%;
height: calc(100% - 160px);
display: flex;
p {
margin: 0;
}
.progress-inputStyle{
width: 100%;
background: rgba(18, 34, 70, 0.8);
height: 34px;
/deep/ .el-input__inner {
background: rgba(18, 34, 70, 0.8);
border: none;
padding: 0;
color: #fff;
height: 34px;
line-height: 34px;
text-align: center;
}
}
/deep/ .el-textarea {
background: rgba(18, 34, 70, 0.8);
color: #fff;
font-size: 16px;
}
/deep/ .el-textarea__inner {
background: rgba(18, 34, 70, 0.8);
color: #fff;
font-size: 16px;
font-family: inherit;
border: 1px solid rgba(15, 52, 95);
}
.sub-title {
font-size: 20px;
font-weight: bold;
height: 46px;
line-height: 46px;
}
.content-left {
width: 50%;
height: 100%;
padding: 20px 70px;
}
.content-right {
width: 50%;
height: 100%;
border-left: 1px dashed #143b7a;
padding: 20px 70px;
}
.content-table {
border: 1px solid rgba(15, 52, 95);
margin-top: 20px;
}
.table-header {
display: flex;
height: 40px;
align-items: center;
text-align: center;
font-size: 16px;
}
.table-body {
display: flex;
border-top: 1px solid rgba(15, 52, 95);
text-align: center;
}
.common-item {
flex: 1;
}
.operation {
width: 60px;
padding-top: 5px;
cursor: pointer;
// background: rgba(18, 34, 70, 0.8);
}
}
.config-bottom {
width: 100%;
text-align: right;
padding-right: 60px;
padding-top: 10px;
.save {
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
background: rgba(18, 34, 70, 0.8);
text-align: center;
cursor: pointer;
}
}
}
</style>
