| | |
| | | <template> |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false" > |
| | | <a-card class="tree_con" :loading="cardLoading" :bordered="false"> |
| | | <a-spin :spinning="loading"> |
| | | <div style="display: flex;flex-direction: column;height: 100%"> |
| | | <div> |
| | | <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> |
| | | <span v-else>无</span> |
| | | </div> |
| | | </a-alert> |
| | | <div class="drawer-bottom-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-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> |
| | | <span v-else>无</span> |
| | | </div> |
| | | </a-alert> |
| | | <div class="drawer-bottom-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> |
| | | </div> |
| | | <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear |
| | | v-model="searchInput" @change="handleChange"/> |
| | | <!-- showLine --> |
| | |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> |
| | | <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> |
| | | </a-card> |
| | | </template> |
| | | |
| | |
| | | } from '@/api/manage' |
| | | import Tooltip from 'ant-design-vue/es/tooltip' |
| | | import TierModel from './modules/baseTree/TierModel' |
| | | import {mapActions} from 'vuex' |
| | | import { mapActions } from 'vuex' |
| | | |
| | | export default { |
| | | name: 'BaseTree', |
| | |
| | | default() { |
| | | return true |
| | | } |
| | | }, |
| | | filterAbnormalDeviceKey: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }, |
| | | components: { |
| | |
| | | allTreeKeys: [], |
| | | currSelected: {}, |
| | | hiding: false, |
| | | mathChange:'' |
| | | mathChange: '' |
| | | } |
| | | } |
| | | , |
| | |
| | | queryTreeData() { |
| | | this.loading = true |
| | | this.cardLoading = true |
| | | this.QueryProduction().then(res => { |
| | | this.QueryProduction(this.filterAbnormalDeviceKey).then(res => { |
| | | if (res.success) { |
| | | this.dataList = [] |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(res.result) |
| | | this.expandedKeys=this.allTreeKeys |
| | | this.expandedKeys = this.allTreeKeys |
| | | } else { |
| | | this.$message.warn(res.message) |
| | | } |
| | | }).finally(() =>{ |
| | | }).finally(() => { |
| | | this.loading = false |
| | | this.cardLoading = false |
| | | }) |
| | |
| | | let search = this.searchInput |
| | | let expandedKeys = this.dataList |
| | | .map(item => { |
| | | if(item.title !=null){ |
| | | if (item.title != null) { |
| | | if (item.title.indexOf(search) > -1) { |
| | | return this.getParentKey(item.key, this.treeDataSource) |
| | | } |
| | |
| | | let expandedKeys = this.dataList |
| | | .map(item => { |
| | | |
| | | if(item.title !=null){ |
| | | if (item.title != null) { |
| | | if (item.title.indexOf(search) > -1) { |
| | | return this.getParentKey(item.key, this.treeDataSource) |
| | | } |
| | |
| | | if (!ids) { |
| | | // this.$message.warning('请选择一条记录!') |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:"请选择一条记录" |
| | | }); |
| | | message: '消息', |
| | | description: '请选择一条记录' |
| | | }) |
| | | return |
| | | } else { |
| | | var that = this |
| | |
| | | deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => { |
| | | if (res.success) { |
| | | that.$message.success(res.message) |
| | | that.queryTreeData(); |
| | | that.queryTreeData() |
| | | } else { |
| | | that.$message.warning(res.message) |
| | | } |
| | |
| | | } |
| | | }, |
| | | modalFormOk(val) { |
| | | console.log("mmm") |
| | | console.log('mmm') |
| | | // 新增/修改 成功时,重载列表 |
| | | this.queryTreeData() |
| | | // 新增/修改 成功时,重载列表 |
| | |
| | | watch: { |
| | | currSelected(val) { //监听currSelected 变化,将变化后的数值传递给 getCurrSelected 事件 |
| | | this.$emit('getCurrSelected', val) |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | border-radius: 0 0 2px 2px; |
| | | } |
| | | |
| | | .tree_con{ |
| | | .tree_con { |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px){ |
| | | .tree_con{ |
| | | height: 748px!important; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px){ |
| | | .tree_con{ |
| | | height: 748px!important; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px){ |
| | | .tree_con{ |
| | | height: 600px!important; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px){ |
| | | .tree_con{ |
| | | height: 501px!important; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1280px){ |
| | | .tree_con{ |
| | | height: 501px!important; |
| | | @media screen and (min-width: 1920px) { |
| | | .tree_con { |
| | | height: 748px !important; |
| | | } |
| | | } |
| | | |
| | | /deep/ .ant-card-body,/deep/ .ant-spin-nested-loading,/deep/ .ant-spin-container{ |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | .tree_con { |
| | | height: 748px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | .tree_con { |
| | | height: 600px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | .tree_con { |
| | | height: 501px !important; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | .tree_con { |
| | | height: 501px !important; |
| | | } |
| | | } |
| | | |
| | | /deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container { |
| | | height: 100%; |
| | | } |
| | | </style> |