代码调整

This commit is contained in:
joylink_cuiweidong 2021-04-19 17:45:41 +08:00
parent 3341a29421
commit bc9757f7b9

View File

@ -12,24 +12,64 @@
:expand-row-keys="expandKeys"
@expand-change="expandChange"
>
<el-table-column label="状态" width="118">
<!-- covertStatusList: -->
<el-table-column type="expand">
<template slot-scope="props">
<div class="combineStatusListName">状态组合列表</div>
<el-select v-model="props.row.defaultLoop" size="mini">
<el-option label="循环" :value="true" />
<el-option label="不循环" :value="false" />
</el-select>
<!-- {{ props.row.covertStatusList }} -->
<el-button type="primary" size="mini" class="addStyle" @click="addCovertStatus(props.$index)">添加</el-button>
<el-table
:data="props.row.covertStatusList"
stripe
class="eachStatusTable"
size="mini"
row-key="id"
>
<el-table-column label="是否循环" width="98">
<template slot-scope="scope">
<el-form-item
:prop="'stateList.'+props.$index+'.status.covertStatusList.'+scope.$index+'.loop'"
>
{{ scope.row.loop?"是":'否' }}
</el-form-item>
</template>
</el-table-column>
<!-- delay
animateTime -->
<el-table-column label="次数" width="98">
<template v-if="scope.row.times" slot-scope="scope">
<el-form-item
:prop="'stateList.'+props.$index+'.status.covertStatusList.'+scope.$index+'.times'"
>
{{ scope.row.times }}
</el-form-item>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="状态" width="98">
<!-- align="center" -->
<template slot-scope="scope">
<el-form-item
:prop="'stateList.'+scope.$index+'.status'"
:rules="[{required: true, message:'请输入状态', trigger: 'blur'}]"
>
<el-input v-model="scope.row.status" size="mini" type="text" style="width:108px" :maxlength="100" />
<el-input v-model="scope.row.status" size="mini" type="text" style="width:88px" :maxlength="100" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="描述" width="120">
<el-table-column label="描述" width="100">
<template slot-scope="scope">
<el-form-item
:prop="'stateList.'+scope.$index+'.description'"
:rules="[{required: true, message:'请输入描述', trigger: 'blur'}]"
>
<el-input v-model="scope.row.description" size="mini" type="text" style="width:110px" :maxlength="100" />
<el-input v-model="scope.row.description" size="mini" type="text" style="width:90px" :maxlength="100" />
</el-form-item>
</template>
</el-table-column>
@ -101,18 +141,46 @@ export default {
},
addComposeStatus() {
const length = this.formModel.stateList.length;
this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false});
this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false, covertStatusList:[], defaultLoop:false});
this.expandKeys.push(length + 1);
},
deleteStatus(index, row) {
this.formModel.stateList.splice(index, 1);
const key = this.expandKeys.findIndex(each=>{ return each == row.id; });
if (key > 0) { this.expandKeys.splice(key, 1); }
},
addCovertStatus(index) {
debugger;
// const covertStatusList = ;
if (this.formModel.stateList[index].defaultLoop) {
const covertStatusList = this.formModel.stateList[index].covertStatusList;
covertStatusList.push({loop:this.formModel.stateList[index].defaultLoop,
frameList:[], times:1, delay:2, animateTime:10});
this.$set(this.formModel.stateList[index], 'covertStatusList', covertStatusList);
} else {
this.formModel.stateList[index].covertStatusList.push({loop:this.formModel.stateList[index].defaultLoop,
frameList:[] });
}
// if (!covertStatusList) {
// this.$set(this.formModel.stateList[index], type, {});
// }
// const data = this.formModel.stateList[index];
// const dataName = 'default' + type.replace(type[0], type[0].toUpperCase()) + 'Select';
// if (!data[type][data[dataName]] && data[dataName]) {
// const other = utils.deepClone(this.formModel[type][data[dataName]]);
// this.$set(this.formModel.stateList[index][type], data[dataName], other);
// }
}
}
};
</script>
<style lang="scss" scoped>
.combineStatusListName{
font-size: 14px;
width: 200px;
background: #fff;
margin-bottom:10px;
}
.addComposeStatus{
float: right;
display: inline-block;
@ -120,4 +188,8 @@ export default {
}
.composeStatusTable{}
.composeStatusForm{padding:15px;}
.composeStatusTable .eachStatusTable{margin-top:10px;}
</style>
<style lang="sass">
.composeStatusTable .el-table__expanded-cell{padding: 20px;}
</style>