iscs 代码调整

src/views/iscs_new/iscsDraw/index.vue

@@ -19,6 +19,12 @@
               style="float: right; padding: 3px 0; margin-right: 5px;"
               @click="onPreview"
             >预览</el-button>
+            <el-button
+              v-if=" composeElemList.length>0"
+              type="text"
+              style="float: right; padding: 3px 0; margin-right: 5px;"
+              @click="onModifyStatus"
+            >状态编辑</el-button>
           </div>
           <el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
             <el-tab-pane label="元素绘制" name="first">
@@ -43,12 +49,16 @@
                 <el-button type="primary" size="small" @click="onSaveStatus">保存</el-button>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="状态组合编辑" name="third">
+            <!-- <el-tab-pane label="状态编辑" name="third">
-              <status-combine-edit :state-list="stateList" @saveStateList="saveStateList" />
+              <status-combine-edit ref="editStatusForm" :state-list="stateList" @saveStateList="saveStateList" />
-            </el-tab-pane>
+              <div class="bottomBtnGroup">
+                <el-button type="primary" size="small" @click="onEditStatusSave">保存</el-button>
+              </div>
+            </el-tab-pane> -->
           </el-tabs>
         </el-card>
       </div>
+      <status-list ref="statusList" />
     </div>
   </transition>
 </template>
@@ -62,7 +72,8 @@ 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 StatusCombineEdit from './statusCombineEdit';
+import StatusList from './statusList';
 import { EventBus } from '@/scripts/event-bus';
 
 export default {
@@ -71,7 +82,8 @@ export default {
         iscsCanvas,
         DataForm,
         TableForm,
-        StatusCombineEdit
+        StatusList
+        // StatusCombineEdit
     },
     data() {
         return {
@@ -233,8 +245,19 @@ export default {
                 }
             });
         },
+        onEditStatusSave() {
+            this.$refs['editStatusForm'].$refs['form'].validate((valid) => {
+                if (valid) {
+                    this.onSave();
+                }
+            });
+        },
         onPreview() {
             this.$router.push({ path: `/iscs_new/design/compose/preview`, query:{id:this.$route.query.id} });
+        },
+
+        onModifyStatus() {
+            this.$refs.statusList.doShow();
         }
     }
 };

src/views/iscs_new/iscsDraw/statusCombineEdit.vue

@@ -13,47 +13,7 @@
         @expand-change="expandChange"
       >
         <!-- covertStatusList:  -->
-        <el-table-column type="expand">
-          <template slot-scope="props">
-            <div class="combineStatusListName">状态组合列表</div>
-            <el-select v-model="props.row.defaultLoop" size="mini">
-              <el-option label="循环" :value="true" />
-              <el-option label="不循环" :value="false" />
-            </el-select>
-            <!-- {{ props.row.covertStatusList }} -->
-            <el-button type="primary" size="mini" class="addStyle" @click="addCovertStatus(props.$index)">添加</el-button>
-            <el-table
-              :data="props.row.covertStatusList"
-              stripe
-              class="eachStatusTable"
-              size="mini"
-              row-key="id"
-            >
-              <el-table-column label="是否循环" width="98">
-                <template slot-scope="scope">
-                  <el-form-item
-                    :prop="'stateList.'+props.$index+'.status.covertStatusList.'+scope.$index+'.loop'"
-                  >
-                    {{ scope.row.loop?"是":'否' }}
-                  </el-form-item>
-                </template>
-              </el-table-column>
-              <!-- delay
-            animateTime -->
-              <el-table-column label="次数" width="98">
-                <template v-if="scope.row.times" slot-scope="scope">
-                  <el-form-item
-                    :prop="'stateList.'+props.$index+'.status.covertStatusList.'+scope.$index+'.times'"
-                  >
-                    {{ scope.row.times }}
-                  </el-form-item>
-                </template>
-              </el-table-column>
-            </el-table>
-          </template>
-        </el-table-column>
         <el-table-column label="状态" width="98">
-          <!-- align="center" -->
           <template slot-scope="scope">
             <el-form-item
               :prop="'stateList.'+scope.$index+'.status'"
@@ -103,9 +63,10 @@
             </el-form-item>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="70">
+        <el-table-column label="操作" width="115">
           <template slot-scope="scope">
-            <el-button type="danger" size="mini" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
+            <el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
+            <el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -141,7 +102,9 @@ export default {
         },
         addComposeStatus() {
             const length = this.formModel.stateList.length;
-            this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false, covertStatusList:[], defaultLoop:false});
+            this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false,
+                covertStatusList:[]});
+            // defaultLoop:false
             this.expandKeys.push(length + 1);
         },
         deleteStatus(index, row) {
@@ -149,28 +112,23 @@ export default {
             const key = this.expandKeys.findIndex(each=>{ return each == row.id; });
             if (key > 0) { this.expandKeys.splice(key, 1); }
         },
-        addCovertStatus(index) {
+        modifyStatus(index, row) {
-            debugger;
+            this.$refs.eachStatusTable.doShow(index, row);
-            // const covertStatusList = ;
-            if (this.formModel.stateList[index].defaultLoop) {
-                const covertStatusList = this.formModel.stateList[index].covertStatusList;
-                covertStatusList.push({loop:this.formModel.stateList[index].defaultLoop,
-                    frameList:[], times:1, delay:2, animateTime:10});
-                this.$set(this.formModel.stateList[index], 'covertStatusList', covertStatusList);
-            } else {
-                this.formModel.stateList[index].covertStatusList.push({loop:this.formModel.stateList[index].defaultLoop,
-                    frameList:[] });
-            }
-            // if (!covertStatusList) {
-            //     this.$set(this.formModel.stateList[index], type, {});
-            // }
-            // const data = this.formModel.stateList[index];
-            // const dataName = 'default' + type.replace(type[0], type[0].toUpperCase()) + 'Select';
-            // if (!data[type][data[dataName]] && data[dataName]) {
-            //     const other = utils.deepClone(this.formModel[type][data[dataName]]);
-            //     this.$set(this.formModel.stateList[index][type], data[dataName], other);
-            // }
         }
+        // addCovertStatus(index) {
+        //     if (this.formModel.stateList[index].defaultLoop) {
+        //         const covertStatusList = this.formModel.stateList[index].covertStatusList;
+        //         const length = covertStatusList.length;
+        //         covertStatusList.push({id:length + 1, loop:this.formModel.stateList[index].defaultLoop,
+        //             delay:2, animateTime:10, frameList:[]});
+        //         // ,times:1,
+        //         // this.formModel.stateList[index].covertStatusList = covertStatusList;
+        //         this.$set(this.formModel.stateList[index], 'covertStatusList', covertStatusList);
+        //     } else {
+        //         this.formModel.stateList[index].covertStatusList.push({id:length + 1, loop:this.formModel.stateList[index].defaultLoop,
+        //             frameList:[]});
+        //     }
+        // }
     }
 };
 </script>

src/views/iscs_new/iscsDraw/statusList.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="composeStatusList"
+    title="状态编辑"
+    :visible.sync="show"
+    width="800px"
+    :before-close="doClose"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <el-button type="primary" size="small" class="addComposeStatus" @click="addComposeStatus">添加</el-button>
+    <el-form ref="form" class="composeStatusForm" :model="formModel">
+      <el-table
+        :data="formModel.stateList"
+        stripe
+        border
+        class="composeStatusTable"
+        height="360"
+        size="mini"
+        row-key="id"
+      >
+        <el-table-column label="状态" width="169">
+          <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:149px" :maxlength="100" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" width="170">
+          <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:150px" :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:100px" :step="1" :min="1" :max="100" :precision="0" />
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否可重置" width="100">
+          <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="200">
+          <template slot-scope="scope">
+            <el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
+            <el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <div class="bottomBtnGroup">
+      <el-button type="primary" size="medium" @click="onEditStatusSave">保存</el-button>
+    </div>
+    <el-dialog
+      v-dialogDrag
+      class="composeStatus"
+      title="状态组合"
+      :visible.sync="innerShow"
+      width="700px"
+      :before-close="doInnerClose"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <div class="loopTitle">是否动画：</div>
+      <el-select v-model="defaultLoop" size="mini">
+        <el-option label="是" :value="true" />
+        <el-option label="否" :value="false" />
+      </el-select>
+      <el-button type="primary" size="mini" class="addStyle" @click="addCovertStatus">添加</el-button>
+      <el-form ref="Innerform" class="composeStatusForm" :model="statusModel">
+        <el-table
+          :data="statusModel.covertStatusList"
+          stripe
+          border
+          style="margin-top:10px;"
+          class="eachStatusTable"
+          size="mini"
+          row-key="id"
+        >
+          <el-table-column label="是否动画" width="100" align="center">
+            <template slot-scope="scope">
+              <el-form-item prop="loop">
+                <div style="">{{ scope.row.loop?'是':'否' }}</div>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="动画时间" width="120" align="center">
+            <template slot-scope="scope">
+              <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>
+            </template>
+          </el-table-column>
+          <el-table-column label="动画延时" width="120" align="center">
+            <template slot-scope="scope">
+              <el-form-item
+                v-if="scope.row.loop"
+                :prop="'covertStatusList.'+scope.$index+'.delay'"
+                :rules="[{required: true, message:'请输入动画延时', trigger: 'blur'}]"
+              >
+                <el-input-number v-model="scope.row.delay" size="mini" style="width:100px" :step="1" :min="1" :max="100" :precision="0" />
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态组合" width="319">
+            <template slot-scope="scope">
+              <!-- {{ 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-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-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> -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+      <div class="bottomBtnGroup">
+        <el-button type="primary" size="medium" @click="onEditComposeStatus">保存</el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+<script>
+export default {
+    name:'StatusList',
+    data() {
+        return {
+            show:false,
+            defaultLoop:false,
+            // covertStatusList:[],
+            innerShow:false,
+            formModel:{
+                stateList:[]
+            },
+            statusModel:{
+                covertStatusList:[]
+            },
+            selectedElement:'',
+            selectedElementStatus:'',
+            elementList:[]
+            // statusList:[]
+        };
+    },
+    methods:{
+        doClose() {
+            this.show = false;
+        },
+        doShow() {
+            this.show = true;
+        },
+        addComposeStatus() {
+            const length = this.formModel.stateList.length;
+            this.formModel.stateList.push({id:length + 1, status:'', description:'', weight:1, needDefault:false,
+                covertStatusList:[]});
+        },
+        deleteStatus(index, row) {
+            this.formModel.stateList.splice(index, 1);
+        },
+        onEditStatusSave() {
+
+        },
+        modifyStatus(index, row) {
+            this.innerShow = true;
+            this.statusModel.covertStatusList = row.covertStatusList;
+        },
+        doInnerClose() {
+            this.innerShow = false;
+        },
+        addCovertStatus() {
+            if (this.defaultLoop) {
+                this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[]});
+            } else {
+                this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[] });
+            }
+
+        },
+        onEditComposeStatus() {
+
+        },
+        addElementStatus(index, loop) {
+            if (loop) {
+
+            } else {
+
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+  .composeStatusTable{margin-top:10px;}
+  .bottomBtnGroup{
+    width: 100%;
+    margin-top:10px;
+    text-align: center;
+    display: inline-block
+  }
+  .loopTitle{display:inline-block;}
+</style>
+<style lang="scss">
+.composeStatusList .el-dialog__body,.composeStatus .el-dialog__body{padding: 15px 20px;}
+</style>