<template>
|
<div id="examine">
|
<div class="examine_heard">
|
服务许可审批备案系统
|
<div class="e_h_right">
|
<img
|
src="http://nx.baibaodun.cn:80/assets/images/username-person.png"
|
alt=""
|
/>
|
<span>
|
{{ userName }}
|
</span>
|
<div @click="logout">退出登录</div>
|
</div>
|
</div>
|
<div class="examine_body">
|
<div class="title">
|
<h2>保安相关申请流程</h2>
|
<button @click="openApproval">审批进度查询</button>
|
</div>
|
<div class="b_main">
|
<!-- 卡片 -->
|
<examineCard
|
v-for="(item, index) in dataCard"
|
:key="index"
|
:data="item"
|
:ind="index"
|
@open="openMain"
|
v-show="showCard"
|
></examineCard>
|
</div>
|
</div>
|
<!-- 审批进度查询 -->
|
<Approval class="Approval">
|
<span slot="close">
|
<i
|
class="el-icon-close ApprovalClose breakApprovalClose"
|
@click="ApprovalClose"
|
></i>
|
</span>
|
</Approval>
|
<!-- 保安服务公司许可申请 -->
|
<securityPermit class="securityPermit" :type="dataCard[0].type">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</securityPermit>
|
<!-- 跨区域经营备案 -->
|
<crossRegion class="crossRegion" :type="dataCard[1].type">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</crossRegion>
|
<!-- 自招保安单位备案 -->
|
<securityGuard class="securityGuard" :type="dataCard[2].type">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</securityGuard>
|
<!-- 保安培训公司备案 -->
|
<securityTraining class="securityTraining" :type="dataCard[3].type">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</securityTraining>
|
<!-- 自招保安单位备案撤销 -->
|
<cancellationOfFiling class="cancellationOfFiling" :type="dataCard[4].type">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</cancellationOfFiling>
|
</div>
|
</template>
|
|
<script>
|
import examineCard from "@/components/examineCard/examineCard.vue"; //卡片
|
import Approval from "@/components/Approval/Approval.vue"; //审批进度查询
|
import securityPermit from "@/components/securityPermit/securityPermit.vue"; // 保安服务公司许可申请
|
import crossRegion from "@/components/crossRegion/crossRegion.vue"; // 跨区域经营备案
|
import securityGuard from "@/components/securityGuard/securityGuard.vue"; // 自招保安单位备案
|
import securityTraining from "@/components/securityTraining/securityTraining.vue"; // 保安培训公司备案
|
import cancellationOfFiling from "@/components/cancellationOfFiling/cancellationOfFiling.vue"; // 自招保安单位备案撤销
|
import {
|
getDetail,
|
getList,
|
getListre,
|
getListrek,
|
getListrev,
|
} from "@/api/permit/permit";
|
import { mapGetters } from "vuex";
|
import { resetRouter } from "@/router/router";
|
|
export default {
|
components: {
|
examineCard: examineCard,
|
Approval: Approval,
|
securityPermit: securityPermit,
|
crossRegion: crossRegion,
|
securityGuard: securityGuard,
|
securityTraining: securityTraining,
|
cancellationOfFiling: cancellationOfFiling,
|
},
|
computed: {
|
...mapGetters(["userInfo"]),
|
},
|
data() {
|
return {
|
userName: "",
|
showCard: false,
|
zhezao: false,
|
data: [],
|
dataCard: [
|
{
|
menuName: "保安服务公司许可申请",
|
centerUrl: "/img/logo.png",
|
topUrl: "url(/img/permit/服务许可背景图.jpg)",
|
// topUrl: "/img/permit/服务许可背景图.jpg",
|
targetUrl: "per",
|
type: 0,
|
},
|
{
|
menuName: "跨区域经营备案",
|
centerUrl: "/img/logo.png",
|
topUrl: "url(/img/permit/服务许可背景图.jpg)",
|
type: 3,
|
},
|
{
|
menuName: "自招保安单位备案",
|
centerUrl: "/img/logo.png",
|
topUrl: "url(/img/permit/服务许可背景图.jpg)",
|
type: 1,
|
},
|
{
|
menuName: "保安培训公司备案",
|
centerUrl: "/img/logo.png",
|
topUrl: "url(/img/permit/服务许可背景图.jpg)",
|
type: 2,
|
},
|
{
|
menuName: "自招保安单位备案撤销",
|
centerUrl: "/img/logo.png",
|
topUrl: "url(/img/permit/服务许可背景图.jpg)",
|
type: 6,
|
},
|
],
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo", "ApprovalShow", "useWhere"]),
|
},
|
created() {
|
this.cc();
|
var page = {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
};
|
this.onLoad(page);
|
},
|
methods: {
|
onLoad(page, params = {}) {
|
params["cardid"] = this.userInfo.Id;
|
getList(page.currentPage, page.pageSize, params).then((res) => {
|
const data = res.data.data;
|
this.data = data.records;
|
getListre(page.currentPage, page.pageSize, params).then((ress) => {
|
this.data = this.data.concat(ress.data.data.records);
|
getListrek(page.currentPage, page.pageSize, params).then((resk) => {
|
this.data = this.data.concat(resk.data.data.records);
|
getListrev(page.currentPage, page.pageSize, params).then((resv) => {
|
this.data = this.data.concat(resv.data.data.records);
|
console.log(this.data.length);
|
if (this.data.length >= 1) {
|
// this.$store.commit("changehandle", false);
|
} else {
|
// this.$store.commit("changehandle", true);
|
}
|
this.showCard = true;
|
this.data.forEach((item) => {
|
for (const key in this.dataCard) {
|
if (this.dataCard[key].type == item.ptype) {
|
console.log(this.dataCard[key].menuName);
|
}
|
}
|
});
|
});
|
});
|
});
|
});
|
},
|
cc: function () {
|
this.userName = this.userInfo.user_name;
|
},
|
openApproval() {
|
this.$store.commit("doitApprovalShow", true);
|
},
|
ApprovalClose() {
|
this.$store.commit("doitApprovalShow", false);
|
},
|
openClose() {
|
this.$store.commit("changeuseWhere", "close");
|
},
|
logout() {
|
this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
|
confirmButtonText: this.$t("submitText"),
|
cancelButtonText: this.$t("cancelText"),
|
type: "warning",
|
}).then(() => {
|
this.$store.dispatch("LogOut").then(() => {
|
resetRouter();
|
this.$router.push({ path: "/login" });
|
});
|
});
|
},
|
openMain(val, goon) {
|
this.zhezao = true;
|
if (goon == "openLook") {
|
this.$store.commit("doitApprovalShow", true);
|
return;
|
}
|
if (val == 0) {
|
//保安服务公司许可
|
console.log(this.dataCard[val].menuName);
|
this.$store.commit("changeuseWhere", val);
|
} else if (val == 1) {
|
//跨区域经营备案
|
this.$store.commit("changeuseWhere", val);
|
console.log(this.dataCard[val].menuName);
|
} else if (val == 2) {
|
//自招保安单位备案
|
this.$store.commit("changeuseWhere", val);
|
console.log(this.dataCard[val].menuName);
|
} else if (val == 3) {
|
//保安培训公司备案
|
this.$store.commit("changeuseWhere", val);
|
console.log(this.dataCard[val].menuName);
|
} else if (val == 4) {
|
//自招保安单位备案撤销
|
this.$store.commit("changeuseWhere", val);
|
console.log(this.dataCard[val].menuName);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
#examine {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
box-sizing: border-box;
|
.examine_heard {
|
background-color: #25aff3;
|
width: 100%;
|
padding-left: 30px;
|
box-sizing: border-box;
|
height: 50px;
|
color: #ffffff;
|
font-size: 24px;
|
line-height: 50px;
|
.e_h_right {
|
float: right;
|
margin-right: 20px;
|
img {
|
display: inline-block;
|
vertical-align: middle;
|
}
|
span {
|
font-style: normal;
|
color: #ffffff;
|
font-size: 16px;
|
line-height: 50px;
|
display: inline-block;
|
margin: 0;
|
padding-left: 4px;
|
}
|
div {
|
display: inline;
|
margin-left: 15px;
|
color: #ffffff;
|
font-size: 16px;
|
line-height: 50px;
|
}
|
}
|
}
|
.examine_body {
|
width: 100%;
|
height: calc(100% - 50px);
|
.title {
|
width: 100%;
|
height: 200px;
|
// border: 1px solid red;
|
display: flex;
|
align-items: center;
|
padding-bottom: 120px;
|
box-sizing: border-box;
|
justify-content: center;
|
button {
|
position: relative;
|
left: 30%;
|
border: 1px solid rgba($color: #000000, $alpha: 0.3);
|
border-radius: 5px;
|
height: 25px;
|
width: 140px;
|
text-align: center;
|
background-color: #fff;
|
}
|
}
|
.b_main {
|
width: 100%;
|
height: calc(100% - 220px);
|
// border: 1px solid red;
|
padding: 0 10%;
|
box-sizing: border-box;
|
}
|
}
|
.zhezhao {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
left: 0;
|
background-color: rgba($color: #000000, $alpha: 0.2);
|
}
|
.Approval,
|
.securityPermit {
|
position: absolute;
|
top: calc(10%);
|
left: calc(50% - 621px);
|
width: 1243px;
|
// height: 766px;
|
}
|
|
.ApprovalClose {
|
position: absolute;
|
top: 17px;
|
font-size: 20px;
|
right: 11px;
|
z-index: 10;
|
color: #fff;
|
&:hover {
|
color: red;
|
}
|
}
|
.breakApprovalClose {
|
color: #000;
|
}
|
}
|
|
//弹窗样式
|
.heards {
|
margin: 0 auto;
|
width: calc(100% - 10px);
|
height: 40px;
|
position: relative;
|
top: 10px;
|
color: #fff;
|
border-radius: 10px 10px 0 0;
|
text-align: center;
|
line-height: 40px;
|
left: 0;
|
background-color: #25aff3;
|
}
|
.first-box-outer {
|
width: 100%;
|
max-height: 682px;
|
overflow: scroll;
|
.f-b-o-in {
|
width: 100%;
|
height: 620px;
|
overflow: scroll;
|
}
|
}
|
.handling-guideline {
|
width: 85%;
|
padding: 10px;
|
margin: 0 auto;
|
background-color: rgba($color: #f9f9f9, $alpha: 0.8);
|
}
|
.hand-next {
|
margin-top: 15px;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
p {
|
font-size: 14px;
|
line-height: 28px;
|
|
label {
|
font-weight: bold;
|
}
|
}
|
.el-collapse-item__header {
|
font-size: 20px !important;
|
}
|
</style>
|
