Parcourir la source

添加上下移动功能

shaun-sheep il y a 4 ans
Parent
commit
995c156301
1 fichiers modifiés avec 65 ajouts et 8 suppressions
  1. 65 8
      src/views/legendRules/index.vue

+ 65 - 8
src/views/legendRules/index.vue

@@ -1,6 +1,15 @@
 <template>
     <!-- 图例库首页 -->
     <div class='legend-rules'>
+        <div class='nav'>
+            <img class='img-menu' src='@/assets/imgs/menu.png' alt />
+            <el-divider direction='vertical'></el-divider>
+            <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
+            <span style='color:#1F2329'>万达管理说明书</span>
+            <span class='circular'></span>
+            <span style='color:#1F2329'>图例绘制规则</span>
+            <i class='el-icon-caret-bottom'></i>
+        </div>
         <div class='legend-rules-top'>
             图例绘制规则
             <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
@@ -19,7 +28,7 @@
                 ></a-tree>
             </div>
             <div class='legend-rules-right'>
-                <el-table :data='tableData' style='width: 100%'>
+                <!-- <el-table :data='tableData' style='width: 100%'>
                     <el-table-column prop='Name' label='图例名称'>
                         <template slot-scope='{row}'>{{row.Name || '--'}}</template>
                     </el-table-column>
@@ -37,8 +46,8 @@
                             <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
                         </template>
                     </el-table-column>
-                </el-table>
-                <!-- <Table
+                </el-table>-->
+                <Table
                     :head='headList2'
                     :source='tableData'
                     :toolButtons='toolBtns'
@@ -47,7 +56,7 @@
                     @tool-button-click='buttonClickHandle'
                 >
                     <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
-                </Table>-->
+                </Table>
             </div>
         </div>
         <add-legend ref='addLegend' @mesg='mesg'></add-legend>
@@ -109,10 +118,37 @@ export default {
          * @param {Object} Obj {tool:{icon:'icon组件名称',name:'按钮名称',type:'icon组件type'},item:当前行数据}
          */
         buttonClickHandle(obj) {
-            console.log(obj)
-            if (obj.tool.name == '删除') {
-                this.deleteClick(obj.item)
-                return
+            let index = Number(obj.item.index.split('-')[1])
+            let _this = this
+            switch (obj.tool.name) {
+                case '删除':
+                    this.deleteClick(obj.item)
+                    break
+                case '上移':
+                    up()
+                    break
+                case '下移':
+                    down()
+                    break
+            }
+            function up() {
+                if (index == 0) {
+                    _this.$message.error('处于顶端,不可再上移')
+                } else {
+                    let upDate = _this.tableData[index - 1]
+                    _this.tableData.splice(index - 1, 1)
+                    _this.tableData.splice(index, 0, upDate)
+                }
+            }
+
+            function down() {
+                if (index == _this.tableData.length - 1) {
+                    _this.$message.error('处于底端,不可再下移')
+                } else {
+                    let downDate = _this.tableData[index + 1]
+                    _this.tableData.splice(index + 1, 1)
+                    _this.tableData.splice(index, 0, downDate)
+                }
             }
         },
 
@@ -171,6 +207,27 @@ export default {
     display: flex;
     flex-direction: column;
     color: #1f2329;
+    .nav {
+        height: 48px;
+        line-height: 48px;
+        width: 100%;
+        background: #fff;
+        margin-left: 17px;
+        .img-menu {
+            margin-right: 9px;
+        }
+        .img-logo {
+            margin: 0 9px;
+        }
+        .circular {
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            background: rgba(195, 198, 203, 1);
+            border-radius: 50%;
+            margin: 0 8px 3px 8px;
+        }
+    }
     .legend-rules-top {
         text-align: center;
         height: 48px;