iscs 代码调整
This commit is contained in:
joylink_cuiweidong
parent
bc9757f7b9
commit
2ef2d01fc0
@ -19,6 +19,12 @@
|
||||
style="float: right; padding: 3px 0; margin-right: 5px;"
|
||||
@click="onPreview"
|
||||
>预览</el-button>
|
||||
<el-button
|
||||
v-if=" composeElemList.length>0"
|
||||
type="text"
|
||||
style="float: right; padding: 3px 0; margin-right: 5px;"
|
||||
@click="onModifyStatus"
|
||||
>状态编辑</el-button>
|
||||
</div>
|
||||
<el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
|
||||
<el-tab-pane label="元素绘制" name="first">
|
||||
@ -43,12 +49,16 @@
|
||||
<el-button type="primary" size="small" @click="onSaveStatus">保存</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="状态组合编辑" name="third">
|
||||
<status-combine-edit :state-list="stateList" @saveStateList="saveStateList" />
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="状态编辑" name="third">
|
||||
<status-combine-edit ref="editStatusForm" :state-list="stateList" @saveStateList="saveStateList" />
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="small" @click="onEditStatusSave">保存</el-button>
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
<status-list ref="statusList" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -62,7 +72,8 @@ import orders from '@/iscs_new/utils/orders';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import Idb from '../utils/indexedDb.js';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
import StatusCombineEdit from './statusCombineEdit';
|
||||
// import StatusCombineEdit from './statusCombineEdit';
|
||||
import StatusList from './statusList';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
@ -71,7 +82,8 @@ export default {
|
||||
iscsCanvas,
|
||||
DataForm,
|
||||
TableForm,
|
||||
StatusCombineEdit
|
||||
StatusList
|
||||
// StatusCombineEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -233,8 +245,19 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
onEditStatusSave() {
|
||||
this.$refs['editStatusForm'].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.onSave();
|
||||
}
|
||||
});
|
||||
},
|
||||
onPreview() {
|
||||
this.$router.push({ path: `/iscs_new/design/compose/preview`, query:{id:this.$route.query.id} });
|
||||
},
|
||||
|
||||
onModifyStatus() {
|
||||
this.$refs.statusList.doShow();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -13,47 +13,7 @@
|
||||
@expand-change="expandChange"
|
||||
>
|
||||
<!-- 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'"
|
||||
@ -103,9 +63,10 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="70">
|
||||
<el-table-column label="操作" width="115">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
<el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
|
||||
<el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -141,7 +102,9 @@ export default {
|
||||
},
|
||||
addComposeStatus() {
|
||||
const length = this.formModel.stateList.length;
|
||||
this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false, covertStatusList:[], defaultLoop: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) {
|
||||
@ -149,28 +112,23 @@ export default {
|
||||
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);
|
||||
// }
|
||||
modifyStatus(index, row) {
|
||||
this.$refs.eachStatusTable.doShow(index, row);
|
||||
}
|
||||
// addCovertStatus(index) {
|
||||
// if (this.formModel.stateList[index].defaultLoop) {
|
||||
// const covertStatusList = this.formModel.stateList[index].covertStatusList;
|
||||
// const length = covertStatusList.length;
|
||||
// covertStatusList.push({id:length + 1, loop:this.formModel.stateList[index].defaultLoop,
|
||||
// delay:2, animateTime:10, frameList:[]});
|
||||
// // ,times:1,
|
||||
// // this.formModel.stateList[index].covertStatusList = covertStatusList;
|
||||
// this.$set(this.formModel.stateList[index], 'covertStatusList', covertStatusList);
|
||||
// } else {
|
||||
// this.formModel.stateList[index].covertStatusList.push({id:length + 1, loop:this.formModel.stateList[index].defaultLoop,
|
||||
// frameList:[]});
|
||||
// }
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
229
src/views/iscs_new/iscsDraw/statusList.vue
Normal file
229
src/views/iscs_new/iscsDraw/statusList.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="composeStatusList"
|
||||
title="状态编辑"
|
||||
:visible.sync="show"
|
||||
width="800px"
|
||||
:before-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-button type="primary" size="small" class="addComposeStatus" @click="addComposeStatus">添加</el-button>
|
||||
<el-form ref="form" class="composeStatusForm" :model="formModel">
|
||||
<el-table
|
||||
:data="formModel.stateList"
|
||||
stripe
|
||||
border
|
||||
class="composeStatusTable"
|
||||
height="360"
|
||||
size="mini"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column label="状态" width="169">
|
||||
<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:149px" :maxlength="100" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" width="170">
|
||||
<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:150px" :maxlength="100" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权重" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item
|
||||
:prop="'stateList.'+scope.$index+'.weight'"
|
||||
:rules="[{required: true, message:'请输入权重', trigger: 'blur'}]"
|
||||
>
|
||||
<el-input-number v-model="scope.row.weight" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否可重置" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :prop="'stateList.'+scope.$index+'.needDefault'">
|
||||
<el-switch
|
||||
v-model="scope.row.needDefault"
|
||||
size="small"
|
||||
active-color="#409eff"
|
||||
inactive-color="#dcdfe6"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
|
||||
<el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="medium" @click="onEditStatusSave">保存</el-button>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
class="composeStatus"
|
||||
title="状态组合"
|
||||
:visible.sync="innerShow"
|
||||
width="700px"
|
||||
:before-close="doInnerClose"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
>
|
||||
<div class="loopTitle">是否动画：</div>
|
||||
<el-select v-model="defaultLoop" size="mini">
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
<el-button type="primary" size="mini" class="addStyle" @click="addCovertStatus">添加</el-button>
|
||||
<el-form ref="Innerform" class="composeStatusForm" :model="statusModel">
|
||||
<el-table
|
||||
:data="statusModel.covertStatusList"
|
||||
stripe
|
||||
border
|
||||
style="margin-top:10px;"
|
||||
class="eachStatusTable"
|
||||
size="mini"
|
||||
row-key="id"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动画时间" width="120" align="center">
|
||||
<template slot-scope="scope">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="动画延时" width="120" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item
|
||||
v-if="scope.row.loop"
|
||||
:prop="'covertStatusList.'+scope.$index+'.delay'"
|
||||
:rules="[{required: true, message:'请输入动画延时', trigger: 'blur'}]"
|
||||
>
|
||||
<el-input-number v-model="scope.row.delay" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态组合" width="319">
|
||||
<template slot-scope="scope">
|
||||
<!-- {{ 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-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-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> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="medium" @click="onEditComposeStatus">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'StatusList',
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
defaultLoop:false,
|
||||
// covertStatusList:[],
|
||||
innerShow:false,
|
||||
formModel:{
|
||||
stateList:[]
|
||||
},
|
||||
statusModel:{
|
||||
covertStatusList:[]
|
||||
},
|
||||
selectedElement:'',
|
||||
selectedElementStatus:'',
|
||||
elementList:[]
|
||||
// statusList:[]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
doShow() {
|
||||
this.show = true;
|
||||
},
|
||||
addComposeStatus() {
|
||||
const length = this.formModel.stateList.length;
|
||||
this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false,
|
||||
covertStatusList:[]});
|
||||
},
|
||||
deleteStatus(index, row) {
|
||||
this.formModel.stateList.splice(index, 1);
|
||||
},
|
||||
onEditStatusSave() {
|
||||
|
||||
},
|
||||
modifyStatus(index, row) {
|
||||
this.innerShow = true;
|
||||
this.statusModel.covertStatusList = row.covertStatusList;
|
||||
},
|
||||
doInnerClose() {
|
||||
this.innerShow = false;
|
||||
},
|
||||
addCovertStatus() {
|
||||
if (this.defaultLoop) {
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[]});
|
||||
} else {
|
||||
this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[] });
|
||||
}
|
||||
|
||||
},
|
||||
onEditComposeStatus() {
|
||||
|
||||
},
|
||||
addElementStatus(index, loop) {
|
||||
if (loop) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.composeStatusTable{margin-top:10px;}
|
||||
.bottomBtnGroup{
|
||||
width: 100%;
|
||||
margin-top:10px;
|
||||
text-align: center;
|
||||
display: inline-block
|
||||
}
|
||||
.loopTitle{display:inline-block;}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.composeStatusList .el-dialog__body,.composeStatus .el-dialog__body{padding: 15px 20px;}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user