<!--
* @Description: workFrame左侧菜单列表-普通
* @Autor: renchao
* @LastEditTime: 2023-07-17 16:16:13
-->
<template>
<div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
<div v-if="this.isShowdrawer">
<el-menu
@select="djbClick"
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 :default-active="activeIndex" @select="unitClick">
<el-menu-item
v-for="(item, index) in supplementarylist"
:index="index.toString()"
:key="index">
<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,
//受理申请标识码
bdcdyid: this.$route.query.bdcdyid,
//当前流程所在环节
bdcdyh: this.$route.query.bdcdyh,
qllx: this.$route.query.qllx,
// 默认选中
activeIndex: "0",
clickindex:"",
// 折叠
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.loadBdcdylist();
},
computed: {
// ...mapGetters(["isRefresh"]),
},
watch: {
// isRefresh: {
// handler(newVal, oldVal) {
// if (newVal) this.loadBdcdylist();
// },
// immediate: true,
// },
},
methods: {
//读取申请单元信息
/**
* @description: 读取申请单元信息
* @author: renchao
*/
loadBdcdylist () {
var formdata = new FormData();
if (this.bsmSlsq) {
formdata.append("bsmSlsq", this.bsmSlsq);
formdata.append("bestepid", this.bestepid);
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) {
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(index)
}
})
if(row=="change"){
this.unitClick(this.clickindex)
}
}else{
if (this.supplementarylist.length) {
this.unitClick(0)
this.activeIndex = "0"
} else {
this.loadBdcdylist()
// this.$emit("getCurrentSelectProps", this.currentSelectProps);
}
}
});
},
/**
* @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.clickindex=index
this.currentSelectProps = this.supplementarylist[index];
this.$emit("getCurrentSelectProps", this.currentSelectProps);
},
//登记簿点击事件
/**
* @description: 登记簿点击事件
* @author: renchao
*/
djbClick () {
this.loadBdcdylist();
},
// 删除补录记录
/**
* @description: 删除补录记录
* @param {*} row
* @author: renchao
*/
handleDel (row) {
this.$confirm("此操作将永久删除该条补录记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteRepairRecord(row.bsmRepair).then((res) => {
this.$message({
type: "success",
message: "删除成功!",
});
this.$nextTick(() => {
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>