代码调整

src/views/iscs_new/iscsDraw/statusList.vue

@@ -78,7 +78,7 @@
       class="composeStatus"
       title="状态组合"
       :visible.sync="innerShow"
-      width="700px"
+      width="750px"
       :before-close="doInnerClose"
       :close-on-click-modal="false"
       append-to-body
@@ -101,9 +101,9 @@
         >
           <el-table-column label="是否动画" width="100" align="center">
             <template slot-scope="scope">
-              <el-form-item prop="loop">
+              <!-- <el-form-item prop="loop"> -->
               <div style="">{{ scope.row.loop?'是':'否' }}</div>
-              </el-form-item>
+              <!-- </el-form-item> -->
             </template>
           </el-table-column>
           <el-table-column label="动画时间" width="120" align="center">
@@ -111,6 +111,7 @@
               <el-form-item v-if="scope.row.loop" :prop="'covertStatusList.'+scope.$index+'.animateTime'" :rules="[{required: true, message:'请输入动画时间', trigger: 'blur'}]">
                 <el-input-number v-model="scope.row.animateTime" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
               </el-form-item>
+              <div v-else>无</div>
             </template>
           </el-table-column>
           <el-table-column label="动画延时" width="120" align="center">
@@ -122,6 +123,7 @@
               >
                 <el-input-number v-model="scope.row.delay" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
               </el-form-item>
+              <div v-else>无</div>
             </template>
           </el-table-column>
           <el-table-column label="状态组合" width="319">
@@ -129,16 +131,30 @@
               <!-- {{ scope.row.frameList }} -->
               <!-- <div v-if="scope.row.frameList.length<=0"> -->
               <!-- 元素 -->
-              <el-select v-model="selectedElement" size="mini" style="width:115px;display:inline-block" placeholder="请选择元素">
+              <el-select
+                v-model="scope.row.selectedElement"
+                size="mini"
+                style="width:115px;display:inline-block"
+                placeholder="请选择元素"
+                @change="changeCurrentStatus(scope.$index,scope.row.selectedElement)"
+              >
                 <el-option v-for="(element,index) in elementList" :key="index" :label="element.name" :value="element.name" />
               </el-select>
-              <el-select v-model="selectedElementStatus" size="mini" placeholder="请选择状态" style="width:115px;display:inline-block">
+              <el-select v-model="scope.row.selectedElementStatus" size="mini" placeholder="请选择状态" style="width:115px;display:inline-block">
                 <el-option v-for="(status,index) in scope.row.statusList" :key="index" :label="status.name" :value="status.name" />
               </el-select>
               <el-button type="primary" size="mini" class="addStyle" @click="addElementStatus(scope.$index,scope.row.loop)">添加</el-button>
+              <div v-for="(frame,index) in scope.row.frameList" :key="index">
+                元素名称：{{ frame.name }} 状态：{{ frame.status }}
+              </div>
               <!-- </div> -->
             </template>
           </el-table-column>
+          <el-table-column label="操作" width="50">
+            <template slot-scope="scope">
+              <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteCovertStatus(scope.$index,scope.row)" />
+            </template>
+          </el-table-column>
         </el-table>
       </el-form>
       <div class="bottomBtnGroup">
@@ -148,6 +164,8 @@
   </el-dialog>
 </template>
 <script>
+import { deepAssign } from '@/utils/index';
+import Idb from '../utils/indexedDb.js';
 export default {
     name:'StatusList',
     data() {
@@ -162,9 +180,9 @@ export default {
             statusModel:{
                 covertStatusList:[]
             },
-            selectedElement:'',
+            elementList:[],
-            selectedElementStatus:'',
+            currentIndex:0,
-            elementList:[]
+            model:{}
             // statusList:[]
         };
     },
@@ -173,7 +191,13 @@ export default {
             this.show = false;
         },
         doShow() {
+            this.formModel.stateList = [];
             this.show = true;
+            Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
+                this.formModel.stateList = resp.stateList;
+                this.model = resp;
+            }).catch(() => {
+            });
         },
         addComposeStatus() {
             const length = this.formModel.stateList.length;
@@ -184,33 +208,80 @@ export default {
             this.formModel.stateList.splice(index, 1);
         },
         onEditStatusSave() {
-
+            const that = this;
+            that.$refs['form'].validate((valid) => {
+                if (valid) {
+                    // that.formModel;
+                    // // const id = this.$route.query.id;
+                    this.model.stateList = that.formModel.stateList;
+                    Idb.delete('composeTemplateList', this.model.id);
+                    Idb.write('composeTemplateList', this.model);
+                }
+            });
         },
         modifyStatus(index, row) {
+            this.currentIndex = index;
             this.innerShow = true;
-            this.statusModel.covertStatusList = row.covertStatusList;
+            this.statusModel.covertStatusList = Object.values(row.covertStatusList);
+            const source = this.$iscs.getSource();
+            const composeElemList = source.elementList;
+            this.elementList = [];
+            composeElemList.forEach(each=>{
+                this.elementList.push({name:each.name, stateList:each.stateList});
+            });
         },
         doInnerClose() {
             this.innerShow = false;
         },
         addCovertStatus() {
             if (this.defaultLoop) {
-                this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[]});
+                this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[], selectedElement:'', selectedElementStatus:'' });
             } else {
-                this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[] });
+                this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[], selectedElementStatus:'', selectedElement:'' });
             }
 
         },
         onEditComposeStatus() {
-
+            this.innerShow = false;
+            this.statusModel.covertStatusList.forEach(covert=>{
+                delete covert.selectedElement;
+                delete covert.selectedElementStatus;
+                delete covert.statusList;
+            });
+            this.formModel.stateList[this.currentIndex].covertStatusList = deepAssign({}, this.statusModel.covertStatusList);
+        },
+        deleteCovertStatus(index, row) {
+            this.statusModel.covertStatusList.splice(index, 1);
         },
         addElementStatus(index, loop) {
             if (loop) {
 
             } else {
-
+                const frameList = this.statusModel.covertStatusList[index].frameList || [];
+                const indexFrame = frameList.findIndex(frame=>{
+                    return frame.name == this.statusModel.covertStatusList[index].selectedElement &&
+                    frame.status == this.statusModel.covertStatusList[index].selectedElementStatus;
+                });
+                if (indexFrame < 0) {
+                    this.statusModel.covertStatusList[index].frameList.push({name:this.statusModel.covertStatusList[index].selectedElement,
+                        status:this.statusModel.covertStatusList[index].selectedElementStatus});
                 }
             }
+            this.statusModel.covertStatusList[index].selectedElementStatus = '';
+            this.statusModel.covertStatusList[index].selectedElement = '';
+        },
+        changeCurrentStatus(index, selectedElement) {
+            this.statusModel.covertStatusList[index].selectedElementStatus = '';
+            this.statusModel.covertStatusList[index].statusList = [];
+            const list = this.elementList.find(each=>{ return each.name == selectedElement; });
+            if (list && list.stateList && list.stateList.length > 0) {
+                const temp = list.stateList;
+                temp.forEach(each=>{
+                    this.statusModel.covertStatusList[index].statusList.push({name:each.status});
+                });
+            }
+
+        }
     }
 };
 </script>