| | |
| | | <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> |
| | | <span v-else>无</span> |
| | | </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, parentId, entity, key}"> |
| | | <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> |
| | | </div> |
| | | <a-input-search @search="handleSearch" style="width:100%;margin-top: 10px" placeholder="检索 类别编码/名称" allowClear |
| | | v-model="searchInput" @change="handleChange"/> |
| | | <!-- showLine --> |
| | | <div style="flex: 1;overflow:auto;margin-top: 10px"> |
| | | <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, parentId, 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 && entity.parentId == -1" :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}"> |
| | | <span v-else>{{ title }}</span> |
| | | <a-dropdown v-if="!editDisable && entity.parentId == -1" :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-dropdown> |
| | | </template> |
| | | </a-tree> |
| | | </div> |
| | | </div> |
| | | </a-spin> |
| | | <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model> |
| | | </a-card> |
| | |
| | | this.hiding = true |
| | | this.currSelected = {} |
| | | this.selectedKeys = [] |
| | | console.log('发送') |
| | | // console.log('发送') |
| | | // this.$bus.$emit('treeClearSelected','重置列表') |
| | | this.$emit('sendSelectBaseTree', '') |
| | | }, |
| | |
| | | let record = e.node.dataRef |
| | | this.currSelected = Object.assign({}, record) |
| | | this.selectedKeys = [record.key] |
| | | console.log('选中树中项',this.selectedKeys) |
| | | this.$emit('sendSelectBaseTree', this.selectedKeys) |
| | | }, |
| | | handleEdit(entity) { |
| | |
| | | this.allTreeKeys = [] |
| | | this.treeDataSource = res.result |
| | | this.generateList(res.result) |
| | | this.expandedKeys=this.allTreeKeys |
| | | } else { |
| | | this.$message.warn(res.message) |
| | | } |
| | |
| | | padding: 5px 15px 5px 37px; |
| | | } |
| | | |
| | | .drawer-bootom-button { |
| | | .drawer-bottom-button { |
| | | position: absolute; |
| | | top: 1px; |
| | | /* padding: 10px 16px; */ |
| | |
| | | background: #fff; |
| | | border-radius: 0 0 2px 2px; |
| | | } |
| | | |
| | | .tree_con{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @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; |
| | | } |
| | | } |
| | | |
| | | /deep/ .ant-card-body,/deep/ .ant-spin-nested-loading,/deep/ .ant-spin-container{ |
| | | height: 100%; |
| | | } |
| | | </style> |