提交 408b2cfe 编写于 作者: sq3536's avatar sq3536

custom

上级 5da97bb5
.sys-role-permission-custom-view{
.sys-permissionmpickup-view{
position: relative;
.tree-right-menu {
.ivu-divider-horizontal {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
margin: 0 auto;
}
.ivu-dropdown-item {
position: relative;
padding-left: 32px;
> i {
position: absolute;
left: 16px;
top: 10px;
}
.ivu-icon-ios-arrow-forward {
left: initial;
right: 4px;
}
}
.ivu-dropdown {
.ivu-select-dropdown {
margin: 0;
}
}
}
.text{
font-weight: 700;color: #303133;font-size: 15px;margin-left:10px;margin-top:20px;
}
.col{
display: inline-block;
width: 400px;
}
.search{
width:200px;margin-left:20px;margin-top:30px;margin-bottom:20px;
}
.save{
margin-top:30px;margin-bottom:20px;margin-left:40px;
}
.roll{
height:calc(100vh - 305px) ;overflow:hidden;overflow-x: hidden;overflow-y: auto;
}
.tre{
margin-left:20px;
}
}
.pickup-view {
>.translate-contant {
flex-grow: 1;
display: flex;
justify-content: flex-end;
height: calc(100% - 64px);
.translate-buttons {
width: 80px;
display: flex;
align-items: center;
text-align: center;
button {
margin-bottom: 5px;
}
}
.left, .right {
width: 300px;
}
.right {
border: 1px solid #e9e9e9;
.mpicker-select {
font-family: helvetica, sans-serif;
font-size: 16px;
text-align: justify;
word-spacing: -3.8pt;
line-height: 1.6;
font-weight: bold;
word-spacing: 10px;
//height: 100%;
overflow: auto;
}
.mpicker-select > div {
padding: 3px 10px;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
font-weight: initial;
cursor: pointer;
min-height: 28px;
border: 1px solid #e9e9e9;
margin: 4px 4px;
transition: all .3s;
}
.mpicker-select > div:hover {
background: #ecf6fd;
}
.mpicker-select > .select{
color: #108ee9;
background: #ecf6fd;
}
}
.center{
width: calc(100% - 380px);
.pickupviewpanel {
width: 100%;
//height: 100%;
}
}
}
}
// this is less
<template>
<div class="design-tree-container">
<context-menu-container>
<el-tree
class="tre"
:data="this.TreeData"
ref="DeptTree"
:show-checkbox="false"
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.defaultExpandedKeys"
:props="this.defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
</context-menu-container>
</div>
</template>
<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import DeptTreeBase from './dept-tree-treeview-base.vue';
import {Component, Vue} from 'vue-property-decorator';
@Component({
components: {}
})
export default class DeptTree extends Vue {
/*树数据*/
public TreeData: any = [];
/*树显示说明:子树为节点对象的children,节点标签为节点对象的label*/
public defaultProps: any = {
children: 'children',
label: 'label'
}
/*默认展开节点*/
public defaultExpandedKeys: any = [];
/*当前登录人信息*/
public curUserContext: any = {};
/**
* vue 创建
*/
public created() {
var _this: any = this;
// 获取当前登录人信息
if (_this && _this.$attrs && _this.$attrs.context) {
_this.curUserContext = _this.$attrs.context;
}
}
/**
* vue 挂载
*/
public mounted() {
this.initTree();
}
/**
* 初始化树
*/
private initTree() {
const _this = this;
// 获取当前登录人所处组织的部门及下级组织的部门
var url;
if (_this.curUserContext && _this.curUserContext.srforgid) {
url = 'ibzorganizations/' + _this.curUserContext.srforgid + '/suborg/ibzdepartments/picker';
} else {
// 获取所有组织的部门及下级组织的部门
url = 'ibzorganizations/alls/suborg/ibzdepartments/picker';
}
this.$http.get(url).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({title: '错误', desc: response.message});
return;
} else {
// 给树赋值,数据结构在后台已经按照eltree格式化
_this.TreeData = response.data;
if (response.data && response.data.length > 0) {
// 设置默认选中第一个节点,即高亮显示
this.$nextTick(function(){
let deptTree:any = this.$refs.DeptTree;
deptTree.setCurrentKey(response.data[0].id);
})
// 默认加载第一个节点的右侧视图,调用选中数据变更事件
_this.selectionChange(response.data[0]);
}
}
}).catch((e) => {
console.log(e);
});
}
/**
* 处理点击节点
*/
protected handleNodeClick() {
// 获取当前树
const DeptTree: any = this.$refs.DeptTree;
// 获取点击状态的节点
let node = DeptTree.getCurrentNode();
// console.log("选中的node:" + JSON.stringify(node));
// if (node.isLeaf && node.isLeaf == true)
// 选中数据变更事件
this.selectionChange(node);
}
@Component({
components: {
/**
* 选中数据变更事件
*
* @public
* @param {*} node 节点对应node对象
* @memberof OrgTree
*/
public selectionChange(node: any) {
// 获取右侧视图渲染数据需要的参数
let temp = JSON.parse(JSON.stringify(node));
let srfappctx: any = {};
if (node.disabled == true) {// 单位
temp.id = "Dept;" + node.id;
temp.srfparentdename = "IBZOrganization";
temp.ibzorganization = node.id;
srfappctx.ibzorganization = temp.ibzorganization;
}else {// 部门
temp.id = "Dept;" + node.id;
temp.srfparentdename = "IBZDepartment";
temp.ibzdepartment = node.id;
srfappctx.ibzdepartment = temp.ibzdepartment;
}
temp.srfparentkey = node.id;
temp.navparams = "{}";
srfappctx.srfparentkey = temp.srfparentkey;
srfappctx.srfparentdename = temp.srfparentdename;
temp.srfappctx = srfappctx;
// 抛出参数
let selectiondata: any = [temp];
this.$emit('selectionchange', selectiondata);
}
})
export default class DeptTree extends DeptTreeBase {
}
}
</script>
<style lang='less'>
@import './dept-tree-treeview.less';
</style>
\ No newline at end of file
<template>
<div class="design-tree-container">
<context-menu-container>
<el-tree
class="tre"
:data="this.TreeData"
ref="OrgTree"
:show-checkbox="false"
node-key="id"
:default-expand-all="false"
highlight-current
:default-expanded-keys="this.defaultExpandedKeys"
:props="this.defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
</context-menu-container>
</div>
</template>
<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import OrgTreeBase from './org-tree-treeview-base.vue';
import {Component, Vue} from 'vue-property-decorator';
@Component({
components: {}
})
export default class OrgTree extends Vue {
/*树数据*/
public TreeData: any = [];
/*树显示说明:子树为节点对象的children,节点标签为节点对象的label*/
public defaultProps: any = {
children: 'children',
label: 'label'
}
/*默认展开节点*/
public defaultExpandedKeys: any = [];
@Component({
components: {
/*当前登录人信息*/
public curUserContext: any = {};
/**
* vue 创建
*/
public created() {
var _this: any = this;
// 获取当前登录人信息
if (_this && _this.$attrs && _this.$attrs.context) {
_this.curUserContext = _this.$attrs.context;
}
}
/**
* vue 挂载
*/
public mounted() {
this.initTree();
}
})
export default class OrgTree extends OrgTreeBase {
}
/**
* 初始化树
*/
private initTree() {
const _this = this;
// 获取当前登录人所处组织及其下级组织
var url;
if (_this.curUserContext && _this.curUserContext.srforgid) {
url = 'ibzorganizations/' + _this.curUserContext.srforgid + '/suborg/picker';
} else {
// 获取所有组织及其下级组织
url = 'ibzorganizations/picker';
}
this.$http.get(url).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({title: '错误', desc: response.message});
return;
} else {
// 给树赋值,数据结构在后台已经按照eltree格式化
_this.TreeData = response.data;
if (response.data && response.data.length > 0) {
// 设置默认选中第一个节点,即高亮显示
this.$nextTick(function(){
let orgTree:any = this.$refs.OrgTree;
orgTree.setCurrentKey(response.data[0].id);
})
// 默认加载第一个节点的右侧视图,调用选中数据变更事件
_this.selectionChange(response.data[0]);
}
}
}).catch((e) => {
console.log(e);
});
}
/**
* 处理点击节点
*/
protected handleNodeClick() {
// 获取当前树
const OrgTree: any = this.$refs.OrgTree;
// 获取点击状态的节点
let node = OrgTree.getCurrentNode();
// console.log("选中的node:" + JSON.stringify(node));
// if (node.isLeaf && node.isLeaf == true)
// 选中数据变更事件
this.selectionChange(node);
}
/**
* 选中数据变更事件
*
* @public
* @param {*} node 节点对应node对象
* @memberof OrgTree
*/
public selectionChange(node: any) {
// 获取右侧视图渲染数据需要的参数
let temp = JSON.parse(JSON.stringify(node));
temp.id = "Org;" + node.id;
temp.srfparentdename = "IBZOrganization";
temp.srfparentkey = node.id;
temp.navparams = "{}";
temp.ibzorganization = node.id;
let srfappctx: any = {};
srfappctx.srfparentkey = temp.srfparentkey;
srfappctx.srfparentdename = temp.srfparentdename;
srfappctx.ibzorganization = temp.ibzorganization;
temp.srfappctx = srfappctx;
// 抛出参数
let selectiondata: any = [temp];
this.$emit('selectionchange', selectiondata);
}
}
</script>
<style lang='less'>
@import './org-tree-treeview.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册