From 5aa3a9bdd9001e53f245efd40b0d39263caa4bfc Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期六, 19 十一月 2022 17:27:53 +0800 Subject: [PATCH] 数据管理页面添加,修改 --- src/views/datamanage/versionManage.vue | 705 +++++++++++++++++++++++++++++++++------------------------- 1 files changed, 400 insertions(+), 305 deletions(-) diff --git a/src/views/datamanage/versionManage.vue b/src/views/datamanage/versionManage.vue index 39c0286..96cd38e 100644 --- a/src/views/datamanage/versionManage.vue +++ b/src/views/datamanage/versionManage.vue @@ -1,5 +1,5 @@ <template> - <div class="authorityManagement_box"> + <div class="verSionBox"> <My-bread :list="[ `${$t('dataManage.dataManage')}`, @@ -7,45 +7,46 @@ ]" ></My-bread> <el-divider /> - <div class="searchComp"> - <el-form ref="ruleForm" :model="ruleForm" :inline="true"> - <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name"> - <el-input - v-model="ruleForm.name" - :placeholder="$t('common.pleaseInput')" - /> - </el-form-item> - <el-form-item> - <el-button - @click="onSubmit('ruleForm')" - icon="el-icon-search" - size="small" - >{{ $t("common.iquery") }}</el-button - > - <el-button - v-if="btnStatus.insert" - @click="InsertFormdialog = true" - icon="el-icon-plus" - size="small" - >{{ $t("common.append") }}</el-button - > - <el-button - @click="resetForm('ruleForm')" - icon="el-icon-delete" - size="small" - >{{ $t("common.empty") }}</el-button - > - </el-form-item> - </el-form> - </div> - <div class="bottom"> - <div class="leftTree"> + <div class="verSionContent"> + <div class="verSion_leftTree"> <ver-dir-tree></ver-dir-tree> </div> - <div class="rightTable"> - <div class="table_box"> - <el-table :data="tableData" stripe style="width: 100%" height="99%"> - <!-- <el-table-column type="selection" width="40" /> --> + <div class="verSion_rightContent"> + <el-form ref="ruleForm" :model="ruleForm" :inline="true"> + <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name"> + <el-input + v-model="ruleForm.name" + :placeholder="$t('common.pleaseInput')" + /> + </el-form-item> + <el-form-item> + <el-button + @click="onSubmit('ruleForm')" + icon="el-icon-search" + size="small" + class="primary" + >{{ $t('common.iquery') }}</el-button + > + <el-button + type="success" + v-if="btnStatus.insert" + @click="(InsertFormdialog = true), getSelectdirTab()" + icon="el-icon-plus" + size="small" + >{{ $t('common.append') }}</el-button + > + <el-button + type="info" + @click="resetForm('ruleForm')" + icon="el-icon-delete" + size="small" + >{{ $t('common.empty') }}</el-button + > + </el-form-item> + </el-form> + <el-divider class="eldivider" /> + <div style="height: 80%"> + <el-table :data="tableData" style="width: 100%" height="99%"> <el-table-column align="center" type="index" @@ -97,34 +98,165 @@ @click="handleEdit(scope.$index, scope.row)" type="warning" size="small" - >{{ $t("common.update") }}</el-button + >{{ $t('common.update') }}</el-button > <el-button v-if="btnStatus.delete" @click="handleDelete(scope.$index, scope.row)" type="danger" size="small" - >{{ $t("common.delete") }}</el-button + >{{ $t('common.delete') }}</el-button > </template> </el-table-column> </el-table> - </div> - <div - style="margin-top: 20px; margin-left: 200px" - class="pagination_box" - > - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="listData.pageIndex" - :page-sizes="[10, 20, 30, 40]" - :page-size="listData.pageSize" - layout="total, sizes, prev, pager, next, jumper" - :total="count" + <div + style="margin-top: 20px; margin-left: 200px" + class="pagination_box" > - </el-pagination> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="listData.pageIndex" + :page-sizes="[10, 20, 30, 40]" + :page-size="listData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="count" + > + </el-pagination> + </div> </div> + </div> + </div> + <el-dialog + :title="$t('dataManage.vmobj.editVersion')" + :visible.sync="dialogFormVisible" + > + <el-form :model="upform"> + <el-form-item + :label="$t('dataManage.vmobj.name')" + :label-width="formLabelWidth" + > + <el-input v-model="upform.name" autocomplete="off"></el-input> + </el-form-item> + <el-form-item + :label="$t('dataManage.vmobj.catalogue')" + :label-width="formLabelWidth" + > + <el-cascader + style="width: 300px" + v-model="upform.dirid" + :options="catalogOption" + @change="upCatalogChange" + :props="cascader" + ></el-cascader> + </el-form-item> + <el-form-item + :label="$t('dataManage.vmobj.describe')" + :label-width="formLabelWidth" + > + <el-input v-model="upform.descr" autocomplete="off"></el-input> + </el-form-item> + </el-form> + <div slot="footer" type="info" class="dialog-footer"> + <el-button @click="editFromDataClose">{{ + $t('common.close') + }}</el-button> + <el-button @click="editFromData" class="primary">{{ + $t('common.confirm') + }}</el-button> + </div> + </el-dialog> + + <el-dialog + :title="$t('dataManage.vmobj.addVersion')" + :visible.sync="InsertFormdialog" + width="30%" + > + <el-form :model="insertform"> + <el-form-item + :label="$t('dataManage.vmobj.name')" + :label-width="formLabelWidth" + > + <el-input + style="width: 300px" + v-model="insertform.name" + autocomplete="off" + ></el-input> + </el-form-item> + <el-form-item + :label="$t('dataManage.vmobj.catalogue')" + :label-width="formLabelWidth" + > + <el-cascader + style="width: 300px" + v-model="insertform.path" + :options="catalogOption" + @change="catalogChange" + :props="cascader" + ></el-cascader> + </el-form-item> + + <el-form-item + :label="$t('dataManage.vmobj.describe')" + :label-width="formLabelWidth" + > + <el-input + style="width: 300px" + v-model="insertform.descr" + autocomplete="off" + ></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="insertFromDataClose" type="info">{{ + $t('common.close') + }}</el-button> + <el-button @click="insertFromData" class="primary">{{ + $t('common.confirm') + }}</el-button> + </div> + </el-dialog> + <!-- <div class="searchComp"> + <el-form ref="ruleForm" :model="ruleForm" :inline="true"> + <el-form-item :label="$t('dataManage.vmobj.keyword')" prop="name"> + <el-input + v-model="ruleForm.name" + :placeholder="$t('common.pleaseInput')" + /> + </el-form-item> + <el-form-item> + <el-button + @click="onSubmit('ruleForm')" + icon="el-icon-search" + size="small" + >{{ $t('common.iquery') }}</el-button + > + <el-button + v-if="btnStatus.insert" + @click="InsertFormdialog = true" + icon="el-icon-plus" + size="small" + >{{ $t('common.append') }}</el-button + > + <el-button + @click="resetForm('ruleForm')" + icon="el-icon-delete" + size="small" + >{{ $t('common.empty') }}</el-button + > + </el-form-item> + </el-form> + </div> + <div class="bottom"> + <div class="leftTree"> + <ver-dir-tree></ver-dir-tree> + </div> + <div class="rightTable"> + <div class="table_box"> + + </div> + </div> </div> <div class="infoBox" v-show="showinfoBox"> @@ -152,100 +284,20 @@ </div> </el-card> </div> - <el-dialog - :title="$t('dataManage.vmobj.editVersion')" - :visible.sync="dialogFormVisible" - > - <el-form :model="upform"> - <el-form-item - :label="$t('dataManage.vmobj.name')" - :label-width="formLabelWidth" - > - <el-input v-model="upform.name" autocomplete="off"></el-input> - </el-form-item> - <el-form-item - :label="$t('dataManage.vmobj.catalogue')" - :label-width="formLabelWidth" - > - <el-input - v-model="upform.depName" - autocomplete="off" - disabled - ></el-input> - <el-button style="margin-left: 20px" @click="showVerTree(2)">{{ - $t("common.choose") - }}</el-button> - </el-form-item> - <el-form-item - :label="$t('dataManage.vmobj.describe')" - :label-width="formLabelWidth" - > - <el-input v-model="upform.descr" autocomplete="off"></el-input> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="editFromDataClose">{{ - $t("common.close") - }}</el-button> - <el-button @click="editFromData" type="primary">{{ - $t("common.confirm") - }}</el-button> - </div> - </el-dialog> - <el-dialog - :title="$t('dataManage.vmobj.addVersion')" - :visible.sync="InsertFormdialog" - > - <el-form :model="insertform"> - <el-form-item - :label="$t('dataManage.vmobj.name')" - :label-width="formLabelWidth" - > - <el-input v-model="insertform.name" autocomplete="off"></el-input> - </el-form-item> - <el-form-item - :label="$t('dataManage.vmobj.catalogue')" - :label-width="formLabelWidth" - > - <el-input - v-model="insertform.path" - autocomplete="off" - disabled - ></el-input> - <el-button style="margin-left: 20px" @click="showVerTree(3)">{{ - $t("common.choose") - }}</el-button> - </el-form-item> - <el-form-item - :label="$t('dataManage.vmobj.describe')" - :label-width="formLabelWidth" - > - <el-input v-model="insertform.descr" autocomplete="off"></el-input> - </el-form-item> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button @click="insertFromDataClose">{{ - $t("common.close") - }}</el-button> - <el-button @click="insertFromData" type="primary">{{ - $t("common.confirm") - }}</el-button> - </div> - </el-dialog> <div class="leftTrees" v-if="showCata"> <div class="treeBox"> <ver-dir-trees></ver-dir-trees> </div> <div class="btnBox"> <el-button type="primary" size="small" @click="selectCataName">{{ - $t("common.confirm") + $t('common.confirm') }}</el-button> <el-button type="primary" size="small" @click="showCata = false">{{ - $t("common.close") + $t('common.close') }}</el-button> </div> - </div> + </div> --> </div> </template> @@ -255,18 +307,20 @@ insertVersion, deleteVersion, updateVersion, -} from "../../api/api"; -import verDirTree from "./verDirTree.vue"; -import MyBread from "../../components/MyBread.vue"; -import verDirTrees from "./verDirTrees.vue"; -import moment from "moment"; + selectdirTab, +} from '../../api/api'; +import verDirTree from './verDirTree.vue'; +import MyBread from '../../components/MyBread.vue'; +import verDirTrees from './verDirTrees.vue'; +import moment from 'moment'; export default { - name: "versionManage", + name: 'versionManage', components: { MyBread, verDirTree, verDirTrees }, data() { return { + catalogOption: [], showCata: false, - formLabelWidth: "100px", + formLabelWidth: '100px', dialogFormVisible: false, InsertFormdialog: false, showinfoBox: false, @@ -282,6 +336,13 @@ depName: null, pageIndex: 1, pageSize: 10, + }, + cascader: { + label: 'name', + value: 'id', + children: 'children', + checkStrictly: true, + emitPath: false, }, btnStatus: { select: false, @@ -302,7 +363,35 @@ return this.$store.state.cataNode.id; }, }, + methods: { + //鐩綍鍒囨崲 + catalogChange(value) { + this.insertform.dirid = value; + }, + upCatalogChange(val) { + this.upform.dirid == value; + }, + //鐩綍鍒楄〃鑾峰彇 + async getSelectdirTab() { + const res = await selectdirTab(); + if (res.code != 200) { + this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触'); + return; + } + this.insertform.path = 1; + this.catalogOption = this.treeData(res.result); + }, + //鏍戝垪琛ㄧ敓鎴� + treeData(source) { + let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 + return cloneData.filter((father) => { + // 寰幆鎵�鏈夐」 + let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 + branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� + }); + }, showPermsBtn() { let currentPerms = this.$store.state.currentPerms; let permsEntity = this.$store.state.permsEntity; @@ -313,14 +402,14 @@ resetForm() { this.ruleForm = {}; this.$store.state.verCateNode = {}; - this.$bus.$emit("clearTressLabel", true); + this.$bus.$emit('clearTressLabel', true); this.getRoleTabelData(); }, onSubmit() { this.getRoleTabelData(); }, async getRoleTabelData() { - if (this.listData.tab == "") { + if (this.listData.tab == '') { delete this.listData.tab; } @@ -329,7 +418,7 @@ const data = await select_Ver_ByPageAndCount(this.listData); if (data.code != 200) { - this.$message.error("鍒楄〃璋冪敤澶辫触"); + this.$message.error('鍒楄〃璋冪敤澶辫触'); } this.tableData = data.result; this.count = data.count; @@ -363,8 +452,8 @@ async editFromData() { if (this.upform.depName == null) { this.$message({ - message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�", - type: "warning", + message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�', + type: 'warning', }); return; } @@ -373,14 +462,14 @@ this.dialogFormVisible = false; this.upform = {}; this.$message({ - message: "淇敼鎴愬姛锛�", - type: "success", + message: '淇敼鎴愬姛锛�', + type: 'success', }); this.getRoleTabelData(); } else { this.$message({ - message: "淇敼澶辫触锛�", - type: "warning", + message: '淇敼澶辫触锛�', + type: 'warning', }); } }, @@ -391,8 +480,8 @@ async insertFromData() { if (this.insertform.dirid == null) { this.$message({ - message: "璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�", - type: "warning", + message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�', + type: 'warning', }); return; } @@ -401,37 +490,37 @@ this.InsertFormdialog = false; this.insertform = {}; this.$message({ - message: "娣诲姞鎴愬姛锛�", - type: "success", + message: '娣诲姞鎴愬姛锛�', + type: 'success', }); this.getRoleTabelData(); } else { this.$message({ - message: "娣诲姞澶辫触锛�", - type: "warning", + message: '娣诲姞澶辫触锛�', + type: 'warning', }); } }, formatTime(row, column) { let date = row[column.property]; if (date === undefined || date === null) { - return ""; + return ''; } - return moment(parseInt(date)).format("YYYY-MM-DD HH:mm:ss"); + return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss'); }, async handleDelete(index, row) { const data = await deleteVersion(row.id); if (data.code == 200) { this.InsertFormdialog = false; this.$message({ - message: "鍒犻櫎鎴愬姛锛�", - type: "success", + message: '鍒犻櫎鎴愬姛锛�', + type: 'success', }); this.getRoleTabelData(); } else { this.$message({ - message: "鍒犻櫎澶辫触锛�", - type: "warning", + message: '鍒犻櫎澶辫触锛�', + type: 'warning', }); } }, @@ -450,159 +539,165 @@ </script> <style lang="less" scoped> //@import url(); 寮曞叆鍏叡css绫� -.authorityManagement_box { - background: rgb(240, 242, 245); - border-radius: 10px; - height: 100%; - padding: 10px; +.verSionBox { + height: 81%; + width: 97%; + position: absolute; box-sizing: border-box; - .el-input { - width: 300px !important; - } - .leftTrees { - position: absolute; - z-index: 9999; - top: 9%; - left: 37%; - width: 400px; - height: 600px; - background: #f0f2f5; - border: 1px solid #000; - .treeBox { - height: 550px; - overflow: auto; - /deep/ .el-tree-node__content:hover { - background-color: rgb(153, 153, 153); - } - } - .btnBox { - width: 123px; - margin: 10px auto 0; - // background-color: red; - } - } - .searchComp { - margin: 10px auto; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - .el-form-item { - margin: 5px; - } - } - .bottom { + .verSionContent { width: 100%; - height: 85%; + height: 92%; display: flex; - .leftTree { - width: 344px; - background: #f4f8ff; - border-radius: 10px; - overflow: auto; + justify-content: space-between; + .verSion_leftTree { + width: 15%; + height: 95%; + border: 1px solid white; + border-radius: 5px; + padding: 1%; + max-height: 670px; + overflow-y: auto; } - .rightTable { - height: 100%; - width: 77.8%; - // background-color: red; - .table_box { - width: 100%; - height: 93%; - margin: 0 auto; - overflow: auto; - background: #fff; - // .el-table { - // height: 100%; - // } - // .el-table /deep/ .el-table__header-wrapper tr th { - // background-color: rgb(255, 255, 255) !important; - // color: rgb(0, 0, 0); - // } - // // 淇敼姣忚鏍峰紡锛� - // .el-table /deep/ .el-table__row { - // background-color: rgba(255, 255, 255) !important; - // color: rgb(0, 0, 0); - // } - // .el-table /deep/ .el-table__body tr.current-row > td { - // background-color: rgb(211, 211, 211) !important; - // } - // .el-table /deep/ .el-table__body tr:hover > td { - // background-color: rgb(211, 211, 211) !important; - // } - // // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細 - // .el-table /deep/ td, - // .el-table /deep/ th.is-leaf { - // border-bottom: 1px solid #eee; - // border-right: 1px solid #eee; - // } - // .el-table /deep/ .el-table__cell { - // padding: 0; - // } - // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細 - // .el-table /deep/ .el-table__header tr, - // .el-table /deep/ .el-table__header th { - // height: 40px; - // } - // .el-table__body tr, - // .el-table__body td { - // height: 40px; - // padding: 0; - // } - // 璁剧疆琛ㄦ牸杈规棰滆壊锛� - - .el-table--border::after, - .el-table--group::after { - width: 0; - } - .el-table::before { - height: 0; - } - // a { - // color: #000; - // } - } + .verSion_rightContent { + width: 80%; + height: 95%; + border: 1px solid white; + border-radius: 5px; + padding: 1%; + overflow-y: auto; } } - .infoBox { - width: 500px; - border: 1px solid #eee; - position: absolute; - z-index: 100; - top: 15%; - right: 25%; - background-color: #fff; - .el-card { - background-color: transparent; - span { - font-size: 16px; - font-weight: 600; - } + .eldivider { + margin-top: 0px; + } + .primary { + background: #409eff; + border: #409eff; + color: white; + } + /deep/ .el-select .el-input__inner { + border-color: #fff !important; + } + .pagination_box { + margin-top: 20px; + /deep/.el-input__inner { + background-color: transparent !important; + border: 1px solid; + color: white; } - .contentBox { - margin: 0 aotu 10px; - p { - // background-color: #bfa; - // margin-bottom: 10px; - font-size: 14px; - } + /deep/.el-pagination__total { + color: white; + } + /deep/.el-pagination__jump { + color: white; + } + /deep/.el-pager li.active { + color: #409eff; + } + /deep/.el-pager li { + color: white; + background: transparent; + } + /deep/.el-pager li { + color: white; + } + /deep/.btn-prev { + background: transparent; + } + /deep/.btn-next { + background: transparent; + } + /deep/.btn-next i { + color: white; + } + /deep/.btn-prev i { + color: white; + } + } + + /deep/.el-form-item__label { + color: white; + } + // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱 + /deep/.el-input__inner { + background-color: transparent !important ; + color: #fff; + border: 1px solid; + } + /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/ + /deep/ .el-table { + background-color: transparent; + + th, + td { + background-color: transparent; + } + .el-table__expanded-cell { + background-color: transparent !important; + } + + // 琛ㄥご鑳屾櫙鑹� + th.el-table__cell { + background-color: #303030; + color: #fff; + } + tr > td { + background-color: #303030; + color: #fff; + } + + // hover鏁堟灉 + tr:hover > td { + background-color: rgba(255, 255, 255, 0.3) !important; + } + + tbody tr:hover { + background-color: rgba(255, 255, 255, 0.3) !important; + // text-align: center; + } + + // 婊氬姩鏉″楂� + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + /*婊氬姩鏉″搴�*/ + height: 5px; + /*婊氬姩鏉¢珮搴�*/ + } + /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-track { + box-shadow: 0px 1px 3px #216fe6 inset; + /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/ + border-radius: 10px; + } + + /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-thumb { + box-shadow: 0px 1px 3px #216fe6 inset; + border-radius: 6px; + background-color: #216fe6; } } /deep/ .el-dialog { - width: 620px !important; - margin-top: 10vh !important; + background: #303030; } - - /deep/.el-dialog .el-input__inner { - width: 300px; + /deep/.el-range-editor.is-active, + .el-range-editor.is-active:hover, + .el-select .el-input.is-focus .el-input__inner { + border: 1px solid; } - /deep/ .el-dialog__body { - padding: 0px 30px; + /deep/.el-dialog__title { + color: white; } - /deep/ .el-dialog__footer { - padding-top: 0 !important; - width: 600px; - display: flex; - margin: 0 auto; - justify-content: center; + /deep/ .el-select .el-input__inner { + border-color: #fff !important; + } + /deep/.el-cascader .el-input__inner { + border-color: #fff !important; } } </style> -- Gitblit v1.9.3