Skip to content

T
TF-MOM-WEB
Commit ad03805a authored by jingnan's avatar jingnan 👀
Browse files
Options

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

parent 685ca48d
Hide whitespace changes
Inline Side-by-side
Showing with 910 additions and 454 deletions
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/IndependentList.vue deleted 100644 → 0
View file @ 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>
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/IndependentOrgTree.vue 0 → 100644
View file @ ad03805a
<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>
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/OrgSelectTree.vue → applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/OrgTree.vue
View file @ ad03805a
/**
* @Description:
* @author cxg
* @date 2022/12/21
*/
<template>
<div class="OrgSelectTree-com">
<el-tree
ref="tree"
:node-key="'id'"
:lazy="true"
:load="loadTreeData"
:expand-on-click-node="false"
:default-expand-all="false"
:highlight-current="true"
@node-click="nodeClick"
>
<span slot-scope="{ data }" class="custom-tree-node">
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,data) : data.name }}
</span>
</el-tree>
<!-- 分页加载 -->
<div v-show="isLoadMore" class="load-more">
<span @click="loadMoreNode">加载更多</span>
<div class="OrgTreeCmp">
<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
:lazy="true"
:load="loadTreeData"
:expand-on-click-node="false"
: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 v-show="isLoadMore" class="load-more">
<span @click="loadMore">加载更多</span>
</div>
</div>
</div>
</template>
......@@ -29,91 +31,61 @@
<script>
import { mapGetters } from 'vuex'
import http from '@/utils/http'
export default {
components: {},
name: 'OrgTree',
props: {
labelTemplate: {
type: String,
default: ''
},
selectScope: {
type: String,
default: 'all'
},
labelTemplate: {
type: String,
default: ''
},
specifiedOrg: {
type: Array,
default: () => []
},
parentId: {
type: [Number, String],
default: ''
// 多选
isMulti: {
type: Boolean,
default: false
},
// 选中的数据
checkedData: {
type: Array,
default: () => []
}
},
data() {
return {
isLoadMore: true,
pageFrom: 1
orgName: '',
orgNameCopy: '',
treeData: [],
checkedKeys: [1],
pageFrom: 1,
isLoadMore: false
}
},
computed: {
...mapGetters(['userInfo'])
...mapGetters(['userInfo']),
userLevel() {
let userLevel = null
try {
userLevel = JSON.parse(localStorage.getItem('userLevel'))
} catch (error) {
userLevel = null
}
return userLevel || {}
}
},
mounted() {},
methods: {
nodeClick(data) {
this.$emit('nodeClick', { data })
},
loadMoreNode() {
this.pageFrom++
if (this.selectScope === 'specified') {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'id',
'operator': 'IN',
'value': this.specifiedOrg
}] },
'pageFrom': this.pageFrom,
'pageSize': 20
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
res.items.content.forEach(el => {
this.$refs.tree.append(el, this.$refs.tree.root)
})
})
} else {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'parentId',
'operator': 'EQ',
'value': this.parentId || 1
}]
},
'pageFrom': this.pageFrom,
'pageSize': 20
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
res.items.content.forEach(el => {
this.$refs.tree.append(el, this.$refs.tree.root)
})
})
}
},
loadTreeData(node, resolve) {
//
// 顶层节点
if (node.level === 0) {
if (this.selectScope === 'currentUser') {
if (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '1') {
if (this.userLevel.level === '1') {
http.get('/DxOrganization/findAllIndependentOrg?containsRoot=true&userId=' + this.userInfo.id).then(res => {
const content = res.items
const params = {
......@@ -124,26 +96,28 @@ export default {
'operator': 'EQ',
'value': content[0].id
}
] }
]
}
}
if (this.orgNameCopy) {
params.searchItems.items.push({
'fieldName': 'name',
'operator': 'LIKE',
'value': this.orgNameCopy
})
}
// if (this.selectScope === 'specified' || this.selectScope === 'currentUser') {
// params.searchItems.items.push({
// 'fieldName': 'independentManageFlag',
// 'operator': 'NEQ',
// 'value': true
// })
// }
this.$api.searchApi('DxOrganization', params).then(pres => {
resolve(pres.items.content)
this.setCheckedData()
})
})
} else {
http.get('/DxOrganization/findAllIndependentOrg?userId=' + this.userInfo.id).then(res => {
const content = res.items
resolve(content)
this.setCheckedData()
})
}
this.isLoadMore = false
} else if (this.selectScope === 'specified') {
this.pageFrom = 1
......@@ -159,11 +133,19 @@ export default {
'pageFrom': this.pageFrom,
'pageSize': 20
}
if (this.orgNameCopy) {
params.searchItems.items.push({
'fieldName': 'name',
'operator': 'LIKE',
'value': this.orgNameCopy
})
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
resolve(res.items.content)
this.setCheckedData()
})
} else {
this.pageFrom = 1
......@@ -180,11 +162,19 @@ export default {
'pageFrom': this.pageFrom,
'pageSize': 20
}
if (this.orgNameCopy) {
params.searchItems.items.push({
'fieldName': 'name',
'operator': 'LIKE',
'value': this.orgNameCopy
})
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
resolve(res.items.content)
this.setCheckedData()
})
}
} else {
......@@ -200,26 +190,145 @@ export default {
}
] }
}
// if (this.selectScope === 'specified' || this.selectScope === 'currentUser') {
// params.searchItems.items.push({
// 'fieldName': 'independentManageFlag',
// 'operator': 'NEQ',
// 'value': true
// })
// }
this.$api.searchApi('DxOrganization', params).then(res => {
resolve(res.items.content)
const content = this.setNodeFullPath(res.items.content, node.data)
resolve(content)
this.setCheckedData()
})
}
},
loadMore() {
this.pageFrom++
if (this.selectScope === 'specified') {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'id',
'operator': 'IN',
'value': this.specifiedOrg
}] },
'pageFrom': this.pageFrom,
'pageSize': 20
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
res.items.content.forEach(el => {
this.$refs.tree.append(el, this.$refs.tree.root)
})
this.setCheckedData()
})
} else {
const params = {
'searchItems': {
'items': [
{
'fieldName': 'parentId',
'operator': 'EQ',
'value': this.parentId || 1
}]
},
'pageFrom': this.pageFrom,
'pageSize': 20
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (res.items.last) {
this.isLoadMore = false
}
res.items.content.forEach(el => {
this.$refs.tree.append(el, this.$refs.tree.root)
})
this.setCheckedData()
})
}
},
onQuery() {
const orgName = (this.orgName || '').trim()
if (this.orgNameCopy !== orgName) {
this.orgNameCopy = orgName
// 重置执行懒加载根节点数据
this.$refs.tree.loaded = false
this.$refs.tree.root.expand()
}
},
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'>
.OrgSelectTree-com{
padding: 20px;
text-align: center;
cursor: pointer;
<style lang="scss">
.OrgTreeCmp {
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 - 30px);
overflow-y: auto;
}
.load-more {
line-height: 30px;
text-align: center;
font-size: 12px;
}
}
</style>
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/config.js
View file @ ad03805a
......@@ -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: {
}
]
}
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/index.vue
View file @ ad03805a
<template>
<div class="OrgLazyLoadSelectCmp">
<div class="content-wrap">
<span v-if="!isMulti" class="text">
<!-- <span v-if="nodeData">{{ labelTemplate ? ($utils.attachTemplateDoubleToData(labelTemplate,nodeData) === '根组织' ? '全局' : $utils.attachTemplateDoubleToData(labelTemplate,nodeData)): (nodeData.name === '根组织' ? '全局' : nodeData.name) }}</span>
<span v-show="nodeData && nodeData.name && !disabled" @click="deleteSingleData">
<i class="el-icon-close" />
</span> -->
<el-tag v-show="nodeData && nodeData.name && !disabled" type="info" closable @close="deleteSingleData">
<span v-if="nodeData">{{ labelTemplate ? ($utils.attachTemplateDoubleToData(labelTemplate,nodeData) === '根组织' ? '全局' : $utils.attachTemplateDoubleToData(labelTemplate,nodeData)): (nodeData.name === '根组织' ? '全局' : nodeData.name) }}</span>
</el-tag>
</span>
<span v-else-if="nodeData" class="text text-tag">
<el-tag
v-for="(tag, index) in nodeData"
:key="tag.id"
:closable="!disabled"
:disable-transitions="false"
@close="handleClose(index)"
>
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,tag):tag.name }}
</el-tag>
</span>
<i v-if="!disabled" class="el-icon-edit" @click="openDialog" />
</div>
<!-- 表单展示组件 -->
<el-select
ref="selectIt"
v-model="selectedOrgList"
multiple
value-key="id"
placeholder="请选择组织"
class="el-select-it"
@focus="onFocus"
@remove-tag="onRemoveTag"
@hook:mounted="setIcon"
>
<el-option
v-for="item in selectedOrgList"
:key="item.id"
:label="item.name"
:value="item"
/>
</el-select>
<!-- 弹出框 -->
<dee-dialog :dialog-visible="showDialog" title="选择组织" @handleClose="onClose">
<div class="dialog-body">
已选组织：
<span v-if="isMulti" class="text text-tag">
<el-tag
v-for="(tag, index) in middleNodeData"
:key="tag.id"
closable
:disable-transitions="false"
@close="handleDiaClose(index)"
>
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,tag):tag.name }}
</el-tag>
</span>
<span v-else>
{{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,middleNodeData):middleNodeData.name }}
</span>
<IndependentList
v-if="selectOrgType === 'independent'"
:specified-org="specifiedOrg"
:select-scope="selectScope"
:label-template="labelTemplate"
@nodeClick="onNodeClick"
/>
<OrgSelectTree
v-else
root-base-model-name="DxOrganization"
:specified-org="specifiedOrg"
:select-scope="selectScope"
:label-template="labelTemplate"
:parent-id="parentId"
@nodeClick="onNodeClick"
/>
<dee-dialog title="选择组织" :dialog-visible="showDialog" :destroy-on-close="true" @handleClose="onClose">
<div class="OrgLazyLoadSelectCmp_dialog">
<div class="wrap-left">
<!-- 独立组织树 -->
<IndependentOrgTree
v-if="selectOrgType === 'independent'"
ref="orgTree"
v-bind="$props"
:checked-data="checkedData"
@checked="onChecked"
/>
<!-- 组织树 -->
<OrgTree
v-else
ref="orgTree"
v-bind="$props"
:checked-data="checkedData"
@checked="onChecked"
/></div>
<div class="wrap-right">
<!-- 勾选列表 -->
<SelectedOrgTable
:data="checkedData"
@uncheck="onUncheck"
/>
</div>
</div>
<div slot="footer">
<el-button type="primary" @click="onSave">确 定</el-button>
......@@ -68,158 +56,104 @@
</template>
<script>
import config from './config'
import OrgSelectTree from './OrgSelectTree'
import IndependentList from './IndependentList'
import http from '@/utils/http'
import SelectedOrgTable from './selectedOrgTable'
import IndependentOrgTree from './IndependentOrgTree'
import OrgTree from './OrgTree'
import config from './config'
import props from './props'
export default {
name: 'OrgLazyLoadSelect',
componentName: '弹框组织选择器',
components: { OrgSelectTree, IndependentList },
mixins: [config],
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: ''
}
components: {
SelectedOrgTable,
IndependentOrgTree,
OrgTree
},
mixins: [config, props],
data() {
return {
middleValue: '',
middleNodeData: {},
nodeData: null,
selectedOrgList: [],
showDialog: false,
baseInfo: {
childrenWord: 'children',
expandProps: '[{"name": "target"}]',
formateResponse: 'responseData = res.items',
getDataType: 'default',
isLazyLoading: true,
isPaging: true,
labelWordFun: '// params对象中包含父级节点的node和当前节点的data\nshowLabel=params.data.name',
pageSize: 20,
pid: 'sourceId',
requestParameters: 'requestParameters = {}',
requestURL: 'requestURL=""',
selfId: 'targetId',
treeDataType: 'link'
}
checkedData: []
}
},
computed: {},
watch: {
value: {
immediate: true,
handler(val) {
if (this.middleValue !== val) {
if (this.isMulti) {
if (!val) {
this.nodeData = []
} else {
if (val instanceof Array) {
if (this.bindType === 'key' || !this.returnObj) {
this.getNodeDatByIdS(val.join(','), this.initBindKey)
} else if (val && val.length && typeof (val[0]) === 'string') {
const sds = val.filter(el => {
return el && el !== null
})
this.getNodeDatByIdS(sds.join(','), this.initBindKey)
} else {
this.nodeData = val
}
} else {
this.getNodeDatByIdS(val, this.initBindKey)
}
}
} else if (val) {
if (this.bindType === 'key' || !this.returnObj) {
this.getNodeDatById(val)
} else {
this.nodeData = val
}
} else {
this.nodeData = null
}
const items = this.selectedOrgList
if (Array.isArray(items) && items.length > 0) {
return
}
const ids = this.getIds(val)
this.getNodeDatByIdS(ids, this.initBindKey)
}
}
},
mounted() {
setTimeout(() => {
// 默认选择当前用户所在组织
if (!this.value) {
if (this.isActiveUserDefaultValue) {
this.getOrgByCurrentUserId()
}
if (this.isActiveUserIndependentDefaultValue) {
this.getIndependentOrg()
}
}
}, 1000)
this.loadDefaultOrg()
},
methods: {
// 关闭下拉框
onFocus() {
this.$refs.selectIt.blur()
},
// 修改下拉按钮图标为编辑图标并绑定点击事件
setIcon() {
const that = this
const upIcon = this.$refs.selectIt.$el.querySelector('.el-select__caret.el-icon-arrow-up')
upIcon.style.transform = 'rotate(0)'
upIcon.className = upIcon.className.replace('el-icon-arrow-up', 'el-icon-edit')
upIcon.onclick = function(e) {
e.stopPropagation()
that.showDialog = true
that.checkedData = [...that.selectedOrgList]
}
},
onClose() {
this.showDialog = false
},
onSave() {
this.selectedOrgList = [...this.checkedData]
const val = this.returnVal(this.selectedOrgList)
this.$emit('input', val)
this.onClose()
},
onRemoveTag(removeItems) {
this.onUncheck(removeItems)
},
onChecked(checkedData) {
this.checkedData = checkedData
},
onUncheck(items) {
const rows = Array.isArray(items) ? items : []
this.$refs.orgTree.uncheck(rows)
},
// 加载默认值
loadDefaultOrg() {
setTimeout(() => {
// 默认选择当前用户所在组织
if (!this.value) {
if (this.isActiveUserDefaultValue) {
this.getOrgByCurrentUserId()
}
if (this.isActiveUserIndependentDefaultValue) {
this.getIndependentOrg()
}
}
}, 1000)
},
// 获取当前登陆人所在独立组织
getIndependentOrg() {
http.get('/DxOrganization/getIndependentOrg', { userId: localStorage.getItem('userId') }).then(res => {
const params = {
userId: localStorage.getItem('userId')
}
http.get('/DxOrganization/getIndependentOrg', params).then(res => {
if (res.items) {
this.middleNodeData = this.isMulti ? [res.items] : res.items
this.selectedOrgList = [res.items]
this.checkedData = [res.items]
this.onSave()
}
})
......@@ -251,167 +185,120 @@ export default {
if (items.length > 0) {
const row = items.find(m => !!m.source)
if (row) {
this.middleNodeData = this.isMulti ? [row.source] : row.source
this.selectedOrgList = [row.source]
this.checkedData = [row.source]
this.onSave()
}
}
},
handleClose(index) {
this.nodeData.splice(index, 1)
// 通过id查询组织
getNodeDatByIdS(ids, fieldName = 'id') {
const params = {
searchItems: {
items: [
{
fieldName: fieldName,
operator: 'IN',
value: ids
}
],
operator: 'AND'
}
}
this.$api.searchApi('DxOrganization', params).then(res => {
this.checkedData = res.items.content
this.selectedOrgList = [...this.checkedData]
})
},
handleDiaClose(index) {
this.middleNodeData.splice(index, 1)
/**
* 判断数据是一个非null的对象
* @param {Any} o 要判断类型的数据
*/
isRealObj(o) {
return o && Object.prototype.toString.call(o) === '[object Object]'
},
openDialog() {
if (this.isMulti) {
this.middleNodeData = this.nodeData ? this.$utils._clonedeep(this.nodeData) : []
} else {
this.middleNodeData = {}
}
this.showDialog = true
/**
* 判断一个数据是 null, undefined, NAN, 空字符串 这些类型
* @param {Any} o 要判断类型的数据
*/
isInvalidType(o) {
const type = typeof o
return type === 'undefined' || (type === 'string' && !o.trim().length) || isNaN(o) || (!o && Object.prototype.toString.call(o) === '[object Object]')
},
onNodeClick({ data, treeNode }) {
if (this.showDialog) {
if (this.isMulti) {
const hasData = this.middleNodeData.find(el => {
return el.id === data.id
})
if (!hasData) {
this.middleNodeData.push(data)
}
// 取出绑定数据的id
getIds(val) {
/**
- 多选
- 返回对象数组 [{}] OR []
- 返回基本类型数组 [1,2,3] OR ['1','2','3']
- 返回逗号分隔的字符串 '1,2,3' OR '1'
- 单选
- 返回对象 {} OR null OR undefined
- 返回基本类型 1 OR '1'
*/
let ids = []
const handler = (val, bindKey = 'id') => {
if (this.isInvalidType(val)) {
return []
} else if (this.isRealObj(val)) {
return [this.$utils._get(val, bindKey)]
} else if (typeof val === 'string') {
return val.trim().split(',').filter(v => !!v)
} else {
this.middleNodeData = data
return [val]
}
}
},
getNodeDatByIdS(ids, fieldName = 'id') {
if (ids) {
let idData = []
if (this.$utils.isNumber(ids)) {
idData = [ids]
if (!(!val && val !== 0)) {
if (Array.isArray(val)) {
ids = val.map(handler).flat()
} else {
idData = ids.split(',')
ids = handler(val, this.bindKey)
}
const params = {
searchItems: {
items: [{ fieldName: fieldName, operator: 'IN', value: idData }],
operator: 'AND'
}
}
this.$api.searchApi('DxOrganization', params).then(res => {
if (this.isMulti) {
if (this.bindType === 'key' || !this.returnObj) {
if (this.valueType === 'String') {
this.middleValue = res.items.content.map(el => el.id).join(',')
this.$emit('input', this.middleValue)
} else {
this.middleValue = res.items.content.map(el => el.id)
this.$emit('input', this.middleValue)
}
} else {
this.middleValue = this.$utils._clonedeep(res.items.content)
this.$emit('input', res.items.content)
}
}
this.nodeData = res.items.content
this.$emit('fullOrgInfo', this.nodeData)
})
}
return ids
},
getNodeDatById(id) {
this.$getService('DxOrganization')
.byId(id)
.then(res => {
this.nodeData = res
this.$emit('fullOrgInfo', this.nodeData)
})
},
onClose() {
this.showDialog = false
},
deleteSingleData() {
this.$emit('input', null)
},
onSave() {
this.onClose()
if (this.isMulti) {
if (this.bindType === 'key' || !this.returnObj) {
if (this.valueType === 'String') {
this.middleValue = this.middleNodeData.map(el => el.id).join(',')
this.$emit('input', this.middleValue)
} else {
this.middleValue = this.middleNodeData.map(el => el.id)
this.$emit('input', this.middleValue)
}
// 返回需要的数据格式
returnVal(val) {
val = Array.isArray(val) ? val : []
if (!val.length) return null
const handler = (o) => {
if (this.bindType !== 'object') {
return this.$utils._get(o, this.bindKey || 'id')
} else {
this.middleValue = this.$utils._clonedeep(this.middleNodeData)
this.$emit('input', this.middleValue)
return o
}
} else {
if (this.bindType === 'key' || !this.returnObj) {
this.$emit('input', this.middleNodeData.id)
} else {
this.$emit('input', this.$utils._clonedeep(this.middleNodeData))
}
if (this.isMulti) {
const results = val.map(m => handler(m))
// 多选返回值以字符串逗号分隔形式返回
if (this.valueType === 'String') {
return results.join(',')
}
return results
} else {
return handler(val[0])
}
this.nodeData = this.$utils._clonedeep(this.middleNodeData)
this.$nextTick(() => {
this.$parent.clearValidate()
})
}
}
}
</script>
<style lang="scss">
.OrgLazyLoadSelectCmp {
font-size: 14px;
// height: 40px;
.text-tag{
.el-tag{
margin: 0 4px
}
.OrgLazyLoadSelectCmp_dialog {
display: flex;
height: 300px;
border: 1px solid #E1E1E1;
overflow: hidden;
.wrap-left {
width: 300px;
height: 100%;
padding-right: 5px;
border-right: 1px solid #E1E1E1;
}
.content-wrap {
display: flex;
.wrap-right {
width: calc(100% - 300px);
height: 100%;
align-items: center;
.text {
width: auto;
line-height: 40px;
height: 40px;
}
.el-icon-close{
// width: 20px;
// text-align: center;
cursor: pointer;
// &:hover {
// color: #409eff;
// font-size: 18px;
// }
}
.el-icon-edit {
// width: 20px;
// text-align: center;
margin-left: 20px;
cursor: pointer;
// &:hover {
// color: #409eff;
// font-size: 18px;
// }
}
padding: 0 5px;
}
}
.dialog-body {
max-height: 500px;
overflow-y: auto;
.text-tag{
display: inline-block;
margin-bottom: 8px;
.el-tag{
margin: 0 4px
}
}
}
</style>
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/props.js 0 → 100644
View file @ ad03805a
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: ''
}
}
}
applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/selectedOrgTable.vue 0 → 100644
View file @ ad03805a
<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