From 73ae352a2cf79d802ce860c9a62e7334595b63e6 Mon Sep 17 00:00:00 2001 From: XiaoRuby <3114200645@qq.com> Date: 星期二, 22 八月 2023 09:22:17 +0800 Subject: [PATCH] 8-21基础数据完成 --- src/views/standardLibrary/index.vue | 830 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 570 insertions(+), 260 deletions(-) diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index 10a4063..274125d 100644 --- a/src/views/standardLibrary/index.vue +++ b/src/views/standardLibrary/index.vue @@ -1,27 +1,29 @@ <template> <div class="standard-library-main"> <div class="content-main"> - <div class="library-bom"> - <el-input - v-model="filterText" - placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" - /> - <el-button type="text" @click="getAllStandard">鍏ㄩ儴</el-button> + <div class="library-bom" style="width: 300px"> + <el-input v-model="filterText" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" /> + <el-button type="text">鍏ㄩ儴</el-button> <el-tree ref="tree" + style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps" + node-key="id" + highlight-current default-expand-all :filter-node-method="filterNode" + :render-content="renderContent" @node-click="nodeClick" /> </div> - <div class="library-table"> + <div class="library-table" style="width: 80%"> <div class="table-header"> <div class="search-bar"> <el-form ref="form" :inline="true" :model="searchData"> <el-form-item> + <span>鍘熸潗鏂欑紪鐮侊細</span> <el-input v-model="searchData.keyword" placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�/鍘熸潗鏂欏悕绉�" @@ -30,321 +32,613 @@ </el-input> </el-form-item> <el-form-item> - <el-button type="primary">鏌ヨ</el-button> - <el-button type="primary" plain>閲嶇疆</el-button> - <!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> --> + <span>鍘熸潗鏂欏悕绉帮細</span> + <el-input + v-model="searchData.keyword" + placeholder="璇疯緭鍏ュ師鏉愭枡鍚嶇О" + > + <i slot="prefix" class="el-input__icon el-icon-search" /> + </el-input> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="filteredTableData" + >鏌ヨ</el-button + > + <el-button type="primary" plain @click="resetBtn" + >閲嶇疆</el-button + > </el-form-item> </el-form> </div> <div class="serve-btn"> - <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button> + <el-button + type="primary" + icon="el-icon-plus" + @click="addTreeFormVisible = true" + >鏂板</el-button + > + <el-button + class="top_div_button" + icon="el-icon-delete-solid" + size="small" + style="color: #00a5ff" + @click="deleteListClick" + >鍒犻櫎</el-button + > </div> </div> <div class="table-box"> - <el-table + <!-- <el-table ref="tableData" - :cell-style="{textAlign: 'center'}" - :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}" + row-key="id" + max-height="680" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + :cell-style="{ textAlign: 'left' }" + :header-cell-style="{ + border: '0px', + background: '#f5f7fa', + color: '#606266', + boxShadow: 'inset 0 1px 0 #ebeef5', + textAlign: 'left', + }" :data="tableData" style="width: 100%" > + <el-table-column type="index" label="搴忓彿" width="100px"> + <template v-if="scope.row.index + 1" slot-scope="scope"> + {{ scope.row.index + 1 }} + </template> + </el-table-column> + <el-table-column prop="father" label="鍚嶇О" width="320px"> + <template slot-scope="scope"> + <el-tag + size="mini" + :type="scope.row.father ? '' : 'success'" + :style="{ borderRadius: '40%', marginRight: '12px' }" + >{{ scope.row.father ? "01" : "02" }}</el-tag + > + {{ scope.row.father || scope.row.name }} + </template> + </el-table-column> + <el-table-column prop="unit" label="鍗曚綅" width="300px" /> + <el-table-column prop="required" label="鏍囧噯" width="300px" /> + <el-table-column prop="internal" label="鍐呮帶鍒�" width="300px" /> + </el-table> --> + <el-table + :data="tableData" + style="width: 100%; margin-bottom: 20px" + row-key="name" + border + height="calc(100vh - 250px)" + default-expand-all + ref="multipleTable" + @select="selectTr" + @select-all="selectAll" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + > + <el-table-column type="selection" label="搴忓彿"> </el-table-column> <el-table-column type="index" + width="50px" label="搴忓彿" - min-width="50" - /> - <el-table-column - v-for="(item,index) in tablespecifications" - :key="index" - :prop="item.prop" - :label="item.label" - :min-width="item.minWidth" - /> - <template v-if="showTableCurrent===2"> - <el-table-column - prop="spe_state" - label="鐘舵��" - min-width="150" - > - <template slot-scope="scope"> - <el-tag - :type="scope.row.spe_state === 0 ? 'primary' : 'success'" - disable-transitions - >{{ scope.row.spe_state === 0 ? '鏈悓鎰�' : '宸插悓鎰�' }}</el-tag> - </template> - </el-table-column> - <el-table-column - label="鎿嶄綔" - min-width="150" - > - <template slot-scope="scope"> - <el-button - type="text" - size="small" - :style="{marginRight:'8px'}" - @click="specificationDetails(scope.row)" - >鏌ョ湅</el-button> - <el-popover - v-model="scope.row.visible" - placement="top" - width="30" + ></el-table-column> + <el-table-column label="椤圭洰鍚嶇О" sortable> + <template scope="scope"> + <el-tag + ><div + class="firstDiv" + :style="`color: ${ + scope.row.code == '[1]' ? '#16a7ff' : '#58c173' + }`" > - <div style="text-align: center; margin: 0"> - <div> - <el-button size="mini" type="text">缂栬緫</el-button> - </div> - <div> - <el-button size="mini" type="text">鍋滅敤</el-button> - </div> - </div> - <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button> - </el-popover> - </template> - </el-table-column> - </template> - + {{ scope.row.code == "[1]" ? "01" : "02" }} + </div> + <span style="color: black">{{ scope.row.name }}</span></el-tag + > + </template> + </el-table-column> + <el-table-column + prop="unit" + label="鍗曚綅" + sortable + ></el-table-column> </el-table> + <!-- 寮瑰嚭琛ㄥ崟椤� --> <div> - <el-pagination + <!-- --> + </div> + <div> + <!-- 鍒嗛〉鍣� --> + <!-- <el-pagination :current-page="pageParams.pageNo" - :page-sizes="[1, 2, 3, 4]" - :page-size="pageParams.pageNo" + :page-sizes="[10, 15, 20, 25]" + :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" - /> + /> --> </div> </div> </div> </div> + <el-dialog + class="addTree" + title="娣诲姞鎸囨爣" + width="28%" + :visible.sync="addTreeFormVisible" + @close="closeAddTreeForm" + > + <el-form v-model="addTreeForm" label-position="top"> + <el-form-item label="涓婄骇"> + <el-cascader + v-model="addTreeForm.addTypeArr" + :options="formTypeOptions" + :props="{ ...defaultProps, checkStrictly: true }" + clearable + @change="changeCascader" + /> + </el-form-item> + <el-form-item + v-show="addTreeForm.addTypeArr.length < 2" + label="鐗╂枡鍚嶇О" + > + <el-input v-model="addTreeForm.materialName" /> + </el-form-item> + <el-form-item + v-show="addTreeForm.addTypeArr.length < 3" + label="鎵ц鏍囧噯" + > + <el-input v-model="addTreeForm.standardName" /> + </el-form-item> + <el-form-item + v-show="addTreeForm.addTypeArr.length < 4" + label="瑙勬牸鍨嬪彿" + > + <el-input v-model="addTreeForm.specificationsName" /> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="subAddTreeForm">纭� 瀹�</el-button> + <el-button @click="addTreeFormVisible = false">鍙� 娑�</el-button> + </div> + </el-dialog> </div> </template> <script> -import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage } from '@/api/standardLibrary' +import { + getMaterialList, + getProductList, + getProductSonList, + addMaterial, + addStandards, + addSpecifications, + deleteListApi, +} from "@/api/standardLibrary"; + +import { selectproductModelApi } from "@/api/basicData/index"; export default { data() { return { - visible: false, - filterText: '', + deleteList: [], + addTreeFormVisible: false, + filterText: "", // 鏍囧噯搴揵om鏍� standardTree: [], - // bom鐨�,榛樿鍊� + // bom鐨�,榛樿閰嶇疆鍊� defaultProps: { - children: 'children', - label: 'label' + children: "children", + label: "name", + value: "id", }, // 鏌ヨ鏉′欢 searchData: { - keyword: '' + keyword: "", }, - tableData: [ - { - id: 2, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - }, - { - id: 3, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - - }, - { - id: 4, - name: 'AB', - updateTime: '2023-07-12 00:00:12', - username: '灏忓皬', - vel: 'V1.0', - spe_state: 1, - visible: false - - } - ], + tableData: [], + oldtableData: [], // 鍒嗛〉鍙傛暟 pageParams: { pageNo: 1, - pageSize: 1, - total: 3 + pageSize: 12, + total: 0, }, - tablespecifications: [ - ], - // 閫変腑鑺傜偣瀵瑰簲鐨勮〃鏍� 0 鏄爣鍑嗚〃 1鏄瀷鍙疯〃 2瑙勬牸琛� - showTableCurrent: 0, + tablespecifications: [], // 閫変腑鐨勮妭鐐规暟鎹� - selectNode: {} - } + selectData: {}, + formTypeOptions: [], + addTreeForm: { + addTypeArr: [], + }, + }; }, watch: { filterText(val) { - this.$refs.tree.filter(val) - } + this.$refs.tree.filter(val); + }, }, created() { - this.getStandardTree() - this.getAllStandard() + this.getStandardTree(); }, methods: { filterNode(value, data) { - if (!value) return true - return data.label.indexOf(value) !== -1 + if (!value) return true; + return data.label.indexOf(value) !== -1; }, // 鑾峰彇bom鏍戠殑鏍囧噯鏁版嵁 async getStandardTree() { - const { data: standard } = await getStandardsList()// 鑾峰彇鎵�鏈夋爣鍑� - // console.log(standard)// 鑾峰彇鎵�鏈夋爣鍑� - this.standardTree = standard.map(item => { - item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name })) - return { ...item, label: item.name, children: item.serialNumber } - }) - // console.log(this.standardTree) + const { data } = await getMaterialList(); + console.log(data); + this.standardTree = data.map((item) => { + let name = null; + switch (item.type) { + case 1: + name = "鍘熸潗鏂�"; + break; + case 2: + name = "鍗婃垚鍝�"; + break; + case 3: + name = "鎴愬搧"; + break; + } + return { + ...item, + id: item.type, + name, + }; + }); + console.log(this.standardTree); + // formTypeOptions + // 榛樿绗竴涓洓绾ц妭鐐规悳绱紝鏂板閰嶇疆椤� + const treeOptions = JSON.parse(JSON.stringify(this.standardTree)); + this.getDefault(treeOptions, 0); + console.log(treeOptions); + this.formTypeOptions = treeOptions; + this.$nextTick().then(() => { + const firstNode = document.querySelector( + ".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node" + ); + firstNode.click(); + // console.log(firstNode) + }); + }, + getDefault(arr, index) { + for (const item of arr) { + if (item.children && item.children?.length > 0) { + // 鏈夊瓙鑺傜偣 + this.getDefault(item.children, index + 1); + if (index === 2) { + item.children = null; + } + } + // else { + // // if ('children' in item) { + // // // + // // } else { + // // // console.log(index, item) + // // } + // } + } }, // 鐐瑰嚮bom鏍戣妭鐐规柟娉� async nodeClick(data, node, element) { - console.log(data) + // console.log('data', data) // console.log('children' in data) - if (!('children' in data)) { - // console.log('鐐瑰嚮瀛愯妭鐐�', data) - this.selectNode = data - await this.getSpecifications(data) - return + // 鏄瓙鑺傜偣 + if (node.level === 4) { + console.log(data, node); + // 瀛樹笅閫変腑鑺傜偣 + this.selectData = data; + // eslint-disable-next-line prefer-const + this.getTableByClick(data); } - this.selectNode = data - await this.getSerialNumber(data) + if (!("children" in data)) { + return; + } + }, + async getTableByClick(data) { + // eslint-disable-next-line prefer-const + let { + data: { row, total }, + } = await getProductList({ + pageNo: this.pageParams.pageNo, + pageSize: this.pageParams.pageSize, + specificationsId: data.id, + }); + // console.log(row) + this.pageParams.total = total; + row = row.map((item, index) => ({ ...item, index })); + for (const item of row) { + if (item.children) { + const res = await getProductSonList({ fatherName: item.father }); + item.children = res.data; + item.id = item.father; + } + } + this.tableData = row; }, specificationDetails(row) { // 璺宠浆浜у搧瑙勬牸璇︽儏椤� - console.log(row) - this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`) - }, - // 鑾峰彇鎵�鏈夋爣鍑唗able - async getAllStandard() { - // console.log(this.pageParams) - const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams }) - console.log('寰楀埌鎵�鏈夋爣鍑�==>', row) - this.pageParams.total = total - this.tableData = row - this.tablespecifications = [ - { - prop: 'name', - label: '鏍囧噯鍚嶇О', - minWidth: '150px' - }, - { - prop: 'eng_name', - label: '鏍囧噯鑻辨枃鍚嶇О', - minWidth: '150px' - }, - { - prop: 'createTime', - label: '鍒涘缓鏃堕棿', - minWidth: '150px' - } - ] - this.showTableCurrent = 0 - }, - // 鑾峰彇瀵瑰簲鍨嬪彿涓嬬殑鎵�鏈夎鏍� - async getSerialNumber(data) { - const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams }) - console.log('鐐瑰嚮鐖惰妭鐐�', row)// 鏍规嵁鏍囧噯鑾峰彇瀵瑰簲鏍囧噯涓嬬殑瑙勬牸 - this.tableData = row - this.pageParams.total = total - this.tablespecifications = [ - { - prop: 'name', - label: '鍨嬪彿鍚嶇О', - minWidth: '150px' - } - ] - this.showTableCurrent = 1 - }, - // 鑾峰彇鏍囧噯涓嬪搴旂殑鎵�鏈夊瀷鍙� - async getSpecifications(data) { - const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams }) - console.log(row) - this.tableData = row - this.pageParams.total = total - this.tablespecifications = [ - { - prop: 'name', - label: '浜у搧鍚嶇О', - minWidth: '150px' - }, - { - prop: 'username', - label: '鏇存柊浜�', - minWidth: '100px' - }, - { - prop: 'updateTime', - label: '鏇存柊鏃堕棿', - minWidth: '150px' - }, - { - prop: 'vel', - label: '鐗堟湰', - minWidth: '150px' - } - ] - this.showTableCurrent = 2 - }, - // 鍒嗛〉鏉′欢鏀瑰彉鏃跺垽鏂渶瑕佸垎椤垫煡璇㈢殑鏂规硶 - judgment() { - switch (this.showTableCurrent) { - case 0: - this.getAllStandard() - break - case 1: - this.getSerialNumber(this.selectNode) - break - case 2: - this.getSpecifications(this.selectNode) - break - } + this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`); }, handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉) - this.pageParams.pageSize = val - this.judgment() + console.log(`姣忛〉 ${val} 鏉); + this.pageParams.pageSize = val; + this.getTableByClick(this.selectData); }, handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`) - this.pageParams.pageNo = val - this.judgment() - } - } -} + console.log(`褰撳墠椤�: ${val}`); + this.pageParams.pageNo = val; + this.getTableByClick(this.selectData); + }, + // 鏌ヨ鎸夐挳 + filteredTableData() { + this.oldtableData = this.tableData; + // 鏍规嵁杈撳叆鐨勫叧閿瓧寰楀埌杩囨护鍚庣殑鏁版嵁锛屽鏋滄湁灏辨妸杩囨护鍚庣殑鏁版嵁灞曠ず鍦ㄩ〉闈笂 + const filteredtabledata = this.tableData.filter((item) => { + return item.name.includes(this.searchData.keyword); + }); + // console.log('filteredtabledata', filteredtabledata) + this.tableData = filteredtabledata; + }, + // 閲嶇疆鎸夐挳 + resetBtn() { + this.searchData.keyword = ""; + this.tableData = this.oldtableData; + }, + renderContent(h, { node, data, store }) { + // console.log('data', data) + // console.log('node', node) + // 鍒ゆ柇鏄惁鏄埗鑺傜偣鎴栨枃浠跺す + const isFolder = "children" in data; + return ( + <span class="tree-node"> + {isFolder ? ( + <i + class={ + node.expanded + ? "el-icon-folder-opened blue-folder" + : "el-icon-folder blue-folder" + } + ></i> + ) : ( + <i class="el-icon-document blue-folder"></i> + )} + <div class="tree-lable"> + [{node.level}] {data.name} + </div> + </span> + ); + }, + async subAddTreeForm() { + this.addTreeFormVisible = false; + console.log(this.addTreeForm.addTypeArr.length); + let res = null; + try { + switch (this.addTreeForm.addTypeArr.length) { + case 1: + console.log(this.addTreeForm); + res = await addMaterial({ + ...this.addTreeForm, + type: this.addTreeForm.addTypeArr.pop(), + }); + break; + case 2: + console.log(this.addTreeForm); + res = await addStandards({ + ...this.addTreeForm, + materialId: this.addTreeForm.addTypeArr.pop(), + }); + break; + case 3: + console.log(this.addTreeForm); + res = await addSpecifications({ + ...this.addTreeForm, + standardId: this.addTreeForm.addTypeArr.pop(), + }); + break; + } + } catch (error) { + this.$message.error("娣诲姞澶辫触"); + } + + console.log(res); + this.$message.success("娣诲姞鎴愬姛"); + this.addTreeForm = {}; + this.getStandardTree(); + this.getTableByClick(this.selectData); + }, + changeCascader(data) { + console.log(data); + this.addTreeForm.addTypeArr = data; + }, + closeAddTreeForm() { + this.addTreeForm = { + addTypeArr: [], + }; + console.log(this.addTreeForm); + }, + /** 琛ㄦ牸鏌愯鐐瑰嚮浜嬩欢 */ + // handleRowClick(row, column, event) { + // // 鍒ゆ柇褰撳墠琛屾槸鍚︽湁瀛愰泦锛岃嫢娌℃湁鍒欑粨鏉熷鐞� + // // console.log(row) + // if (!row.children) return + // this.$refs.tableData.toggleRowExpansion(row) + // } + selectProductModelTable() { + selectproductModelApi(this.params).then((res) => { + res.data.forEach((i) => { + if (i.name === undefined) { + i.name = i.children[0].name; + i.unit = i.children[0].unit; + i.id = i.children[0].id; + i.edit = true; + delete i.children; + } + }); + this.tableData = res.data; + this.selectDataList(); + }); + }, + selectDataList() { + this.tableData.forEach((a) => { + a.code = "[1]"; + if (a.children != undefined) { + a.children.forEach((b) => { + b.code = "[2]"; + }); + } + }); + }, + // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 + // 鍏ㄩ��/鍙栨秷閫夋搷浣� + selectAll(val) { + this.isAllSelect = !this.isAllSelect; + let data = this.tableData; + this.toggleSelect(data, this.isAllSelect, "all"); + // 鑷畾涔� + if (this.isAllSelect) { + val.forEach((i) => { + let isExist = false; + this.deleteList.findIndex((c) => { + if (c === i.id) { + isExist = true; + } + }); + if (!isExist && i.id !== undefined) { + this.deleteList.push(i.id); + } + }); + } else { + this.deleteList.splice(0, this.deleteList.length); + } + // 鑷畾涔夌粨鏉� + }, + //閫夋嫨鏌愯 + selectTr(selection, row) { + this.$set(row, "isChecked", !row.isChecked); + this.$nextTick(() => { + this.isAllSelect = row.isChecked; + this.toggleSelect(row, row.isChecked, "tr"); + }); + if (row.isChecked === true) { + this.deleteList.push(row.id); + } else if (row.isChecked === false) { + this.deleteList.findIndex((c, index) => { + if (c === row.id) { + this.deleteList.splice(index, 1); + return; + } + }); + } + console.log(`output->this.deleteList`, this.deleteList); + }, + //閫掑綊瀛愮骇 + toggleSelect(data, flag, type) { + if (type === "all") { + if (data.length > 0) { + data.forEach((item) => { + this.toggleSelection(item, flag); + if (item.children && item.children.length > 0) { + this.toggleSelect(item.children, flag, type); + } + }); + } + } else { + if (data.children && data.children.length > 0) { + data.children.forEach((item) => { + item.isChecked = !item.isChecked; + this.$refs.multipleTable.toggleRowSelection(item, flag); + this.toggleSelect(item, flag, type); + }); + } + } + }, + //鏀瑰彉閫変腑 + toggleSelection(row, flag) { + this.$set(row, "isChecked", flag); + this.$nextTick(() => { + if (flag) { + this.$refs.multipleTable.toggleRowSelection(row, flag); + } else { + this.$refs.multipleTable.clearSelection(); + } + }); + }, + // 琛ㄦ牸鏍戝叏閮ㄩ�変腑閰嶇疆 缁撴潫 + deleteListClick() { + deleteListApi(this.deleteList).then((res) => { + this.$message({ + message: res.message, + type: "success", + }); + }); + }, + }, +}; </script> <style lang="scss" scoped> - -.standard-library-main{ - width: 100%; +// el-table琛ㄦ牸瀵归綈 +::v-deep .el-table__row:not([class*="el-table__row--level-"]) { + td:nth-child(2) { + padding-left: 23px !important; + } +} +// .dialogform { +// transform: translate(-50%, -50%); +// top: 50% !important; +// left: 50% !important; +// width: 1000px; +// height: 800px; +// } +.standard-library-main { + width: 100vh; height: 100%; -// 椤甸潰涓績鍐呭鍖哄煙 - .content-main{ + // 椤甸潰涓績鍐呭鍖哄煙 + .content-main { display: flex; height: 100%; min-height: calc(100vh - 88px); + max-height: calc(100vh - 88px); padding: 15px; - >div{ + > div { padding: 20px; background: #fff; } - .library-bom{ - flex: 2; - margin-right: 12px; + .library-bom { + // padding-right: 10px; + width: 300px; + // height: 100%; + max-height: 100%; + // margin-right: 12px; + // overflow-y: scroll; .el-tree { - // margin-top: 12px; + // margin-top: + width: 100%; + ::v-deep .el-tree-node__content { + height: 24px !important; + font-size: 18px; + // display: inline-block !important; + padding: 2px; + // color: #333; + .tree-node { + display: flex; + align-items: center; + height: 20px; + } + .tree-lable { + height: 100%; + line-height: 23px; + font-size: 12px; + padding-left: 8px; + } + .blue-folder { + color: rgb(64, 158, 255); + } + } } // .el-tree { // margin-top: 12px; @@ -369,35 +663,51 @@ // } // } } - .library-table{ - flex: 8; + .library-table { + // height: 100%; + width: 170vh; + max-height: 100%; + // flex: 8; margin-left: 12px; display: flex; flex-direction: column; - - .table-header{ + // overflow-y: scroll; + .table-header { display: flex; justify-content: space-between; - .el-form-item{ + .el-form-item { margin-bottom: 30px !important; } } - .table-box{ - flex: 1; - background: #fff; - // padding: 20px 20px 10px 20px; + .table-box { + flex: 1; + background: #fff; + // padding: 20px 20px 10px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .el-table { + // flex: 1; + // max-height: 680px; + // overflow-y: scroll; + } + > div:nth-child(3) { + // height: 20px; display: flex; - flex-direction: column; - .el-table { - flex: 1; - } - >div:nth-child(2){ - display: flex; - justify-content: end; - margin: 10px 0; - } + justify-content: end; + margin: 10px 0; + } } } } + .addTree { + .el-form-item { + margin-bottom: 10px; + } + .el-cascader { + width: 100%; + } + } } </style> -- Gitblit v1.9.3