code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item expand-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
class="org-tree"
|
||||
@opened="drawerOpen"
|
||||
@close="handleTreeDrawerCancel"
|
||||
>
|
||||
<div :class="{'demo-drawer-content': config.attrType === 'SEL_OPTS'}">
|
||||
<template v-if="!isFO">
|
||||
<dept-tree
|
||||
:key="config.attrField"
|
||||
:ref="config.attrField"
|
||||
:all-dept="config.selVal !== 'ORGLIST'"
|
||||
expandAll
|
||||
:show-user="config.selVal === 'USERLIST' || config.selVal === 'ROLELIST'"
|
||||
:check-enable="config.attrType === 'SEL_OPTS'"
|
||||
:deptSelect="config.selVal === 'ORGLIST'"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick">
|
||||
</dept-tree>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<laws-tree
|
||||
v-if="visible"
|
||||
:key="config.attrField"
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodesRole"
|
||||
expandAll
|
||||
:check-enable="config.attrType === 'SEL_OPTS' || checkEnable"
|
||||
:deptSelect="config.selVal === 'ORGLIST'"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:initNotCheck="initNotCheck"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
@treeDblClick="handleTreeDblClick"></laws-tree>
|
||||
</template>
|
||||
</div>
|
||||
<div class="demo-drawer-footer" v-if="config.attrType === 'SEL_OPTS' || checkEnable">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventHub from '@/common/eventHub'
|
||||
|
||||
export default {
|
||||
name: 'OrgTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 是否显示全部部门
|
||||
allDept: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zNodes: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否为多选
|
||||
checkEnable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载时不执行默认选中
|
||||
initNotCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
zNodesRole: [],
|
||||
roleList: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
isFO () {
|
||||
return this.config.attrField === 'FO'
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
this.checkedName = treeNode.userName || treeNode.oldname || treeNode.name
|
||||
this.$emit('input', treeNode.id)
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.$emit('on-dept', treeNode.pOrgId, treeNode.pOrgName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
getShowName (id) {
|
||||
let name = ''
|
||||
this.zNodes.map(item => {
|
||||
if (item.id === id) {
|
||||
name = item.oldname || item.name
|
||||
}
|
||||
})
|
||||
return name
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
if (this.config.selVal === 'USERLIST' || this.config.selVal === 'ROLELIST') {
|
||||
let checkedList = []
|
||||
let checkedNameList = []
|
||||
let deptIdList = []
|
||||
let deptNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
if (!item.isParent) {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.userName || item.oldname || item.name)
|
||||
deptIdList.push(item.pOrgId)
|
||||
deptNameList.push(item.pOrgName)
|
||||
}
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.$emit('on-dept', [...new Set(deptIdList)].join(','), [...new Set(deptNameList)].join(','))
|
||||
} else {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
if (item.oldname) {
|
||||
checkedNameList.push(item.oldname)
|
||||
} else {
|
||||
checkedNameList.push(item.name)
|
||||
}
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
this.zNodesRole = []
|
||||
},
|
||||
// 赋值回显人员和部门
|
||||
drawerOpen () {
|
||||
let checkedArr = this.value ? this.value.split(',') : []
|
||||
if (checkedArr.length > 0) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.config.attrField].checkedNode(checkedArr)
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
if (this.isFO) {
|
||||
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
||||
this.$message.warning('请先选择责任部门')
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getUserByRole(this.dataModel.ZRBM)
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
|
||||
// 获取角色列表
|
||||
selectRoleList () {
|
||||
this.$http.get('sys/role/findAll', {}, {_this: this}, res => {
|
||||
let roleList = res.data
|
||||
let roleOpList = []
|
||||
for (let index = 0; index < roleList.length; index++) {
|
||||
let role = roleList[index]
|
||||
let roleOption = {}
|
||||
roleOption.label = role.name
|
||||
roleOption.value = role.id
|
||||
roleOpList.push(roleOption)
|
||||
}
|
||||
this.roleList = roleOpList
|
||||
}, e => {})
|
||||
},
|
||||
|
||||
// 根据角色名称获取角色id
|
||||
// queryRoleIdByRoleName (roleName) {
|
||||
// let roleId = ''
|
||||
// this.roleList.map(item => {
|
||||
// if (item.label === roleName) {
|
||||
// roleId = item.value
|
||||
// }
|
||||
// })
|
||||
// return roleId
|
||||
// },
|
||||
/**
|
||||
* @author liruohao
|
||||
* @date 2019/4/24
|
||||
* @Description: 获取选中的部门下子子部门
|
||||
*/
|
||||
getDeptChild (orgId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
let treeNodeList = res.data
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.isParent = true
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
resolve(res.data)
|
||||
}
|
||||
}, e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询指定角色的人员组成树结构
|
||||
getUserByRole (orgId) {
|
||||
// this.getDeptChild(orgId).then(treeNodeList => {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true
|
||||
this.$http.get('sys/org/getTreeByRoleAndOrgId2', {
|
||||
orgId,
|
||||
roleHierarchyName: 'FO'
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let treeNodeList = []
|
||||
for (let i in res.data) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
if (!res.data[i].roleName) {
|
||||
obj.icon = 'static/images/dept.png'
|
||||
obj.name = obj.orgName
|
||||
obj.isChecked = true
|
||||
} else {
|
||||
obj.icon = 'static/images/user.png'
|
||||
obj.name = obj.roleName
|
||||
obj.pId = obj.id
|
||||
obj.id = obj.roleId
|
||||
obj.isParent = false
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
this.zNodesRole = treeNodeList
|
||||
}
|
||||
resolve()
|
||||
}, e => {
|
||||
this.loading = false
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
// })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFO (val) {
|
||||
if (val) {
|
||||
this.selectRoleList()
|
||||
}
|
||||
},
|
||||
config: {
|
||||
deep: true,
|
||||
handler () {
|
||||
// this.checkedName = this.config.valueName || this.checkedName
|
||||
// if (this.config.valueName!==""){
|
||||
this.checkedName = this.config.valueName || ''
|
||||
// }
|
||||
}
|
||||
},
|
||||
value (newVal, oldVal) {
|
||||
this.checkedName = newVal !== '' ? this.checkedName : ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
if (this.isFO) {
|
||||
this.selectRoleList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-drawer__body{
|
||||
& > div:first-child{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer__header{
|
||||
&>span:first-child{
|
||||
outline: none!important;
|
||||
}
|
||||
}
|
||||
::v-deep .el-drawer{
|
||||
outline: none!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user