<!-- * @Description: workFrame左侧菜单列表-普通 * @Autor: renchao * @LastEditTime: 2023-10-31 10:42:21 --> <template> <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }"> <div v-if="this.isShowdrawer"> <el-menu @select="djbClick" :default-active="activeIndex" class="title-batch"> <el-menu-item index="-1" key="-1" class="menus"> <div>登记簿</div> </el-menu-item> </el-menu> <div class="blxx"> <el-menu @select="blxxClick" class="title-batch"> <el-menu-item index="-1" key="-1" class="menus"> <div>补录信息</div> </el-menu-item> </el-menu> <el-menu v-model="activeIndex" :default-active="activeIndex" @select="unitClick"> <el-menu-item v-for="(item, index) in supplementarylist" :index="index.toString()" :key="index"> <p class="dot" v-if="item.isSave == '0'"></p> <div> <p v-if="item.operate=='D'">{{ item.qllxmc }} <span class="tpcolor">(删除)</span></p> <p v-else>{{ item.qllxmc }} <span class="tpcolor">({{ item.operate=="U"?"编辑":"新增" }})</span></p> <div class="ywh">(业务号:{{ item.blywh}})</div> </div> <i class="el-icon-delete" @click.stop="handleDel(item)" v-if="delel"></i> </el-menu-item> </el-menu> </div> </div> <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click=" () => { this.isShowdrawer = !this.isShowdrawer; } "></div> <div class="map-drawer-expand map-drawer" v-else @click=" () => { this.isShowdrawer = !this.isShowdrawer; } "></div> </div> </template> <script> import { mapGetters } from "vuex"; import { leftMenu, deleteSlbdcdy } from "@/api/workFlow.js"; import { deleteRepairRecord } from "@/api/djbRepair.js"; import { leftMenubl } from "@/api/djbRepair.js"; import { getBdcqljqtsx } from "@/api/djbDetail.js"; import { loadTreeData, getNode } from "./djbFrameData.js"; export default { data () { return { supplementarylist: [], //受理申请标识码 bsmSlsq: this.$route.query.bsmSlsq, //当前流程所在环节 bestepid: this.$route.query.bestepid, bsmBusiness: this.$route.query.bsmBusiness, //受理申请标识码 bdcdyid: this.$route.query.bdcdyid, //当前流程所在环节 bdcdyh: this.$route.query.bdcdyh, qllx: this.$route.query.qllx, // 默认选中 activeIndex: "0", // 折叠 isShowdrawer: true, delel: true, //批量操作按钮名称 batchButtonName: "", //左侧菜单数据集合 unitData: [], // 设置表单传递数据 currentSelectProps: {}, //左侧树形结构数据 treedata: [], defaultNode: "", defaultProps: { value: "id", children: "children", label: "label", }, showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断 }; }, mounted () { this.delel = this.$parent.isEdit this.djbClick(); }, beforeDestroy () { sessionStorage.removeItem('keyPath') }, methods: { /** * @description: 读取申请单元信息 * @author: renchao */ loadBdcdylist () { var formdata = new FormData(); if (this.bsmSlsq) { formdata.append("bsmSlsq", this.bsmSlsq); formdata.append("bestepid", this.bestepid ? this.bestepid : ''); formdata.append("bsmBusiness", this.bsmBusiness ? this.bsmBusiness : ''); leftMenu(formdata).then((res) => { if (res.code === 200 && res.result) { this.currentSelectProps = res.result[0]; this.$emit("getCurrentSelectProps", this.currentSelectProps); } }); } }, /** * @description: 获取右侧菜单 * @param {*} row * @author: renchao */ getleftMenubl (row) { let that = this leftMenubl(this.bsmSlsq).then((res) => { this.supplementarylist = res.result; if (row) { this.supplementarylist.forEach((item, index) => { if (item.bsmRepair == row.bsmRepair) { this.activeIndex = index.toString() this.unitClick(this.activeIndex) } }) // if (row == "change") { // if (sessionStorage.getItem('keyPath') && sessionStorage.getItem('keyPath') >= 0) { // that.unitClick(sessionStorage.getItem('keyPath') - 0) // that.activeIndex = sessionStorage.getItem('keyPath') // } else { // that.unitClick(0) // that.activeIndex = "0" // } // } } else { if (this.supplementarylist.length) { if (sessionStorage.getItem('keyPath') && sessionStorage.getItem('keyPath') >= 0) { that.unitClick(sessionStorage.getItem('keyPath') - 0) that.activeIndex = sessionStorage.getItem('keyPath') } else { that.loadBdcdylist() that.activeIndex = "-1"; // that.unitClick(0) // that.activeIndex = "0" } } else { // this.loadBdcdylist() } } }) }, /** * @description: handleNodeClick * @param {*} data * @param {*} node * @param {*} elem * @author: renchao */ handleNodeClick (data, node, elem) { this.$parent.loadComponent(this.currentSelectProps, data); this.$parent.tabset(); }, /** * @description: 申请单元点击事件 * @param {*} index * @author: renchao */ unitClick (index) { this.activeIndex = index.toString(); sessionStorage.setItem('keyPath', this.activeIndex); this.currentSelectProps = this.supplementarylist[index]; window.currentSelect = this.supplementarylist[index] this.$emit("getCurrentSelectProps", this.currentSelectProps); }, /** * @description: 登记簿点击事件 * @author: renchao */ djbClick () { this.loadBdcdylist() window.currentSelect = {} this.activeIndex = "-1"; sessionStorage.removeItem('keyPath') }, /** * @description: 删除补录记录 * @param {*} row * @author: renchao */ handleDel (row) { let that = this this.$confirm("此操作将永久删除该条补录记录, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { deleteRepairRecord(row.bsmRepair).then((res) => { this.$message({ type: "success", message: "删除成功!", }); this.$nextTick(() => { if (that.activeIndex != '-1') { this.activeIndex = "0" sessionStorage.setItem('keyPath', '0'); } this.getleftMenubl(); if (!this.supplementarylist.length) { getdjblist() } }) }) }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }) }) }, /** * @description: 补录信息点击事件默认展示第一条补录记录 * @author: renchao */ blxxClick () { if (this.supplementarylist.length) { this.unitClick(0) } } } } </script> <style scoped lang="scss"> @import "~@/styles/mixin.scss"; @import "../../workFrame.scss"; .leftmenu ul { height: calc(100vh - 120px); } /deep/.rollTable { height: calc(100vh - 240px) !important; } .content { width: 100%; height: 100%; display: flex; .left { width: 256px; height: 704px; background-color: #f5f5f5; color: #333; border: 1px solid rgb(228, 228, 228); } .right { width: calc(100% - 256px); height: 704px; // overflow-y: scroll; overflow: auto; background-color: #f5f5f5; border: 1px solid rgb(228, 228, 228); } } /deep/ .expanded.el-tree-node__expand-icon, /deep/ .el-tree-node__expand-icon { visibility: hidden; } /deep/ .el-tree-node__content { border: 1px solid rgb(228, 228, 228); height: 45px; } /deep/ .el-tree-node:focus > .el-tree-node__content { background-color: #f5f5f5; color: #0079fe; border-right: 4px solid #0079fe; } /deep/.el-tree-node { white-space: pre-wrap; } /deep/ .is-current > .el-tree-node__content { background-color: #f5f5f5; color: #0079fe; border-right: 4px solid #0079fe; } .menus { background-color: #e7f4fe; div { font-size: 16px; font-weight: 600; } } .blxx { .el-menu-item { display: flex; justify-content: space-between; } border: #b0d9f8 solid 1px; .tpcolor { color: red; line-height: 22px; } .ywh { font-size: 12px; } .el-icon-delete { margin-top: 10px; margin-right: 3px; // background-color: saddlebrown; height: 27px; float: left; } .el-icon-delete:hover { color: #0079fe; } } </style>