/** * @Description: 群组管理 * @author wx * @date 2020/4/24 */ <template> <div class="group-com"> <Right-To-Left> <div slot="left"> <group-tree ref="groupTree" @nodeClick="nodeClick" @handleEditGroup="handleEditGroup" @handleDelGroup="handleDelGroup" @handleCopyGroup="handleCopyGroup" @removeGroup="removeGroup" /> <dee-dialog :dialog-visible="dialogVisible" :title="dialogTitle" width="40%" @handleClose="handleClose" > <edit-group v-if="isEdit && model!==3" :edit-id="editId" @on-cancel="dialogVisible = false" @editSubmit="editSubmit" @handleClose="handleClose" /> <dee-as-com v-if="!isEdit && model!==3" :lay-config="{ typeName: typeName, layKey: keyName }" parent-show-mode="dialog" :form="bindForm" @completeEven="completeEven" @on-cancel="dialogVisible = false" /> <copy-group v-if="model===3" :copy-group-item="copyGroupItem" @getGroups="getGroups" @handleClose="handleClose" /> </dee-dialog> </div> <div slot="right" class="table-box-content"> <div v-show="showRight" ref="searchBox"> <dee-as-com ref="groupDetail" :lay-config="{ typeName: 'DxGroup', layKey: 'defaultView' }" :basic-data="{id: editId}" /> </div> <div v-show="showRight" :style="{height: tableHeight}"> <dee-as-com ref="DxGroupMemberLinkTable" :lay-config="{ typeName:'DxGroupMemberLink', layKey:'defaultResult' }" :extra-params="extraParams" /> </div> <div v-show="!showRight" class="noData-wrap"> <img src="/images/common/nodata.png" alt> <span>暂无数据</span> </div> </div> </Right-To-Left> </div> </template> <script> import GroupTree from './components/groupTree' import EditGroup from './components/editGroup' import CopyGroup from './components/copy-group' import elementResizeDetectorMaker from 'element-resize-detector' export default { name: 'Gruop', components: { GroupTree, EditGroup, CopyGroup }, data() { return { bindForm: {}, dialogTitle: '', dialogVisible: false, isEdit: false, selectedGroup: null, extraParams: [], editId: '', keyName: '', typeName: '', editGroupId: '', model: 0, copyGroupItem: null, showRight: false, tableHeight: '100%' } }, computed: { parentObject: function() { return { parentNames: this.selectedGroup && this.selectedGroup.orgNames ? this.selectedGroup.orgNames.join('/') : '' } } // searchBoxHeight: function() { // return this.$refs.searchBox ? this.$refs.searchBox.offsetHeight + 'px' : 'calc(100% - 78px)' // } }, created() { }, mounted() { this.getGroups() if (this.$refs.searchBox) { this.watchSize() } }, methods: { watchSize() { const _this = this var erd = elementResizeDetectorMaker() erd.listenTo(this.$refs.searchBox, (element) => { // 这里的this.$refs.fan指定要监听的元素对象,对应的是<div ref="fan"></div> _this.$nextTick(() => { // 这里填写监听改变后的操作 _this.tableHeight = `calc(100% - ${element.offsetHeight + 12}px)` }) }) }, editSubmit() { this.getGroups() this.handleClose() }, completeEven(data) { if (data.buttonInformation.type === 'submit') { this.getGroups() this.$refs.groupDetail.$refs.asCom.getData() } this.handleClose() }, handleCopyGroup(data) { this.dialogTitle = '添加群组' this.dialogVisible = true this.model = 3 this.copyGroupItem = data }, handleEditGroup(isEdit, data) { this.dialogVisible = true this.dialogTitle = isEdit ? '编辑群组' : '新增群组' this.isEdit = isEdit if (!this.isEdit) { this.bindForm = { target: { scope: !this.$store.state.tripleManage.switch ? 'ALL' : (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2' ? 'ORGANIZATION' : 'ALL') }, source: { id: !this.$store.state.tripleManage.switch ? null : (JSON.parse(localStorage.getItem('userLevel')) && JSON.parse(localStorage.getItem('userLevel')).level === '2' ? Number(JSON.parse(localStorage.getItem('userLevel')).organizationId) : null) } } } this.typeName = 'DxOrganizationGroupLink' this.keyName = isEdit ? 'defaultEdit' : 'defaultCreate' this.editId = data ? data.id + '' : '' }, handerTreeFun(item, data, node) { if (item.btnValue && this[item.btnValue]) { this[item.btnValue](item, data, node) } else { this.$emit('handerTreeFun', item, data, node) } }, refreshTreeLoad() { this.editId = '' this.getGroups() }, getGroups() { this.$refs.groupTree.getGroupOrg() }, getListTree(obj) { this.nodeClick(obj) }, getList() { this.$refs.table.getRewritingData() }, nodeClick(obj) { if (obj.subTypeName && obj.subTypeName === 'DxGroup') { this.showRight = true this.selectedGroup = obj this.editId = obj.id this.$refs.DxGroupMemberLinkTable.$refs.asCom.getData( [{ fieldName: 'sourceId', operator: 'EQ', value: obj.id }], obj ) } else { this.showRight = false } }, handleClose() { this.model = '' this.dialogVisible = false this.keyName = '' this.typeName = '' this.editGroupId = '' }, addGroup(item) { this.keyName = 'addOrgGroup' this.typeName = 'DxGroupLink' this.editGroupId = '' this.dialogTitle = '新增群组' this.dialogVisible = true }, submitFun() { const form = { ...this.$refs.form.propForm } if (form.id) { form.operator = 'MODIFY' } this.$getService(this.typeName).save(form).then(res => { this.getGroups() this.$utils.showMessageSuccess(form.id ? '编辑成功' : '新增成功') this.handleClose() }) }, handleDelGroup(data) { this.$utils.showConfirm( '你是否确定删除选中的群组吗?', '提示', 'warning', '确定', '取消', () => { const modelName = this.$utils.getModelName4dxClassName(data.dxClassname) this.$api.batchDelete(modelName, data.id).then(res => { this.$utils.showMessageSuccess('删除成功!') this.getGroups() }) } ) }, removeGroup(data, node) { this.$utils.showConfirm( '你是否确定移除选中的群组吗?', '提示', 'warning', '确定', '取消', () => { this.$api.remove('DxGroupLink', data.linkId).then(res => { this.$utils.showMessageSuccess('移除成功') this.getGroups() }) } ) } } } </script> <style lang="scss"> .group-com { height: 100%; .dee-default-tree-com .el-tree { height: 100%; } .splitter-pane-resizer.vertical { opacity: 1; background-color: #F1F4F5; width: 6px; border-left: 0; border-right: 0; } .table-box-content{ height: 100%; } .border-box-style >div{ height: 100%; } .noData-wrap{ width: 100%; height: calc(100% - 90px); text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; img{ width: 190px; height: 132px; } } } </style>