Skip to content

M
mes-ui
Commit 6df392a6 authored by renjintao's avatar renjintao
Browse files
Options

部门管理 export，treegrid，org，getalldepartment ......

parent 06d2afa4
Hide whitespace changes
Inline Side-by-side
Showing with 1135 additions and 963 deletions
components/page/treeGrid/index.vue
View file @ 6df392a6
<template> <template>
<div class="treeTbale"> <div class="treeTbale">
<div class="table-tools"> <div class="table-tools">
<div class="table-search"> <div class="table-search">
<slot name="easySearch"></slot> <slot name="easySearch"></slot>
</div> </div>
<div class="btns"> <div class="btns">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<!-- <Button @click="config=!config"> <!-- <Button @click="config=!config">
<Icon type="md-build" class="table-set" size="14" title="列设置" /> <Icon type="md-build" class="table-set" size="14" title="列设置" />
</Button>--> </Button>-->
</div> </div>
</div> </div>
<table> <table>
<thead> <thead>
<tr> <tr>
<th v-for="(column,index) in cloneColumns" :key="index"> <th v-for="(column,index) in cloneColumns" :key="index" v-if="column.hide!=true">
<label v-if="column.type === 'selection'"> <label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选 <input type="checkbox" v-model="checks" @click="handleCheckAll" />全选
</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" :class="{on: column._sortType === 'asc'}" @click.native="handleSort(index, 'asc')" />
type="arrow-up-b" <Icon type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" />
:class="{on: column._sortType === 'asc'}" </span>
@click.native="handleSort(index, 'asc')" </label>
/> </th>
<Icon </tr>
type="arrow-down-b" </thead>
:class="{on: column._sortType === 'desc'}" <tbody>
@click.native="handleSort(index, 'desc')" <tr v-for="(item,index) in initItems" :key="item.id" v-show="show(item)" class="treetr" :class="{'child-tr':item.parent}">
/> <td v-for="(column,snum) in columns" :key="column.key" :style="tdStyle(column)">
</span> <!-- <label>
</label>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item,index) in initItems"
:key="item.id"
v-show="show(item)"
class="treetr"
:class="{'child-tr':item.parent}"
>
<td v-for="(column,snum) in columns" :key="column.key" :style="tdStyle(column)">
<!-- <label>
<input <input
v-if="column.type === 'selection'" v-if="column.type === 'selection'"
type="checkbox" type="checkbox"
...@@ -54,606 +40,592 @@ ...@@ -54,606 +40,592 @@
@click="handleCheckClick(item,$event,index)" @click="handleCheckClick(item,$event,index)"
/> />
</label>--> </label>-->
<!-- 图标 --> <!-- 图标 -->
<div v-if="column.type === 'icon'"> <div v-if="column.type === 'icon'">
<i <i class="icon-set" size="small" @click="RowClick(item,$event,index,action.text)" v-for="action in (column.actions)" :key="action.text">
class="icon-set" <Icon :type="action.type" :title="action.text" :style="action.style" />
size="small" </i>
@click="RowClick(item,$event,index,action.text)" </div>
v-for="action in (column.actions)" <div v-if="column.type === 'icons'">
:key="action.text" <Icon :type="item[column.key]" size="20" />
> </div>
<Icon :type="action.type" :title="action.text" :style="action.style" /> <state v-if="column.code" :code="column.code" :value="item[column.key]" />
</i> <!-- 操作 -->
</div> <div v-if="column.type === 'action'" class="action" style="text-align:left;">
<div v-if="column.type === 'icons'"> <op v-for="action in (column.actions)" :key="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>
<Icon :type="item[column.key]" size="20" /> </div>
</div> <!-- 类型 -->
<state v-if="column.code" :code="column.code" :value="item[column.key]" /> <div v-if="column.type === 'menuRender'" style="text-align:center;">
<!-- 操作 --> <Button :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>
<div v-if="column.type === 'action'" class="action" style="text-align:left;"> </div>
<op <!-- 状态 -->
v-for="action in (column.actions)" <div v-if="column.type === 'menuIsshow'" style="text-align:center;">
:key="action.text" <Button :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>
@click="RowClick(item,$event,index,action.text)" </div>
:type="action.type" <!-- 打开方式 -->
size="small" <div v-if="column.type === 'menuTarget'">
style=" margin:0 5px;" <span :style="item[column.key] == 0?'color:#006699':item[column.key] == 1?'color:black':''">{{item[column.key] == 0 ? '本页面': item[column.key] == 1?'新页面':''}}</span>
:class="action.text=='删除'? 'remove' : (action.text=='新增' ? 'add': (action.text=='编辑' ?'edit':''))" </div>
v-show="(item.type=='3'&&action.text=='新增')||(item.children.length>0&&action.text=='删除')?false:true" <!-- 菜单名称、排序、请求地址 -->
>{{action.text}}</op> <label @click="toggle(index,item)" v-if="!column.type&&!column.code&&!column.render">
</div> <span v-if="snum==iconRow()">
<!-- 类型 --> <i v-html="item.spaceHtml"></i>
<div v-if="column.type === 'menuRender'" style="text-align:center;"> <a v-if="item.children&&item.children.length>0">
<Button <i class="ivu-icon" :class="{'ivu-icon-ios-arrow-forward':!item.expanded,'ivu-icon-ios-arrow-down':item.expanded }"></i>
:ghost="item[column.key] ==0 ?false:true" </a>
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>
</div>
<!-- 状态 -->
<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"
size="small"
: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>
</div>
<!-- 菜单名称、排序、请求地址 -->
<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> <i v-else class="ms-tree-space"></i>
</span> </span>
{{renderBody(item,column) }} {{renderBody(item,column) }}
</label> </label>
<table-expand <table-expand v-if="column.render&&!column.type" :row="item" :column="column" :index="snum" :render="column.render"></table-expand>
v-if="column.render&&!column.type" </td>
:row="item" </tr>
:column="column" </tbody>
:index="snum"
:render="column.render"
></table-expand>
</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
<script> <script>
import TableExpand from './expand' import TableExpand from './expand'
export default { export default {
name: 'treeGrid', name: 'treeGrid',
components: { TableExpand }, components: {
props: { TableExpand
columns: Array,
items: {
type: Array,
default() {
return []
}
}, },
iconName: false props: {
}, columns: Array,
data() { items: {
return { type: Array,
color: '#19be6b', default () {
initItems: [], // 处理后数据数组 return []
cloneColumns: [], // 处理后的表头数据 }
checkGroup: [], // 复选框数组 },
checks: false, // 全选 iconName: false
screenWidth: document.body.clientWidth, // 自适应宽
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0 // 树形数据长度
}
},
computed: {
tableWidth() {
return this.tdsWidth > this.screenWidth && this.screenWidth > 0
? `${this.screenWidth}px`
: '100%'
}
},
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.timer = false
}, 400)
}
}, },
items() { data() {
if (this.items) { return {
this.initItems = [] color: '#19be6b',
this.dataLength = this.Length(this.items) initItems: [], // 处理后数据数组
this.initData(this.deepCopy(this.items), 1, null) cloneColumns: [], // 处理后的表头数据
this.checkGroup = this.renderCheck(this.items) checkGroup: [], // 复选框数组
if (this.checkGroup.length == this.dataLength) { checks: false, // 全选
this.checks = true screenWidth: document.body.clientWidth, // 自适应宽
} else { tdsWidth: 0, // td总宽
this.checks = false timer: false, // 控制监听时长
dataLength: 0 // 树形数据长度
} }
}
}, },
columns: { computed: {
handler() { tableWidth() {
this.cloneColumns = this.makeColumns() return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ?
}, `${this.screenWidth}px` :
deep: true '100%'
},
checkGroup(data) {
this.checkAllGroupChange(data)
}
},
mounted() {
if (this.items) {
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null)
this.cloneColumns = this.makeColumns()
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
}
}
// 绑定onresize事件 监听屏幕变化设置宽
this.$nextTick(() => {
this.screenWidth = document.body.clientWidth
})
window.onresize = () =>
(() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
})()
},
methods: {
// 有无多选框折叠位置优化
iconRow() {
for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == 'selection') {
return 1
} }
}
return 0
},
// 设置td宽度,td的align
tdStyle(column) {
const style = {}
if (column.align) {
style['text-align'] = column.align
}
if (column.width) {
style['width'] = `${column.width}px`
}
return style
},
// 排序事件
handleSort(index, type) {
this.cloneColumns.forEach((col) => (col._sortType = 'normal'))
if (this.cloneColumns[index]._sortType === type) {
this.cloneColumns[index]._sortType = 'normal'
} else {
this.cloneColumns[index]._sortType = type
}
this.$emit(
'on-sort-change',
this.cloneColumns[index].key,
this.cloneColumns[index]._sortType
)
},
// 点击某一行事件
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)
},
//修改排序
updataOrderNum(data, event, index, text) {
//console.log(event.id + "kkkkkkkkkk");
// console.log(event.orderNum + "nnnnnnnn");
var data = {
id: event.id,
orderNum: event.orderNum
}
this.updata(data)
}, },
//修改颜色 watch: {
updataColor(data, event, index, text) { screenWidth(val) {
//console.log(event.id + "kkkkkkkkkk"); if (!this.timer) {
//console.log(event.color + "nnnnnnnn"); this.screenWidth = val
var data = { this.timer = true
id: event.id, setTimeout(() => {
color: event.color this.timer = false
} }, 400)
this.updata(data) }
}, },
//修改单个字段 items() {
updata(data) { if (this.items) {
this.$http.dic this.initItems = []
.dicUpdate(data) this.dataLength = this.Length(this.items)
.then((res) => { this.initData(this.deepCopy(this.items), 1, null)
this.$Message.success(res.msg) this.checkGroup = this.renderCheck(this.items)
this.$parent.getInfo() if (this.checkGroup.length == this.dataLength) {
}) this.checks = true
.catch((error) => { } else {
this.$Message.error(error.msg) this.checks = false
}) }
}, }
// 点击事件 返回数据处理 },
makeData(data) { columns: {
const t = this.type(data) handler() {
let o this.cloneColumns = this.makeColumns()
if (t === 'array') { },
o = [] deep: true
} else if (t === 'object') { },
o = {} checkGroup(data) {
} else { this.checkAllGroupChange(data)
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)
this.tdsWidth = 0
columns.forEach((column, index) => {
column._index = index
column._width = column.width ? column.width : ''
column._sortType = 'normal'
this.tdsWidth += column.width ? parseFloat(column.width) : 0
})
return columns
}, },
// 数据处理 增加自定义属性监听 mounted() {
initData(items, level, parent) { if (this.items) {
// this.initItems = [] this.dataLength = this.Length(this.items)
let spaceHtml = '' this.initData(this.deepCopy(this.items), 1, null)
for (let i = 1; i < level; i++) { this.cloneColumns = this.makeColumns()
spaceHtml += this.checkGroup = this.renderCheck(this.items)
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>" if (this.checkGroup.length == this.dataLength) {
} this.checks = true
items.forEach((item, index) => { } else {
item = Object.assign({}, item, { this.checks = false
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, { // 绑定onresize事件 监听屏幕变化设置宽
load: !!item.expanded this.$nextTick(() => {
this.screenWidth = document.body.clientWidth
}) })
this.initItems.push(item) window.onresize = () =>
if (item.children && item.expanded) { (() => {
this.initData(item.children, level + 1, item) window.screenWidth = document.body.clientWidth
} this.screenWidth = window.screenWidth
items.splice(index, 1, item) })()
})
}, },
// 隐藏显示 methods: {
show(item) { // 有无多选框折叠位置优化
return ( iconRow() {
item.level == 1 || (item.parent && item.parent.expanded && item.isShow) for (let i = 0, len = this.columns.length; i < len; i++) {
) if (this.columns[i].type == 'selection') {
}, return 1
toggle(index, item) { }
const level = item.level + 1 }
let spaceHtml = '' return 0
for (let i = 1; i < level; i++) { },
spaceHtml += "<i class='ms-tree-space'></i>" // 设置td宽度,td的align
} tdStyle(column) {
if (item.children) { const style = {}
if (item.expanded) { if (column.align) {
item.expanded = !item.expanded style['text-align'] = column.align
this.close(index, item) }
} else { if (column.width) {
item.expanded = !item.expanded style['width'] = `${column.width}px`
if (item.load) { }
this.open(index, item) if (column.hide == true) {
} else { style['display'] = `none`
item.load = true }
item.children.forEach((child, childIndex) => { return style
this.initItems.splice(index + childIndex + 1, 0, child) },
// 设置监听属性
this.$set(this.initItems[index + childIndex + 1], 'parent', item) // 排序事件
this.$set(this.initItems[index + childIndex + 1], 'level', level) handleSort(index, type) {
this.$set( this.cloneColumns.forEach((col) => (col._sortType = 'normal'))
this.initItems[index + childIndex + 1], if (this.cloneColumns[index]._sortType === type) {
'spaceHtml', this.cloneColumns[index]._sortType = 'normal'
spaceHtml } else {
) this.cloneColumns[index]._sortType = type
this.$set(this.initItems[index + childIndex + 1], 'isShow', true) }
this.$set( this.$emit(
this.initItems[index + childIndex + 1], 'on-sort-change',
'expanded', this.cloneColumns[index].key,
false this.cloneColumns[index]._sortType
) )
},
// 点击某一行事件
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)
},
//修改排序
updataOrderNum(data, event, index, text) {
//console.log(event.id + "kkkkkkkkkk");
// console.log(event.orderNum + "nnnnnnnn");
var data = {
id: event.id,
orderNum: event.orderNum
}
this.updata(data)
},
//修改颜色
updataColor(data, event, index, text) {
//console.log(event.id + "kkkkkkkkkk");
//console.log(event.color + "nnnnnnnn");
var data = {
id: event.id,
color: event.color
}
this.updata(data)
},
//修改单个字段
updata(data) {
this.$http.dic
.dicUpdate(data)
.then((res) => {
this.$Message.success(res.msg)
this.$parent.getInfo()
})
.catch((error) => {
this.$Message.error(error.msg)
})
},
// 点击事件 返回数据处理
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)
this.tdsWidth = 0
columns.forEach((column, index) => {
column._index = index
column._width = column.width ? column.width : ''
column._sortType = 'normal'
this.tdsWidth += column.width ? parseFloat(column.width) : 0
}) })
} return columns
} },
} // 数据处理 增加自定义属性监听
}, initData(items, level, parent) {
open(index, item) { // this.initItems = []
if (item.children) { let spaceHtml = ''
item.children.forEach((child, childIndex) => { for (let i = 1; i < level; i++) {
child.isShow = true spaceHtml +=
if (child.children && child.expanded) { "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>"
this.open(index + childIndex + 1, child)
}
})
}
},
close(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = false
child.expanded = false
if (child.children) {
this.close(index + childIndex + 1, child)
}
})
}
},
// 点击check勾选框,判断是否有children节点 如果有就一并勾选
handleCheckClick(data, event, index) {
data.isChecked = !data.isChecked
const arr = data.children
if (arr) {
if (data.isChecked) {
this.checkGroup.push(data.id)
for (let i = 0; i < arr.length; i++) {
this.checkGroup.push(arr[i].id)
}
} else {
for (let i = 0; i < this.checkGroup.length; i++) {
if (this.checkGroup[i] == data.id) {
this.checkGroup.splice(i, 1)
} }
for (let j = 0; j < arr.length; j++) { items.forEach((item, index) => {
if (this.checkGroup[i] == arr[j].id) { item = Object.assign({}, item, {
this.checkGroup.splice(i, 1) 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.initItems.push(item)
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item)
}
items.splice(index, 1, 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)
// checkbox 全选 选择事件 } else {
handleCheckAll() { item.expanded = !item.expanded
this.checks = !this.checks if (item.load) {
if (this.checks) { this.open(index, item)
this.checkGroup = this.getArray( } else {
this.checkGroup.concat(this.All(this.items)) item.load = true
) item.children.forEach((child, childIndex) => {
} else { this.initItems.splice(index + childIndex + 1, 0, child)
this.checkGroup = [] // 设置监听属性
} this.$set(this.initItems[index + childIndex + 1], 'parent', item)
// this.$emit('on-selection-change', this.checkGroup) this.$set(this.initItems[index + childIndex + 1], 'level', level)
}, this.$set(
// 数组去重 this.initItems[index + childIndex + 1],
getArray(a) { 'spaceHtml',
const hash = {} spaceHtml
const len = a.length )
const result = [] this.$set(this.initItems[index + childIndex + 1], 'isShow', true)
for (let i = 0; i < len; i++) { this.$set(
if (!hash[a[i]]) { this.initItems[index + childIndex + 1],
hash[a[i]] = true 'expanded',
result.push(a[i]) false
} )
} })
return result }
}, }
checkAllGroupChange(data) { }
if (this.dataLength > 0 && data.length === this.dataLength) { },
this.checks = true open(index, item) {
} else { if (item.children) {
this.checks = false item.children.forEach((child, childIndex) => {
} child.isShow = true
this.$emit('on-selection-change', this.checkGroup) if (child.children && child.expanded) {
}, this.open(index + childIndex + 1, child)
All(data) { }
let arr = [] })
data.forEach((item) => { }
arr.push(item.id) },
if (item.children && item.children.length > 0) { close(index, item) {
arr = arr.concat(this.All(item.children)) if (item.children) {
} item.children.forEach((child, childIndex) => {
}) child.isShow = false
return arr child.expanded = false
}, if (child.children) {
// 返回树形数据长度 this.close(index + childIndex + 1, child)
Length(data) { }
let { length } = data })
data.forEach((child) => { }
if (child.children) { },
length += this.Length(child.children) // 点击check勾选框,判断是否有children节点 如果有就一并勾选
} handleCheckClick(data, event, index) {
}) data.isChecked = !data.isChecked
return length const arr = data.children
}, if (arr) {
// 返回表头 if (data.isChecked) {
renderHeader(column, $index) { this.checkGroup.push(data.id)
if ('renderHeader' in this.columns[$index]) { for (let i = 0; i < arr.length; i++) {
return this.columns[$index].renderHeader(column, $index) this.checkGroup.push(arr[i].id)
} }
return column.title || '#' } else {
}, for (let i = 0; i < this.checkGroup.length; i++) {
if (this.checkGroup[i] == data.id) {
this.checkGroup.splice(i, 1)
}
for (let j = 0; j < arr.length; j++) {
if (this.checkGroup[i] == arr[j].id) {
this.checkGroup.splice(i, 1)
}
}
}
}
}
},
// checkbox 全选 选择事件
handleCheckAll() {
this.checks = !this.checks
if (this.checks) {
this.checkGroup = this.getArray(
this.checkGroup.concat(this.All(this.items))
)
} else {
this.checkGroup = []
}
// this.$emit('on-selection-change', this.checkGroup)
},
// 数组去重
getArray(a) {
const hash = {}
const len = a.length
const result = []
for (let i = 0; i < len; i++) {
if (!hash[a[i]]) {
hash[a[i]] = true
result.push(a[i])
}
}
return result
},
checkAllGroupChange(data) {
if (this.dataLength > 0 && data.length === this.dataLength) {
this.checks = true
} else {
this.checks = false
}
this.$emit('on-selection-change', this.checkGroup)
},
All(data) {
let arr = []
data.forEach((item) => {
arr.push(item.id)
if (item.children && item.children.length > 0) {
arr = arr.concat(this.All(item.children))
}
})
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]) {
return this.columns[$index].renderHeader(column, $index)
}
return column.title || '#'
},
// 返回内容 // 返回内容
renderBody(row, column, index) { renderBody(row, column, index) {
return row[column.key] return row[column.key]
}, },
// 默认选中 // 默认选中
renderCheck(data) { renderCheck(data) {
let arr = [] let arr = []
data.forEach((item) => { data.forEach((item) => {
if (item._checked) { if (item._checked) {
arr.push(item.id) arr.push(item.id)
} }
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
arr = arr.concat(this.renderCheck(item.children)) arr = arr.concat(this.renderCheck(item.children))
} }
}) })
return arr return arr
}, },
// 深度拷贝函数 // 深度拷贝函数
deepCopy(data) { deepCopy(data) {
const t = this.type(data) const t = this.type(data)
let o let o
let i let i
let ni let ni
if (t === 'array') { if (t === 'array') {
o = [] o = []
} else if (t === 'object') { } else if (t === 'object') {
o = {} o = {}
} else { } else {
return data return data
} }
if (t === 'array') { if (t === 'array') {
for (i = 0, ni = data.length; i < ni; i++) { for (i = 0, ni = data.length; i < ni; i++) {
o.push(this.deepCopy(data[i])) o.push(this.deepCopy(data[i]))
} }
return o return o
} }
if (t === 'object') { if (t === 'object') {
for (i in data) { for (i in data) {
o[i] = this.deepCopy(data[i]) 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)]
} }
return o
}
}, },
type(obj) { beforeDestroy() {
const { toString } = Object.prototype window.onresize = null
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> </script>
<style lang="less"> <style lang="less">
.treeTbale { .treeTbale {
overflow: 0 auto; overflow: 0 auto;
width: 100% !important; width: 100% !important;
.table-tools {
line-height: 40px;
.table-search {
float: left;
line-height: 40px;
min-width: 300px;
}
.btns {
float: right;
line-height: 40px;
}
tr:hover {
background: #f7f7f7;
}
}
.icon-set {
font-size: 17px;
margin-left: 5px;
display: inline-block;
}
.icon-set .ivu-icon { .table-tools {
cursor: pointer; line-height: 40px;
}
table { .table-search {
border-spacing: 0; float: left;
border-collapse: collapse; line-height: 40px;
margin: 0 auto; min-width: 300px;
width: 100%; }
th {
background: #f8f8f9; .btns {
float: right;
line-height: 40px;
}
tr:hover {
background: #f7f7f7;
}
} }
td,
th { .icon-set {
border: #dcdee2 solid 1px; font-size: 17px;
line-height: 40px; margin-left: 5px;
padding: 0 5px; display: inline-block;
} }
tr.treetr:hover td {
background: #f7f7f7; .icon-set .ivu-icon {
cursor: pointer;
} }
.ms-tree-space {
position: relative; table {
top: 1px; border-spacing: 0;
display: inline-block; border-collapse: collapse;
font-style: normal; margin: 0 auto;
font-weight: 400; width: 100%;
line-height: 1;
width: 14px; th {
height: 14px; background: #f8f8f9;
}
td,
th {
border: #dcdee2 solid 1px;
line-height: 40px;
padding: 0 5px;
}
tr.treetr:hover td {
background: #f7f7f7;
}
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
}
} }
}
} }
</style> </style>
i18n/locale/zh-CN.js
View file @ 6df392a6
...@@ -428,6 +428,10 @@ export default { ...@@ -428,6 +428,10 @@ export default {
cityName: '省市县', cityName: '省市县',
creationTime: '创建时间', creationTime: '创建时间',
upMent: '上级部门', upMent: '上级部门',
code:'部门编号',
location:'省市县',
parent_Id:'上级部门',
property:'属性',
}, },
instance: { instance: {
id: '主键', id: '主键',
......
libs/henq.js
View file @ 6df392a6
...@@ -139,6 +139,42 @@ henq.treeToList = (tree) => { ...@@ -139,6 +139,42 @@ henq.treeToList = (tree) => {
treeToList(tree, null) treeToList(tree, null)
return list; return list;
} }
//省市县pacc转为list
henq.treeToList1 = (tree) => {
let list = [];
function treeToList1(data) {
data.map(u => {
if (u.children&&u.level!=1) {
treeToList1(u.children, u)
}
else if(u.children&&u.level==1)
{
list=list.concat(u.children);
}
})
}
treeToList1(tree, null)
return list;
}
//根据departId返出上级所有name
henq.getDepartAllName = (list,id) => {
let names = '';
function getDepartAllName(list,id) {
list.map(u => {
if(id==u.id)
{
names=u.name+"-"+names
if (u.parent_Id>0) {
getDepartAllName(list, u.parent_Id)
}
}
})
}
getDepartAllName(list,id)
return names.slice(0,names.length-1);
}
//导出pdf //导出pdf
henq.outPdf = (ele, fileName) => { henq.outPdf = (ele, fileName) => {
// document.head.innerHTML = // document.head.innerHTML =
......
package-lock.json
View file @ 6df392a6
...@@ -4783,7 +4783,7 @@ ...@@ -4783,7 +4783,7 @@
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.14.1", "version": "2.14.1",
"resolved": "http://r.cnpmjs.org/commander/download/commander-2.14.1.tgz", "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.14.1.tgz?cache=0&sync_timestamp=1595168224685&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.14.1.tgz",
"integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao=" "integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao="
} }
} }
...@@ -5340,7 +5340,7 @@ ...@@ -5340,7 +5340,7 @@
}, },
"crc-32": { "crc-32": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://r.cnpmjs.org/crc-32/download/crc-32-1.2.0.tgz", "resolved": "https://registry.npm.taobao.org/crc-32/download/crc-32-1.2.0.tgz",
"integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=", "integrity": "sha1-yy224puIUI4y2d0OwWk+e0Ghggg=",
"requires": { "requires": {
"exit-on-epipe": "~1.0.1", "exit-on-epipe": "~1.0.1",
...@@ -7127,7 +7127,7 @@ ...@@ -7127,7 +7127,7 @@
}, },
"exit-on-epipe": { "exit-on-epipe": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "http://r.cnpmjs.org/exit-on-epipe/download/exit-on-epipe-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/exit-on-epipe/download/exit-on-epipe-1.0.1.tgz",
"integrity": "sha1-C92S6H1ShdJn2qgXHQ6wYVlolpI=" "integrity": "sha1-C92S6H1ShdJn2qgXHQ6wYVlolpI="
}, },
"expand-brackets": { "expand-brackets": {
...@@ -7814,7 +7814,7 @@ ...@@ -7814,7 +7814,7 @@
}, },
"frac": { "frac": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "http://r.cnpmjs.org/frac/download/frac-1.1.2.tgz", "resolved": "https://registry.npm.taobao.org/frac/download/frac-1.1.2.tgz",
"integrity": "sha1-PXT39keMiKG1AgMG10fcYxPHTQs=" "integrity": "sha1-PXT39keMiKG1AgMG10fcYxPHTQs="
}, },
"fragment-cache": { "fragment-cache": {
...@@ -14419,7 +14419,7 @@ ...@@ -14419,7 +14419,7 @@
}, },
"printj": { "printj": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "http://r.cnpmjs.org/printj/download/printj-1.1.2.tgz", "resolved": "https://registry.npm.taobao.org/printj/download/printj-1.1.2.tgz",
"integrity": "sha1-2Q3rKXWoufYA+zoclOP0xTx4oiI=" "integrity": "sha1-2Q3rKXWoufYA+zoclOP0xTx4oiI="
}, },
"private": { "private": {
...@@ -15893,7 +15893,7 @@ ...@@ -15893,7 +15893,7 @@
}, },
"script-loader": { "script-loader": {
"version": "0.7.2", "version": "0.7.2",
"resolved": "http://r.cnpmjs.org/script-loader/download/script-loader-0.7.2.tgz", "resolved": "https://registry.npm.taobao.org/script-loader/download/script-loader-0.7.2.tgz",
"integrity": "sha1-IBbbb4byX1z1baOJFdgzeLsWa6c=", "integrity": "sha1-IBbbb4byX1z1baOJFdgzeLsWa6c=",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -16473,7 +16473,7 @@ ...@@ -16473,7 +16473,7 @@
}, },
"ssf": { "ssf": {
"version": "0.10.3", "version": "0.10.3",
"resolved": "http://r.cnpmjs.org/ssf/download/ssf-0.10.3.tgz", "resolved": "https://registry.npm.taobao.org/ssf/download/ssf-0.10.3.tgz",
"integrity": "sha1-jq4fwpyQpVLnkhII+BiS1vd6yys=", "integrity": "sha1-jq4fwpyQpVLnkhII+BiS1vd6yys=",
"requires": { "requires": {
"frac": "~1.1.2" "frac": "~1.1.2"
...@@ -20196,7 +20196,7 @@ ...@@ -20196,7 +20196,7 @@
}, },
"wmf": { "wmf": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "http://r.cnpmjs.org/wmf/download/wmf-1.0.2.tgz", "resolved": "https://registry.npm.taobao.org/wmf/download/wmf-1.0.2.tgz",
"integrity": "sha1-fRnWIQcaCMK9xrfmiKnENSmMwto=" "integrity": "sha1-fRnWIQcaCMK9xrfmiKnENSmMwto="
}, },
"word-wrap": { "word-wrap": {
...@@ -20315,7 +20315,7 @@ ...@@ -20315,7 +20315,7 @@
}, },
"xlsx": { "xlsx": {
"version": "0.15.6", "version": "0.15.6",
"resolved": "http://r.cnpmjs.org/xlsx/download/xlsx-0.15.6.tgz", "resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.15.6.tgz?cache=0&sync_timestamp=1597272342311&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxlsx%2Fdownload%2Fxlsx-0.15.6.tgz",
"integrity": "sha1-Rh+EHW2eoag3XizSRr8jrs4IodU=", "integrity": "sha1-Rh+EHW2eoag3XizSRr8jrs4IodU=",
"requires": { "requires": {
"adler-32": "~1.2.0", "adler-32": "~1.2.0",
...@@ -20330,7 +20330,7 @@ ...@@ -20330,7 +20330,7 @@
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.17.1", "version": "2.17.1",
"resolved": "http://r.cnpmjs.org/commander/download/commander-2.17.1.tgz", "resolved": "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1595168224685&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz",
"integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78=" "integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78="
} }
} }
......
pages/basicData/department/index.vue
View file @ 6df392a6
<template> <template>
<div id="department"> <div id="department">
<div class="tr"> <div class="tr">
<Button type="primary" @click="add()" class="mb10">新增部门</Button> <Button type="primary" @click="add()" class="mb10">新增部门</Button>
<Button>导入</Button>
<Button @click="export2Excel">导出</Button>
<RadioGroup v-model="img" type="button" size="small"> <RadioGroup v-model="img" type="button" size="small">
<Radio :label="1"><Icon type="ios-apps" /></Radio> <Radio :label="1">
<Radio :label="0"><Icon type="md-git-merge" /></Radio> <Icon type="ios-apps" />
</Radio>
<Radio :label="0">
<Icon type="md-git-merge" />
</Radio>
</RadioGroup> </RadioGroup>
<Cascader :data="citys" v-show="false"></Cascader>
</div> </div>
<div class="main"> <div class="main">
<TreeGrid v-if="img==1" :columns="columns" :items="treeData"></TreeGrid> <TreeGrid v-if="img==1" :columns="columns" :items="treeData"></TreeGrid>
<Org v-else :data="treeData" @nodeChange="nodeChange"/> <Org v-else :datas="treeData" @nodeChange="nodeChange" />
</div> </div>
<Modal v-model="addModal" title="新增部门" width="800" footer-hide> <Modal v-model="addModal" title="新增部门" width="800" footer-hide>
<Add @on-close="cancel" @on-ok="addOk" /> <Add @on-close="cancel" @on-ok="addOk" />
</Modal> </Modal>
<Modal v-model="addrowModal" title="新增部门" width="800" footer-hide> <Modal v-model="addrowModal" title="新增部门" width="800" footer-hide>
<AddRow :val="rowdata" @on-close="cancel" @on-ok="addOk" /> <AddRow :val="rowdata" @on-close="cancel" @on-ok="addOk" />
</Modal> </Modal>
<Modal v-model="editModal" title="编辑" width="800" footer-hide> <Modal v-model="editModal" title="编辑" width="800" footer-hide>
<Edit :row="rowData" @on-close="cancel" @on-ok="addOk" /> <Edit :row="rowData" @on-close="cancel" @on-ok="addOk" />
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import Add from "./add"; import Add from "./add";
import AddRow from "./Addrow"; import AddRow from "./Addrow";
import Edit from "./edit"; import Edit from "./edit";
import Org from "./org"; import Org from "./org";
import citys from "@/libs/citys";
export default { export default {
name: "list", name: "list",
components: { components: {
Add, Add,
Edit, Edit,
AddRow, AddRow,
Org Org
}, },
data() { data() {
return { return {
searchValue: "", //搜索库位名称 searchValue: "", //搜索库位名称
img: 0, img: 0,
modal: { modal: {
title: "", title: "",
width: 1000, width: 1000,
show: false, show: false,
items: { items: {
add: false, add: false,
edit: false, edit: false,
detail: false detail: false
}, },
id: -1, id: -1,
data: {} data: {}
}, },
treeData: [], treeData: [],
addModal: false, addModal: false,
editModal: false, editModal: false,
addrowModal: false, addrowModal: false,
deletelModal: false, deletelModal: false,
rowdata: null, rowdata: null,
aId: 0, aId: 0,
rowData: null, rowData: null,
columns: [ columns: [{
{ key: "parent_Id",
key: "name", title: this.l("parent_Id"),
title: this.l("name"), align: "left",
align: "left", hide: true,
high: true parentDepart: true,
}, import: true,
// { render: (h, params) => {
// key: 'organizationType', return h("span", {},
// title: this.l('organizationType'), this.getParentDepart(params.row.parent_Id)
// align: 'left', )
// easy: true, }
// high: true },
// },
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
easy: true,
high: true
},
{
key: "property",
title: this.l("status"),
align: "left",
code: "department.property",
easy: true,
high: true
},
{
title: "操作",
key: "id",
align: "left",
render: (h, params) => {
let actions = [
h(
"op",
{ {
attrs: { oprate: "add" }, key: "name",
on: { click: () => this.addrow(params.row) } title: this.l("name"),
align: "left",
}, },
"新增"
),
h(
"op",
{ {
attrs: { oprate: "edit" }, key: "code",
on: { click: () => this.edit(params.row) } title: this.l("code"),
align: "left",
}, },
"编辑"
),
h(
"op",
{ {
attrs: { oprate: "delete" }, key: "location",
on: { click: () => this.remove(params.row.id) } title: this.l("location"),
align: "left",
location: true,
import: true,
render: (h, params) => {
return h("span", {},
this.getCity(params.row.location ? params.row.location : 0))
}
}, },
"删除" {
) key: "property",
]; title: this.l("property"),
return h("div", { class: "action" }, actions); align: "left",
} code: "department.property",
} },
] {
}; key: "creationTime",
}, title: this.l("creationTime"),
async fetch({ store, params }) { align: "left",
await store.dispatch("loadDictionary"); // 加载数据字典 },
}, {
mounted() { title: "操作",
this.init(); key: "action",
}, align: "left",
methods: { render: (h, params) => {
init() { let actions = [
Api.getpaged().then(r => { h(
this.treeData = []; "op", {
this.treeData = this.$u.toTree( attrs: {
r.result.items, oprate: "add"
0, },
(u)=>{ on: {
u.label=u.name click: () => this.addrow(params.row)
}, }
"parent_Id" },
); "新增"
}); ),
}, h(
addOk() { "op", {
this.init(); attrs: {
this.addModal = false; oprate: "edit"
this.editModal = false; },
this.addrowModal = false; on: {
this.treeData = []; click: () => this.edit(params.row)
}, }
add() { },
this.addModal = true; "编辑"
this.aId = -1; ),
}, h(
addrow(row) { "op", {
this.addrowModal = true; attrs: {
this.rowdata = row; oprate: "delete"
}, },
edit(row) { on: {
this.editModal = true; click: () => this.remove(params.row.id)
this.rowData = row; }
}, },
nodeChange(key,node){ "删除"
if(key=="edit"){ )
this.edit(node); ];
}else if(key=="delete"){ return h("div", {
this.$Modal.confirm({ class: "action"
title:"确认", }, actions);
content:"确认要删除吗？", }
onOk:()=>{ }
this.remove(node.id) ],
} treeList: [],
}) citys: citys(),
} else if(key=="add"){ cityDatas: [], //省市县在一起
if(node.id>0){ };
this.addrow(node)
}else{
this.add()
}
}
},
remove(id) {
this.editModal = false;
this.deletelModal = true;
Api.delete({ id: id }).then(res => {
if (res.result == 1) {
this.init(); //刷新列表：
this.$Message.info("删除成功!");
} else if (res.result == 2) {
this.$Message.info("删除失败,找不到数据!");
} else if (res.result == 3) {
this.$Message.info("删除失败,该组织下有子节点!");
} else {
this.$Message.info("删除失败!");
}
});
}, },
removeCancel() { async fetch({
this.deletelModal = false; store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
}, },
cancel() { mounted() {
this.addModal = false; this.init();
this.addrowModal = false; this.formatCity();
this.editModal = false;
this.deletedlModal = false;
}, },
l(key) { methods: {
let vkey = "DipartLocation" + "." + key; init() {
return this.$t(vkey) || key; Api.getpaged().then(r => {
this.treeData = [];
this.treeList = r.result.items;
this.treeData = this.$u.toTree(
r.result.items,
0,
(u) => {
u.label = u.name
},
"parent_Id"
);
});
},
addOk() {
this.init();
this.addModal = false;
this.editModal = false;
this.addrowModal = false;
this.treeData = [];
},
add() {
this.addModal = true;
this.aId = -1;
},
addrow(row) {
this.addrowModal = true;
this.rowdata = row;
},
edit(row) {
this.editModal = true;
this.rowData = row;
},
nodeChange(key, node) {
if (key == "edit") {
this.edit(node);
} else if (key == "delete") {
this.$Modal.confirm({
title: "确认",
content: "确认要删除吗？",
onOk: () => {
this.remove(node.id)
}
})
} else if (key == "add") {
if (node.id > 0) {
this.addrow(node)
} else {
this.add()
}
}
},
remove(id) {
this.editModal = false;
this.deletelModal = true;
Api.delete({
id: id
}).then(res => {
if (res.result == 1) {
this.init(); //刷新列表：
this.$Message.info("删除成功!");
} else if (res.result == 2) {
this.$Message.info("删除失败,找不到数据!");
} else if (res.result == 3) {
this.$Message.info("删除失败,该组织下有子节点!");
} else {
this.$Message.info("删除失败!");
}
});
},
removeCancel() {
this.deletelModal = false;
},
cancel() {
this.addModal = false;
this.addrowModal = false;
this.editModal = false;
this.deletedlModal = false;
},
l(key) {
let vkey = "DipartLocation" + "." + key;
return this.$t(vkey) || key;
},
//获取省市县信息
formatCity() {
let list = this.$u.clone(this.treeList);
let cityData = this.$u.clone(this.citys);
let temp = this.$u.treeToList1(cityData);
this.cityDatas = [];
temp.forEach(ele => {
let objTem = {
label: ele.__label.replace(/\s*/g, ""),
value: ele.__value
}
this.cityDatas.push(objTem)
})
},
//根据value获取当前cityname
getCity(val) {
let cities = this.$u.clone(this.cityDatas)
let label = "";
cities.forEach(ele => {
if (val == ele.value) {
label = ele.label
}
})
return label
},
//根据Id获取上级到本级的部门名称
getParentDepart(val) {
let departList = this.$u.clone(this.treeList)
return this.$u.getDepartAllName(departList, val)
},
//导出excel
export2Excel() {
//当前显示数据
let list = this.$u.clone(this.treeList)
const tHeader = []; // 设置Excel的表格第一行的标题
const filterVal = []; //list里对象的属性
var tempCol = [];
var tempCol1 = []; //省市县
var tempCol2 = []; //上级部门名称
var columnsCur = this.$u.clone(this.columns); //导出列标题信息griddata this.$refs.grid.columnsCur
columnsCur.forEach((el) => {
if ((el.hide && !el.import) || (!el.hide && el.key != "action") || (el.hide && el.import)) {
if (el.code) {
//tHeader.push(el.key + "DirName");
//filterVal.push(el.key + "DirName");
//tempCol.push({ key: el.key + "DirName", code: el.code }); //临时存放code数据字典的字段及对应的数据字典code
tempCol.push({
key: el.key,
code: el.code
}); //临时存放code数据字典的字段及对应的数据字典code
}
if (el.location) {
tempCol1.push({
key: el.key,
code: el.key
}); //临时存放省事县
}
if (el.parentDepart) {
tempCol2.push({
key: el.key,
code: el.key
}); //临时存放上级部门所有name
}
tHeader.push(this.l(el.key));
filterVal.push(el.key);
}
});
list.forEach((e) => {
//给导出数据增加数据字典对应的name
tempCol.forEach((ele) => {
e[ele.key] = this.$u.dirName(
this.$store.getters.dictionaryByKey(ele.code),
e[ele.key]
);
});
tempCol1.forEach((ele1) => {
e[ele1.key] = this.getCity(e[ele1.key]);
});
tempCol2.forEach((ele2) => {
e[ele2.key] = this.getParentDepart(e[ele2.key]);
});
});
let nowDate = this.$u.getNowTime(); //年月日时分秒yyyyMMddhhmmss
//获取导出数据结束
this.$u.outExcel(
"部门管理(" + nowDate + ")",
tHeader,
filterVal,
list
);
},
//导入excel
} }
}
}; };
</script> </script>
<style lang="less"> <style lang="less">
#department{ #department {
height: calc(100vh - 150px); height: calc(100vh - 150px);
overflow: auto; overflow: auto;
.tr{
line-height: 50px; .tr {
} line-height: 50px;
.main{ }
height: 100%;
} .main {
height: 100%;
}
} }
</style> </style>
\ No newline at end of file
pages/basicData/department/org.vue
View file @ 6df392a6
<template> <template>
<Card shadow style="height:100%;width:100%;overflow:hidden; position: relative;"> <Card shadow style="height:100%;width:100%;overflow:hidden; position: relative;">
<div class="department-outer"> <div class="department-outer">
<div class="zoom-box"> <div class="zoom-box">
<zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller> <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
</div> </div>
<div class="view-box"> <div class="view-box">
<org-view :data="rootData" :zoom-handled="zoomHandled" @on-menu-click="handleMenuClick"></org-view> <org-view :data="rootData" :zoom-handled="zoomHandled" @on-menu-click="handleMenuClick"></org-view>
</div> </div>
</div> </div>
</Card> </Card>
</template> </template>
<script> <script>
import OrgView from "@/components/department/org-view.vue"; import OrgView from "@/components/department/org-view.vue";
import ZoomController from "@/components/department/zoom-controller.vue"; import ZoomController from "@/components/department/zoom-controller.vue";
const menuDic = { const menuDic = {
edit: "编辑部门", edit: "编辑部门",
detail: "查看部门", detail: "查看部门",
new: "新增子部门", new: "新增子部门",
delete: "删除部门" delete: "删除部门"
}; };
export default { export default {
name: "org_tree_page", name: "org_tree_page",
components: { components: {
OrgView, OrgView,
ZoomController ZoomController
},
props: {
data: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
modal: false,
modal1: false,
modalTitle: "新增部门",
information: {}, //部门信息
model: {
deptId: 0,
name: "",
parentId: 0,
parentName: "",
orderNum: 1
},
root: {
deptId: 0,
name: "顶层",
label: "顶层",
parentId: 0,
parentName: "",
orderNum: 1
},
data: null,
zoom: 100
};
},
computed: {
zoomHandled() {
return this.zoom / 100;
}, },
rootData() { props: {
console.warn(this.data); datas: {
var root = { type: Array,
id: 0, default: () => {
label: "根节点", return [];
children: this.data }
}; }
return root;
}
},
methods: {
setDepartmentData(data) {
data.isRoot = true;
return data;
}, },
handleMenuClick({ data, key }) { data() {
this.$emit("nodeChange",key,data) return {
modal: false,
modal1: false,
modalTitle: "新增部门",
information: {}, //部门信息
model: {
deptId: 0,
name: "",
parentId: 0,
parentName: "",
orderNum: 1
},
root: {
deptId: 0,
name: "顶层",
label: "顶层",
parentId: 0,
parentName: "",
orderNum: 1
},
data: null,
zoom: 100
};
}, },
computed: {
zoomHandled() {
return this.zoom / 100;
},
rootData() {
console.warn(this.datas);
var root = {
id: 0,
label: "根节点",
children: this.datas
};
return root;
}
},
methods: {
setDepartmentData(data) {
data.isRoot = true;
return data;
},
handleMenuClick({
data,
key
}) {
this.$emit("nodeChange", key, data)
},
}, },
mounted() { mounted() {
console.warn(this.data); console.warn(this.datas);
} }
}; };
</script> </script>
<style lang="less"> <style lang="less">
.tools { .tools {
position: absolute; position: absolute;
z-index: 66; z-index: 66;
right: 10px; right: 10px;
} }
.percent-100 { .percent-100 {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.department-outer { .department-outer {
.percent-100; .percent-100;
overflow: hidden; overflow: hidden;
.tip-box {
position: absolute; .tip-box {
left: 20px; position: absolute;
top: 20px; left: 20px;
z-index: 12; top: 20px;
} z-index: 12;
.zoom-box {
position: absolute;
right: 30px;
bottom: 30px;
z-index: 2;
}
.view-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
cursor: move;
.org-tree-drag-wrapper {
width: 100%;
height: 100%;
} }
.org-tree-wrapper {
display: inline-block; .zoom-box {
position: absolute; position: absolute;
left: 50%; right: 30px;
top: 50%; bottom: 30px;
transition: transform 0.2s ease-out; z-index: 2;
.org-tree-node-label { }
box-shadow: 0px 2px 12px 0px rgba(5, 123, 241, 0.4);
border-radius: 4px; .view-box {
.org-tree-node-label-inner { position: absolute;
padding: 0; top: 0;
.custom-org-node { bottom: 0;
padding: 14px 41px; left: 0;
background: #0672dd; right: 0;
user-select: none; z-index: 1;
word-wrap: none; cursor: move;
white-space: nowrap;
border-radius: 4px; .org-tree-drag-wrapper {
color: #ffffff; width: 100%;
font-size: 14px; height: 100%;
font-weight: 500; }
line-height: 20px;
transition: background 0.1s ease-in; .org-tree-wrapper {
cursor: default; display: inline-block;
&:hover { position: absolute;
background: #4194e7; left: 50%;
transition: background 0.1s ease-in; top: 50%;
} transition: transform 0.2s ease-out;
&.has-children-label {
cursor: pointer; .org-tree-node-label {
} box-shadow: 0px 2px 12px 0px rgba(5, 123, 241, 0.4);
.context-menu { border-radius: 4px;
position: absolute;
right: -10px; .org-tree-node-label-inner {
bottom: 20px; padding: 0;
z-index: 10;
.custom-org-node {
padding: 14px 41px;
background: #0672dd;
user-select: none;
word-wrap: none;
white-space: nowrap;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 20px;
transition: background 0.1s ease-in;
cursor: default;
&:hover {
background: #4194e7;
transition: background 0.1s ease-in;
}
&.has-children-label {
cursor: pointer;
}
.context-menu {
position: absolute;
right: -10px;
bottom: 20px;
z-index: 10;
}
}
}
} }
}
} }
}
} }
}
} }
.info-p { .info-p {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-left: 20px; margin-left: 20px;
span {
font-size: 13px; span {
} font-size: 13px;
}
} }
</style> </style>
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