|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="bionicClass" @mouseenter="handleMouse(true)" @mouseleave="handleMouse(false)">
|
|
|
+ <div @click.stop="showVisible(true)">
|
|
|
+ <div class="bionicClassText" v-if="selectedDept.length <= 0">全部部门</div>
|
|
|
+ <div v-else>
|
|
|
+ <el-tag @click.stop="" type="info" size="small" closable @close="deteleItem(0)">{{ selectedDeptLabel[0]
|
|
|
+ }}</el-tag>
|
|
|
+ <el-tag @click.stop="" type="info" size="small" v-if="selectedDeptLabel.length > 1">+ {{
|
|
|
+ selectedDeptLabel.length - 1 }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bionicClassIcon" v-if="showIocn && clearable">
|
|
|
+ <el-link icon="el-icon-circle-close" type="info" :underline="false" @click.stop="clearItem()"></el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog title="选择部门" :visible.sync="deptVisible" width="700px" top="60px" append-to-body
|
|
|
+ :before-close="handleClose">
|
|
|
+ <div class="selectDepartment">
|
|
|
+ <el-input placeholder="请输入部门" v-model.trim="filterText" clearable @clear="echartDepartment(false)" @keyup.enter.native="echartDepartment(filterText ? true : false)">
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="echartDepartment(true)"></el-button>
|
|
|
+ </el-input>
|
|
|
+ <div class="flex1 padding1">
|
|
|
+ <el-tree class="filter-tree" node-key="id" :data="treeData" :props="defaultProps" show-checkbox
|
|
|
+ :filter-node-method="treeDatafilterNode" default-expand-all @check-change="handleCheckChange"
|
|
|
+ ref="treeDataComtent">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span v-if="node.data.children">
|
|
|
+ <TranslationOpenDataText type='departmentName' :openid='node.label'>
|
|
|
+ </TranslationOpenDataText>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <TranslationOpenDataText type='userName' :openid='node.label'></TranslationOpenDataText>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="deptVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="determineDept()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ modelValue: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+ selectType: { // 0 人员/部门, 1 人员搜索 2部门搜索
|
|
|
+ type: String,
|
|
|
+ default: () => '0'
|
|
|
+ },
|
|
|
+ clearable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
+ selectedDept: [],
|
|
|
+ selectedDeptValue: [],
|
|
|
+ selectedDeptLabel: [],
|
|
|
+ filterText: '',
|
|
|
+ filterKeyNode: [],
|
|
|
+ treeData: [],
|
|
|
+ treeDataCopy: [],
|
|
|
+ deptVisible: false,
|
|
|
+ treeDataLoading: false,
|
|
|
+ showIocn: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ created() { },
|
|
|
+ mounted() {
|
|
|
+ this.getDeptData()
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: 'modelValue',
|
|
|
+ event: 'getValue'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ determineDept() {
|
|
|
+ const dataNodes = this.$refs.treeDataComtent.getCheckedNodes()
|
|
|
+ this.selectedDept = dataNodes
|
|
|
+ this.selectedDeptValue = dataNodes.map(item => item.id)
|
|
|
+ this.selectedDeptLabel = dataNodes.map(item => item.label)
|
|
|
+ this.updateModelValue()
|
|
|
+ this.showVisible(false)
|
|
|
+ },
|
|
|
+ deteleItem(index, flag = false) {
|
|
|
+ const deteleNumber = flag ? this.selectedDept.length : 1
|
|
|
+ this.selectedDept.splice(index, deteleNumber)
|
|
|
+ this.selectedDeptValue.splice(index, deteleNumber)
|
|
|
+ this.selectedDeptLabel.splice(index, deteleNumber)
|
|
|
+ this.updateModelValue()
|
|
|
+ },
|
|
|
+ clearItem() {
|
|
|
+ this.selectedDept = []
|
|
|
+ this.selectedDeptValue = []
|
|
|
+ this.selectedDeptLabel = []
|
|
|
+ this.updateModelValue()
|
|
|
+ },
|
|
|
+ echartDepartment(flag = true) {
|
|
|
+ if (this.user.userNameNeedTranslate != '1') {
|
|
|
+ this.$refs.treeDataComtent.filter(this.filterText);
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (flag) { // 清空
|
|
|
+ this.filterKeyNode = this.$refs.treeDataComtent.getCheckedKeys()
|
|
|
+ }
|
|
|
+ this.getDeptData(true)
|
|
|
+ },
|
|
|
+ setTreeDataKeyNode(array) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.treeDataComtent.setCheckedKeys(array);
|
|
|
+ }, 300)
|
|
|
+ },
|
|
|
+ updateModelValue() {
|
|
|
+ this.$emit('getValue', this.selectedDeptValue);
|
|
|
+ this.$emit('change', this.selectedDeptValue);
|
|
|
+ },
|
|
|
+ treeDatafilterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ showVisible(flag) {
|
|
|
+ this.deptVisible = flag
|
|
|
+ if (flag) {
|
|
|
+ this.setTreeDataKeyNode(this.modelValue || []);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCheckChange() {
|
|
|
+ let keys = this.$refs.treeDataComtent.getCheckedKeys()
|
|
|
+ if (keys.length > 0) {
|
|
|
+ this.filterKeyNode = [...this.filterKeyNode, keys[keys.length - 1]]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDeptData(flag = false, str) {
|
|
|
+ this.treeDataLoading = true
|
|
|
+ this.http.post("/department/listAllMemb", {
|
|
|
+ queryType: this.selectType,
|
|
|
+ keyword: this.filterText,
|
|
|
+ cursor: ''
|
|
|
+ }, res => {
|
|
|
+ this.treeDataLoading = false
|
|
|
+ this.treeData = JSON.parse(JSON.stringify(res.data.data || res.data))
|
|
|
+ this.treeDataCopy = JSON.parse(JSON.stringify(res.data.data || res.data))
|
|
|
+ flag ? this.$refs.treeDataComtent.setCheckedKeys(this.filterKeyNode) : ''
|
|
|
+ }, err => {
|
|
|
+ this.treeDataLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMouse(flag) {
|
|
|
+ this.showIocn = flag
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'>
|
|
|
+.selectDepartment {
|
|
|
+ height: 56vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .flex1 {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .padding1 {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bionicClass {
|
|
|
+ background-color: #FFF;
|
|
|
+ background-image: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #606266;
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ outline: 0;
|
|
|
+ padding: 0 15px;
|
|
|
+ -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
|
|
+ transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
|
|
+ width: 350px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .bionicClassIcon {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 15px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: "#606266";
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bionicClassText {
|
|
|
+ color: #C0C4CC;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 0 !important;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ max-height: calc(100% - 200px);
|
|
|
+ max-width: calc(100% - 30px);
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog .el-dialog__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.bionicClassIcon .el-icon-circle-close {
|
|
|
+ color: #C0C4CC !important;
|
|
|
+}
|
|
|
+</style>
|