代码调整

src/views/iscs_new/iscsDraw/index.vue

@@ -44,7 +44,7 @@
               </div>
             </el-tab-pane>
             <el-tab-pane label="状态组合编辑" name="third">
-              <!-- {{ 状态组合编辑 }} -->
+              <status-combine-edit :state-list="stateList" @saveStateList="saveStateList" />
             </el-tab-pane>
           </el-tabs>
         </el-card>
@@ -62,6 +62,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 StatusCombineEdit from './statusCombineEdit';
 import { EventBus } from '@/scripts/event-bus';
 
 export default {
@@ -69,7 +70,8 @@ export default {
     components: {
         iscsCanvas,
         DataForm,
-        TableForm
+        TableForm,
+        StatusCombineEdit
     },
     data() {
         return {
@@ -85,7 +87,8 @@ export default {
             statusTab:'',
             showDeleteButton:false,
             elementList:[],
-            composeElemList:[]
+            composeElemList:[],
+            stateList:[]
         };
     },
     computed:{
@@ -131,7 +134,7 @@ export default {
                 // }, null);
                 // const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
                 const position = [0, 0];
-                const stateList = [];
+                const stateList = this.stateList;
                 const model = { id, name, type, shapeList, stateList, position };
 
                 Idb.delete('composeTemplateList', model.id);
@@ -146,6 +149,10 @@ export default {
         },
         onSelectCardTab() {
 
+        },
+        saveStateList(stateList) {
+            this.stateList = stateList;
+            this.onSave();
         },
         onSelected(em) {
             if (em.model) {

src/views/iscs_new/iscsDraw/statusCombineEdit.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <el-button type="primary" size="small" class="addComposeStatus" @click="addComposeStatus">添加</el-button>
+    <el-form ref="form" class="composeStatusForm" :model="formModel">
+      <!-- label-width="110px"  -->
+      <el-table
+        :data="formModel.stateList"
+        stripe
+        class="composeStatusTable"
+        size="mini"
+        row-key="id"
+        :expand-row-keys="expandKeys"
+        @expand-change="expandChange"
+      >
+        <el-table-column label="状态" width="118">
+          <!-- 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:108px" :maxlength="100" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" width="120">
+          <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:110px" :maxlength="100" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="权重" width="120">
+          <template slot-scope="scope">
+            <el-form-item
+              :prop="'stateList.'+scope.$index+'.weight'"
+              :rules="[{required: true, message:'请输入权重', trigger: 'blur'}]"
+            >
+              <el-input-number
+                v-model="scope.row.weight"
+                size="mini"
+                style="width:110px"
+                :step="1"
+                :min="1"
+                :max="100"
+                :precision="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否可重置" width="80">
+          <template slot-scope="scope">
+            <el-form-item :prop="'stateList.'+scope.$index+'.needDefault'">
+              <el-switch
+                v-model="scope.row.needDefault"
+                size="small"
+                active-color="#409eff"
+                inactive-color="#dcdfe6"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="70">
+          <template slot-scope="scope">
+            <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+    name:'StatusCombineEdit',
+    props:{
+        stateList: {
+            type: Array,
+            required: true
+        }
+    },
+    data() {
+        return {
+            expandKeys:[],
+            formModel:{
+                stateList:this.stateList
+            }
+        };
+    },
+    mounted() {
+        this.init();
+    },
+    methods:{
+        init() {
+
+        },
+        expandChange(row, expandedRows) {
+
+        },
+        addComposeStatus() {
+            const length = this.formModel.stateList.length;
+            this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false});
+            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); }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.addComposeStatus{
+    float: right;
+    display: inline-block;
+    margin:10px 10px 10px 0px;
+}
+.composeStatusTable{}
+.composeStatusForm{padding:15px;}
+</style>