From accebdce93486d3b4f26e55ffdea047549cce20c Mon Sep 17 00:00:00 2001 From: cuijian <cuijian@xalxzn.com> Date: 星期一, 28 七月 2025 21:12:38 +0800 Subject: [PATCH] Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj --- src/views/mdc/base/modules/DepartList/DepartListTree/DepartTree.vue | 411 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 411 insertions(+), 0 deletions(-) diff --git a/src/views/mdc/base/modules/DepartList/DepartListTree/DepartTree.vue b/src/views/mdc/base/modules/DepartList/DepartListTree/DepartTree.vue new file mode 100644 index 0000000..f128940 --- /dev/null +++ b/src/views/mdc/base/modules/DepartList/DepartListTree/DepartTree.vue @@ -0,0 +1,411 @@ +<template> + <a-card class="tree_con" :loading="cardLoading" :bordered="false" > + <a-spin :spinning="loading"> + <a-alert type="info" :showIcon="false" style="margin-right: 54px;padding-left: 5px"> + <div slot="message"> + 褰撳墠锛�<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span> + <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">鍙栨秷</a> + </div> + </a-alert> + <div class="drawer-bootom-button"> + <a-dropdown :trigger="['click']" placement="bottomCenter"> + <a-menu slot="overlay"> + <a-menu-item key="1" @click="expandAll">灞曞紑鎵�鏈�</a-menu-item> + <a-menu-item key="2" @click="closeAll">鍚堝苟鎵�鏈�</a-menu-item> + <a-menu-item key="3" @click="refreshTree">鍒锋柊</a-menu-item> + </a-menu> + <a-button> + <a-icon type="bars"/> + </a-button> + </a-dropdown> + </div> + <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="妫�绱� 绫诲埆缂栫爜/鍚嶇О" allowClear + v-model="searchInput" @change="handleChange"/> + <!-- showLine --> + <a-tree showLine ref="tree" :checkStrictly="checkStrictly" :expandedKeys.sync="expandedKeys" + :selectedKeys="selectedKeys" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" + :treeData="treeDataSource" + :autoExpandParent="autoExpandParent" @select="onSelect" @expand="onExpand" slots="{}"> + <template slot="title" slot-scope="{ title, entity, key}"> + <span v-if="title.indexOf(searchValue) > -1"> + {{ title.substr(0, title.indexOf(searchValue)) }} + <span class="replaceSearch">{{ searchValue }}</span> + {{ title.substr(title.indexOf(searchValue) + searchValue.length) }} + </span> + <span v-else>{{ title }}</span> + <a-dropdown v-if="!editDisable " :trigger="['click']" placement="bottomCenter"> + <a-menu slot="overlay"> + <a-menu-item> + <a href="javascript:;" @click="handleEdit(entity)">缂栬緫</a> + </a-menu-item> + <a-menu-item> + <a href="javascript:;" @click="batchDel(entity)"> + 鍒犻櫎 + </a> + </a-menu-item> + </a-menu> + <span :style="{position: 'absolute',right: 0}"> + <a-icon type="down"/> + </span> + </a-dropdown> + </template> + </a-tree> + </a-spin> + <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> + </a-card> +</template> + +<script> + import { + getAction, + postAction, + deleteAction + } from '@/api/manage' + import Tooltip from 'ant-design-vue/es/tooltip' + import TierModel from './modules/DepartTree/TierModel' + import {mapActions} from 'vuex' + + export default { + name: 'DepartTree', + props: { + editDisable: { + type: Boolean, + default() { + return true + } + } + }, + components: { + Tooltip, + TierModel + }, + data() { + return { + searchInput: '', + cardLoading: false, + loading: false, + treeDataSource: [], + selectedKeys: [], + expandedKeys: [], + url: { + getBaseTree: '/mdc/mdcEquipment/queryTreeListByDepart', + deleteBatch: '/mdc/sectionEquipment/deleteBatch' + }, + searchValue: '', + dataList: [], + autoExpandParent: true, + checkStrictly: true, + allTreeKeys: [], + currSelected: {}, + hiding: false, + mathChange:'' + } + } + , + created() { + this.queryTreeData() + this.closeAll() + } + , + methods: { + ...mapActions(['QueryDepart']), + getCurrSelectedTitle() { + return !this.currSelected.title ? '' : this.currSelected.title + } + , + onClearSelected() { + this.hiding = true + this.currSelected = {} + this.selectedKeys = [] + this.$emit('sendSelectBaseTree', '') + }, + + onSelect(selectedKeys, e) { + this.hiding = false + let record = e.node.dataRef + this.currSelected = Object.assign({}, record) + this.selectedKeys = [record.key] + this.$emit('sendSelectBaseTree', this.selectedKeys) + }, + handleEdit(entity) { + this.$refs.tierModalForm.edit(entity) + this.$refs.tierModalForm.title = '缂栬緫閮ㄩ棬' + this.$refs.tierModalForm.disableSubmit = false + }, + onExpand(expandedKeys) { + this.expandedKeys = expandedKeys + this.autoExpandParent = false + }, + queryTreeData() { + this.loading = true + this.cardLoading = true + this.QueryDepart().then(res => { + if (res.success) { + this.dataList = [] + this.allTreeKeys = [] + this.treeDataSource = res.result + this.generateList(res.result) + this.expandedKeys=this.allTreeKeys + } else { + // this.$message.warn(res.message) + this.$notification.warning({ + message:'娑堟伅', + description:res.message + }); + } + }).finally(() =>{ + this.loading = false + this.cardLoading = false + }) + // getAction(this.url.getBaseTree).then((res) => { + // if (res.success) { + // this.dataList = [] + // this.allTreeKeys = [] + // this.treeDataSource = res.result + // this.generateList(res.result) + // } else { + // this.$message.warn(res.message) + // } + // }).finally(() => { + // this.loading = false + // this.cardLoading = false + // }) + } + , + handleChange() { + let search = this.searchInput + let expandedKeys = this.dataList + .map(item => { + if(item.title !=null){ + if (item.title.indexOf(search) > -1) { + return this.getParentKey(item.key, this.treeDataSource) + } + return null + } + }) + .filter((item, i, self) => item && self.indexOf(item) === i) + Object.assign(this, { + expandedKeys, + searchValue: search, + autoExpandParent: true + }) + } + , + handleSearch(value) { + let search = value + let expandedKeys = this.dataList + .map(item => { + if(item.title !=null){ + if (item.title.indexOf(search) > -1) { + return this.getParentKey(item.key, this.treeDataSource) + } + return null + } + }) + .filter((item, i, self) => item && self.indexOf(item) === i) + Object.assign(this, { + expandedKeys, + searchValue: search, + autoExpandParent: true + }) + } + , + getParentKey(key, tree) { + let parentKey + for (let i = 0; i < tree.length; i++) { + const node = tree[i] + if (node.children) { + if (node.children.some(item => item.key === key)) { + parentKey = node.key + } else if ( + this.getParentKey(key, node.children)) { + parentKey = this.getParentKey(key, node.children) + } + } + } + return parentKey + }, + + generateList(data) { + for (let i = 0; i < data.length; i++) { + const node = data[i] + const key = node.key + const title = node.title + this.dataList.push({ + key, + title: title + }) + this.allTreeKeys.push(key) + if (node.children) { + this.generateList(node.children) + } + } + }, + expandAll() { + this.expandedKeys = this.allTreeKeys + }, + closeAll() { + this.expandedKeys = ['-1'] + }, + refreshTree() { + this.queryTreeData() + }, + batchDel: function(entity) { + if (!this.url.deleteBatch) { + // this.$message.error('璇疯缃畊rl.deleteBatch灞炴��!') + this.$notification.warning({ + message:'娑堟伅', + description:"璇疯缃畊rl.deletBatch灞炴�э紒" + }); + return + } + let ids = entity.id + if (!ids) { + // this.$message.warning('璇烽�夋嫨涓�鏉¤褰曪紒') + this.$notification.warning({ + message:'娑堟伅', + description:"璇烽�夋嫨涓�鏉¤褰�" + }); + return + } else { + var that = this + this.$confirm({ + title: '纭鍒犻櫎', + content: '鏄惁鍒犻櫎閫変腑鏁版嵁?', + onOk: function() { + that.loading = true + deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => { + if (res.success) { + // that.$message.success(res.message) + that.$notification.warning({ + message:'娑堟伅', + description:res.message + }); + that.queryTreeData(); + } else { + // that.$message.warning(res.message) + that.$notification.warning({ + message:'娑堟伅', + description:res.message + }); + } + }).finally(() => { + that.loading = false + }) + } + }) + } + }, + modalFormOk(val) { + console.log("mmm") + // 鏂板/淇敼 鎴愬姛鏃讹紝閲嶈浇鍒楄〃 + this.queryTreeData() + // 鏂板/淇敼 鎴愬姛鏃讹紝閲嶈浇鍒楄〃 + } + + } + , + //鐩戝惉 + watch: { + currSelected(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢 + this.$emit('getCurrSelectedDD', val) + }, + } + } +</script> + +<style lang="less" scoped> + .replaceSearch { + color: #40a9ff; + font-weight: bold; + background-color: rgb(204, 204, 204); + } + + .ant-card-body .table-operator { + margin: 15px; + } + + .anty-form-btn { + width: 100%; + text-align: center; + } + + .anty-form-btn button { + margin: 0 5px; + } + + .anty-node-layout .ant-layout-header { + padding-right: 0; + } + + .header { + padding: 0 8px; + } + + .header button { + margin: 0 3px; + } + + .ant-modal-cust-warp { + height: 100%; + } + + .ant-modal-cust-warp .ant-modal-body { + height: calc(100% - 110px) !important; + overflow-y: auto; + } + + .ant-modal-cust-warp .ant-modal-content { + height: 90% !important; + overflow-y: hidden; + } + + /** Button鎸夐挳闂磋窛 */ + .ant-btn { + margin-left: 3px; + } + + .ant-alert { + padding: 5px 15px 5px 37px; + } + + .drawer-bootom-button { + position: absolute; + top: 1px; + /* padding: 10px 16px; */ + text-align: left; + right: 0; + background: #fff; + border-radius: 0 0 2px 2px; + } + @media screen and (min-width: 1920px){ + .tree_con{ + height: 748px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1680px) and (max-width: 1920px){ + .tree_con{ + height: 748px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1400px) and (max-width: 1680px){ + .tree_con{ + height: 600px!important; + overflow: scroll; + } + } + @media screen and (min-width: 1280px) and (max-width: 1400px){ + .tree_con{ + height: 501px!important; + overflow: scroll; + } + } + @media screen and (max-width: 1280px){ + .tree_con{ + height: 501px!important; + overflow: scroll; + } + } +</style> -- Gitblit v1.9.3