diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 113b7b69e..5c832e20c 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/src/iscs_new/core/abstractShape.js @@ -93,6 +93,17 @@ class AbstractShape extends Group { // 设置状态 setState(state) {} + + // 遍历执行 + traverse(cb) { + this.eachChild(el => { + if (el.traverse) { + el.traverse(cb, el); + } else { + cb.call(el); + } + }); + } } export default AbstractShape; diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 6e865a63e..d2925bd79 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -167,7 +167,9 @@ class ShapeFactory extends Eventful { this.showBorder(shape); } - shape.attr({ z: shapeRender.z + 9 }) + shape.traverse(el => { + el.attr({ z: shapeRender.z + 9 }) + }); shape.active(); } @@ -182,7 +184,9 @@ class ShapeFactory extends Eventful { this.hideBorder(shape); } - shape.attr({ z: shapeRender.z }) + shape.traverse(el => { + el.attr({ z: shapeRender.z }) + }); shape.inactive(); } diff --git a/src/iscs_new/plugins/shapeContextMenu/entry.vue b/src/iscs_new/plugins/shapeContextMenu/entry.vue index f37274d7d..6b639788e 100644 --- a/src/iscs_new/plugins/shapeContextMenu/entry.vue +++ b/src/iscs_new/plugins/shapeContextMenu/entry.vue @@ -26,43 +26,48 @@ export default { }, clipboardList: [], menus: [], - list: [ - { - label: '组合', - handler: this.doBinding, - disabledCb: selected => { - const storage = this.$iscs.getController().getStorage(); - return storage.values().length <= 1; + menusMap: { + Normal: [ + { + label: '组合', + handler: this.doBinding, + disabledCb: selected => { + const storage = this.$iscs.getController().getStorage(); + return storage.values().length <= 1; + } + }, + { + label: '解组', + handler: this.unBinding, + disabledCb: selected => { + return selected.shapeType != shapeType.Compose; + } + }, + { + label: '复制', + handler: this.doCopy, + disabledCb: selected => { + const storage = this.$iscs.getController().getStorage(); + return !storage.values().length; + } } - }, - { - label: '解组', - handler: this.unBinding, - disabledCb: selected => { - return selected.shapeType != shapeType.Compose; + ], + None: [ + { + label: '粘贴', + handler: this.doParse, + disabledCb: selected => { + return !this.clipboardList.length; + } } - }, - { - label: '复制', - handler: this.doCopy, - disabledCb: selected => { - const storage = this.$iscs.getController().getStorage(); - return !storage.values().length; - } - }, - { - label: '粘贴', - handler: this.doParse, - disabledCb: selected => { - return !this.clipboardList.length; - } - } - ] + ] + } }; }, methods: { - doShow(point) { - this.menus = this.list.map(el => { el.disabled = el.disabledCb(this.selected); return el} ); + doShow(point, code) { + const list = code ? this.menusMap.Normal: this.menusMap.None; + this.menus = list.map(el => { el.disabled = el.disabledCb(this.selected); return el} ); if (this.menus && this.menus.length) { this.position = {...point} @@ -70,6 +75,7 @@ export default { } }, doClose() { + this.selected = null; this.position = {x: 0, y: 0}; this.visible = false; }, diff --git a/src/iscs_new/plugins/shapeContextMenu/index.js b/src/iscs_new/plugins/shapeContextMenu/index.js index f544a5dc6..0ec8136d9 100644 --- a/src/iscs_new/plugins/shapeContextMenu/index.js +++ b/src/iscs_new/plugins/shapeContextMenu/index.js @@ -4,27 +4,15 @@ import entry from './entry.vue'; const elPage = Vue.extend(entry); -const toggling = (page, e) => { - if (e&&e.code) { - Vue.nextTick(() => { - page.doShow({x: e.clientX, y: e.clientY}); - }); - } else { - page.doClose(); - } -}; - - const handle = { onClick(e) { if (this.page) { - this.page.selected = e; - toggling(this.page, {}); + this.page.doClose() } }, onContextMenu(e) { if (this.page) { - toggling(this.page, e); + this.page.doShow({x: e.clientX, y: e.clientY}, e.code); } } } diff --git a/src/views/iscs_new/iscsDesign/index.vue b/src/views/iscs_new/iscsDesign/index.vue index 59dbf3d46..e7c3ff11f 100644 --- a/src/views/iscs_new/iscsDesign/index.vue +++ b/src/views/iscs_new/iscsDesign/index.vue @@ -14,16 +14,27 @@ @click="onSave" >保存 - - - + + + + + + + +
+ 添加 + 修改 + 删除 +
+ + + + + + + -
- 添加 - 修改 - 删除 -
@@ -34,15 +45,18 @@ import localStore from 'storejs'; import iscsCanvas from './iscsCanvas'; import formBuilder from '@/iscs_new/core/form/formBuilder'; 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'; import shapeType from '@/iscs_new/constant/shapeType.js'; export default { name: 'IscsView', components: { iscsCanvas, - DataForm + DataForm, + TableForm }, data() { return { @@ -54,8 +68,11 @@ export default { draftShow: false, selected: null, enabledTab:'', + cardTab:'first', + statusTab:'', showDeleteButton:false, - elementList:[] + elementList:[], + composeElemList:[] }; }, computed:{ @@ -71,10 +88,8 @@ export default { mounted() { this.composeName = this.$route.query.composeName; this.elementList = formBuilder.buildFormList(); - this.enabledTab = this.elementList[0].code; - }, - beforeDestroy() { - + this.enabledTab = this.elementList[0].type; + this.getComposeElemList(); }, methods: { onIscsChange(mode, system, part) { @@ -87,52 +102,63 @@ export default { const type = this.$route.query.type || '<模型类型>'; const source = this.$iscs.getSource(); if (id && source) { - const shapeList = source.elementList.map(el => { + const elementList = source.elementList.map(el => { return this.$iscs.getShapeByCode(el.code); }); - const rect = shapeList.reduce( + const shapeList = elementList.map(el => el.model); + const rect = elementList.reduce( (temp, el) => el && temp ? temp.union(el.getBoundingRect().clone()) : el.getBoundingRect(), null); - const position = [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2]; + const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0]; const model = { id, name, type, shapeList, position }; - console.log(model); + Idb.delete('composeList', model.id); + Idb.write('composeList', model); + Idb.list('composeList').then(list => { + console.log(list); + }); } }, onSelectTab() { this.selected = null; + }, + onSelectCardTab() { + }, onSelected(em) { if (em.model) { this.selected = JSON.parse(JSON.stringify(em.model)); - const elem = this.elementList.find(el => el.code == this.selected.type); + const elem = this.elementList.find(el => el.type == this.selected.type); if (elem) { elem.model = this.selected; + this.enabledTab = this.selected.type; } } else { this.selected = null; + this.clear(this.enabledTab); } }, onSubmit() { this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { const formModel = this.$refs['dataform' + this.enabledTab][0].formModel; - const newModel = JSON.parse(JSON.stringify(formModel)); + const newModel = utils.deepClone(formModel); newModel.code = utils.getUID(this.enabledTab); newModel.type = this.enabledTab; newModel.name = '<名称>'; newModel.stateList = []; - this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); + this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.Add}}]); this.clear(this.enabledTab); + this.getComposeElemList(); } }); }, onModify() { this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - const model = this.$refs['dataform' + this.enabledTab][0].formModel; + const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel); model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]); + this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]); this.clear(this.enabledTab); } }); @@ -140,18 +166,27 @@ export default { onDelete() { this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - const model = this.$refs['dataform' + this.enabledTab][0].formModel; + const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel); model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]); + 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; + } + } } }; @@ -168,6 +203,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 { @@ -252,4 +309,7 @@ export default { height: 100%; overflow: hidden; } + #cardTab .el-tabs__content{ + padding:0px; + } diff --git a/src/views/iscs_new/iscsDesign/iscsCanvas.vue b/src/views/iscs_new/iscsDesign/iscsCanvas.vue index b8c3a600d..e7c3ff11f 100644 --- a/src/views/iscs_new/iscsDesign/iscsCanvas.vue +++ b/src/views/iscs_new/iscsDesign/iscsCanvas.vue @@ -1,157 +1,315 @@ - +