代码调整

This commit is contained in:
joylink_cuiweidong 2021-04-19 14:54:21 +08:00
parent 00359591b5
commit 5dc7de9ded
6 changed files with 64 additions and 70 deletions

View File

@ -2,39 +2,39 @@ import elementConst from './elementConst';
import form2Base from './form2Base'; import form2Base from './form2Base';
const formBuilder = { const formBuilder = {
buildForm(el) { buildForm(el) {
const form = {}; const form = {};
form.type = el.type; form.type = el.type;
form.name = el.name; form.name = el.name;
form.formGroup = []; form.formGroup = [];
form.model = {}; form.model = {};
// 添加通用配置 // 添加通用配置
form.model['base'] = {}; form.model['base'] = {};
form2Base.forEach(each=>{ form2Base.forEach(each=>{
form.model['base'][each.prop] = each.value; form.model['base'][each.prop] = each.value;
}); });
form.formGroup.push({name:'通用配置', type:'base', styleList:form2Base}); form.formGroup.push({name:'通用配置', type:'base', styleList:form2Base});
const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}]; const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
list.forEach(eachType=>{ list.forEach(eachType=>{
form.model[eachType.type] = {}; form.model[eachType.type] = {};
const eachList = el.formList[eachType.type]; const eachList = el.formList[eachType.type];
eachList.forEach(each=>{ eachList.forEach(each=>{
form.model[eachType.type][each.prop] = each.value; form.model[eachType.type][each.prop] = each.value;
}); });
form.formGroup.push({name:eachType.name, type: eachType.type, styleList:eachList}); form.formGroup.push({name:eachType.name, type: eachType.type, styleList:eachList});
}); });
return form; return form;
}, },
buildFormList() { buildFormList() {
const formList = []; const formList = [];
const elementList = Object.values(elementConst); const elementList = Object.values(elementConst);
elementList.forEach(el=>{ elementList.forEach(el=>{
formList.push(this.buildForm(el)); formList.push(this.buildForm(el));
}); });
return formList; return formList;
} }
} };
export default formBuilder; export default formBuilder;

View File

@ -1,10 +1,10 @@
import Vue from 'vue'; import Vue from 'vue';
import { getBaseUrl } from '@/utils/baseUrl' import { getBaseUrl } from '@/utils/baseUrl';
// 创建或者打开数据库 // 创建或者打开数据库
export function openIndexedDB() { export function openIndexedDB() {
const baseUrl = getBaseUrl(); const baseUrl = getBaseUrl();
const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1"); const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, '$1');
const request = window.indexedDB.open(indexedDBName, 1); const request = window.indexedDB.open(indexedDBName, 1);
request.onerror = function (event) { request.onerror = function (event) {
console.log('数据库打开报错'); console.log('数据库打开报错');
@ -18,7 +18,7 @@ export function openIndexedDB() {
Vue.prototype.$db = event.target.result; Vue.prototype.$db = event.target.result;
Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' }); Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' });
Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' }); Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' });
Vue.prototype.$db.createObjectStore('composeList', { keyPath: 'id' }); Vue.prototype.$db.createObjectStore('composeTemplateList', { keyPath: 'id' });
}; };
} }
// 新增数据 // 新增数据

View File

@ -20,7 +20,7 @@
<el-select v-model="props.row.defaultStyleSelect" size="mini"> <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-option v-for="(eachStyle) in styleSelectList" :key="eachStyle.value" :label="eachStyle.label" :value="eachStyle.value" />
</el-select> </el-select>
<el-button type="primary" size="mini" class="addStyle" @click="addStyle(props.$index)">添加</el-button> <el-button type="primary" size="mini" class="addStyle" @click="addStyle(props.$index,'style')">添加</el-button>
</div> </div>
<div v-if="props.row.style" class="styleInList"> <div v-if="props.row.style" class="styleInList">
<div v-for="(eachStyleInfo,index) in Object.keys(props.row.style)" :key="index" class="eachStyleInfo"> <div v-for="(eachStyleInfo,index) in Object.keys(props.row.style)" :key="index" class="eachStyleInfo">
@ -41,10 +41,10 @@
<el-select v-model="props.row.defaultShapeSelect" size="mini"> <el-select v-model="props.row.defaultShapeSelect" size="mini">
<el-option v-for="(eachShape) in shapeSelectList" :key="eachShape.value" :label="eachShape.label" :value="eachShape.value" /> <el-option v-for="(eachShape) in shapeSelectList" :key="eachShape.value" :label="eachShape.label" :value="eachShape.value" />
</el-select> </el-select>
<el-button type="primary" size="mini" class="addStyle" @click="addShape(props.$index)">添加</el-button> <el-button type="primary" size="mini" class="addStyle" @click="addStyle(props.$index,'shape')">添加</el-button>
</div> </div>
<div v-if="props.row.Shape" class="styleInList"> <div v-if="props.row.shape" class="styleInList">
<div v-for="(eachShapeInfo,index) in Object.keys(props.row.Shape)" :key="index" class="eachStyleInfo"> <div v-for="(eachShapeInfo,index) in Object.keys(props.row.shape)" :key="index" class="eachStyleInfo">
<each-form-item <each-form-item
:prop="eachShapeInfo" :prop="eachShapeInfo"
:data="formModel.stateList[props.$index].shape" :data="formModel.stateList[props.$index].shape"
@ -156,26 +156,16 @@ export default {
// // this.$iscs // // this.$iscs
// } // }
// }, // },
addStyle(index) { addStyle(index, type) {
const style = this.formModel.stateList[index].style; const style = this.formModel.stateList[index][type];
if (!style) { if (!style) {
this.$set(this.formModel.stateList[index], 'style', {}); this.$set(this.formModel.stateList[index], type, {});
} }
const data = this.formModel.stateList[index]; const data = this.formModel.stateList[index];
if (!data.style[data.defaultStyleSelect] && data.defaultStyleSelect) { const dataName = 'default' + type.replace(type[0], type[0].toUpperCase()) + 'Select';
const other = utils.deepClone(this.formModel.style[data.defaultStyleSelect]); if (!data[type][data[dataName]] && data[dataName]) {
this.$set(this.formModel.stateList[index].style, data.defaultStyleSelect, other); const other = utils.deepClone(this.formModel[type][data[dataName]]);
} this.$set(this.formModel.stateList[index][type], data[dataName], other);
},
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.defaultShapeSelect] && data.defaultShapeSelect) {
const other = utils.deepClone(this.formModel.shape[data.defaultShapeSelect]);
this.$set(this.formModel.stateList[index].shape, data.defaultShapeSelect, other);
} }
}, },
expandChange(row, expandedRows) { expandChange(row, expandedRows) {

View File

@ -33,7 +33,7 @@
<el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button> <el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="状态编辑" name="second"> <el-tab-pane label="单元素状态编辑" name="second">
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> <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"> <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" :compose-elem="composeElem" /> <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" />
@ -43,6 +43,9 @@
<el-button type="primary" size="small" @click="onSaveStatus">保存</el-button> <el-button type="primary" size="small" @click="onSaveStatus">保存</el-button>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="状态组合编辑" name="third">
<!-- {{ 状态组合编辑 }} -->
</el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
</div> </div>
@ -115,21 +118,25 @@ export default {
const type = this.$route.query.type || '<模型类型>'; const type = this.$route.query.type || '<模型类型>';
const source = this.$iscs.getSource(); const source = this.$iscs.getSource();
if (id && source) { if (id && source) {
const elementList = source.elementList.map(el => { const shapeList = source.elementList;
shapeList.forEach(el => {
return this.$iscs.getShapeByCode(el.code).model; return this.$iscs.getShapeByCode(el.code).model;
}); });
const composeList = source.composeList.map(el => { // const composeList = source.composeList.map(el => {
return this.$iscs.getShapeByCode(el.code).model; // return this.$iscs.getShapeByCode(el.code).model;
}); // });
const rect = elementList.reduce((temp, el) => { // const rect = shapeList.reduce((temp, el) => {
const shape = this.$iscs.getShapeByCode(el.code); // const shape = this.$iscs.getShapeByCode(el.code);
return shape && temp ? temp.union(shape.getBoundingRect().clone()) : shape.getBoundingRect(); // return shape && temp ? temp.union(shape.getBoundingRect().clone()) : shape.getBoundingRect();
}, null); // }, null);
const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0]; // const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
const model = { id, name, type, elementList, composeList, position }; const position = [0, 0];
Idb.delete('composeList', model.id); const stateList = [];
Idb.write('composeList', model); const model = { id, name, type, shapeList, stateList, position };
Idb.list('composeList').then(list => {
Idb.delete('composeTemplateList', model.id);
Idb.write('composeTemplateList', model);
Idb.list('composeTemplateList').then(list => {
console.log(list); console.log(list);
}); });
} }

View File

@ -100,9 +100,9 @@ export default {
} }
if (this.$route.query.id) { if (this.$route.query.id) {
setTimeout(_ => { setTimeout(_ => {
Idb.select('composeList', this.$route.query.id).then(resp => { Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
this.$iscs.setMap([], { this.$iscs.setMap([], {
elementList: resp.elementList||[], elementList: resp.shapeList||[],
composeList: resp.composeList||[] composeList: resp.composeList||[]
}, option); }, option);
EventBus.$emit('getComposeElemList'); EventBus.$emit('getComposeElemList');

View File

@ -9,16 +9,13 @@
<el-card type="border-card" class="heightClass"> <el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<!-- 组件id为{{ $route.query.id }} --> <!-- 组件id为{{ $route.query.id }} -->
状态预览 状态编辑
</div> </div>
<div class="stateList"> <div class="stateList">
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> <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"> <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" :compose-elem="composeElem" /> --> <!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> -->
<!-- stateList --> <!-- stateList -->
<el-table>
</el-table>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>