iscs 代码调整

src/iscs_new/core/form/elementConst.js

@@ -259,18 +259,18 @@ const elementConst = {
             ]
         }
     },
-    [graphicType.Arrow]: {
+    // [graphicType.Arrow]: {
-        type: graphicType.Arrow,
+    //     type: graphicType.Arrow,
-        name:'箭头',
+    //     name:'箭头',
-        formList: {
+    //     formList: {
-            style: [
+    //         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;

src/iscs_new/plugins/shapeBuilder/entry.vue

@@ -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');
 		}
 	}
 };

src/views/iscs_new/components/eachFormItem.vue

@@ -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>

src/views/iscs_new/components/tableForm.vue

@@ -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">
+            <div class="styleList">
-              {{ 111 }}
+              <div class="styleListName">样式</div>
-            </el-form>
+              <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: {
+        composeElem: {
-            type: Array,
+            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 {
+.styleList,.shapeList{
-    // font-size: 0;
+    padding: 15px 10px;
+    border: 1px #ccc solid;
+    position: relative;
+    margin-bottom:20px;
+    display: inline-block;
+    width: 100%;
 }
-.demo-table-expand label {
+.styleListName,.shapeListName{
-    width: 90px;
+    font-size: 14px;
-    color: #99a9bf;
+    position: absolute;
+    left: 6px;
+    top: -8px;
+    width: 40px;
+    background: #fff;
+    text-align: center;
 }
-.demo-table-expand .el-form-item {
+.addStyle,.addShape{
-    margin-right: 0;
+  float: right;
-    margin-bottom: 0;
+  display: inline-block;
-    width: 50%;
+}
+.styleInList{
+    margin-top: 15px;
+    padding-left: 30px;
 }
 </style>
+<style lang="sass">
+.eachStatusTable .el-table__expanded-cell{padding: 20px;}
+</style>

src/views/iscs_new/iscsDraw/index.vue

@@ -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,8 +105,8 @@ export default {
         },
         onSave() {
             const id = this.$route.query.id;
-			const name = this.$route.query.name||"<模型名称>";
+            const name = this.$route.query.name || '<模型名称>';
-			const type = this.$route.query.type||"<模型类型>";
+            const type = this.$route.query.type || '<模型类型>';
             const source = this.$iscs.getSource();
             if (id && source) {
                 const elementList = source.elementList.map(el => {
@@ -110,15 +117,15 @@ export default {
                 });
                 const rect = elementList.reduce((temp, el) => {
                     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);
                 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)
+                    console.log(list);
-				})
+                });
             }
         },
         onSelectTab() {
@@ -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>