iscs 代码调整
This commit is contained in:
joylink_cuiweidong
parent
467d3e48cd
commit
a686b8939e
@ -259,18 +259,18 @@ const elementConst = {
|
||||
]
|
||||
}
|
||||
},
|
||||
[graphicType.Arrow]: {
|
||||
type: graphicType.Arrow,
|
||||
name:'箭头',
|
||||
formList: {
|
||||
style: [
|
||||
// [graphicType.Arrow]: {
|
||||
// type: graphicType.Arrow,
|
||||
// name:'箭头',
|
||||
// formList: {
|
||||
// style: [
|
||||
|
||||
],
|
||||
shape: [
|
||||
// ],
|
||||
// shape: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
[graphicType.Polyline]: {
|
||||
type: graphicType.Polyline,
|
||||
name:'多边形折线段',
|
||||
@ -773,6 +773,87 @@ const elementConst = {
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
[graphicType.Star]: {
|
||||
type: graphicType.Star,
|
||||
name:'星形',
|
||||
formList: {
|
||||
style: [
|
||||
...form2ShapeStyle,
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '#fff',
|
||||
description: '填充样式。'
|
||||
}
|
||||
],
|
||||
shape: [
|
||||
{
|
||||
prop: 'cx',
|
||||
label: '圆心横坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
prop: 'cy',
|
||||
label: '圆心纵坐标',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
prop: 'n',
|
||||
label: '瓣数',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入瓣数', trigger: 'blur' }
|
||||
],
|
||||
value: 5,
|
||||
description: '如瓣数等于 5 时，是我们熟悉的五角星。'
|
||||
},
|
||||
{
|
||||
prop: 'r',
|
||||
label: '半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
prop: 'r0',
|
||||
label: '内半径',
|
||||
type: types.Number,
|
||||
precision: 0,
|
||||
step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内半径', trigger: 'blur' }
|
||||
],
|
||||
value: 5,
|
||||
description: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
export default elementConst
|
||||
export default elementConst;
|
||||
|
||||
@ -17,6 +17,7 @@ import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import elementConst from '@/iscs_new/core/form/elementConst';
|
||||
import formBuilder from '@/iscs_new/core/form/formBuilder';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@ -35,6 +36,7 @@ export default {
|
||||
model.base.position = [300, 100];
|
||||
model.stateList = [];
|
||||
this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]);
|
||||
EventBus.$emit('getComposeElemList');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
146
src/views/iscs_new/components/eachFormItem.vue
Normal file
146
src/views/iscs_new/components/eachFormItem.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<el-form-item :label="item.label" class="formName" :rules="item.rules?item.rules:[]" :prop="parentProp+'.'+item.prop">
|
||||
<!-- :prop="styleGroup.type+'.'+item.prop" -->
|
||||
<template v-if="checkFieldType(item, 'Number')">
|
||||
<el-input-number
|
||||
v-if="item.precision!=undefined"
|
||||
v-model="data[item.prop]"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
:step="isNaN(item.step) ? -Infinity : item.step"
|
||||
:precision="item.precision"
|
||||
/>
|
||||
<el-input-number
|
||||
v-else
|
||||
v-model="data[item.prop]"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
:step="isNaN(item.step) ? -Infinity : item.step"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="checkFieldType(item, 'Boolean')">
|
||||
<el-switch
|
||||
v-model="data[item.prop]"
|
||||
style="vertical-align: top;"
|
||||
size="small"
|
||||
:active-color="item.activeColor || '#409eff'"
|
||||
:inactive-color="item.inactiveColor || '#dcdfe6'"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="checkFieldType(item, 'Color')">
|
||||
<el-color-picker
|
||||
v-model="data[item.prop]"
|
||||
show-alpha
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="checkFieldType(item, 'NumberArray')">
|
||||
<el-input-number
|
||||
v-for="count in item.length"
|
||||
:key="count"
|
||||
v-model="data[item.prop][count-1]"
|
||||
style="margin:6px 0px 0px 5px"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
:step="isNaN(item.step) ? -Infinity : item.step"
|
||||
:precision="item.precision"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-else-if="checkFieldType(item, 'Points')">
|
||||
<div class="point-section">
|
||||
<template v-for="(point, j) in formModel[styleGroup.type][item.prop]">
|
||||
<div :key="j" style="overflow: hidden;">
|
||||
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.type],item.prop)" />
|
||||
<span class="pointSplice">, </span>
|
||||
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.type],item.prop)" />
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="addPoint(j,formModel[styleGroup.type],item.prop)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="j <3"
|
||||
circle
|
||||
class="point-button"
|
||||
style="margin-left: 4px;"
|
||||
@click="delPoint(j,formModel[styleGroup.type],item.prop)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
<template v-else-if="checkFieldType(item, 'Select')">
|
||||
<el-select
|
||||
:ref="'select_'+item.prop"
|
||||
v-model="data[item.prop]"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.optionList"
|
||||
:key="option['value']"
|
||||
:label="option['label']"
|
||||
:value="option['value']"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else-if="checkFieldType(item, 'String')">
|
||||
<el-input
|
||||
v-model="data[item.prop]"
|
||||
size="small"
|
||||
type="text"
|
||||
style="width:200px"
|
||||
:maxlength="item.maxlength"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script>
|
||||
import elementConst from '@/iscs_new/core/form/elementConst';
|
||||
export default {
|
||||
name:'EachFormItem',
|
||||
props: {
|
||||
prop: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
type:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
styleType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
parentProp:{
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item:{label:'', type:'' }
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const list = elementConst[this.type]['formList'][this.styleType];
|
||||
const data = list.find(each=>{ return each.prop == this.prop; });
|
||||
if (data) {
|
||||
this.item = data;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
checkFieldType(field, type) {
|
||||
return field.type === type;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -3,12 +3,45 @@
|
||||
<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
|
||||
:data="formModel.stateList"
|
||||
stripe
|
||||
class="eachStatusTable"
|
||||
size="mini"
|
||||
row-key="id"
|
||||
:expand-row-keys="expandKeys"
|
||||
@expand-change="expandChange"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
{{ 111 }}
|
||||
</el-form>
|
||||
<div class="styleList">
|
||||
<div class="styleListName">样式</div>
|
||||
<div class="addStyleForm">
|
||||
<el-select v-model="props.row.defaultStyleSelect" size="mini">
|
||||
<el-option v-for="(eachStyle) in styleSelectList" :key="eachStyle.value" :label="eachStyle.label" :value="eachStyle.value" />
|
||||
</el-select>
|
||||
<el-button type="primary" size="mini" class="addStyle" @click="addStyle(props.$index)">添加</el-button>
|
||||
</div>
|
||||
<div v-if="props.row.style" class="styleInList">
|
||||
<div v-for="(eachStyleInfo,index) in Object.keys(props.row.style)" :key="index" class="eachStyleInfo">
|
||||
<each-form-item :prop="eachStyleInfo" :data="props.row.style" :type="formModel.type" style-type="style" :parent-prop="'stateList.'+props.$index+'.style'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shapeList">
|
||||
<div class="shapeListName">绘图</div>
|
||||
<div class="addStyleForm">
|
||||
<el-select v-model="defaultShapeSelect" size="mini">
|
||||
<el-option v-for="(eachShape) in shapeSelectList" :key="eachShape.value" :label="eachShape.label" :value="eachShape.value" />
|
||||
</el-select>
|
||||
<el-button type="primary" size="mini" class="addStyle" @click="addShape(props.$index)">添加</el-button>
|
||||
</div>
|
||||
<div v-if="props.row.Shape" class="styleInList">
|
||||
<div v-for="(eachShapeInfo,index) in Object.keys(props.row.Shape)" :key="index" class="eachStyleInfo">
|
||||
<each-form-item :prop="eachShapeInfo" :data="props.row.Shape" :type="formModel.type" style-type="shape" :parent-prop="'stateList.'+props.$index+'.shape'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="168">
|
||||
@ -35,6 +68,7 @@
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
|
||||
<!-- <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">预览</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -43,28 +77,83 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import elementConst from '@/iscs_new/core/form/elementConst';
|
||||
import EachFormItem from './eachFormItem';
|
||||
export default {
|
||||
name:'TableForm',
|
||||
components:{
|
||||
EachFormItem
|
||||
},
|
||||
props: {
|
||||
stateList: {
|
||||
type: Array,
|
||||
composeElem: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formModel:{stateList:this.stateList}
|
||||
formModel:{stateList:this.composeElem.stateList, style:this.composeElem.style, type:this.composeElem.type, shape:this.composeElem.shape},
|
||||
styleSelectList:[],
|
||||
shapeSelectList:[],
|
||||
// defaultStyleSelect:'',
|
||||
defaultShapeSelect:'',
|
||||
expandKeys:[]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const styleNameList = Object.keys(this.formModel.style);
|
||||
const style = elementConst[this.formModel.type]['formList']['style'];
|
||||
styleNameList.forEach(eachStyleName=>{
|
||||
const eachStyle = style.find(each=>{ return each.prop == eachStyleName; });
|
||||
this.styleSelectList.push({value:eachStyleName, label:eachStyle.label});
|
||||
});
|
||||
// this.defaultStyleSelect = this.styleSelectList[0].value;
|
||||
|
||||
const shapeNameList = Object.keys(this.formModel.shape);
|
||||
const shape = elementConst[this.formModel.type]['formList']['shape'];
|
||||
shapeNameList.forEach(eachShapeName=>{
|
||||
const eachShape = shape.find(each=>{ return each.prop == eachShapeName; });
|
||||
this.shapeSelectList.push({value:eachShapeName, label:eachShape.label});
|
||||
});
|
||||
this.defaultShapeSelect = this.shapeSelectList[0].value;
|
||||
|
||||
},
|
||||
methods:{
|
||||
addStatus() {
|
||||
this.formModel.stateList.push({status:'', description:''});
|
||||
const length = this.formModel.stateList.length;
|
||||
this.formModel.stateList.push({id:length + 1, status:'', description:'', defaultStyleSelect:this.styleSelectList[0].value});
|
||||
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); }
|
||||
},
|
||||
addStyle(index) {
|
||||
const style = this.formModel.stateList[index].style;
|
||||
if (!style) {
|
||||
this.$set(this.formModel.stateList[index], 'style', {});
|
||||
}
|
||||
const data = this.formModel.stateList[index];
|
||||
if (!data.style[data.defaultStyleSelect]) {
|
||||
this.$set(this.formModel.stateList[index].style, data.defaultStyleSelect, this.formModel.style[data.defaultStyleSelect]);
|
||||
}
|
||||
},
|
||||
addShape(index) {
|
||||
const shape = this.formModel.stateList[index].shape;
|
||||
if (!shape) {
|
||||
this.$set(this.formModel.stateList[index], 'shape', {});
|
||||
}
|
||||
const data = this.formModel.stateList[index];
|
||||
if (!data.shape[data.defaultStyleSelect]) {
|
||||
this.$set(this.formModel.stateList[index].style, data.defaultStyleSelect, this.formModel.shape[data.defaultStyleSelect]);
|
||||
}
|
||||
},
|
||||
expandChange(row, expandedRows) {
|
||||
this.expandKeys = [];
|
||||
expandedRows.forEach(each=>{
|
||||
this.expandKeys.push(each.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -82,16 +171,32 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.demo-table-expand {
|
||||
// font-size: 0;
|
||||
.styleList,.shapeList{
|
||||
padding: 15px 10px;
|
||||
border: 1px #ccc solid;
|
||||
position: relative;
|
||||
margin-bottom:20px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
.styleListName,.shapeListName{
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: -8px;
|
||||
width: 40px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
.addStyle,.addShape{
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
.styleInList{
|
||||
margin-top: 15px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
</style>
|
||||
<style lang="sass">
|
||||
.eachStatusTable .el-table__expanded-cell{padding: 20px;}
|
||||
</style>
|
||||
|
||||
@ -30,9 +30,12 @@
|
||||
<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" />
|
||||
<table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="small" @click="onSaveStatus">保存</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
@ -50,6 +53,7 @@ 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 { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
@ -90,6 +94,9 @@ export default {
|
||||
this.elementList = formBuilder.buildFormList();
|
||||
this.enabledTab = this.elementList[0].type;
|
||||
this.getComposeElemList();
|
||||
EventBus.$on('getComposeElemList', () => {
|
||||
this.getComposeElemList();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onIscsChange(mode, system, part) {
|
||||
@ -98,28 +105,28 @@ export default {
|
||||
},
|
||||
onSave() {
|
||||
const id = this.$route.query.id;
|
||||
const name = this.$route.query.name||"<模型名称>";
|
||||
const type = this.$route.query.type||"<模型类型>";
|
||||
const source = this.$iscs.getSource();
|
||||
if (id && source) {
|
||||
const elementList = source.elementList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code).model;
|
||||
});
|
||||
const composeList = source.composeList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code).model;
|
||||
});
|
||||
const rect = elementList.reduce((temp,el) => {
|
||||
const shape = this.$iscs.getShapeByCode(el.code);
|
||||
return shape&&temp? temp.union(shape.getBoundingRect().clone()): shape.getBoundingRect()
|
||||
}, null);
|
||||
const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0];
|
||||
const model = { id, name, type, elementList, composeList, position };
|
||||
Idb.delete('composeList', model.id);
|
||||
Idb.write('composeList', model);
|
||||
Idb.list('composeList').then(list => {
|
||||
console.log(list)
|
||||
})
|
||||
}
|
||||
const name = this.$route.query.name || '<模型名称>';
|
||||
const type = this.$route.query.type || '<模型类型>';
|
||||
const source = this.$iscs.getSource();
|
||||
if (id && source) {
|
||||
const elementList = source.elementList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code).model;
|
||||
});
|
||||
const composeList = source.composeList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code).model;
|
||||
});
|
||||
const rect = elementList.reduce((temp, el) => {
|
||||
const shape = this.$iscs.getShapeByCode(el.code);
|
||||
return shape && temp ? temp.union(shape.getBoundingRect().clone()) : shape.getBoundingRect();
|
||||
}, null);
|
||||
const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
|
||||
const model = { id, name, type, elementList, composeList, position };
|
||||
Idb.delete('composeList', model.id);
|
||||
Idb.write('composeList', model);
|
||||
Idb.list('composeList').then(list => {
|
||||
console.log(list);
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
@ -190,7 +197,15 @@ export default {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
}
|
||||
|
||||
},
|
||||
onSaveStatus() {
|
||||
this.$refs['tableform' + this.statusTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const formModel = this.$refs['tableform' + this.statusTab][0].formModel;
|
||||
formModel.stateList.map(state=>{ delete state.defaultStyleSelect; });
|
||||
this.onSave();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -315,5 +330,6 @@ export default {
|
||||
}
|
||||
#cardTab .el-tabs__content{
|
||||
padding:0px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user