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>
<div class="treeTbale">
<div class="treeTbale">
<div class="table-tools">
<div class="table-search">
<slot name="easySearch"></slot>
</div>
<div class="btns">
<slot name="buttons"></slot>
<!-- <Button @click="config=!config">
<div class="table-search">
<slot name="easySearch"></slot>
</div>
<div class="btns">
<slot name="buttons"></slot>
<!-- <Button @click="config=!config">
<Icon type="md-build" class="table-set" size="14" title="列设置" />
</Button>-->
</div>
</div>
</div>
<table>
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选
</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'}"
@click.native="handleSort(index, 'asc')"
/>
<Icon
type="arrow-down-b"
:class="{on: column._sortType === 'desc'}"
@click.native="handleSort(index, 'desc')"
/>
</span>
</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>
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index" v-if="column.hide!=true">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选
</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'}" @click.native="handleSort(index, 'asc')" />
<Icon type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" />
</span>
</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
v-if="column.type === 'selection'"
type="checkbox"
......@@ -54,606 +40,592 @@
@click="handleCheckClick(item,$event,index)"
/>
</label>-->
<!-- 图标 -->
<div v-if="column.type === 'icon'">
<i
class="icon-set"
size="small"
@click="RowClick(item,$event,index,action.text)"
v-for="action in (column.actions)"
:key="action.text"
>
<Icon :type="action.type" :title="action.text" :style="action.style" />
</i>
</div>
<div v-if="column.type === 'icons'">
<Icon :type="item[column.key]" size="20" />
</div>
<state v-if="column.code" :code="column.code" :value="item[column.key]" />
<!-- 操作 -->
<div v-if="column.type === 'action'" class="action" style="text-align:left;">
<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>
</div>
<!-- 类型 -->
<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>
<!-- 状态 -->
<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>
<!-- 图标 -->
<div v-if="column.type === 'icon'">
<i class="icon-set" size="small" @click="RowClick(item,$event,index,action.text)" v-for="action in (column.actions)" :key="action.text">
<Icon :type="action.type" :title="action.text" :style="action.style" />
</i>
</div>
<div v-if="column.type === 'icons'">
<Icon :type="item[column.key]" size="20" />
</div>
<state v-if="column.code" :code="column.code" :value="item[column.key]" />
<!-- 操作 -->
<div v-if="column.type === 'action'" class="action" style="text-align:left;">
<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>
</div>
<!-- 类型 -->
<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>
<!-- 状态 -->
<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>
</span>
{{renderBody(item,column) }}
</label>
<table-expand
v-if="column.render&&!column.type"
:row="item"
:column="column"
:index="snum"
:render="column.render"
></table-expand>
</td>
</tr>
</tbody>
<i v-else class="ms-tree-space"></i>
</span>
{{renderBody(item,column) }}
</label>
<table-expand v-if="column.render&&!column.type" :row="item" :column="column" :index="snum" :render="column.render"></table-expand>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import TableExpand from './expand'
export default {
name: 'treeGrid',
components: { TableExpand },
props: {
columns: Array,
items: {
type: Array,
default() {
return []
}
name: 'treeGrid',
components: {
TableExpand
},
iconName: false
},
data() {
return {
color: '#19be6b',
initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组
checks: 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)
}
props: {
columns: Array,
items: {
type: Array,
default () {
return []
}
},
iconName: false
},
items() {
if (this.items) {
this.initItems = []
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null)
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
data() {
return {
color: '#19be6b',
initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组
checks: false, // 全选
screenWidth: document.body.clientWidth, // 自适应宽
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0 // 树形数据长度
}
}
},
columns: {
handler() {
this.cloneColumns = this.makeColumns()
},
deep: true
},
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
computed: {
tableWidth() {
return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ?
`${this.screenWidth}px` :
'100%'
}
}
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)
},
//修改颜色
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])
}
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.timer = false
}, 400)
}
},
items() {
if (this.items) {
this.initItems = []
this.dataLength = this.Length(this.items)
this.initData(this.deepCopy(this.items), 1, null)
this.checkGroup = this.renderCheck(this.items)
if (this.checkGroup.length == this.dataLength) {
this.checks = true
} else {
this.checks = false
}
}
},
columns: {
handler() {
this.cloneColumns = this.makeColumns()
},
deep: true
},
checkGroup(data) {
this.checkAllGroupChange(data)
}
}
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) {
// this.initItems = []
let spaceHtml = ''
for (let i = 1; i < level; i++) {
spaceHtml +=
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
})
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
}
}
item = Object.assign({}, item, {
load: !!item.expanded
// 绑定onresize事件 监听屏幕变化设置宽
this.$nextTick(() => {
this.screenWidth = document.body.clientWidth
})
this.initItems.push(item)
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item)
}
items.splice(index, 1, item)
})
window.onresize = () =>
(() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
})()
},
// 隐藏显示
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)
} else {
item.load = true
item.children.forEach((child, childIndex) => {
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)
this.$set(
this.initItems[index + childIndex + 1],
'spaceHtml',
spaceHtml
)
this.$set(this.initItems[index + childIndex + 1], 'isShow', true)
this.$set(
this.initItems[index + childIndex + 1],
'expanded',
false
)
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`
}
if (column.hide == true) {
style['display'] = `none`
}
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)
},
//修改颜色
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
})
}
}
}
},
open(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = true
if (child.children && child.expanded) {
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)
return columns
},
// 数据处理 增加自定义属性监听
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>"
}
for (let j = 0; j < arr.length; j++) {
if (this.checkGroup[i] == arr[j].id) {
this.checkGroup.splice(i, 1)
}
items.forEach((item, index) => {
item = Object.assign({}, item, {
parent,
level,
spaceHtml
})
if (typeof item.expanded === 'undefined') {
item = Object.assign({}, item, {
expanded: true
})
}
if (typeof item.show === 'undefined') {
item = Object.assign({}, item, {
isShow: true
})
}
if (typeof item.isChecked === 'undefined') {
item = Object.assign({}, item, {
isChecked: false
})
}
item = Object.assign({}, item, {
load: !!item.expanded
})
this.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>"
}
}
}
}
},
// 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 || '#'
},
if (item.children) {
if (item.expanded) {
item.expanded = !item.expanded
this.close(index, item)
} else {
item.expanded = !item.expanded
if (item.load) {
this.open(index, item)
} else {
item.load = true
item.children.forEach((child, childIndex) => {
this.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)
this.$set(
this.initItems[index + childIndex + 1],
'spaceHtml',
spaceHtml
)
this.$set(this.initItems[index + childIndex + 1], 'isShow', true)
this.$set(
this.initItems[index + childIndex + 1],
'expanded',
false
)
})
}
}
}
},
open(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = true
if (child.children && child.expanded) {
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++) {
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) {
return row[column.key]
},
// 默认选中
renderCheck(data) {
let arr = []
data.forEach((item) => {
if (item._checked) {
arr.push(item.id)
}
if (item.children && item.children.length > 0) {
arr = arr.concat(this.renderCheck(item.children))
}
})
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])
// 返回内容
renderBody(row, column, index) {
return row[column.key]
},
// 默认选中
renderCheck(data) {
let arr = []
data.forEach((item) => {
if (item._checked) {
arr.push(item.id)
}
if (item.children && item.children.length > 0) {
arr = arr.concat(this.renderCheck(item.children))
}
})
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)]
}
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
}
},
beforeDestroy() {
window.onresize = null
}
}
</script>
<style lang="less">
.treeTbale {
overflow: 0 auto;
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;
}
overflow: 0 auto;
width: 100% !important;
.icon-set .ivu-icon {
cursor: pointer;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
th {
background: #f8f8f9;
.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;
}
}
td,
th {
border: #dcdee2 solid 1px;
line-height: 40px;
padding: 0 5px;
.icon-set {
font-size: 17px;
margin-left: 5px;
display: inline-block;
}
tr.treetr:hover td {
background: #f7f7f7;
.icon-set .ivu-icon {
cursor: pointer;
}
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
table {
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
th {
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>
i18n/locale/zh-CN.js
View file @ 6df392a6
......@@ -428,6 +428,10 @@ export default {
cityName: '省市县',
creationTime: '创建时间',
upMent: '上级部门',
code:'部门编号',
location:'省市县',
parent_Id:'上级部门',
property:'属性',
},
instance: {
id: '主键',
......
libs/henq.js
View file @ 6df392a6
......@@ -139,6 +139,42 @@ henq.treeToList = (tree) => {
treeToList(tree, null)
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
henq.outPdf = (ele, fileName) => {
// document.head.innerHTML =
......
package-lock.json
View file @ 6df392a6
......@@ -4783,7 +4783,7 @@
"dependencies": {
"commander": {
"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="
}
}
......@@ -5340,7 +5340,7 @@
},
"crc-32": {
"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=",
"requires": {
"exit-on-epipe": "~1.0.1",
......@@ -7127,7 +7127,7 @@
},
"exit-on-epipe": {
"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="
},
"expand-brackets": {
......@@ -7814,7 +7814,7 @@
},
"frac": {
"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="
},
"fragment-cache": {
......@@ -14419,7 +14419,7 @@
},
"printj": {
"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="
},
"private": {
......@@ -15893,7 +15893,7 @@
},
"script-loader": {
"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=",
"dev": true,
"requires": {
......@@ -16473,7 +16473,7 @@
},
"ssf": {
"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=",
"requires": {
"frac": "~1.1.2"
......@@ -20196,7 +20196,7 @@
},
"wmf": {
"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="
},
"word-wrap": {
......@@ -20315,7 +20315,7 @@
},
"xlsx": {
"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=",
"requires": {
"adler-32": "~1.2.0",
......@@ -20330,7 +20330,7 @@
"dependencies": {
"commander": {
"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="
}
}
......
pages/basicData/department/index.vue
View file @ 6df392a6
<template>
<div id="department">
<div id="department">
<div class="tr">
<Button type="primary" @click="add()" class="mb10">新增部门</Button>
<Button>导入</Button>
<Button @click="export2Excel">导出</Button>
<RadioGroup v-model="img" type="button" size="small">
<Radio :label="1"><Icon type="ios-apps" /></Radio>
<Radio :label="0"><Icon type="md-git-merge" /></Radio>
<Radio :label="1">
<Icon type="ios-apps" />
</Radio>
<Radio :label="0">
<Icon type="md-git-merge" />
</Radio>
</RadioGroup>
<Cascader :data="citys" v-show="false"></Cascader>
</div>
<div class="main">
<TreeGrid v-if="img==1" :columns="columns" :items="treeData"></TreeGrid>
<Org v-else :data="treeData" @nodeChange="nodeChange"/>
<TreeGrid v-if="img==1" :columns="columns" :items="treeData"></TreeGrid>
<Org v-else :datas="treeData" @nodeChange="nodeChange" />
</div>
<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 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 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>
</div>
</div>
</template>
<script>
import Api from "./api";
import Add from "./add";
import AddRow from "./Addrow";
import Edit from "./edit";
import Org from "./org";
import citys from "@/libs/citys";
export default {
name: "list",
components: {
Add,
Edit,
AddRow,
Org
},
data() {
return {
searchValue: "", //搜索库位名称
img: 0,
modal: {
title: "",
width: 1000,
show: false,
items: {
add: false,
edit: false,
detail: false
},
id: -1,
data: {}
},
treeData: [],
addModal: false,
editModal: false,
addrowModal: false,
deletelModal: false,
rowdata: null,
aId: 0,
rowData: null,
columns: [
{
key: "name",
title: this.l("name"),
align: "left",
high: true
},
// {
// key: 'organizationType',
// title: this.l('organizationType'),
// 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",
name: "list",
components: {
Add,
Edit,
AddRow,
Org
},
data() {
return {
searchValue: "", //搜索库位名称
img: 0,
modal: {
title: "",
width: 1000,
show: false,
items: {
add: false,
edit: false,
detail: false
},
id: -1,
data: {}
},
treeData: [],
addModal: false,
editModal: false,
addrowModal: false,
deletelModal: false,
rowdata: null,
aId: 0,
rowData: null,
columns: [{
key: "parent_Id",
title: this.l("parent_Id"),
align: "left",
hide: true,
parentDepart: true,
import: true,
render: (h, params) => {
return h("span", {},
this.getParentDepart(params.row.parent_Id)
)
}
},
{
attrs: { oprate: "add" },
on: { click: () => this.addrow(params.row) }
key: "name",
title: this.l("name"),
align: "left",
},
"新增"
),
h(
"op",
{
attrs: { oprate: "edit" },
on: { click: () => this.edit(params.row) }
key: "code",
title: this.l("code"),
align: "left",
},
"编辑"
),
h(
"op",
{
attrs: { oprate: "delete" },
on: { click: () => this.remove(params.row.id) }
key: "location",
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))
}
},
"删除"
)
];
return h("div", { class: "action" }, actions);
}
}
]
};
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
mounted() {
this.init();
},
methods: {
init() {
Api.getpaged().then(r => {
this.treeData = [];
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("删除失败!");
}
});
{
key: "property",
title: this.l("property"),
align: "left",
code: "department.property",
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
},
{
title: "操作",
key: "action",
align: "left",
render: (h, params) => {
let actions = [
h(
"op", {
attrs: {
oprate: "add"
},
on: {
click: () => this.addrow(params.row)
}
},
"新增"
),
h(
"op", {
attrs: {
oprate: "edit"
},
on: {
click: () => this.edit(params.row)
}
},
"编辑"
),
h(
"op", {
attrs: {
oprate: "delete"
},
on: {
click: () => this.remove(params.row.id)
}
},
"删除"
)
];
return h("div", {
class: "action"
}, actions);
}
}
],
treeList: [],
citys: citys(),
cityDatas: [], //省市县在一起
};
},
removeCancel() {
this.deletelModal = false;
async fetch({
store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
cancel() {
this.addModal = false;
this.addrowModal = false;
this.editModal = false;
this.deletedlModal = false;
mounted() {
this.init();
this.formatCity();
},
l(key) {
let vkey = "DipartLocation" + "." + key;
return this.$t(vkey) || key;
methods: {
init() {
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>
<style lang="less">
#department{
height: calc(100vh - 150px);
overflow: auto;
.tr{
line-height: 50px;
}
.main{
height: 100%;
}
#department {
height: calc(100vh - 150px);
overflow: auto;
.tr {
line-height: 50px;
}
.main {
height: 100%;
}
}
</style>
\ No newline at end of file
</style>
pages/basicData/department/org.vue
View file @ 6df392a6
<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="zoom-box">
<zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
</div>
<div class="view-box">
<org-view :data="rootData" :zoom-handled="zoomHandled" @on-menu-click="handleMenuClick"></org-view>
</div>
<div class="zoom-box">
<zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
</div>
<div class="view-box">
<org-view :data="rootData" :zoom-handled="zoomHandled" @on-menu-click="handleMenuClick"></org-view>
</div>
</div>
</Card>
</Card>
</template>
<script>
import OrgView from "@/components/department/org-view.vue";
import ZoomController from "@/components/department/zoom-controller.vue";
const menuDic = {
edit: "编辑部门",
detail: "查看部门",
new: "新增子部门",
delete: "删除部门"
edit: "编辑部门",
detail: "查看部门",
new: "新增子部门",
delete: "删除部门"
};
export default {
name: "org_tree_page",
components: {
OrgView,
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;
name: "org_tree_page",
components: {
OrgView,
ZoomController
},
rootData() {
console.warn(this.data);
var root = {
id: 0,
label: "根节点",
children: this.data
};
return root;
}
},
methods: {
setDepartmentData(data) {
data.isRoot = true;
return data;
props: {
datas: {
type: Array,
default: () => {
return [];
}
}
},
handleMenuClick({ data, key }) {
this.$emit("nodeChange",key,data)
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() {
console.warn(this.data);
}
},
mounted() {
console.warn(this.datas);
}
};
</script>
<style lang="less">
.tools {
position: absolute;
z-index: 66;
right: 10px;
position: absolute;
z-index: 66;
right: 10px;
}
.percent-100 {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.department-outer {
.percent-100;
overflow: hidden;
.tip-box {
position: absolute;
left: 20px;
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%;
.percent-100;
overflow: hidden;
.tip-box {
position: absolute;
left: 20px;
top: 20px;
z-index: 12;
}
.org-tree-wrapper {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transition: transform 0.2s ease-out;
.org-tree-node-label {
box-shadow: 0px 2px 12px 0px rgba(5, 123, 241, 0.4);
border-radius: 4px;
.org-tree-node-label-inner {
padding: 0;
.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;
.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;
position: absolute;
left: 50%;
top: 50%;
transition: transform 0.2s ease-out;
.org-tree-node-label {
box-shadow: 0px 2px 12px 0px rgba(5, 123, 241, 0.4);
border-radius: 4px;
.org-tree-node-label-inner {
padding: 0;
.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 {
height: 40px;
line-height: 40px;
margin-left: 20px;
span {
font-size: 13px;
}
height: 40px;
line-height: 40px;
margin-left: 20px;
span {
font-size: 13px;
}
}
</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