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
Show whitespace changes
Inline Side-by-side
Showing with 355 additions and 75 deletions
components/page/dataGrid.vue
View file @ 1b457162
...@@ -143,8 +143,10 @@ ...@@ -143,8 +143,10 @@
</template> </template>
<script> <script>
import ColumnSlot from "./treeGrid/columnSolt";
export default { export default {
name: "DataGrid", name: "DataGrid",
components: { ColumnSlot },
data() { data() {
return { return {
keys: "", keys: "",
...@@ -155,7 +157,7 @@ export default { ...@@ -155,7 +157,7 @@ export default {
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
sortBy: "id", sortBy: "id",
isDesc:true, isDesc: true,
conditions: [], conditions: [],
}, },
searchConditions: this.search, searchConditions: this.search,
...@@ -294,15 +296,16 @@ export default { ...@@ -294,15 +296,16 @@ export default {
default: "", default: "",
}, },
}, },
provide() {
return {
tableRoot: this.slots,
};
},
created() { created() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
}
});
this.columnsCur = this.$u.clone(this.columns);
}, },
mounted() { mounted() {
this.initColumns();
if (this.data && this.data.length > 0) { if (this.data && this.data.length > 0) {
this.list = this.data; this.list = this.data;
return; return;
...@@ -350,7 +353,41 @@ export default { ...@@ -350,7 +353,41 @@ export default {
this.getRoutingHeaderData(); this.getRoutingHeaderData();
this.getAllUser(); //获取所有用户 this.getAllUser(); //获取所有用户
}, },
methods: { 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() { load() {
if (this.action) { 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 @@ ...@@ -14,21 +14,21 @@
<table> <table>
<thead> <thead>
<tr> <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'"> <label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选 <Checkbox v-model="all"></Checkbox>
</label> </label>
<label v-else> <label v-else>
{{ renderHeader(column, index) }} {{ renderHeader(column, index) }}
<span class="ivu-table-sort" v-if="column.sortable"> <span class="ivu-table-sort" v-if="column.sortable">
<Icon <Icon
type="arrow-up-b" type="arrow-up-b"
:class="{on: column._sortType === 'asc'}" :class="{ on: column._sortType === 'asc' }"
@click.native="handleSort(index, 'asc')" @click.native="handleSort(index, 'asc')"
/> />
<Icon <Icon
type="arrow-down-b" type="arrow-down-b"
:class="{on: column._sortType === 'desc'}" :class="{ on: column._sortType === 'desc' }"
@click.native="handleSort(index, 'desc')" @click.native="handleSort(index, 'desc')"
/> />
</span> </span>
...@@ -38,96 +38,168 @@ ...@@ -38,96 +38,168 @@
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(item,index) in initItems" v-for="(item, index) in initItems"
:key="item.id" :key="item.id"
v-show="show(item)" v-show="show(item)"
class="treetr" 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)"> <td
<!-- <label> v-for="(column, snum) in columns"
<input :key="column.key"
v-if="column.type === 'selection'" :style="tdStyle(column)"
type="checkbox" >
:value="item.id" <!-- 多选 -->
v-model="checkGroup" <label v-if="column.type === 'selection'" @click="handleCheckClick(item, $event, index)">
@click="handleCheckClick(item,$event,index)" <Checkbox v-model="item.checked" ></Checkbox>
/> </label>
</label>-->
<!-- 图标 --> <!-- 图标 -->
<div v-if="column.type === 'icon'"> <div v-if="column.type === 'icon'">
<i <i
class="icon-set" class="icon-set"
size="small" size="small"
@click="RowClick(item,$event,index,action.text)" @click="RowClick(item, $event, index, action.text)"
v-for="action in (column.actions)" v-for="action in column.actions"
:key="action.text" :key="action.text"
> >
<Icon :type="action.type" :title="action.text" :style="action.style" /> <Icon
:type="action.type"
:title="action.text"
:style="action.style"
/>
</i> </i>
</div> </div>
<div v-if="column.type === 'icons'"> <div v-if="column.type === 'icons'">
<Icon :type="item[column.key]" size="20" /> <Icon :type="item[column.key]" size="20" />
</div> </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 <op
v-for="action in (column.actions)" v-for="action in column.actions"
:key="action.text" :key="action.text"
@click="RowClick(item,$event,index,action.text)" @click="RowClick(item, $event, index, action.text)"
:type="action.type" :type="action.type"
size="small" size="small"
style=" margin:0 5px;" style="margin: 0 5px"
:class="action.text=='删除'? 'remove' : (action.text=='新增' ? 'add': (action.text=='编辑' ?'edit':''))" :class="
v-show="(item.type=='3'&&action.text=='新增')||(item.children.length>0&&action.text=='删除')?false:true" action.text == '删除'
>{{action.text}}</op> ? '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>
<!-- 类型 --> <!-- 类型 -->
<div v-if="column.type === 'menuRender'" style="text-align:center;"> <div v-if="column.type === 'menuRender'" style="text-align: center">
<Button <Button
:ghost="item[column.key] ==0 ?false:true" :ghost="item[column.key] == 0 ? false : true"
size="small" size="small"
:type="item[column.key] ==0 ? 'default' :item[column.key] == 1 ? 'info' :item[column.key] == 2?'error':'warning'" :type="
>{{item[column.key] == 0 ? '子系统':item[column.key] == 1 ? '目录': item[column.key] == 2 ? '菜单' : '按钮'}}</Button> 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>
<!-- 状态 --> <!-- 状态 -->
<div v-if="column.type === 'menuIsshow'" style="text-align:center;"> <div v-if="column.type === 'menuIsshow'" style="text-align: center">
<Button <Button
:ghost="item[column.key] == 1 ? true :false" :ghost="item[column.key] == 1 ? true : false"
:disabled="item[column.key] == 1 ? false :true" :disabled="item[column.key] == 1 ? false : true"
size="small" size="small"
:type="item[column.key] == 1 ? 'info' :'default'" :type="item[column.key] == 1 ? 'info' : 'default'"
>{{item[column.key] == 1 ? '显示': '隐藏'}}</Button> >{{ item[column.key] == 1 ? "显示" : "隐藏" }}</Button
>
</div> </div>
<!-- 打开方式 --> <!-- 打开方式 -->
<div v-if="column.type === 'menuTarget'"> <div v-if="column.type === 'menuTarget'">
<span <span
:style="item[column.key] == 0?'color:#006699':item[column.key] == 1?'color:black':''" :style="
>{{item[column.key] == 0 ? '本页面': item[column.key] == 1?'新页面':''}}</span> item[column.key] == 0
? 'color:#006699'
: item[column.key] == 1
? 'color:black'
: ''
"
>{{
item[column.key] == 0
? "本页面"
: item[column.key] == 1
? "新页面"
: ""
}}</span
>
</div> </div>
<!-- 菜单名称、排序、请求地址 --> <!-- 树图标 -->
<label @click="toggle(index,item)" v-if="!column.type&&!column.code&&!column.render"> <span @click="toggle(index, item)" v-if="snum == iconRow()">
<span v-if="snum==iconRow()">
<i v-html="item.spaceHtml"></i> <i v-html="item.spaceHtml"></i>
<a v-if="item.children&&item.children.length>0"> <a v-if="item.children && item.children.length > 0">
<i <i
class="ivu-icon" class="ivu-icon"
:class="{'ivu-icon-ios-arrow-forward':!item.expanded,'ivu-icon-ios-arrow-down':item.expanded }" :class="{
></i> 'ivu-icon-ios-arrow-forward': !item.expanded,
</a> 'ivu-icon-ios-arrow-down': item.expanded,
}"
<i v-else class="ms-tree-space"></i> ></i> </a
><i v-else class="ms-tree-space"></i>
</span> </span>
{{renderBody(item,column) }} <!-- 菜单名称、排序、请求地址 -->
<label
v-if="
!column.type && !column.code && !column.render && !column.slot
"
>
{{ renderBody(item, column) }}
</label> </label>
<table-expand <table-expand
v-if="column.render&&!column.type" v-if="column.render && !column.type && !column.solt"
:row="item" :row="item"
:column="column" :column="column"
:index="snum" :index="snum"
:render="column.render" :render="column.render"
></table-expand> ></table-expand>
<column-slot
v-if="column.slot"
:row="item"
:column="column"
:index="snum"
></column-slot>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -136,9 +208,10 @@ ...@@ -136,9 +208,10 @@
</template> </template>
<script> <script>
import TableExpand from "./expand"; import TableExpand from "./expand";
import ColumnSlot from "./columnSolt";
export default { export default {
name: "treeGrid", name: "treeGrid",
components: { TableExpand }, components: { TableExpand, ColumnSlot },
props: { props: {
columns: Array, columns: Array,
items: { items: {
...@@ -148,10 +221,24 @@ export default { ...@@ -148,10 +221,24 @@ export default {
}, },
}, },
iconName: false, iconName: false,
drag:{
type:Boolean,
default:false
},
spaceWidth:{
type:Number,
default:20
}
},
provide() {
return {
tableRoot: this.slots,
};
}, },
data() { data() {
return { return {
color: "#19be6b", color: "#19be6b",
all:true,
initItems: [], // 处理后数据数组 initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据 cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组 checkGroup: [], // 复选框数组
...@@ -160,6 +247,7 @@ export default { ...@@ -160,6 +247,7 @@ export default {
tdsWidth: 0, // td总宽 tdsWidth: 0, // td总宽
timer: false, // 控制监听时长 timer: false, // 控制监听时长
dataLength: 0, // 树形数据长度 dataLength: 0, // 树形数据长度
dragIndex:-1,//拖拽开始的序号
}; };
}, },
computed: { computed: {
...@@ -203,6 +291,7 @@ export default { ...@@ -203,6 +291,7 @@ export default {
}, },
}, },
mounted() { mounted() {
console.warn("treegrid", this.$scopedSlots);
if (this.items) { if (this.items) {
this.dataLength = this.Length(this.items); this.dataLength = this.Length(this.items);
this.initData(this.deepCopy(this.items), 1, null); this.initData(this.deepCopy(this.items), 1, null);
...@@ -225,14 +314,30 @@ export default { ...@@ -225,14 +314,30 @@ export default {
})(); })();
}, },
methods: { 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() { iconRow() {
var num = 0;
for (let i = 0, len = this.columns.length; i < len; i++) { for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == "selection") { if (this.columns[i].tree) {
return 1; num = i;
} }
} }
return 0; return num;
}, },
// 设置td宽度,td的align // 设置td宽度,td的align
tdStyle(column) { tdStyle(column) {
...@@ -349,11 +454,7 @@ export default { ...@@ -349,11 +454,7 @@ export default {
// 数据处理 增加自定义属性监听 // 数据处理 增加自定义属性监听
initData(items, level, parent) { initData(items, level, parent) {
// this.initItems = [] // this.initItems = []
let spaceHtml = ""; let spaceHtml = "<i class='ms-tree-space' style='width:"+this.spaceWidth*level+"px'></i>";
for (let i = 1; i < level; i++) {
spaceHtml +=
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>";
}
items.forEach((item, index) => { items.forEach((item, index) => {
item = Object.assign({}, item, { item = Object.assign({}, item, {
parent, 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 @@ ...@@ -17,13 +17,13 @@
<template> <template>
<div class="flex fd test_layout"> <div class="flex fd test_layout">
<div> <div>
<Menu mode="horizontal" theme="light" active-name="0"> <Menu mode="horizontal" theme="light" active-name="a0">
<div class="layout-assistant"> <div class="layout-assistant">
<MenuItem name="0" to="/test/example">基础组件</MenuItem> <MenuItem name="a0" to="/test/example">基础组件</MenuItem>
<MenuItem name="1" to="/test/user">人员选择</MenuItem> <MenuItem name="a1" to="/test/user">人员选择</MenuItem>
<MenuItem name="2" to="/test/com">异步组件</MenuItem> <MenuItem name="a2" to="/test/com">异步组件</MenuItem>
<MenuItem name="4" to="/test/resource">资源选择</MenuItem> <MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="3" to="/test/view">详情拖拽排版</MenuItem> <MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
</div> </div>
</Menu> </Menu>
</div> </div>
......
pages/test/api.js
View file @ 1b457162
...@@ -13,10 +13,16 @@ export const exampleRouter = [ ...@@ -13,10 +13,16 @@ export const exampleRouter = [
}, },
{ {
route: '/test/example/table', route: '/test/example/table',
title: 'treeGrid组件', title: '表格',
name: 'components-table', name: 'components-table',
icon: 'md-aperture' icon: 'md-aperture'
}, },
{
route: '/test/example/tree',
title: '树',
name: 'tree',
icon: 'md-aperture'
},
{ {
route: '/test/example/select', route: '/test/example/select',
title: 'select组件', title: 'select组件',
......
pages/test/example/table/index.vue
View file @ 1b457162
...@@ -21,6 +21,9 @@ ...@@ -21,6 +21,9 @@
</FormItem> </FormItem>
</Form> </Form>
</template> </template>
<template slot-scope="{row,column,index}" slot="action">
<strong>aaaa</strong>
</template>
</DataGrid> </DataGrid>
</div> </div>
</template> </template>
...@@ -62,6 +65,7 @@ export default { ...@@ -62,6 +65,7 @@ export default {
easy: true, easy: true,
sortable:true, sortable:true,
high: true, high: true,
slot:"cardNo",
tooltip: true, 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