150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
|
||
<template>
|
||
<el-card shadow="always" class="common-card-container" style="margin-top:25px;">
|
||
<div slot="header">
|
||
<span class="card-title">策略配置：{{$home.updateStrategyName}}</span>
|
||
<div style="float: right; padding: 3px 0">
|
||
<el-button type="warning" size="mini" @click="changeEditStatus">{{edit?'保存':'编辑'}}</el-button>
|
||
<el-button type="default" size="mini" @click="cancelChange" v-show="edit === true">取消</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 6px 12px 6px;">
|
||
<div class="cl-items" v-for="(item,index) in tableData" :key="index+'lclf'">
|
||
<div class="cl-header">{{item.month}}月</div>
|
||
<div class="cl-content">
|
||
<div class="cl-name" v-if="!edit">
|
||
{{item.templateName || '-'}}
|
||
</div>
|
||
<template v-else>
|
||
<el-select v-model="tableData[index].templateId" :disabled="!edit" class="temp-select" placeholder="请选择" clearable size="mini">
|
||
<el-option
|
||
v-for="(item,index) in tempList"
|
||
:key="index+'sjpz'"
|
||
:label="item.templateName"
|
||
:value="item.templateId">
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</el-card>
|
||
</template>
|
||
<script>
|
||
import {timeConfigList, getTempNameList,setTimeConfigList} from '@/api/ems/dzjk'
|
||
export default {
|
||
inject:['$home'],
|
||
data() {
|
||
return {
|
||
edit:false,
|
||
loading:false,
|
||
tableData:[],
|
||
tempList:[]
|
||
}
|
||
},
|
||
methods:{
|
||
changeSiteId(){
|
||
this.tableData=[]
|
||
this.tempList=[]
|
||
this.edit = false
|
||
},
|
||
init(){
|
||
this.getTimeConfigList()
|
||
},
|
||
getTempList(){
|
||
const strategyId = this.$home.updateStrategyId
|
||
const siteId=this.$home.siteId
|
||
getTempNameList({strategyId,siteId}).then(response => {
|
||
this.tempList =response?.data || [];
|
||
})
|
||
},
|
||
getTimeConfigList(){
|
||
const strategyId = this.$home.updateStrategyId
|
||
const siteId=this.$home.siteId
|
||
return timeConfigList({strategyId,siteId}).then(response => {
|
||
const data = JSON.parse(JSON.stringify(response?.data || []))
|
||
if(data.length === 0){
|
||
for(var i=1;i<=12;i++){
|
||
data.push({
|
||
month:i,
|
||
strategyId,
|
||
siteId,
|
||
templateId:'',
|
||
templateName:''
|
||
})
|
||
}
|
||
}
|
||
this.tableData=data
|
||
})
|
||
},
|
||
cancelChange(){
|
||
this.edit =false
|
||
this.getTimeConfigList()
|
||
},
|
||
changeEditStatus(){
|
||
//当前状态是编辑状态
|
||
if(this.edit){
|
||
console.log('this.tableData',this.tableData)
|
||
const strategyId = this.$home.updateStrategyId
|
||
const siteId=this.$home.siteId
|
||
this.tableData.forEach(item=>{
|
||
item.siteId=siteId
|
||
item.strategyId=strategyId
|
||
item.templateName = (this.tempList.find(temp=>temp.templateId===item.templateId) || {}).templateName || ''
|
||
})
|
||
setTimeConfigList(this.tableData).then(response => {
|
||
if(response?.code === 200){
|
||
//更改成功 调用接口更新数据
|
||
this.getTimeConfigList()
|
||
this.edit=false;
|
||
}
|
||
})
|
||
}else{
|
||
this.edit=true;
|
||
this.getTempList()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.cl-items{
|
||
width: 144px;
|
||
height: 90px;
|
||
line-height: 16px;
|
||
display: inline-block;
|
||
margin:12px 6px 0 6px;
|
||
font-size:14px;
|
||
color:#333333;
|
||
border: 1px solid #eeeeee;
|
||
.cl-header{
|
||
background: #FFE5AC;
|
||
text-align: center;
|
||
font-size:16px;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
width: 100%;
|
||
}
|
||
.cl-content{
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
height: 58px;
|
||
width: 100%;
|
||
.cl-name{
|
||
position: absolute;
|
||
top:50%;
|
||
left:50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.temp-select{
|
||
width: 90%;
|
||
position: absolute;
|
||
top:50%;
|
||
left:50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|