You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
778 lines
20 KiB
778 lines
20 KiB
<template>
|
|
<diV class="child-container">
|
|
<div
|
|
class="child-container"
|
|
:class="[showBack ? 'changeMgPx' : '']"
|
|
v-if="inspectorId"
|
|
>
|
|
<!-- 左边菜单导航 -->
|
|
<div class="leftAside">
|
|
<div class="asideHeader">
|
|
菜单导航
|
|
<footer></footer>
|
|
</div>
|
|
<div class="asideItemBox">
|
|
<div
|
|
v-for="(item, index) in asideDate"
|
|
:key="index"
|
|
id="asideFooter"
|
|
@click="handleIndex(index)"
|
|
:class="[changeNum == index ? 'activeColor' : '']"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边个人信息栏 -->
|
|
<div class="rightBox" ref="rightBox" @scroll="handScroll">
|
|
<!-- 个人情况统计 -->
|
|
<div class="userInfo" ref="userInfo">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>个人情况统计</div>
|
|
</div>
|
|
<div class="userOption">
|
|
<div class="absiluteBox" v-if="showBack">
|
|
<el-button size="small" @click="backIndex()">返回</el-button>
|
|
</div>
|
|
<el-date-picker
|
|
v-model="yearParams.begainYear"
|
|
type="year"
|
|
placeholder="选择开始年"
|
|
value-format="yyyy"
|
|
>
|
|
</el-date-picker>
|
|
<span class="year-middle">至</span>
|
|
<el-date-picker
|
|
v-model="yearParams.endBegainYear"
|
|
type="year"
|
|
placeholder="选择结束年"
|
|
@change="changeYear"
|
|
value-format="yyyy"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<infoMsg ref="infoMsg"></infoMsg>
|
|
</div>
|
|
<!-- 基础信息 -->
|
|
<div class="baseMsg" style="margin-top: 8px" ref="baseMsg">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>基础信息</div>
|
|
</div>
|
|
</div>
|
|
<div class="baseMsgFooterBox">
|
|
<baseMsg :inspectorId="inspectorId"></baseMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 教育背景 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="schoolBack">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>教育背景（从大学开始填写）</div>
|
|
</div>
|
|
<div @click.stop="addBackground()">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:educationBacAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<schoolMsg ref="teach" :inspectorId="inspectorId"></schoolMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 聘任信息 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="toAppointment">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>聘任信息</div>
|
|
</div>
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-edit-outline"
|
|
size="mini"
|
|
@click="exportAppointmentMsg()"
|
|
v-hasPermi="['inspector:global:trainExport']"
|
|
>导出</el-button
|
|
>
|
|
<!-- <div @click.stop="addBackground()">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:educationBacAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div> -->
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<appointmentMsg
|
|
ref="appointmentMsgRefs"
|
|
:inspectorId="inspectorId"
|
|
></appointmentMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 工作经历 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="work">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>工作经历</div>
|
|
</div>
|
|
<div @click="addWork()">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:workAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<work ref="workA" :inspectorId="inspectorId"></work>
|
|
</div>
|
|
</div>
|
|
<!-- 检查员特质 -->
|
|
<div class="traits" style="margin-top: 8px" ref="traitsType">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>检查员特质</div>
|
|
</div>
|
|
<div>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
@click="updateTraits()"
|
|
v-hasPermi="['inspector:global:traitsEdit']"
|
|
>编辑</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="traitsFooter">
|
|
<examine ref="examine" :inspectorId="inspectorId"></examine>
|
|
</div>
|
|
</div>
|
|
<!-- 参加培训情况 -->
|
|
<div class="traits" style="margin-top: 8px" ref="traitsSituation">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>参加培训情况</div>
|
|
</div>
|
|
<div class="footerBoxEnd">
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-edit-outline"
|
|
size="mini"
|
|
@click="exportTrain()"
|
|
v-hasPermi="['inspector:global:trainExport']"
|
|
>导出</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
@click="addTraining()"
|
|
v-hasPermi="['inspector:global:trainAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="traitsFooter">
|
|
<trainingMsg
|
|
ref="trainingMsgA"
|
|
:inspectorId="inspectorId"
|
|
></trainingMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 检查情况表 -->
|
|
<div class="traits" style="margin-top: 8px" ref="traitsTable">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>检查情况表</div>
|
|
</div>
|
|
<div class="footerBoxEnd">
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-edit-outline"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:examineExport']"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="traitsFooter">
|
|
<examineTable></examineTable>
|
|
</div>
|
|
</div>
|
|
<!-- 年度考核情况 -->
|
|
<div class="traits" style="margin-top: 8px" ref="traitsMsg">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>年度考核情况</div>
|
|
</div>
|
|
<div class="footerBoxEnd">
|
|
<el-button
|
|
@click="exportYear"
|
|
type="success"
|
|
icon="el-icon-edit-outline"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:checkExport']"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="traitsFooter">
|
|
<yearAssess
|
|
ref="yearAssess"
|
|
:inspectorId="inspectorId"
|
|
></yearAssess>
|
|
</div>
|
|
</div>
|
|
<!-- 奖惩信息 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="toIncentive">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>奖惩信息</div>
|
|
</div>
|
|
<div>
|
|
<el-button
|
|
type="success"
|
|
icon="el-icon-edit-outline"
|
|
size="mini"
|
|
@click="exportIncentiveMsg()"
|
|
v-hasPermi="['inspector:global:trainExport']"
|
|
>导出</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<incentiveMsg
|
|
ref="incentiveMsgRefs"
|
|
:inspectorId="inspectorId"
|
|
></incentiveMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 调派信息 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="toDeployed">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>调派信息</div>
|
|
</div>
|
|
<!-- <div @click.stop="addBackground()">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:educationBacAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div> -->
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<deployedMsg
|
|
ref="deployedMsgRefs"
|
|
:inspectorId="inspectorId"
|
|
></deployedMsg>
|
|
</div>
|
|
</div>
|
|
<!-- 调派记录 -->
|
|
<div class="schoolBack" style="margin-top: 8px" ref="toDispatchRecords">
|
|
<div class="userHeaderBox">
|
|
<div class="userText">
|
|
<div>调派记录</div>
|
|
</div>
|
|
<!-- <div @click.stop="addBackground()">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
v-hasPermi="['inspector:global:educationBacAdd']"
|
|
>新增</el-button
|
|
>
|
|
</div> -->
|
|
</div>
|
|
<div class="schoolBackFooterBox">
|
|
<dispatchRecords
|
|
ref="dispatchRecordsRefs"
|
|
:inspectorId="inspectorId"
|
|
></dispatchRecords>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="backTop"
|
|
@click="backTop()"
|
|
id="backTop"
|
|
v-show="scrollShow"
|
|
>
|
|
<i class="el-icon-caret-top"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="child-container no-data" v-if="!inspectorId">
|
|
<el-empty description="您不在检察员列表中！"></el-empty>
|
|
</div>
|
|
</diV>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
//个人情况统计
|
|
import infoMsg from "../censor/components/infoMsg.vue";
|
|
//基础信息
|
|
import baseMsg from "../censor/components/baseMsg.vue";
|
|
//教育背景
|
|
import schoolMsg from "../censor/components/schoolMsg.vue";
|
|
//聘任信息
|
|
import appointmentMsg from "../censor/components/appointmentMsg.vue";
|
|
//工作经历
|
|
import work from "../censor/components/work.vue";
|
|
//检查员特质
|
|
import examine from "../censor/components/examine.vue";
|
|
//参加培训情况
|
|
import trainingMsg from "../censor/components/trainingMsg.vue";
|
|
//检查情况表
|
|
import examineTable from "../censor/components/examineTable.vue";
|
|
//年度考核情况
|
|
import yearAssess from "../censor/components/yearAssess.vue";
|
|
//奖惩信息
|
|
import incentiveMsg from "../censor/components/incentiveMsg.vue";
|
|
//调派信息
|
|
import deployedMsg from "../censor/components/deployedMsg.vue";
|
|
//调派记录
|
|
import dispatchRecords from "../censor/components/dispatchRecords.vue";
|
|
export default {
|
|
name: "Notice",
|
|
data() {
|
|
return {
|
|
scrollShow: false,
|
|
isdisabled: false,
|
|
allRefs: [
|
|
{
|
|
index: 0,
|
|
name: "userInfo",
|
|
},
|
|
{
|
|
index: 1,
|
|
name: "baseMsg",
|
|
},
|
|
{
|
|
index: 2,
|
|
name: "schoolBack",
|
|
},
|
|
{
|
|
index: 3,
|
|
name: "toAppointment",
|
|
},
|
|
{
|
|
index: 4,
|
|
name: "work",
|
|
},
|
|
{
|
|
index: 5,
|
|
name: "traitsType",
|
|
},
|
|
{
|
|
index: 6,
|
|
name: "traitsSituation",
|
|
},
|
|
{
|
|
index: 7,
|
|
name: "traitsTable",
|
|
},
|
|
{
|
|
index: 8,
|
|
name: "traitsMsg",
|
|
},
|
|
{
|
|
index: 9,
|
|
name: "toIncentive",
|
|
},
|
|
{
|
|
index: 10,
|
|
name: "toDeployed",
|
|
},
|
|
{
|
|
index: 11,
|
|
name: "toDispatchRecords",
|
|
},
|
|
],
|
|
changeNum: 0,
|
|
asideDate: [
|
|
{
|
|
name: "个人信息统计",
|
|
},
|
|
{
|
|
name: "基本信息",
|
|
},
|
|
{
|
|
name: "教育背景",
|
|
},
|
|
{
|
|
name: "聘任信息",
|
|
},
|
|
{
|
|
name: "工作经历",
|
|
},
|
|
{
|
|
name: "检查员特质",
|
|
},
|
|
{
|
|
name: "参加培训情况",
|
|
},
|
|
{
|
|
name: "检查情况",
|
|
},
|
|
{
|
|
name: "年度考核情况",
|
|
},
|
|
{
|
|
name: "奖惩信息",
|
|
},
|
|
{
|
|
name: "调派信息",
|
|
},
|
|
{
|
|
name: "调派记录",
|
|
},
|
|
],
|
|
options: [
|
|
{
|
|
value: "选项1",
|
|
label: "2022",
|
|
},
|
|
{
|
|
value: "选项2",
|
|
label: "2023",
|
|
},
|
|
],
|
|
refsList: [
|
|
"userInfo",
|
|
"baseMsg",
|
|
"schoolBack",
|
|
"work",
|
|
"traitsType",
|
|
"traitsSituation",
|
|
"traitsTable",
|
|
"traitsMsg",
|
|
],
|
|
value: "",
|
|
a1: 0,
|
|
// previous: 0,
|
|
yearParams: {
|
|
begainYear: null,
|
|
endBegainYear: null,
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
components: {
|
|
infoMsg,
|
|
baseMsg,
|
|
schoolMsg,
|
|
work,
|
|
examine,
|
|
trainingMsg,
|
|
examineTable,
|
|
yearAssess,
|
|
appointmentMsg,
|
|
incentiveMsg,
|
|
deployedMsg,
|
|
dispatchRecords,
|
|
},
|
|
created() {},
|
|
computed: {
|
|
...mapGetters(["inspectorId"]),
|
|
},
|
|
methods: {
|
|
backTop() {
|
|
// 滚动页面至顶部
|
|
this.$refs.rightBox.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth", // 使用平滑滚动效果
|
|
});
|
|
},
|
|
/**年变化 */
|
|
changeYear(e) {
|
|
if (e) {
|
|
if (!this.yearParams.begainYear) {
|
|
this.$modal.msgError("请选择开始年份!");
|
|
return;
|
|
} else if (this.yearParams.begainYear > this.yearParams.endBegainYear) {
|
|
this.$modal.msgError("开始年不能大于结束年!");
|
|
} else {
|
|
this.$refs.infoMsg.getinfoData(this.yearParams);
|
|
}
|
|
}
|
|
},
|
|
//新增培训情况
|
|
addTraining() {
|
|
this.$refs.trainingMsgA.handleAdd();
|
|
},
|
|
//新增教育背景
|
|
addBackground() {
|
|
this.$refs.teach.openDialog();
|
|
},
|
|
//新增工作经历
|
|
addWork() {
|
|
this.$refs.workA.workAddList();
|
|
},
|
|
//编辑检查员特质
|
|
updateTraits() {
|
|
this.$refs.examine.examineUpdate();
|
|
},
|
|
//导出培训情况
|
|
exportTrain() {
|
|
this.$refs.trainingMsgA.exportTrain();
|
|
},
|
|
//年度考核导出
|
|
exportYear() {
|
|
this.$refs.yearAssess.exportTrain();
|
|
},
|
|
exportIncentiveMsg() {
|
|
this.$refs.incentiveMsgRefs.exportTrain();
|
|
},
|
|
exportAppointmentMsg() {
|
|
this.$refs.appointmentMsgRefs.exportExcel();
|
|
},
|
|
backIndex() {
|
|
this.$emit("getSonData", { isShow: false });
|
|
},
|
|
/**单击左侧tab */
|
|
handleIndex(index) {
|
|
this.changeNum = index;
|
|
this.$refs[this.allRefs[index].name].scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
this.isdisabled = true;
|
|
setTimeout(() => {
|
|
this.isdisabled = false;
|
|
}, 1000);
|
|
},
|
|
/**容器滚动 */
|
|
handScroll(e) {
|
|
if (this.isdisabled == true) return;
|
|
let scrollData = e.target.scrollTop;
|
|
if (scrollData > 0) {
|
|
this.scrollShow = true;
|
|
} else {
|
|
this.scrollShow = false;
|
|
}
|
|
var data = [];
|
|
this.allRefs.forEach((value) => {
|
|
data.push(this.$refs[value.name].offsetHeight);
|
|
});
|
|
let addData = 0;
|
|
let count = 0;
|
|
for (let i = 0; i < this.asideDate.length; i++) {
|
|
if (
|
|
scrollData >= addData + 8 * count &&
|
|
scrollData < addData + data[i] + 8 * count + 8
|
|
) {
|
|
this.changeNum = i;
|
|
break;
|
|
}
|
|
count += 1;
|
|
addData += data[i];
|
|
}
|
|
},
|
|
},
|
|
mounted() {},
|
|
beforeDestroy() {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
//按钮的样式
|
|
::v-deep .el-button--mini {
|
|
padding: 6px 8px;
|
|
border-radius: 5px;
|
|
}
|
|
::v-deep .el-button--success {
|
|
background-color: #52cd80;
|
|
border-color: #52cd80;
|
|
}
|
|
::v-deep .el-button--primary {
|
|
background-color: #1e80eb;
|
|
border-color: #1e80eb;
|
|
}
|
|
.changeMgPx {
|
|
padding: 0 !important;
|
|
height: 100% !important;
|
|
}
|
|
::v-deep .el-backtop {
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.child-container {
|
|
height: 100%;
|
|
background-color: rgb(242, 242, 242);
|
|
display: flex;
|
|
.leftAside {
|
|
height: 100%;
|
|
background-color: white;
|
|
width: 180px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
.asideHeader {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
letter-spacing: 0.045em;
|
|
color: #323233;
|
|
footer {
|
|
width: 50px;
|
|
width: 34px;
|
|
height: 3px;
|
|
border-radius: 4px;
|
|
background-color: #1e80eb;
|
|
}
|
|
}
|
|
.asideItemBox {
|
|
user-select: none;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
cursor: pointer;
|
|
#asideFooter {
|
|
width: 100%;
|
|
height: 38px;
|
|
border-bottom: 1px solid #dee2ee;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
letter-spacing: 0.045em;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 12px;
|
|
}
|
|
.activeColor {
|
|
background-color: #1e80eb;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
.rightBox {
|
|
flex: 1;
|
|
margin-left: 10px;
|
|
overflow: auto;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
.userInfo {
|
|
height: 340px;
|
|
border-radius: 8px;
|
|
background: white;
|
|
}
|
|
.baseMsg {
|
|
// margin-top: 10px;
|
|
// height: 1430px;
|
|
border-radius: 8px;
|
|
background: white;
|
|
.baseMsgFooterBox {
|
|
padding: 10px 15px 20px;
|
|
}
|
|
}
|
|
.schoolBack {
|
|
// margin-top: 10px;
|
|
border-radius: 8px;
|
|
background: white;
|
|
.schoolBackFooterBox {
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
.traits {
|
|
// margin-top: 10px;
|
|
border-radius: 8px;
|
|
background: white;
|
|
.traitsFooter {
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//头部公用样式
|
|
.userHeaderBox {
|
|
height: 50px;
|
|
border-bottom: 1px solid #e8ebea;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 18px 0 35px;
|
|
position: relative;
|
|
.absiluteBox {
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.userText {
|
|
font-size: 16px;
|
|
letter-spacing: -0.018000000000000002em;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 17px;
|
|
left: 20px;
|
|
width: 4px;
|
|
height: 17px;
|
|
background: linear-gradient(180deg, #8bc2ff 0%, #1e80eb 100%);
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
.userOption {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
.absiluteBox {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 135px;
|
|
}
|
|
.year-middle {
|
|
margin: 0 10px;
|
|
}
|
|
.back-icon {
|
|
font-weight: bold;
|
|
}
|
|
.no-data {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.backTop {
|
|
position: fixed;
|
|
right: 35px;
|
|
bottom: 30px;
|
|
height: 40px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
width: 40px;
|
|
z-index: 100;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
|
|
color: #409eff;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|