代码调整
This commit is contained in:
joylink_cuiweidong
parent
2ef2d01fc0
commit
71628dcdd2
@ -78,7 +78,7 @@
|
||||
class="composeStatus"
|
||||
title="状态组合"
|
||||
:visible.sync="innerShow"
|
||||
width="700px"
|
||||
width="750px"
|
||||
:before-close="doInnerClose"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
@ -101,9 +101,9 @@
|
||||
>
|
||||
<el-table-column label="是否动画" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item prop="loop">
|
||||
<div style="">{{ scope.row.loop?'是':'否' }}</div>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="loop"> -->
|
||||
<div style="">{{ scope.row.loop?'是':'否' }}</div>
|
||||
<!-- </el-form-item> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动画时间" width="120" align="center">
|
||||
@ -111,6 +111,7 @@
|
||||
<el-form-item v-if="scope.row.loop" :prop="'covertStatusList.'+scope.$index+'.animateTime'" :rules="[{required: true, message:'请输入动画时间', trigger: 'blur'}]">
|
||||
<el-input-number v-model="scope.row.animateTime" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
|
||||
</el-form-item>
|
||||
<div v-else>无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动画延时" width="120" align="center">
|
||||
@ -122,6 +123,7 @@
|
||||
>
|
||||
<el-input-number v-model="scope.row.delay" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
|
||||
</el-form-item>
|
||||
<div v-else>无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态组合" width="319">
|
||||
@ -129,16 +131,30 @@
|
||||
<!-- {{ scope.row.frameList }} -->
|
||||
<!-- <div v-if="scope.row.frameList.length<=0"> -->
|
||||
<!-- 元素 -->
|
||||
<el-select v-model="selectedElement" size="mini" style="width:115px;display:inline-block" placeholder="请选择元素">
|
||||
<el-select
|
||||
v-model="scope.row.selectedElement"
|
||||
size="mini"
|
||||
style="width:115px;display:inline-block"
|
||||
placeholder="请选择元素"
|
||||
@change="changeCurrentStatus(scope.$index,scope.row.selectedElement)"
|
||||
>
|
||||
<el-option v-for="(element,index) in elementList" :key="index" :label="element.name" :value="element.name" />
|
||||
</el-select>
|
||||
<el-select v-model="selectedElementStatus" size="mini" placeholder="请选择状态" style="width:115px;display:inline-block">
|
||||
<el-select v-model="scope.row.selectedElementStatus" size="mini" placeholder="请选择状态" style="width:115px;display:inline-block">
|
||||
<el-option v-for="(status,index) in scope.row.statusList" :key="index" :label="status.name" :value="status.name" />
|
||||
</el-select>
|
||||
<el-button type="primary" size="mini" class="addStyle" @click="addElementStatus(scope.$index,scope.row.loop)">添加</el-button>
|
||||
<div v-for="(frame,index) in scope.row.frameList" :key="index">
|
||||
元素名称：{{ frame.name }} 状态：{{ frame.status }}
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="50">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteCovertStatus(scope.$index,scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<div class="bottomBtnGroup">
|
||||
@ -148,6 +164,8 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import Idb from '../utils/indexedDb.js';
|
||||
export default {
|
||||
name:'StatusList',
|
||||
data() {
|
||||
@ -162,9 +180,9 @@ export default {
|
||||
statusModel:{
|
||||
covertStatusList:[]
|
||||
},
|
||||
selectedElement:'',
|
||||
selectedElementStatus:'',
|
||||
elementList:[]
|
||||
elementList:[],
|
||||
currentIndex:0,
|
||||
model:{}
|
||||
// statusList:[]
|
||||
};
|
||||
},
|
||||
@ -173,7 +191,13 @@ export default {
|
||||
this.show = false;
|
||||
},
|
||||
doShow() {
|
||||
this.formModel.stateList = [];
|
||||
this.show = true;
|
||||
Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
|
||||
this.formModel.stateList = resp.stateList;
|
||||
this.model = resp;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
addComposeStatus() {
|
||||
const length = this.formModel.stateList.length;
|
||||
@ -184,32 +208,79 @@ export default {
|
||||
this.formModel.stateList.splice(index, 1);
|
||||
},
|
||||
onEditStatusSave() {
|
||||
|
||||
const that = this;
|
||||
that.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
// that.formModel;
|
||||
// // const id = this.$route.query.id;
|
||||
this.model.stateList = that.formModel.stateList;
|
||||
Idb.delete('composeTemplateList', this.model.id);
|
||||
Idb.write('composeTemplateList', this.model);
|
||||
}
|
||||
});
|
||||
},
|
||||
modifyStatus(index, row) {
|
||||
this.currentIndex = index;
|
||||
this.innerShow = true;
|
||||
this.statusModel.covertStatusList = row.covertStatusList;
|
||||
this.statusModel.covertStatusList = Object.values(row.covertStatusList);
|
||||
const source = this.$iscs.getSource();
|
||||
const composeElemList = source.elementList;
|
||||
this.elementList = [];
|
||||
composeElemList.forEach(each=>{
|
||||
this.elementList.push({name:each.name, stateList:each.stateList});
|
||||
});
|
||||
},
|
||||
doInnerClose() {
|
||||
this.innerShow = false;
|
||||
},
|
||||
addCovertStatus() {
|
||||
if (this.defaultLoop) {
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[]});
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[], selectedElement:'', selectedElementStatus:'' });
|
||||
} else {
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[] });
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[], selectedElementStatus:'', selectedElement:'' });
|
||||
}
|
||||
|
||||
},
|
||||
onEditComposeStatus() {
|
||||
|
||||
this.innerShow = false;
|
||||
this.statusModel.covertStatusList.forEach(covert=>{
|
||||
delete covert.selectedElement;
|
||||
delete covert.selectedElementStatus;
|
||||
delete covert.statusList;
|
||||
});
|
||||
this.formModel.stateList[this.currentIndex].covertStatusList = deepAssign({}, this.statusModel.covertStatusList);
|
||||
},
|
||||
deleteCovertStatus(index, row) {
|
||||
this.statusModel.covertStatusList.splice(index, 1);
|
||||
},
|
||||
addElementStatus(index, loop) {
|
||||
if (loop) {
|
||||
|
||||
} else {
|
||||
|
||||
const frameList = this.statusModel.covertStatusList[index].frameList || [];
|
||||
const indexFrame = frameList.findIndex(frame=>{
|
||||
return frame.name == this.statusModel.covertStatusList[index].selectedElement &&
|
||||
frame.status == this.statusModel.covertStatusList[index].selectedElementStatus;
|
||||
});
|
||||
if (indexFrame < 0) {
|
||||
this.statusModel.covertStatusList[index].frameList.push({name:this.statusModel.covertStatusList[index].selectedElement,
|
||||
status:this.statusModel.covertStatusList[index].selectedElementStatus});
|
||||
}
|
||||
}
|
||||
this.statusModel.covertStatusList[index].selectedElementStatus = '';
|
||||
this.statusModel.covertStatusList[index].selectedElement = '';
|
||||
},
|
||||
changeCurrentStatus(index, selectedElement) {
|
||||
this.statusModel.covertStatusList[index].selectedElementStatus = '';
|
||||
this.statusModel.covertStatusList[index].statusList = [];
|
||||
const list = this.elementList.find(each=>{ return each.name == selectedElement; });
|
||||
if (list && list.stateList && list.stateList.length > 0) {
|
||||
const temp = list.stateList;
|
||||
temp.forEach(each=>{
|
||||
this.statusModel.covertStatusList[index].statusList.push({name:each.status});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user