iscs 代码调整

src/views/iscs_new/components/dataForm.vue

@@ -142,12 +142,6 @@ export default {
         formModel: {
             type: Object,
             required: true
-        },
-        rules: {
-            type: Object,
-            default() {
-                return {};
-            }
         }
     },
     data() {

src/views/iscs_new/components/tableForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <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-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              {{ 111 }}
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="168">
+          <!-- align="center" -->
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'stateList.'+scope.$index+'.status'"
+              :rules="[{required: true, message:'请输入状态', trigger: 'blur'}]"
+            >
+              <el-input v-model="scope.row.status" size="mini" type="text" style="width:148px" :maxlength="100" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" width="210">
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'stateList.'+scope.$index+'.description'"
+              :rules="[{required: true, message:'请输入描述', trigger: 'blur'}]"
+            >
+              <el-input v-model="scope.row.description" size="mini" type="text" style="width:190px" :maxlength="100" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    <!-- :model="formModel"  -->
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+    name:'TableForm',
+    props: {
+        stateList: {
+            type: Array,
+            required: true
+        }
+    },
+    data() {
+        return {
+            formModel:{stateList:this.stateList}
+        };
+    },
+    mounted() {
+
+    },
+    methods:{
+        addStatus() {
+            this.formModel.stateList.push({status:'', description:''});
+        },
+        deleteStatus(index, row) {
+            this.formModel.stateList.splice(index, 1);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.eachStatusTable{
+    width: 530px;
+    margin-left: 10px;
+    margin-top: 10px;
+    border: 1px #dedede solid;
+}
+.addStatus{
+    float: right;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 10px;
+}
+.demo-table-expand {
+    // font-size: 0;
+}
+.demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+}
+</style>

src/views/iscs_new/iscsDraw/index.vue

@@ -15,16 +15,27 @@
               @click="onSave"
             >保存</el-button>
           </div>
-          <el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
+          <el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
-            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
+            <el-tab-pane label="元素绘制" name="first">
-              <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
+              <el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
+                <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
+                  <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" />
+                </el-tab-pane>
+              </el-tabs>
+              <div class="bottomBtnGroup">
+                <el-button v-show="!selected" type="primary" size="small" @click="onSubmit">添加</el-button>
+                <el-button v-show="selected" type="warning" size="small" @click="onModify">修改</el-button>
+                <el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
+              </div>
+            </el-tab-pane>
+            <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" />
+                </el-tab-pane>
+              </el-tabs>
             </el-tab-pane>
           </el-tabs>
-          <div class="bottomBtnGroup">
-            <el-button v-show="!selected" type="primary" size="small" @click="onSubmit">添加</el-button>
-            <el-button v-show="selected" type="warning" size="small" @click="onModify">修改</el-button>
-            <el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
-          </div>
         </el-card>
       </div>
     </div>
@@ -35,6 +46,7 @@ import localStore from 'storejs';
 import iscsCanvas from './iscsCanvas';
 import BuilderFactory from '@/iscs_new/core/form/builderFactory';
 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';
@@ -44,7 +56,8 @@ export default {
     name: 'IscsView',
     components: {
         iscsCanvas,
-        DataForm
+        DataForm,
+        TableForm
     },
     data() {
         return {
@@ -56,8 +69,11 @@ export default {
             draftShow: false,
             selected: null,
             enabledTab:'',
+            cardTab:'first',
+            statusTab:'',
             showDeleteButton:false,
-            elementList:[]
+            elementList:[],
+            composeElemList:[]
         };
     },
     computed:{
@@ -74,6 +90,7 @@ export default {
         this.composeName = this.$route.query.composeName;
         this.elementList = new BuilderFactory().getFormList();
         this.enabledTab = this.elementList[0].code;
+        this.getComposeElemList();
     },
     methods: {
         onIscsChange(mode, system, part) {
@@ -103,6 +120,9 @@ export default {
         },
         onSelectTab() {
             this.selected = null;
+        },
+        onSelectCardTab() {
+
         },
         onSelected(em) {
             if (em.model) {
@@ -126,9 +146,9 @@ export default {
                     newModel.type = this.enabledTab;
                     // newModel.name = '<名称>';
                     newModel.stateList = [];
-                    debugger;
                     this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
                     this.clear(this.enabledTab);
+                    this.getComposeElemList();
                 }
             });
         },
@@ -153,12 +173,22 @@ export default {
                     model.name = this.selected.name;
                     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;
+                debugger;
+            }
+
         }
     }
 };
@@ -175,6 +205,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 {
@@ -259,4 +311,7 @@ export default {
     height: 100%;
     overflow: hidden;
   }
+  #cardTab .el-tabs__content{
+    padding:0px;
+  }
 </style>