iscs 代码调整
This commit is contained in:
joylink_cuiweidong
parent
4d37cc9267
commit
c9ec52a7c9
@ -142,12 +142,6 @@ export default {
|
||||
formModel: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
97
src/views/iscs_new/components/tableForm.vue
Normal file
97
src/views/iscs_new/components/tableForm.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="small" class="addStatus" @click="addStatus">添加</el-button>
|
||||
<el-form ref="form" class="tableForm" :model="formModel">
|
||||
<!-- label-width="110px" -->
|
||||
<el-table :data="formModel.stateList" stripe class="eachStatusTable" size="mini">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
{{ 111 }}
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="168">
|
||||
<!-- 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:148px" :maxlength="100" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" width="210">
|
||||
<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:190px" :maxlength="100" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- :model="formModel" -->
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'TableForm',
|
||||
props: {
|
||||
stateList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formModel:{stateList:this.stateList}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
addStatus() {
|
||||
this.formModel.stateList.push({status:'', description:''});
|
||||
},
|
||||
deleteStatus(index, row) {
|
||||
this.formModel.stateList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.eachStatusTable{
|
||||
width: 530px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
border: 1px #dedede solid;
|
||||
}
|
||||
.addStatus{
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.demo-table-expand {
|
||||
// font-size: 0;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -15,9 +15,11 @@
|
||||
@click="onSave"
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
|
||||
<el-tab-pane label="元素绘制" name="first">
|
||||
<el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
|
||||
<el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
|
||||
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
|
||||
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="bottomBtnGroup">
|
||||
@ -25,6 +27,15 @@
|
||||
<el-button v-show="selected" type="warning" size="small" @click="onModify">修改</el-button>
|
||||
<el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="状态编辑" name="second">
|
||||
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
|
||||
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
|
||||
<table-form :ref="'tableform'+composeElem.code" :state-list="composeElem.stateList" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,6 +46,7 @@ import localStore from 'storejs';
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
|
||||
import DataForm from '../components/dataForm';
|
||||
import TableForm from '../components/tableForm';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import idb from '../utils/indexedDb.js';
|
||||
@ -44,7 +56,8 @@ export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
iscsCanvas,
|
||||
DataForm
|
||||
DataForm,
|
||||
TableForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -56,8 +69,11 @@ export default {
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
enabledTab:'',
|
||||
cardTab:'first',
|
||||
statusTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[]
|
||||
elementList:[],
|
||||
composeElemList:[]
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
@ -74,6 +90,7 @@ export default {
|
||||
this.composeName = this.$route.query.composeName;
|
||||
this.elementList = new BuilderFactory().getFormList();
|
||||
this.enabledTab = this.elementList[0].code;
|
||||
this.getComposeElemList();
|
||||
},
|
||||
methods: {
|
||||
onIscsChange(mode, system, part) {
|
||||
@ -103,6 +120,9 @@ export default {
|
||||
},
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
},
|
||||
onSelectCardTab() {
|
||||
|
||||
},
|
||||
onSelected(em) {
|
||||
if (em.model) {
|
||||
@ -126,9 +146,9 @@ export default {
|
||||
newModel.type = this.enabledTab;
|
||||
// newModel.name = '<名称>';
|
||||
newModel.stateList = [];
|
||||
debugger;
|
||||
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
|
||||
this.clear(this.enabledTab);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -153,12 +173,22 @@ export default {
|
||||
model.name = this.selected.name;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
|
||||
this.clear(this.enabledTab);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
clear(enabledTab) {
|
||||
this.$refs['dataform' + enabledTab][0].init();
|
||||
this.selected = null;
|
||||
},
|
||||
getComposeElemList() {
|
||||
const source = this.$iscs.getSource();
|
||||
if (source.elementList) {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
debugger;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -175,6 +205,28 @@ export default {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom:30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.map-view {
|
||||
@ -259,4 +311,7 @@ export default {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#cardTab .el-tabs__content{
|
||||
padding:0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user