Skip to content

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

Merge branch 'mes-henq-tree-20201016' into product 

合并
parents 62757512 f2c7ac32
Hide whitespace changes
Inline Side-by-side
Showing with 355 additions and 75 deletions
components/page/dataGrid.vue
View file @ 1b457162
......@@ -143,8 +143,10 @@
</template>
<script>
import ColumnSlot from "./treeGrid/columnSolt";
export default {
name: "DataGrid",
components: { ColumnSlot },
data() {
return {
keys: "",
......@@ -155,7 +157,7 @@ export default {
pageIndex: 1,
pageSize: 20,
sortBy: "id",
isDesc:true,
isDesc: true,
conditions: [],
},
searchConditions: this.search,
......@@ -294,15 +296,16 @@ export default {
default: "",
},
},
provide() {
return {
tableRoot: this.slots,
};
},
created() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
}
});
this.columnsCur = this.$u.clone(this.columns);
},
mounted() {
this.initColumns();
if (this.data && this.data.length > 0) {
this.list = this.data;
return;
......@@ -350,7 +353,41 @@ export default {
this.getRoutingHeaderData();
this.getAllUser(); //获取所有用户
},
methods: {
//列初始化 slot 支持;
slots() {
return this.$scopedSlots;
},
initColumns() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
}
});
var items=this.$u.clone(this.columns);
var soct=this.$scopedSlots;
console.warn("that.$scopedSlots()",soct["action"]());
items.forEach((u) => {
if (u.slot) {
u.render = (h, params) => {
return h(
"span",
// soct[u.slot]({
// row: params.row,
// column: params.column,
// index: params.index,
// })
params.row.id
);
};
delete u.slot;
}
});
this.columnsCur = items;
console.log("cur", items,this.columnsCur);
},
//数据加载
load() {
if (this.action) {
......
components/page/treeGrid/columnSolt.js 0 → 100644
View file @ 1b457162
export default {
name: 'ColumnSlot',
functional: true,
inject: ['tableRoot'],
props: {
row: Object,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
return h('span', ctx.injections.tableRoot()[ctx.props.column.slot]({
row: ctx.props.row,
column: ctx.props.column,
index: ctx.props.index
}));
}
};
\ No newline at end of file
components/page/treeGrid/index.vue
View file @ 1b457162
......@@ -14,21 +14,21 @@
<table>
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index">
<th v-for="(column, index) in cloneColumns" :key="index">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选
<Checkbox v-model="all"></Checkbox>
</label>
<label v-else>
{{ renderHeader(column, index) }}
<span class="ivu-table-sort" v-if="column.sortable">
<Icon
type="arrow-up-b"
:class="{on: column._sortType === 'asc'}"
:class="{ on: column._sortType === 'asc' }"
@click.native="handleSort(index, 'asc')"
/>
<Icon
type="arrow-down-b"
:class="{on: column._sortType === 'desc'}"
:class="{ on: column._sortType === 'desc' }"
@click.native="handleSort(index, 'desc')"
/>
</span>
......@@ -38,96 +38,168 @@
</thead>
<tbody>
<tr
v-for="(item,index) in initItems"
v-for="(item, index) in initItems"
:key="item.id"
v-show="show(item)"
class="treetr"
:class="{'child-tr':item.parent}"
:class="{ 'child-tr': item.parent }"
:draggable="drag"
@dragstart="dragstart($event, index, item)"
@dragover="dragover($event, index, item)"
@drop="dragdrop($event, index, item)"
>
<td v-for="(column,snum) in columns" :key="column.key" :style="tdStyle(column)">
<!-- <label>
<input
v-if="column.type === 'selection'"
type="checkbox"
:value="item.id"
v-model="checkGroup"
@click="handleCheckClick(item,$event,index)"
/>
</label>-->
<td
v-for="(column, snum) in columns"
:key="column.key"
:style="tdStyle(column)"
>
<!-- 多选 -->
<label v-if="column.type === 'selection'" @click="handleCheckClick(item, $event, index)">
<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)"
@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" />
<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>
<state v-if="column.code" :code="column.code" :value="item[column.key]" />
<state
v-if="column.code"
:code="column.code"
:value="item[column.key]"
/>
<!-- 操作 -->
<div v-if="column.type === 'action'" class="action" style="text-align:left;">
<div
v-if="column.type === 'action'"
class="action"
style="text-align: left"
>
<op
v-for="action in (column.actions)"
v-for="action in column.actions"
:key="action.text"
@click="RowClick(item,$event,index,action.text)"
@click="RowClick(item, $event, index, action.text)"
:type="action.type"
size="small"
style=" margin:0 5px;"
:class="action.text=='删除'? 'remove' : (action.text=='新增' ? 'add': (action.text=='编辑' ?'edit':''))"
v-show="(item.type=='3'&&action.text=='新增')||(item.children.length>0&&action.text=='删除')?false:true"
>{{action.text}}</op>
style="margin: 0 5px"
:class="
action.text == '删除'
? 'remove'
: action.text == '新增'
? 'add'
: action.text == '编辑'
? 'edit'
: ''
"
v-show="
(item.type == '3' && action.text == '新增') ||
(item.children.length > 0 && action.text == '删除')
? false
: true
"
>{{ action.text }}</op
>
</div>
<!-- 类型 -->
<div v-if="column.type === 'menuRender'" style="text-align:center;">
<div v-if="column.type === 'menuRender'" style="text-align: center">
<Button
:ghost="item[column.key] ==0 ?false:true"
:ghost="item[column.key] == 0 ? false : true"
size="small"
:type="item[column.key] ==0 ? 'default' :item[column.key] == 1 ? 'info' :item[column.key] == 2?'error':'warning'"
>{{item[column.key] == 0 ? '子系统':item[column.key] == 1 ? '目录': item[column.key] == 2 ? '菜单' : '按钮'}}</Button>
:type="
item[column.key] == 0
? 'default'
: item[column.key] == 1
? 'info'
: item[column.key] == 2
? 'error'
: 'warning'
"
>{{
item[column.key] == 0
? "子系统"
: item[column.key] == 1
? "目录"
: item[column.key] == 2
? "菜单"
: "按钮"
}}</Button
>
</div>
<!-- 状态 -->
<div v-if="column.type === 'menuIsshow'" style="text-align:center;">
<div v-if="column.type === 'menuIsshow'" style="text-align: center">
<Button
:ghost="item[column.key] == 1 ? true :false"
:disabled="item[column.key] == 1 ? false :true"
:ghost="item[column.key] == 1 ? true : false"
:disabled="item[column.key] == 1 ? false : true"
size="small"
:type="item[column.key] == 1 ? 'info' :'default'"
>{{item[column.key] == 1 ? '显示': '隐藏'}}</Button>
:type="item[column.key] == 1 ? 'info' : 'default'"
>{{ item[column.key] == 1 ? "显示" : "隐藏" }}</Button
>
</div>
<!-- 打开方式 -->
<div v-if="column.type === 'menuTarget'">
<span
:style="item[column.key] == 0?'color:#006699':item[column.key] == 1?'color:black':''"
>{{item[column.key] == 0 ? '本页面': item[column.key] == 1?'新页面':''}}</span>
:style="
item[column.key] == 0
? 'color:#006699'
: item[column.key] == 1
? 'color:black'
: ''
"
>{{
item[column.key] == 0
? "本页面"
: item[column.key] == 1
? "新页面"
: ""
}}</span
>
</div>
<!-- 树图标 -->
<span @click="toggle(index, item)" v-if="snum == iconRow()">
<i v-html="item.spaceHtml"></i>
<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>
<!-- 菜单名称、排序、请求地址 -->
<label @click="toggle(index,item)" v-if="!column.type&&!column.code&&!column.render">
<span v-if="snum==iconRow()">
<i v-html="item.spaceHtml"></i>
<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>
{{renderBody(item,column) }}
<label
v-if="
!column.type && !column.code && !column.render && !column.slot
"
>
{{ renderBody(item, column) }}
</label>
<table-expand
v-if="column.render&&!column.type"
v-if="column.render && !column.type && !column.solt"
:row="item"
:column="column"
:index="snum"
:render="column.render"
></table-expand>
<column-slot
v-if="column.slot"
:row="item"
:column="column"
:index="snum"
></column-slot>
</td>
</tr>
</tbody>
......@@ -136,9 +208,10 @@
</template>
<script>
import TableExpand from "./expand";
import ColumnSlot from "./columnSolt";
export default {
name: "treeGrid",
components: { TableExpand },
components: { TableExpand, ColumnSlot },
props: {
columns: Array,
items: {
......@@ -148,10 +221,24 @@ export default {
},
},
iconName: false,
drag:{
type:Boolean,
default:false
},
spaceWidth:{
type:Number,
default:20
}
},
provide() {
return {
tableRoot: this.slots,
};
},
data() {
return {
color: "#19be6b",
all:true,
initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组
......@@ -160,6 +247,7 @@ export default {
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0, // 树形数据长度
dragIndex:-1,//拖拽开始的序号
};
},
computed: {
......@@ -203,6 +291,7 @@ export default {
},
},
mounted() {
console.warn("treegrid", this.$scopedSlots);
if (this.items) {
this.dataLength = this.Length(this.items);
this.initData(this.deepCopy(this.items), 1, null);
......@@ -225,14 +314,30 @@ export default {
})();
},
methods: {
slots() {
return this.$scopedSlots;
},
//拖拽
dragstart(e,index, row ) {
this.dragIndex=index;
console.log(index)
},
dragover(e,index, row ) {
e.preventDefault();
},
dragdrop(e,index, row ) {
event.preventDefault();
this.$emit("on-drag-drop",this.dragIndex,index,this.initItems)
},
// 有无多选框折叠位置优化
iconRow() {
var num = 0;
for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == "selection") {
return 1;
if (this.columns[i].tree) {
num = i;
}
}
return 0;
return num;
},
// 设置td宽度,td的align
tdStyle(column) {
......@@ -349,11 +454,7 @@ export default {
// 数据处理 增加自定义属性监听
initData(items, level, parent) {
// this.initItems = []
let spaceHtml = "";
for (let i = 1; i < level; i++) {
spaceHtml +=
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>";
}
let spaceHtml = "<i class='ms-tree-space' style='width:"+this.spaceWidth*level+"px'></i>";
items.forEach((item, index) => {
item = Object.assign({}, item, {
parent,
......
components/treeGrid/slot.js 0 → 100644
View file @ 1b457162
export default {
name: 'TableSlot',
functional: true,
inject: ['tableRoot'],
props: {
row: Object,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
return h('div', ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({
row: ctx.props.row,
column: ctx.props.column,
index: ctx.props.index
}));
}
};
\ No newline at end of file
pages/test.vue
View file @ 1b457162
......@@ -17,13 +17,13 @@
<template>
<div class="flex fd test_layout">
<div>
<Menu mode="horizontal" theme="light" active-name="0">
<Menu mode="horizontal" theme="light" active-name="a0">
<div class="layout-assistant">
<MenuItem name="0" to="/test/example">基础组件</MenuItem>
<MenuItem name="1" to="/test/user">人员选择</MenuItem>
<MenuItem name="2" to="/test/com">异步组件</MenuItem>
<MenuItem name="4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="3" to="/test/view">详情拖拽排版</MenuItem>
<MenuItem name="a0" to="/test/example">基础组件</MenuItem>
<MenuItem name="a1" to="/test/user">人员选择</MenuItem>
<MenuItem name="a2" to="/test/com">异步组件</MenuItem>
<MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
</div>
</Menu>
</div>
......
pages/test/api.js
View file @ 1b457162
......@@ -13,10 +13,16 @@ export const exampleRouter = [
},
{
route: '/test/example/table',
title: 'treeGrid组件',
title: '表格',
name: 'components-table',
icon: 'md-aperture'
},
{
route: '/test/example/tree',
title: '树',
name: 'tree',
icon: 'md-aperture'
},
{
route: '/test/example/select',
title: 'select组件',
......
pages/test/example/table/index.vue
View file @ 1b457162
......@@ -21,6 +21,9 @@
</FormItem>
</Form>
</template>
<template slot-scope="{row,column,index}" slot="action">
<strong>aaaa</strong>
</template>
</DataGrid>
</div>
</template>
......@@ -62,6 +65,7 @@ export default {
easy: true,
sortable:true,
high: true,
slot:"cardNo",
tooltip: true,
},
],
......
pages/test/example/tree/index.vue 0 → 100644
View file @ 1b457162
<template>
<div class="tree">
<TreeGrid :columns="columns" :items="treeData">
<template slot-scope="{row,column,index}" slot="name">
<Icon type="md-folder" /> {{row.name}}
</template>
<template slot-scope="{row,column,index}" slot="action">
<strong>{{row.action}}</strong>
</template>
</TreeGrid>
<!-- <Input v-model="data" type="textarea" rows="20" placeholder=""></Input> -->
</div>
</template>
<script>
import Mock from "mockjs";
export default {
name: "",
data() {
return {
columns: [
{
type: "selection",
width:50,
align:"center"
},
{
key: "name",
title: "名称",
tree:true,
slot:"name"
},
{
key: "status",
title: "状态",
width: "100"
},
{
key: "action",
title: "操作",
width: "100",
sortable:true,
slot:"action"
},
],
treeData1: [],
treeData: [
{
action: "510000202006085435",
name: "书加部保处",
status: 0,
children: [
{ action: "430000200008054924", name: "越组大过越", status: 0 },
{ action: "350000200106195747", name: "反走和报山", status: 1 },
{ action: "46000019920810827X", name: "强级法量少务持", status: 1 },
{ action: "620000198005286979", name: "况题米", status: 1 },
{ action: "440000200901093872", name: "又多为", status: 0 },
],
},
{ action: "510000199304272074", name: "参什叫", status: 1 },
{ action: "710000199110144186", name: "情克应个该农", status: 1 },
{ action: "140000201204175550", name: "阶研其交式", status: 1 },
{ action: "500000198710051748", name: "议开你集", status: 1 },
],
data: "",
};
},
mounted() {
// this.init();
},
methods: {
init() {
var data = Mock.mock({
"data|5": [
{
action: "@id",
name: "@ctitle",
"status|1": [0, 1],
},
],
});
console.warn(data);
this.data = JSON.stringify(data.data);
this.treeData = data.data;
},
},
};
</script>
<style lang="less" >
</style>
\ No newline at end of file
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