Skip to content

M
mes-ui
Commit 3da3304b authored by 周远喜's avatar 周远喜
Browse files
Options

树接口更新

parent 5939502d
Show whitespace changes
Inline Side-by-side
Showing with 197 additions and 253 deletions
assets/css/themes/default.less
View file @ 3da3304b
//-------------蓝色-----------
@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
View file @ 3da3304b
......@@ -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 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
"
>
<Icon
:type="action.type"
:title="action.text"
:style="action.style"
<User
v-for="li in item[column.key]"
:value="li"
:key="li"
class="ml10"
/>
</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]"/>
</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>
<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);
this.$emit("on-row-click", data, event, index, text);
},
//点击图标
RowClickIcon(event, index, text) {
this.$emit("on-icon-click", 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>";
}
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,
});
// // 隐藏显示
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);
}
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.children) {
if (item.expanded) {
item.expanded = !item.expanded;
this.close(index, item);
} else {
item.expanded = !item.expanded;
if (item.load) {
this.open(index, item);
if (item._level == 0) {
return true;
} 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);
});
}
}
}
var parents = this.getRoots(item);
console.log(parents)
return parents.filter(u=>{
return !u._expanded
}).length==0;
}
},
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,27 +585,56 @@ 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;
......
libs/henq.js
View file @ 3da3304b
......@@ -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
const t = that.type(data);
let o;
let i;
let ni;
if (t === "array") {
o = [];
} else if (t === "object") {
o = {};
} else {
if (obj instanceof Array) {
o = []
for (var i = 0, len = obj.length; i < len; i++) {
o.push(that.clone(obj[i]))
return data;
}
} else {
o = {}
for (var j in obj) {
o[j] = that.clone(obj[j])
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]);
}
} else {
o = obj
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
View file @ 3da3304b
<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"),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment