<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="item.type"
|
@open="openMain"
|
></examineCard>
|
<!-- v-show="showCard" -->
|
<!-- :background="" -->
|
</div>
|
</div>
|
<div class="zhezhao" v-show="useWhere != 'close' || ApprovalShow"></div>
|
<!-- 审批进度查询 -->
|
<Approval class="Approval" :data="dataCard">
|
<span slot="close">
|
<i
|
class="el-icon-close ApprovalClose breakApprovalClose"
|
@click="ApprovalClose"
|
></i>
|
</span>
|
</Approval>
|
<cardPopup class="crossRegion" :data="dataCard" :together="together">
|
<span slot="close">
|
<i class="el-icon-close ApprovalClose" @click="openClose"> </i>
|
</span>
|
</cardPopup>
|
</div>
|
</template>
|
|
<script>
|
import { ourDatas } from "./ourDatas";
|
import examineCard from "@/components/examineCard/examineCard.vue"; //卡片
|
import Approval from "@/components/Approval/Approval.vue"; //审批进度查询
|
import cardPopup from "@/components/cardPopup/cardPopup.vue"; // 卡片弹窗
|
import { mapGetters } from "vuex";
|
import { resetRouter } from "@/router/router";
|
|
export default {
|
components: {
|
examineCard: examineCard,
|
Approval: Approval,
|
cardPopup: cardPopup,
|
},
|
data() {
|
return {
|
userName: "",
|
data: [],
|
dataCard: [],
|
together: [],
|
out: true,
|
d: [],
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo", "ApprovalShow", "useWhere"]),
|
},
|
created() {
|
this.cc();
|
// this.dataCard = ourDatas;
|
var cando = [];
|
var normal = [];
|
var both = [];
|
for (var k in ourDatas) {
|
if (ourDatas[k].fromWhere != undefined) {
|
both.push(ourDatas[k]);
|
continue;
|
}
|
normal.push(ourDatas[k]);
|
cando.push({
|
opens: true,
|
type: ourDatas[k].type,
|
});
|
}
|
this.dataCard = normal;
|
this.together = both;
|
this.$store.commit("setcanDoIt", cando);
|
},
|
methods: {
|
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;
|
}
|
// this.onLoad(this.page, {}, val);
|
this.$store.commit("changeuseWhere", val);
|
},
|
},
|
};
|
</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 {
|
h2 {
|
position: relative;
|
left: 60px;
|
}
|
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: 1105px;// 3个一行
|
width: 1475px; //4个一行
|
height: calc(100% - 220px);
|
// border: 1px solid red;
|
margin: 0 auto;
|
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;
|
}
|
.OnceChouse {
|
position: absolute;
|
top: calc(50% - 200px);
|
left: calc(50% - 300px);
|
width: 600px;
|
height: 400px;
|
// background-color: #fff;
|
}
|
|
.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: 13px;
|
color: #fff;
|
border-radius: 10px 10px 0 0;
|
text-align: center;
|
line-height: 40px;
|
left: 1px;
|
background-color: #25aff3;
|
}
|
.first-box-outer {
|
width: 100%;
|
max-height: 685px;
|
overflow-y: hidden;
|
overflow-x: hidden;
|
.f-b-o-in {
|
width: 100%;
|
height: 620px;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
}
|
}
|
.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;
|
}
|
|
.zhezhao {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba($color: #7a7a7a, $alpha: 0.1);
|
}
|
|
//单选大小
|
.el-radio__inner {
|
width: 25px;
|
height: 25px;
|
}
|
.el-radio__inner::after {
|
width: 8px;
|
height: 8px;
|
// left: calc(50% - 4px);
|
// top: calc(50% - 4px);
|
}
|
.el-radio__label {
|
font-size: 16px;
|
font-weight: 700;
|
font: Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma,
|
Arial, sans-serif;
|
}
|
.choseTitle {
|
padding: 15px 28px;
|
font-size: 14px;
|
}
|
</style>
|
