Commit ad03805a authored by jingnan's avatar jingnan 👀

合并【10500,10494,10499】重构组织选择组件(orgLazyLoadSelect)

parent 685ca48d
/**
* @Description:
* @author cxg
* @date 2022/12/21
*/
<template>
<div class="IndependentList-com">
<div v-for="(item,index) in orgList" :key="index" class="IndependentList-item dee-row-item" @click="selectFun(item)">
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,item):item.name }}
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import http from '@/utils/http'
export default {
components: {},
props: {
selectScope: {
type: String,
default: 'all'
},
labelTemplate: {
type: String,
default: ''
},
specifiedOrg: {
type: Array,
default: () => []
}
},
data() {
return {
orgList: []
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.loadMoreNode()
},
methods: {
selectFun(data) {
this.$emit('nodeClick', { data })
},
loadMoreNode() {
if (this.selectScope === 'currentUser') {
http.get('/DxOrganization/getUserOrganizations?userId=' + this.userInfo.id).then(res => {
this.orgList = res.items
})
} else if (this.selectScope === 'specified') {
this.pageFrom = 1
this.isLoadMore = true
const params = {
'searchItems': {
'items': [
{
'fieldName': 'id',
'operator': 'IN',
'value': this.specifiedOrg
},
{
'fieldName': 'independentManageFlag',
'operator': 'EQ',
'value': true
}
]
}
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
this.orgList = res.items.content
})
} else {
this.pageFrom = 1
this.isLoadMore = true
const params = {
'searchItems': {
'items': [
{
'fieldName': 'independentManageFlag',
'operator': 'EQ',
'value': true
}
]
}
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
this.orgList = res.items.content
})
}
}
}
}
</script>
<style lang='scss'>
.IndependentList-com{
padding: 4px;
height: 400px;
overflow: auto;
.IndependentList-item{
cursor: pointer;
padding:8px;
margin: 8px 0;
border:1px solid #EBEEF5;
}
}
</style>
<template>
<div class="IndependentOrgTreeCmp">
<el-input v-model="orgName" class="tree-input" placeholder="请输入组织名称" @keyup.enter.native="onQuery">
<el-button slot="append" icon="el-icon-search" class="search-btn" @click.stop="onQuery" />
</el-input>
<div class="tree-wrap">
<el-tree
ref="tree"
node-key="id"
show-checkbox
:data="treeData"
:highlight-current="true"
:check-on-click-node="true"
:check-strictly="true"
@check="onCheck"
>
<span slot-scope="{ data }" class="custom-tree-node">
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,data) : data.fullPath }}
</span>
</el-tree>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import http from '@/utils/http'
export default {
name: 'IndependentOrgTree',
props: {
selectScope: {
type: String,
default: 'all'
},
labelTemplate: {
type: String,
default: ''
},
specifiedOrg: {
type: Array,
default: () => []
},
// 多选
isMulti: {
type: Boolean,
default: false
},
// 选中的数据
checkedData: {
type: Array,
default: () => []
}
},
data() {
return {
orgName: '',
orgNameCopy: '',
treeData: [],
checkedKeys: [1]
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.loadTreeData()
},
methods: {
loadTreeData() {
let handler = null
if (this.selectScope === 'currentUser') {
handler = http.get('/DxOrganization/getUserOrganizations?userId=' + this.userInfo.id)
.then(res => res.items)
} else if (this.selectScope === 'specified') {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'id',
'operator': 'IN',
'value': this.specifiedOrg
},
{
'fieldName': 'independentManageFlag',
'operator': 'EQ',
'value': true
}
]
}
}
if (this.orgNameCopy) {
params.searchItems.items.push({
'fieldName': 'name',
'operator': 'LIKE',
'value': this.orgNameCopy
})
}
handler = this.$api.searchApi('DxOrganization', params)
.then(res => res.items.content)
} else {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'independentManageFlag',
'operator': 'EQ',
'value': true
}
]
}
}
if (this.orgNameCopy) {
params.searchItems.items.push({
'fieldName': 'name',
'operator': 'LIKE',
'value': this.orgNameCopy
})
}
handler = this.$api.searchApi('DxOrganization', params)
.then(res => res.items.content)
}
handler.then(items => {
this.treeData = this.setNodeFullPath(items)
this.setCheckedData()
})
},
onQuery() {
const orgName = (this.orgName || '').trim()
if (this.orgNameCopy !== orgName) {
this.orgNameCopy = orgName
this.loadTreeData()
}
},
onCheck(data, checked) {
clearTimeout(this.onCheck.timmer)
const treeRef = this.$refs.tree
if (checked) {
if (!this.isMulti) {
treeRef.getCheckedKeys().forEach(id => {
if (id !== data.id) {
treeRef.setChecked(id, false)
}
})
}
}
this.onCheck.timmer = setTimeout(() => {
this.updateCheckedData()
}, 200)
},
updateCheckedData() {
const checkedData = this.$refs.tree.getCheckedNodes()
this.$emit('checked', checkedData)
},
// 取消勾选方法
uncheck(items) {
items.forEach(item => {
this.$refs.tree.setChecked(item.id, false)
})
this.$nextTick(() => {
this.updateCheckedData()
})
},
// 设置节点全路径
setNodeFullPath(children, parent) {
let parentPath = this.$utils._get(parent, 'fullPath') || ''
if (parentPath) {
parentPath += '/'
}
children.forEach(data => {
data.fullPath = parentPath + (data.name || '')
})
return children
},
// 回显已勾选数据
setCheckedData() {
if (!(Array.isArray(this.checkedData) && this.checkedData.length > 0)) return
this.$nextTick(() => {
const treeRef = this.$refs.tree
const keys = treeRef.getCheckedKeys()
const ids = this.checkedData.map(m => m.id).filter(m => !keys.includes(m))
if (ids.length > 0) {
ids.forEach(id => treeRef.setChecked(id, true))
}
})
}
}
}
</script>
<style lang="scss">
.IndependentOrgTreeCmp {
height: 100%;
.tree-input {
margin: 5px;
width: calc(100% - 5px);
.search-btn {
padding-left: 0;
padding-right: 0;
width: 50px;
}
}
.tree-wrap {
height: calc(100% - 42px);
overflow-y: auto;
}
}
</style>
......@@ -125,7 +125,7 @@ export default {
component: {
obscure: `!this.form.component.isMulti`,
name: 'el-select',
defaultValue: 'object',
defaultValue: 'String',
options: [
{
'label': '数组', 'value': 'Array'
......@@ -150,20 +150,6 @@ export default {
}
]
}
],
data() {
return {
// secretOptions: []
}
},
created() {
},
mounted() {},
computed: {
},
methods: {
}
]
}
export default {
props: {
value: {
type: [String, Number, Object, Array],
default: null
},
bindType: {
type: [String, Number, Object],
default: ''
},
isActiveUserDefaultValue: {
type: Boolean,
default: false
},
isActiveUserIndependentDefaultValue: {
type: Boolean,
default: false
},
valueType: {
type: String,
default: 'String'
},
initBindKey: {
type: String,
default: 'id'
},
labelTemplate: {
type: String,
default: ''
},
selectOrgType: {
type: String,
default: 'normal'
},
selectScope: {
type: String,
default: 'all'
},
specifiedOrg: {
type: Array,
default: () => []
},
isMulti: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
item: {
type: Object,
default: () => { return {} }
},
// 返回一个对象
returnObj: {
type: Boolean,
default: true
},
parentId: {
type: [Number, String],
default: ''
}
}
}
<template>
<dee-up-table
:data="data"
:columns="columns"
:index-row="indexRow"
>
<div slot="header" class="tools-wrap">
<span class="counts">已选组织:{{ data.length }}</span>
<dee-tools :tools="tools" mode="normal" />
</div>
</dee-up-table>
</template>
<script>
export default {
name: 'SelectedOrgTable',
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {}
},
computed: {
indexRow() {
return {
title: '序号',
align: 'center',
width: '70'
}
},
columns() {
return [
{
title: '操作',
key: 'operate',
hideTip: true,
minWidth: '50',
align: 'center',
component: {
show: true,
name: 'EditTableRow',
props: {
btns: [
{
operation: '删除',
icon: '/icons/c-creatbackups.png',
handleClick: (row, index) => {
this.remove([row])
}
}
]
}
}
},
{ title: '组织', key: 'name', align: 'left' },
{ title: '组织全路径', key: 'fullPath', align: 'left' }
]
},
tools() {
return [
{
name: '一键清空',
icon: '/icons/c-remove.png',
handler: {
click: () => {
this.remove(this.data)
}
}
}
]
}
},
methods: {
remove(items) {
if (Array.isArray(items) && items.length > 0) {
this.$emit('uncheck', items)
}
}
}
}
</script>
<style lang="scss">
.tools-wrap {
display: flex;
align-items: center;
.counts {
margin-right: 20px;
}
}
</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