| | |
| | | <template> |
| | | <div class="standard"> |
| | | <div class="left"> |
| | | <el-row> |
| | | <el-col :span="20"> |
| | | <div class="app-container"> |
| | | <el-row :gutter="20"> |
| | | <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> |
| | | <!--部门数据--> |
| | | <pane size="12"> |
| | | <el-col> |
| | | <div class="head-container addButton"> |
| | | <el-input v-model="search" clearable placeholder="输入关键字进行搜索" size="small" style="margin-bottom: 5px" |
| | | suffix-icon="el-icon-search" @blur="searchFilter" @clear="searchFilter"></el-input> |
| | | </el-col> |
| | | <el-col v-if="checkPermi(['standard:standardLibrary:add'])" :span="4" |
| | | style="text-align: center; line-height: 30px"> |
| | | suffix-icon="el-icon-search" @keydown.enter.native="searchFilter" @blur="searchFilter" @clear="searchFilter"></el-input> |
| | | <el-button circle icon="el-icon-plus" size="mini" type="primary" @click="addDia = true"></el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <div class="head-container"> |
| | | <el-tree ref="tree" v-loading="treeLoad" :allow-drop="allowDrop" :data="list" |
| | | :default-expanded-keys="expandedKeys" :draggable="true" :filter-node-method="filterNode" |
| | | :props="{ children: 'children', label: 'label' }" highlight-current node-key="label" style=" |
| | | height: calc(100% - 30px); |
| | | :props="{ children: 'children', label: 'label' }" highlight-current node-key="label" |
| | | style=" |
| | | height: calc(100vh - 173px); |
| | | overflow-y: scroll; |
| | | scrollbar-width: none; |
| | | " @node-click="handleNodeClick" |
| | | scrollbar-width: none;" |
| | | @node-click="handleNodeClick" |
| | | @node-drop="handleDrop"> |
| | | <div slot-scope="{ node, data }" class="custom-tree-node"> |
| | | <el-row style="width: 100%"> |
| | |
| | | </div> |
| | | </el-tree> |
| | | </div> |
| | | <div class="right"> |
| | | <el-row class="title" style="width: 100%"> |
| | | <el-col :span="20" style="font-size: 14px; color: #999">{{ |
| | | selectTree |
| | | }}</el-col> |
| | | <el-col :span="4"> |
| | | </el-col> |
| | | </pane> |
| | | <!--用户数据--> |
| | | <pane size="88"> |
| | | <div class="search_form"> |
| | | <div style="height:37px"> |
| | | <p style="font-size: 14px; color: #999;margin-left: 10px">{{ selectTree }}</p> |
| | | </div> |
| | | <div class="options_button"> |
| | | <el-button v-if="isShowCopy" size="small" style="position: absolute; right: 20px; top: 1px" type="primary" |
| | | @click="openCopyDia">批量复制</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <el-col> |
| | | <el-row v-loading="tableLoad" class="standard_table"> |
| | | <el-table ref="standard" :data="standardList" class="el-table" header-row-class-name="header-class" height="220" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border |
| | |
| | | <el-table id="templateParamTable" ref="productTable" v-loading="productTableLoading" :data="productList" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border |
| | | :fit="true" :row-class-name="tableRowClassName" class="productTable" |
| | | header-row-class-name="header-class" height="100%" row-key="id" stripe style="width: 100%" |
| | | header-row-class-name="header-class" height="100%" row-key="id" stripe style="width: 100%;height:calc(100% - 220px)" |
| | | tooltip-effect="dark" @select="upProductSelect" @selection-change="handleSelectionChange" |
| | | @select-all="handleAll"> |
| | | <el-table-column type="selection" width="50"> </el-table-column> |
| | |
| | | </el-pagination> --> |
| | | <p style="text-align: right;margin-right: 20px;color: #333;">共{{ total }}条</p> |
| | | </el-row> |
| | | </div> |
| | | </el-col> |
| | | </pane> |
| | | </splitpanes> |
| | | </el-row> |
| | | |
| | | <el-dialog :visible.sync="addDia" title="分类添加" width="400px"> |
| | | <div class="body"> |
| | |
| | | } from "@/api/standard/standardLibrary"; |
| | | import bindSupplierDensityDialogAsk from "./components/bindSupplierDensityDialogAsk.vue"; |
| | | import BatchCopy from "./components/BatchCopy.vue"; |
| | | import { Splitpanes, Pane } from "splitpanes"; |
| | | import "splitpanes/dist/splitpanes.css"; |
| | | |
| | | export default { |
| | | name: 'StandardLibrary', |
| | | components: { |
| | | BatchCopy, |
| | | bindSupplierDensityDialogAsk, |
| | | draggable, |
| | | Splitpanes, |
| | | Pane |
| | | }, |
| | | dicts: ["sys_factory", "sys_sub_lab", "sys_samp_type"], |
| | | data() { |
| | |
| | | if (!value) { //如果数据为空,则返回true,显示所有的数据项 |
| | | return true |
| | | } |
| | | return data.label.indexOf(value) !== -1; |
| | | // 查询列表是否有匹配数据,将值小写,匹配英文数据 |
| | | let val = value.toLowerCase() |
| | | return this.chooseNode(val, data, node) // 调用过滤二层方法 |
| | | // let val = value.toLowerCase() |
| | | // return this.chooseNode(val, data, node) // 调用过滤二层方法 |
| | | }, |
| | | // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符. |
| | | chooseNode (value, data, node) { |
| | |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .standard { |
| | | padding-top: 10px; |
| | | |
| | | <style scoped lang="scss"> |
| | | .search_form { |
| | | display: flex; |
| | | height: calc(100vh - 90px); |
| | | justify-content: space-between; |
| | | |
| | | .options_button { |
| | | margin-top: 3px; |
| | | } |
| | | } |
| | | |
| | | .left { |
| | | width: 330px; |
| | | height: calc(100% - 40px - 10px); |
| | | background-color: white; |
| | | padding: 15px; |
| | | .avatar-uploader ::v-deep .el-upload { |
| | | border: 1px dashed #666666; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .avatar-uploader ::v-deep .el-upload:hover { |
| | | border-color: #409EFF; |
| | | } |
| | | |
| | | .avatar-uploader-icon { |
| | | font-size: 20px; |
| | | color: #8c939d; |
| | | width: 90px; |
| | | height: 90px; |
| | | line-height: 90px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .avatar { |
| | | width: 90px; |
| | | height: 90px; |
| | | display: block; |
| | | } |
| | | |
| | | .addButton { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | } |
| | | .custom-tree-node { |
| | | width: 100%; |
| | | line-height: 32px; |
| | | } |
| | | |
| | | .custom-tree-node .el-icon-delete { |
| | | color: #3a7bfa; |
| | | opacity: 0; |
| | |
| | | color: orange; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .right { |
| | | margin-left: 5px; |
| | | width: calc(100% - 350px); |
| | | height: calc(100% - 40px); |
| | | } |
| | | |
| | | .right .title { |
| | | height: 34px; |
| | | line-height: 34px; |
| | | padding: 0 10px; |
| | | background-color: white; |
| | | } |
| | | |
| | | .standard_table { |
| | | border-top: 1px solid #ebeef5; |
| | | background-color: white; |
| | | } |
| | | |
| | | .product_table { |
| | | border-top: 1px solid #ebeef5; |
| | | height: calc(100% - 235px); |
| | | height: calc(100vh - 398px); |
| | | margin-top: 5px; |
| | | background-color: white; |
| | | user-select: none; |
| | |
| | | |
| | | .product_table .el-table { |
| | | height: calc(100% - 35px) !important; |
| | | } |
| | | |
| | | .sort { |
| | | width: 80% !important; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | >>>.el-table__body-wrapper { |
| | | height: calc(100% - 46px) !important; |
| | | } |
| | | |
| | | >>>.header-class { |
| | | height: 40px !important; |
| | | } |
| | | |
| | | >>>.header-class th.el-table__cell>.cell { |
| | | line-height: 20px !important; |
| | | padding-top: 0 !important; |
| | | padding-bottom: 0 !important; |
| | | } |
| | | |
| | | >>>.el-table__row { |
| | | height: 35px !important; |
| | | } |
| | | |
| | | .search { |
| | | border-bottom: 1px solid #ebeef5; |
| | | margin-bottom: 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: border-box; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .search-item { |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .search-item .el-row { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search-item .el-col { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .more-edit .dialog-footer { |
| | | position: absolute; |
| | | top: 15px; |
| | | right: 70px; |
| | | } |
| | | |
| | | >>>.is-disabled .el-textarea__inner { |
| | | background: rgba(0, 0, 0, 0.05) !important; |
| | | } |
| | | </style> |
| | | <style scoped> |
| | | .standard .el-tree-node__content { |
| | | height: 32px; |
| | | font-size: 14px; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
| | | color: #3a7bfa; |
| | | } |
| | | |
| | | .standard .has-gutter .el-table__cell .cell { |
| | | line-height: 34px; |
| | | background-color: #f8f8f8; |
| | | } |
| | | |
| | | .standard .has-gutter .el-table__cell { |
| | | background-color: #fafafa !important; |
| | | } |
| | | |
| | | .standard .standard_table .el-table__row .cell { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .standard .el-table .warning-row .cell { |
| | | color: #bababa; |
| | | } |
| | | |
| | | .standard .el-table-filter__list { |
| | | max-height: 400px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .standard .el-upload { |
| | | width: 100%; |
| | | } |
| | | |
| | | .standard .el-upload-dragger { |
| | | width: 100%; |
| | | } |
| | | |
| | | .standard .handleBtn.is-disabled .el-upload:focus { |
| | | color: #c0c4cc !important; |
| | | } |
| | | |
| | | .standard .avatar-uploader .el-upload { |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | </style> |