增加group组功能
This commit is contained in:
lVAL
parent
d07db0e516
commit
a042147faf
@ -929,27 +929,6 @@ export const asyncRouter = [
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'iscs/system',
|
||||
redirect: '/iscs/system',
|
||||
component: IscsSystem,
|
||||
meta: {
|
||||
i18n: 'router.iscsSystem',
|
||||
roles: [admin]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'config/:mode',
|
||||
component: IscsConfig,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'stationConfig/:mode',
|
||||
component: IscsStationConfig,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -976,6 +955,26 @@ export const asyncRouter = [
|
||||
component: IscsDraw,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'system',
|
||||
component: IscsSystem,
|
||||
meta: {
|
||||
i18n: 'router.iscsSystem',
|
||||
roles: [admin, user]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'config/:mode',
|
||||
component: IscsConfig,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'stationConfig/:mode',
|
||||
component: IscsStationConfig,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
<template>
|
||||
<div class="group-card">
|
||||
<el-tabs type="border-card" v-model="active">
|
||||
<el-tab-pane name="first" label="自定用创建">
|
||||
<tab-custom />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="second" label="模板创建">
|
||||
<tab-template />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="map-control">
|
||||
<el-card type="border-card" class="heightClass">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="handleSave">{{ $t('ibp.save') }}</el-button></div>
|
||||
<el-tabs class="mapEdit" type="border-card" v-model="active">
|
||||
<el-tab-pane name="first" label="自定用创建">
|
||||
<tab-custom style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="second" label="模板创建">
|
||||
<tab-template style="width: 100%; height: 100%;" @createDataModel="createDataModel" @deleteDataModel="deleteDataModel"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TabCustom from './tab-custom';
|
||||
import TabCustom from './tab-custom.vue';
|
||||
import TabTemplate from './tab-template.vue';
|
||||
import {deviceFactory} from '@/iscs/utils/parser';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -23,6 +28,85 @@ export default {
|
||||
return {
|
||||
active: 'first'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createDataModel(models) {
|
||||
this.$store.dispatch('iscs/updateIscsDevices', models.map(el => {
|
||||
const device = deviceFactory(el._type, el);
|
||||
return device.model;
|
||||
}));
|
||||
},
|
||||
deleteDataModel(model) {
|
||||
this.$store.dispatch('iscs/deleteIscsDevices', model);
|
||||
},
|
||||
handleSave() {
|
||||
const data = JSON.stringify(this.$store.state.iscs.iscs);
|
||||
this.$emit('handleSave', data);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map-control {
|
||||
float: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.border-card{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mapEdit{
|
||||
height: calc(100% - 40px);
|
||||
.tab_pane_box{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
/deep/ .el-card__body{
|
||||
height:100%;
|
||||
}
|
||||
/deep/ {
|
||||
.mapEdit .el-tabs__nav-wrap.is-scrollable {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.mapEdit .el-tabs__header .el-tabs__item.is-active {
|
||||
border-bottom-color: #f5f7fa;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.mapEdit .el-tabs__active-bar{
|
||||
background: transparent;
|
||||
}
|
||||
.mapEdit .el-tabs__content {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
.mapEdit .el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
.card .el-tabs__nav .el-tabs__item.is-active {
|
||||
border-bottom: 2px solid #E4E7ED;
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
.card .el-tabs__nav .el-tabs__item{
|
||||
padding: 0 20px!important;
|
||||
}
|
||||
|
||||
.mapEdit .el-tabs__nav-prev {
|
||||
width: 20px;
|
||||
height: 41px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 4px #ccc;
|
||||
}
|
||||
|
||||
.mapEdit .el-tabs__nav-next {
|
||||
width: 20px;
|
||||
height: 41px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 1px 1px 4px #ccc;
|
||||
}
|
||||
}
|
||||
.heightClass{height:100%;}
|
||||
</style>
|
||||
|
||||
36
src/views/iscs/iscsDraw/group/create.vue
Normal file
36
src/views/iscs/iscsDraw/group/create.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="flex-inline">
|
||||
<el-select size="mini" v-model="type" clearable placeholder="请选择元素类型">
|
||||
<el-option v-for="item in options" :key="item.lab" :label="item.describe" :value="item.lab"></el-option>
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" @click="doCreate" >添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCreate() {
|
||||
this.$emit('create', this.type);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex-inline {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,35 @@
|
||||
<template>
|
||||
<div class="custom">
|
||||
<el-form :model="formModel" :rules="rules">
|
||||
<el-form label-width="80px" size="small" :model="formModel" :rules="rules">
|
||||
<el-form-item label="组名称" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入组名称" />
|
||||
<el-input v-model="formModel.name" placeholder="请输入组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组类型" prop="name">
|
||||
<el-select v-model="formModel.type" placeholder="请选择组类型">
|
||||
<el-select v-model="formModel.type" clearable placeholder="请选择组类型">
|
||||
<el-option v-for="item in grTypeList" :key="item.lab" :label="item.describe" :value="item.lab"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="元素列表" prop="elemList" />
|
||||
<el-table :data="formModel.elemList" style="width: 100%">
|
||||
<el-table-column label="元素类型" prop="type" />
|
||||
<el-table-column label="元素编码" prop="code" />
|
||||
<el-table-column align="right">
|
||||
<el-table stripe border :data="formModel.elemList" style="width: 100%" height="500px">
|
||||
<el-table-column align="center">
|
||||
<template slot="header">
|
||||
<el-button size="mini" type="primary" @click="visible=true">添加</el-button>
|
||||
<el-dialog width="30%" title="内层 Dialog" :visible.sync="visible" append-to-body>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleActive(scope.$index, scope.row)">激活</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
<el-create :options="elTypeList" @create="handleCreate" />
|
||||
</template>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="元素类型" prop="type" />
|
||||
<el-table-column label="元素编码" prop="code" />
|
||||
<el-table-column width="180" >
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" :type="active == scope.$index? 'danger': ''" @click="handleActive(scope.$index, scope.row)">激活</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="footer">
|
||||
//
|
||||
<el-button style="margin-left:10px" type="primary" @click="doCreateGroup">创建</el-button>
|
||||
<!-- <el-button style="margin-left:10px" type="info" @click="doUpdeteGroup">修改</el-button>
|
||||
<el-button style="margin-left:10px" type="danger" @click="doDeleteGroup">删除</el-button> -->
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -33,15 +37,27 @@
|
||||
|
||||
|
||||
<script>
|
||||
import elType from '@/iscs/status/elType.js';
|
||||
import grType from '@/iscs/status/grType.js';
|
||||
import elCreate from './create';
|
||||
import deviceType from '@/iscs/constant/deviceType.js';
|
||||
import {getUID} from '@/iscs/utils/Uid';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
elCreate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
active: -1,
|
||||
formModel: {
|
||||
name: '',
|
||||
type: '',
|
||||
elemList: []
|
||||
},
|
||||
grTypeList: [],
|
||||
elTypeList: [],
|
||||
elTypeMap: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -59,10 +75,71 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.iscs.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['iscs/updateDeviceData'];
|
||||
this.handleSetSelect(model);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.elTypeMap = {}
|
||||
this.grTypeList = Object.values(grType);
|
||||
this.elTypeList = Object.values(elType);
|
||||
Object.values(grType).forEach(el => {
|
||||
this.elTypeMap[el.lab] = el;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleActive(index, row) {
|
||||
this.active = this.active == index ? -1: index;
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
this.formModel.elemList.splice(index, 1);
|
||||
this.active = -1;
|
||||
},
|
||||
handleCreate(type) {
|
||||
if (type) {
|
||||
console.log(type);
|
||||
this.formModel.elemList.push({ type: type, code: '' })
|
||||
} else {
|
||||
this.$message.info('请选择元素类型')
|
||||
}
|
||||
},
|
||||
handleSetSelect(model) {
|
||||
const elem = this.formModel.elemList[this.active];
|
||||
if (this.active >= 0) {
|
||||
if (elem) { elem.code = model.code; }
|
||||
this.active = -1;
|
||||
} else {
|
||||
this.formModel = {}
|
||||
this.isUpdate = true;
|
||||
}
|
||||
},
|
||||
doCreateGroup() {
|
||||
const modelList = [];
|
||||
const mdoel = {
|
||||
code: getUID('group'),
|
||||
_type: deviceType.IscsGroup,
|
||||
name: this.formModel.name,
|
||||
type: this.formModel.type,
|
||||
elemMap: {}
|
||||
}
|
||||
|
||||
this.formModel.elemList.forEach(el => {
|
||||
model.elemMap[el.code] = el;
|
||||
const device = this.$iscs.iscsDevice[el.code];
|
||||
if (device &&
|
||||
device.model) {
|
||||
device.groupId = model.code;
|
||||
modelList.push(device.model)
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('createDataModel', modelList.concat(model));
|
||||
},
|
||||
doUpdateGroup() {
|
||||
},
|
||||
doDeleteGroup() {
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -70,9 +147,18 @@ export default {
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.custom {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - 38px);
|
||||
width: 100%;
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #f1f1f1;
|
||||
padding: 10px 0;
|
||||
z-index: 9,
|
||||
}
|
||||
}
|
||||
</style>>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="template" >
|
||||
开发中
|
||||
</div>
|
||||
</template>
|
||||
@ -15,4 +15,9 @@ export default {
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.template {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - 38px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<div class="right-card" :class="{'hide': tableShow}">
|
||||
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<group-card />
|
||||
<group-card @handleSave="handleSave" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user