树接口更新

assets/css/themes/default.less

 //-------------蓝色----------- 
-
+@Theme: rgba(38, 128, 235, 1);
 //滚动条颜色
 @scrollbar-track-bg-color: rgb(239, 239, 239);
 @scrollbar-thumb-bg-color: rgba(38, 128, 235, 0.5);

components/page/treeGrid/EditGrid.vue

@@ -14,7 +14,11 @@
     <table>
       <thead>
         <tr>
-          <th v-for="(column, index) in columns" :key="index" :style="tdStyle(column)">
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            :style="tdStyle(column)"
+          >
             <label v-if="column.type === 'selection'">
               <Checkbox v-model="all"></Checkbox>
             </label>
@@ -40,9 +44,9 @@
         <tr
           v-for="(item, index) in trs"
           :key="item.id"
-          v-show="show(item)"
           class="treetr"
           :id="'tr' + index"
+          v-show="show(item)"
           :draggable="drag && !item._drag"
           @dragstart="dragstart($event, index, item)"
           @drop="dragdrop($event, index, item)"
@@ -50,6 +54,7 @@
           @dragover="dragover($event, index, item)"
           @dragleave="dragleave($event, index, item)"
         >
+          <!--  -->
           <td
             v-for="(column, snum) in columns"
             :key="column.key"
@@ -62,31 +67,25 @@
             >
               <Checkbox v-model="item.checked"></Checkbox>
             </label>
-            <!-- 图标 -->
-            <div v-if="column.type === 'icon'">
-              <i
-                class="icon-set"
-                size="small"
-                @click="RowClick(item, $event, index, action.text)"
-                v-for="action in column.actions"
-                :key="action.text"
-              >
-                <Icon
-                  :type="action.type"
-                  :title="action.text"
-                  :style="action.style"
-                />
-              </i>
-            </div>
-            <div v-if="column.type === 'icons'">
-              <Icon :type="item[column.key]" size="20" />
-            </div>
-            <DTSpan v-if="column.type=='date'" :value="item[column.key]"/>
-            <div v-if="column.type=='user'">
-              <User :value="item[column.key]"/>
+
+            <Icon v-if="column.type === 'drag'" type="md-more" class="drag" />
+            <DTSpan v-if="column.type == 'date'" :value="item[column.key]" />
+            <div v-if="column.type == 'user'">
+              <User :value="item[column.key]" />
             </div>
-            <div v-if="column.type=='users'&&item[column.key]&&item[column.key].length>0">
-              <User v-for="li in item[column.key]" :value="li" :key="li" class="ml10"/>
+            <div
+              v-if="
+                column.type == 'users' &&
+                item[column.key] &&
+                item[column.key].length > 0
+              "
+            >
+              <User
+                v-for="li in item[column.key]"
+                :value="li"
+                :key="li"
+                class="ml10"
+              />
             </div>
             <state
               v-if="column.code"
@@ -94,17 +93,13 @@
               :value="item[column.key]"
             />
             <!-- 树图标 -->
-            <span @click="toggle(index, item)" v-if="snum == iconRow()">
-              <span v-html="item.spaceHtml"></span>
-              <a v-if="item.children && item.children.length > 0">
-                <i
-                  class="ivu-icon"
-                  :class="{
-                    'ivu-icon-ios-arrow-forward': !item.expanded,
-                    'ivu-icon-ios-arrow-down': item.expanded,
-                  }"
-                ></i> </a
-              ><i v-else class="ms-tree-space"></i>
+            <span @click="toggle(index, item)" v-if="snum == treeColumn()">
+              <span class="ib" v-width="spaceWidth * item._level"></span>
+              <a v-if="item._count > 0" class="expand"
+                ><Icon :type="item._expanded ? 'ios-add' : 'ios-remove'" /> </a
+              ><i v-else class="ms-tree-space"></i> {{ item._level }}v{{
+                item._count
+              }}:{{ show(item) }}
             </span>
             <!-- 菜单名称、排序、请求地址 -->
             <label
@@ -115,7 +110,7 @@
               {{ renderBody(item, column) }}
             </label>
             <table-expand
-              v-if="column.render && !column.type&&!column.solt"
+              v-if="column.render && !column.type && !column.solt"
               :row="item"
               :column="column"
               :index="snum"
@@ -235,9 +230,7 @@ export default {
   watch: {
     items() {
       if (this.items) {
-        this.trs = [];
-        this.dataLength = this.Length(this.items);
-        this.initData(this.deepCopy(this.items), 1, null);
+        this.trs = this.treeToList(this.items);
         this.checkGroup = this.renderCheck(this.items);
         if (this.checkGroup.length == this.dataLength) {
           this.checks = true;
@@ -245,6 +238,7 @@ export default {
           this.checks = false;
         }
       }
+      console.warn("tree", this.trs);
     },
     columns: {
       handler() {
@@ -258,8 +252,7 @@ export default {
   },
   mounted() {
     if (this.items && this.items.length > 0) {
-      this.dataLength = this.Length(this.items);
-      this.initData(this.deepCopy(this.items), 1, null);
+      this.trs = this.treeToList(this.items);
       this.cloneColumns = this.makeColumns();
       this.checkGroup = this.renderCheck(this.items);
       if (this.checkGroup.length == this.dataLength) {
@@ -268,10 +261,9 @@ export default {
         this.checks = false;
       }
     }
-    //this.initData();
+    console.warn("tree", this.trs);
   },
   methods: {
-    initData() {},
     slots() {
       return this.$scopedSlots;
     },
@@ -299,10 +291,10 @@ export default {
       var my = e.offsetY;
       var h = e.toElement.clientHeight;
       var tr = document.getElementById("tr" + index);
-      if (this.dragIndex > index && my/h<0.5) {
+      if (this.dragIndex > index && my / h < 0.5) {
         tr.className = tr.className.replace(" move", " sort");
       }
-      if (this.dragIndex < index &&  my/h>0.5) {
+      if (this.dragIndex < index && my / h > 0.5) {
         tr.className = tr.className.replace(" sort", " move");
       }
     },
@@ -319,14 +311,14 @@ export default {
       if (index != this.dragIndex) {
         this.$emit("on-drag-drop", this.dragIndex, index, this.trs, e);
       }
-      console.log(e.offsetY/ e.toElement.clientHeight);
+      console.log(e.offsetY / e.toElement.clientHeight);
     },
     /**
      *   @dragover="dragover($event, index, item)"
           @dragleave="dragleave($event,index,item)"
      */
     // 有无多选框折叠位置优化
-    iconRow() {
+    treeColumn() {
       var num = 0;
       for (let i = 0, len = this.columns.length; i < len; i++) {
         if (this.columns[i].tree) {
@@ -347,7 +339,6 @@ export default {
       }
       return style;
     },
-
     // 排序事件
     handleSort(index, type) {
       this.cloneColumns.forEach((col) => (col._sortType = "normal"));
@@ -364,50 +355,12 @@ export default {
     },
     // 点击某一行事件
     RowClick(data, event, index, text) {
-      // this.iconName = true;
-      const result = this.makeData(data);
-      this.$emit("on-row-click", result, event, index, text);
-    },
-    //点击图标
-    RowClickIcon(event, index, text) {
-      this.$emit("on-icon-click", event, index, text);
+      this.$emit("on-row-click", data, event, index, text);
     },
-
     // 点击事件 返回数据处理
-    makeData(data) {
-      const t = this.type(data);
-      let o;
-      if (t === "array") {
-        o = [];
-      } else if (t === "object") {
-        o = {};
-      } else {
-        return data;
-      }
-
-      if (t === "array") {
-        for (let i = 0; i < data.length; i++) {
-          o.push(this.makeData(data[i]));
-        }
-      } else if (t === "object") {
-        for (const i in data) {
-          if (
-            i != "spaceHtml" &&
-            i != "parent" &&
-            i != "level" &&
-            i != "expanded" &&
-            i != "isShow" &&
-            i != "load"
-          ) {
-            o[i] = this.makeData(data[i]);
-          }
-        }
-      }
-      return o;
-    },
     // 处理表头数据
     makeColumns() {
-      const columns = this.deepCopy(this.columns);
+      const columns = this.$u.clone(this.columns);
       this.tdsWidth = 0;
       columns.forEach((column, index) => {
         column._index = index;
@@ -417,82 +370,42 @@ export default {
       });
       return columns;
     },
-    // 数据处理 增加自定义属性监听
-    initData(items, level, parent) {
-      // this.trs = []
-      let spaceHtml = "";
-      for (let i = 1; i < level; i++) {
-        spaceHtml += "<i class='ms-tree-space'></i>";
+    // //  隐藏显示
+
+    toggle(index, item) {
+      if (item._count > 0) {
+        this.$set(this.trs[index], "_expanded", !item._expanded);
+        this.trs.forEach((u,i)=>{
+          if(u["upId"]===item.id){
+            this.$set(this.trs[i], "_show", !item._expanded);
+          }
+        })
       }
-      items.forEach((item, index) => {
-        item = Object.assign({}, item, {
-          parent,
-          level,
-          spaceHtml,
-        });
-        if (typeof item.expanded === "undefined") {
-          item = Object.assign({}, item, {
-            expanded: true,
-          });
-        }
-        if (typeof item.show === "undefined") {
-          item = Object.assign({}, item, {
-            isShow: true,
-          });
-        }
-        if (typeof item.isChecked === "undefined") {
-          item = Object.assign({}, item, {
-            isChecked: false,
-          });
-        }
-        item = Object.assign({}, item, {
-          load: !!item.expanded,
-        });
-        this.trs.push(item);
-        if (item.children && item.expanded) {
-          this.initData(item.children, level + 1, item);
-        }
-        items.splice(index, 1, item);
-      });
+      console.warn(index, item._expanded, item);
     },
-    //  隐藏显示
     show(item) {
-      return (
-        item.level == 1 || (item.parent && item.parent.expanded && item.isShow)
-      );
-    },
-    toggle(index, item) {
-      const level = item.level + 1;
-      let spaceHtml = "";
-      for (let i = 1; i < level; i++) {
-        spaceHtml += "<i class='ms-tree-space'></i>";
+      if (item._level == 0) {
+        return true;
+      } else {
+        var parents = this.getRoots(item);
+        console.log(parents)
+        return parents.filter(u=>{
+          return !u._expanded
+        }).length==0;
       }
-      if (item.children) {
-        if (item.expanded) {
-          item.expanded = !item.expanded;
-          this.close(index, item);
-        } else {
-          item.expanded = !item.expanded;
-          if (item.load) {
-            this.open(index, item);
-          } else {
-            item.load = true;
-            item.children.forEach((child, childIndex) => {
-              this.trs.splice(index + childIndex + 1, 0, child);
-              // 设置监听属性
-              this.$set(this.trs[index + childIndex + 1], "parent", item);
-              this.$set(this.trs[index + childIndex + 1], "level", level);
-              this.$set(
-                this.trs[index + childIndex + 1],
-                "spaceHtml",
-                spaceHtml
-              );
-              this.$set(this.trs[index + childIndex + 1], "isShow", true);
-              this.$set(this.trs[index + childIndex + 1], "expanded", false);
-            });
-          }
-        }
+    },
+    getRoots(item){
+      var parents = [];
+      var root=this.trs.filter(u=>{
+        return u["id"]==item["upId"];
+      })
+      while(root.length==1){
+        parents.push(root[0]);
+        root=this.trs.filter(u=>{
+        return u["id"]===root["upId"];
+      })
       }
+      return parents;
     },
     open(index, item) {
       if (item.children) {
@@ -582,16 +495,7 @@ export default {
       });
       return arr;
     },
-    // 返回树形数据长度
-    Length(data) {
-      let { length } = data;
-      data.forEach((child) => {
-        if (child.children) {
-          length += this.Length(child.children);
-        }
-      });
-      return length;
-    },
+
     // 返回表头
     renderHeader(column, $index) {
       if ("renderHeader" in this.columns[$index]) {
@@ -599,6 +503,27 @@ export default {
       }
       return column.title || "#";
     },
+    treeToList(tree) {
+      var that = this;
+      let list = [];
+      function treeToList(data, level) {
+        data.map((u) => {
+          let copy = that.$u.clone(u);
+          copy._count = 0;
+          copy._level = level;
+          copy._expanded = false;
+          copy._show = true;
+          list.push(copy);
+          if (u.children) {
+            treeToList(u.children, level + 1);
+            copy._count = u.children.length;
+            delete copy.children;
+          }
+        });
+      }
+      treeToList(tree, 0);
+      return list;
+    },
 
     // 返回内容
     renderBody(row, column, index) {
@@ -617,57 +542,16 @@ export default {
       });
       return arr;
     },
-    // 深度拷贝函数
-    deepCopy(data) {
-      const t = this.type(data);
-      let o;
-      let i;
-      let ni;
-      if (t === "array") {
-        o = [];
-      } else if (t === "object") {
-        o = {};
-      } else {
-        return data;
-      }
-      if (t === "array") {
-        for (i = 0, ni = data.length; i < ni; i++) {
-          o.push(this.deepCopy(data[i]));
-        }
-        return o;
-      }
-      if (t === "object") {
-        for (i in data) {
-          o[i] = this.deepCopy(data[i]);
-        }
-        return o;
-      }
-    },
-    type(obj) {
-      const { toString } = Object.prototype;
-      const map = {
-        "[object Boolean]": "boolean",
-        "[object Number]": "number",
-        "[object String]": "string",
-        "[object Function]": "function",
-        "[object Array]": "array",
-        "[object Date]": "date",
-        "[object RegExp]": "regExp",
-        "[object Undefined]": "undefined",
-        "[object Null]": "null",
-        "[object Object]": "object",
-      };
-      return map[toString.call(obj)];
-    },
-  },
-  beforeDestroy() {
-    window.onresize = null;
   },
-   
 };
 </script>
 <style lang="less">
 @import "../../../assets/css/custom.less";
+@table_theme: #2680eb;
+@table_head: #e9f2fd;
+@table_line_height: 50px;
+@table_hover: #f2f8fe;
+@table_border: #accef7;
 .treeTbale {
   overflow: 0 auto;
   width: 100% !important;
@@ -701,28 +585,57 @@ export default {
     border-collapse: collapse;
     margin: 0 auto;
     width: 100%;
+    border: 1px solid @table_border;
     th {
-      background: #f8f8f9;
+      background: @table_head;
     }
     td,
     th {
-      border: #dcdee2 solid 1px;
-      line-height: 40px;
+      border-left: @table_border solid 1px;
+      border-right: @table_border solid 1px;
+      border-bottom: #e8e9eb solid 1px;
+      line-height: 50px;
       padding: 0 5px;
+
+      .drag:hover {
+        cursor: move;
+      }
+      .expand {
+        width: 18px;
+        height: 18px;
+        border: 1px solid @table_border;
+        text-align: center;
+        padding: 0 1px;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .expand:hover{
+        background:  @table_theme;
+        color:white;
+      }
+      .ib {
+        display: inline-block;
+      }
+    }
+    th {
+      border-top: @table_border solid 1px;
     }
     tr.treetr:hover td {
-      background: #f7f7f7;
+      background: @table_hover;
     }
     tr.move {
       td {
-        background-color: blue;
+        background-color: #d3e6fb;
       }
     }
     tr.sort {
       td {
-        border-top: 2px solid blue;
+        border-top: 2px solid #3b8ded;
       }
     }
+    tbody {
+      border-bottom: @table_border solid 1px;
+    }
     .ms-tree-space {
       position: relative;
       top: 1px;

libs/henq.js

@@ -2,30 +2,48 @@ import XLSX from 'xlsx';
 import Api from '@/plugins/request'
 let henq = {};
 let pdfInfo = ''
-henq.clone = (obj) => {
+henq.clone = (data)=> {
   var that = henq
-  var o
-  if (typeof obj === 'object') {
-    if (obj === null) {
-      o = null
-    } else {
-      if (obj instanceof Array) {
-        o = []
-        for (var i = 0, len = obj.length; i < len; i++) {
-          o.push(that.clone(obj[i]))
-        }
-      } else {
-        o = {}
-        for (var j in obj) {
-          o[j] = that.clone(obj[j])
-        }
-      }
-    }
+  const t = that.type(data);
+  let o;
+  let i;
+  let ni;
+  if (t === "array") {
+    o = [];
+  } else if (t === "object") {
+    o = {};
   } else {
-    o = obj
+    return data;
+  }
+  if (t === "array") {
+    for (i = 0, ni = data.length; i < ni; i++) {
+      o.push(that.clone(data[i]));
+    }
+    return o;
+  }
+  if (t === "object") {
+    for (i in data) {
+      o[i] = that.clone(data[i]);
+    }
+    return o;
   }
-  return o
 }
+henq.type=(obj) =>{
+  const { toString } = Object.prototype;
+  const map = {
+    "[object Boolean]": "boolean",
+    "[object Number]": "number",
+    "[object String]": "string",
+    "[object Function]": "function",
+    "[object Array]": "array",
+    "[object Date]": "date",
+    "[object RegExp]": "regExp",
+    "[object Undefined]": "undefined",
+    "[object Null]": "null",
+    "[object Object]": "object",
+  };
+  return map[toString.call(obj)];
+},
 henq.merge = () => {
   Object.assign(argments)
 }

pages/project/plan/index.vue

 <template>
   <div>
     <Card>
-      <EditGrid :columns="columns" ref="grid" :items="list">
+      <EditGrid :columns="columns" ref="grid" :items="list" :drag="true">
         <template slot="easySearch"
           ><Form ref="formInline" :model="easySearch" inline
             ><FormItem prop="keys"
@@ -86,6 +86,26 @@ export default {
         // { key:"projectId",title:this.l("projectId")   ,align:"left"    ,high:true  },
         // { key:"upId",title:this.l("upId")   ,align:"left"    ,high:true  },
         // { type: "selection", width: 80, align: "center" },
+        {
+          key:"drag",
+         type:"drag",
+         width:50,  
+         align:'center'
+        },
+         {
+          key: "upId",
+          width: 400,
+          title: this.l("upId"),
+         
+        },
+        {
+          key: "title",
+          title: this.l("title"),
+          align: "left",
+          tree: true,
+          easy: true,
+          high: true,
+        },
         {
           key: "type",
           width: 90,
@@ -106,14 +126,7 @@ export default {
           easy: true,
           high: true,
         },
-        {
-          key: "title",
-          title: this.l("title"),
-          align: "left",
-          tree: true,
-          easy: true,
-          high: true,
-        },
+        
         {
           key: "status",
           title: this.l("status"),