<template><el-dialog :before-close="dialogHandleClose" :title="dialogData.title" :visible="dialogVisible" append-to-body centerwidth="70%" @opened="tableOptionalTreeOpened"><el-row :gutter="20" class="mb8" type="flex"><el-col :span="6" justify="center"><el-input v-model="treeFilterText" placeholder="输入关键字搜索" style="margin-bottom: 5px"/><!-- 滚动条样式 left、filter-tree --><div class="left"><el-tree class="filter-tree" ref="tree_child" :data="tableTreeData" :default-expand-all="false":expand-on-click-node="false" :filter-node-method="treeFilterNode" :load="loadNode":props="treeDefaultProps" lazy node-key="id" @node-click="handleNodeClick"></el-tree></div></el-col><el-col :span="18" justify="center" ><!-- 滚动条样式 style的width要设置100%,不然内容会被挤 --><el-input v-model="tableFilterText" :clearable="true" placeholder="输入物料名称按下回车进行搜索"style="margin-bottom: 5px;width: 100%" @clear="clear"@keyup.enter.native="search"/><el-table ref="table_child" :data="tableData" :reserve-selection="true" border height="320" row-key="id"style="width: 100%" @select='onTableSelect' @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"/><el-table-column align="center" label="编码" prop="code" width="180"/><el-table-column align="center" label="名称" prop="name" width="180"/><el-table-column align="center" label="简称" prop="shortName" width="180"/><el-table-column align="center" label="版本号" prop="version"/></el-table><pagination v-show="total>=0" :limit.sync="pageSize" :page.sync="pageNum" :total="total" @pagination="getList"/><div class="select-view"><div style="margin: 5px 0">当前已选：</div><div class="gys-names"><el-tag v-for="item in selectDataAll" :key="item.id" style="margin-right:5px;">{{ item.name }}<i class="el-icon-delete" @click="delMaterial(item)" style="cursor: pointer;margin-left:5px"></i></el-tag></div></div></el-col></el-row><span slot="footer" class="dialog-footer"><el-button @click="cancel()">取 消</el-button><el-button type="primary" @click="confirm()">确 定</el-button></span></el-dialog>
</template>
<style lang="scss" scoped>
::v-deep .el-tree {/*width: 100%;*/overflow-y: auto;
}::v-deep .el-dialog--center .el-dialog__body {padding: 0 25px 0;
}::v-deep .el-dialog__footer {padding: 0 20px 20px;
}.filter-tree {//border: 1px solid #dcdfe6;display: inline-block;overflow: auto;
}::v-deep .el-tree-node__label {display: block;overflow: hidden;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;
}.left {height: 480px;overflow: auto;
}.select-view {flex: 1;width: 100%;display: flex;flex-direction: column;.gys-names {flex: 1;border: 1px solid #e8e8e8;border-radius: 5px;min-height: 85px;overflow-y: auto;}
}
</style>
