<template>
|
<div class="dispatch">
|
<avue-tabs :option="optionTABS"
|
@change="handleChangeTABS"></avue-tabs>
|
<span v-if="typeTABS.prop === 'tab1'">
|
<avue-form ref="form"
|
v-model="obj0"
|
:option="option0"> </avue-form>
|
</span>
|
<span v-else-if="typeTABS.prop === 'tab2'">
|
<avue-crud :option="option1"
|
:data="data1"
|
:page.sync="page1"
|
:table-loading="loading1"
|
@row-save="rowSave1"
|
@row-update="rowUpdate1"
|
@row-del="rowDel1"
|
@current-change="CurrentChange1"
|
@refresh-change="refreshchange1"
|
@size-change="SizeChange1">
|
</avue-crud>
|
</span>
|
<span v-else-if="typeTABS.prop === 'tab3'">
|
<avue-crud :option="option2"
|
:data="data2"
|
:page.sync="page2"
|
@row-save="rowSave2"
|
@row-update="rowUpdate2"
|
@row-del="rowDel2"
|
:table-loading="loading2"
|
@current-change="CurrentChange2"
|
@size-change="SizeChange2"
|
@refresh-change="refreshchange2">
|
</avue-crud>
|
</span>
|
<span v-else-if="typeTABS.prop === 'tab4'">
|
<!-- 保安员证 -->
|
<!-- <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
|
<div class="baz-main">
|
<div class="baz-m-body" ref="baoanzheng">
|
<div class="bmb-heard">保安员证</div>
|
<div class="img">
|
<div v-if="!obj0.avatar">暂无照片</div>
|
<img :src="obj0.avatar" alt="" v-else />
|
</div>
|
<div class="imgs">
|
<div v-if="erweima == ''">暂无二维码</div>
|
<img :src="erweima" alt="" v-else />
|
</div>
|
|
<div class="bmb-b">
|
姓名：<span class="bmb-b-s">{{ obj0.realName }}</span>
|
</div>
|
<div class="bmb-b">
|
性别：<span class="bmb-b-s">{{ obj0.$sex }}</span>
|
</div>
|
<div class="bmb-b">
|
编号：<span class="bmb-b-s">{{ obj0.securitynumber }}</span>
|
</div>
|
<div class="bmb-b">
|
发证机关：<span class="bmb-b-s">南昌市公安局</span>
|
</div>
|
<div class="bmb-b">
|
发证日期：<span class="bmb-b-s">{{
|
obj0.paperTime.slice(0, 10)
|
}}</span>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer no-print PrintBut">
|
<el-button type="primary" @click="Print">打 印</el-button>
|
</span>
|
</div>
|
</div> -->
|
<baoanz :data="obj0"
|
v-if="hold == 1 || hold == 3"></baoanz>
|
<div v-else
|
style="width: 100%; text-align: center; padding-top: 20px">
|
无上岗证
|
</div>
|
</span>
|
<span v-else-if="typeTABS.prop === 'tab5'">
|
<securityCertificate :data="obj0"
|
v-if="hold == 1 || hold == 3"></securityCertificate>
|
<div v-else
|
style="width: 100%; text-align: center; padding-top: 20px">
|
无保安员证
|
</div>
|
</span>
|
</div>
|
</template>
|
|
<script>
|
import {
|
securityBaseInfoColumn,
|
practitionersColumn,
|
trackRecordColumn,
|
} from "./data";
|
import {
|
addExperience,
|
updateExperience,
|
experienceRemove,
|
getExperienceList,
|
} from "@/api/experience/experience";
|
|
import {
|
add,
|
update,
|
getpage,
|
remove,
|
getER,
|
} from "@/api/performance/performance";
|
|
// import vueQr from "vue-qr";
|
import securityCertificate from "./securityCertificate.vue";
|
import baoanz from "./baoanz.vue";
|
|
export default {
|
components: {
|
securityCertificate: securityCertificate,
|
baoanz,
|
},
|
data () {
|
return {
|
typeTABS: {}, //标签页
|
row: {}, //数据
|
optionTABS: {
|
column: [
|
{
|
// icon: "el-icon-info",
|
label: "保安员基本信息",
|
prop: "tab1",
|
},
|
{
|
// icon: "el-icon-info",
|
label: "从业记录",
|
prop: "tab2",
|
},
|
{
|
// icon: "el-icon-info",
|
label: "现实表现记录",
|
prop: "tab3",
|
},
|
{
|
// icon: "el-icon-info",
|
label: "上岗证",
|
prop: "tab4",
|
},
|
{
|
// icon: "el-icon-info",
|
label: "保安员证",
|
prop: "tab5",
|
},
|
],
|
},
|
current: 1,
|
size: 10,
|
cardid: "",
|
name: "",
|
dispatcherCompany: "",
|
id: "",
|
obj0: {
|
title: "我是头部标题",
|
},
|
option0: {
|
emptyBtn: false,
|
submitBtn: false,
|
labelWidth: "110",
|
gutter: 30,
|
column: securityBaseInfoColumn,
|
},
|
loading1: true,
|
loading2: true,
|
selectionList1: [],
|
page1: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
page2: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
query1: {},
|
query2: {},
|
data1: [],
|
data2: [],
|
option1: {
|
card: true,
|
menu: true,
|
height: "auto",
|
widtd: "auto",
|
calcHeight: 54,
|
border: true, //liu
|
stripe: true,
|
tip: false,
|
index: true,
|
dialogClickModal: false,
|
headerAlign: "center",
|
align: "center",
|
column: practitionersColumn,
|
},
|
option2: {
|
card: true,
|
menu: true,
|
height: "auto",
|
widtd: "auto",
|
calcHeight: 54,
|
border: true, //liu
|
stripe: true,
|
tip: false,
|
index: true,
|
dialogClickModal: false,
|
headerAlign: "center",
|
align: "center",
|
column: trackRecordColumn,
|
},
|
erweima: "",
|
hold: "",
|
};
|
},
|
// components: {
|
// vueQr,
|
// },
|
computed: {
|
ids1 () {
|
let ids1 = [];
|
this.selectionList1.forEach((ele) => {
|
ids1.push(ele.id);
|
});
|
return ids1.join(",");
|
},
|
// goToUrl() {
|
// var url =
|
// "http://s16s652780.51mypc.cn/securityInfo/securityInfo.html?securityNumber=" +
|
// this.obj0.securitynumber;
|
// return url;
|
// },
|
},
|
methods: {
|
Print () {
|
var printDom = document.getElementById("baoanzheng");
|
printDom.style.position = "fixed";
|
printDom.style.left = "-10%";
|
printDom.style.width = "120%";
|
printDom.style.height = "100%";
|
this.$Print(this.$refs.baoanzheng);
|
printDom.style.position = "relative";
|
printDom.style.left = "0";
|
printDom.style.width = "100%";
|
printDom.style.height = "calc(100% - 100px)";
|
},
|
handleChangeTABS (column) {
|
this.typeTABS = column;
|
if (column.prop == "tab1") {
|
this.loading1 = false;
|
} else if (column.prop == "tab2") {
|
//查询当前保安员的从业记录信息
|
this.getPractitionersPageInfo(this.page1);
|
this.loading1 = false;
|
} else if (column.prop == "tab3") {
|
//查询当前保安员的现实表现记录
|
this.getPerformancePageInfo(this.page2);
|
this.loading2 = false;
|
} else if (column.prop == "tab4") {
|
getER(this.obj0.securitynumber).then((res) => {
|
this.erweima = res.data;
|
// console.log(res.data);
|
});
|
}
|
},
|
refreshchange1 () {
|
this.getPractitionersPageInfo(this.page1, this.query1);
|
},
|
//查询当前保安员的从业记录信息
|
getPractitionersPageInfo (page, param = {}) {
|
param["securityid"] = this.id;
|
//获取用户从业信息
|
// console.log(this.id, "cid");
|
|
getExperienceList(page.currentPage, page.pageSize, param).then((res1) => {
|
const data = res1.data.data;
|
this.page1.total = data.total;
|
this.data1 = data.records;
|
this.loading1 = false;
|
});
|
},
|
refreshchange2 () {
|
this.getPerformancePageInfo(this.page2, this.query2);
|
},
|
//查询当前保安员的现实表现记录信息
|
getPerformancePageInfo (page, param = {}) {
|
//获取现实表现信息
|
param["securityid"] = this.id;
|
getpage(page.currentPage, page.pageSize, param).then((res2) => {
|
const data = res2.data.data;
|
this.page2.total = data.total;
|
this.data2 = data.records;
|
console.log(this.data2, 1);
|
this.loading2 = false;
|
});
|
},
|
CurrentChange1 (currentPage) {
|
this.page1.currentPage = currentPage;
|
this.refreshchange1();
|
},
|
SizeChange1 (pageSize) {
|
this.page1.pageSize = pageSize;
|
this.refreshchange1();
|
},
|
CurrentChange2 (currentPage) {
|
this.page2.currentPage = currentPage;
|
this.refreshchange2();
|
},
|
SizeChange2 (pageSize) {
|
this.page2.pageSize = pageSize;
|
this.refreshchange2();
|
},
|
// refreshChange1() {
|
// this.getPractitionersPageInfo();
|
// },
|
// refreshChange2() {
|
// this.getPerformancePageInfo();
|
// },
|
|
rowSave2 (form, done, loading) {
|
form.securityid = this.id;
|
add(form).then(
|
(res) => {
|
this.getPerformancePageInfo(this.page2);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
window.console.log(error);
|
loading();
|
}
|
);
|
// }
|
},
|
//从业记录新增
|
rowSave1 (form, done, loading) {
|
form.securityid = this.id;
|
addExperience(form).then(
|
(res) => {
|
this.getPractitionersPageInfo(this.page1);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
window.console.log(error);
|
loading();
|
}
|
);
|
// }
|
},
|
rowUpdate2 (row, index, done, loading) {
|
row.securityid = this.id;
|
update(row).then(
|
() => {
|
this.getPerformancePageInfo(this.page2);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
window.console.log(error);
|
loading();
|
}
|
);
|
},
|
rowUpdate1 (row, index, done, loading) {
|
row.securityid = this.id;
|
updateExperience(row).then(
|
() => {
|
this.getPractitionersPageInfo(this.page1);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
window.console.log(error);
|
loading();
|
}
|
);
|
},
|
rowDel2 (row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return remove(row.id);
|
})
|
.then(() => {
|
this.getPerformancePageInfo(this.page2);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
});
|
},
|
rowDel1 (row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return experienceRemove(row.id);
|
})
|
.then(() => {
|
this.getPractitionersPageInfo(this.page1);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
});
|
},
|
},
|
mounted () {
|
this.typeTABS = this.optionTABS.column[0];
|
var data = JSON.parse(this.$route.query.row);
|
// console.log(data);
|
if (data) {
|
var row = data;
|
// var row = this.$route.query.row;
|
for (var k in row) {
|
this.obj0[k] = row[k];
|
}
|
this.obj0.title = "";
|
this.cardid = row.id;
|
this.name = row.name;
|
this.dispatcherCompany = row.dispatcherCompany;
|
this.id = row.id;
|
this.hold = row.hold;
|
console.log(this.obj0);
|
}
|
|
var flag = false,
|
i = 0,
|
ind = null;
|
this.$store.state.tags.tagList.forEach((item, index) => {
|
if (item.label == "保安员详情") {
|
if (flag == false) {
|
ind = index;
|
flag = true;
|
}
|
i++;
|
}
|
});
|
if (i > 1) {
|
this.$store.state.tags.tagList.splice(ind, 1);
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.dispatch {
|
width: 100%;
|
height: 100%;
|
// border: 1px solid #000;
|
box-sizing: border-box;
|
}
|
// .el-card__body {
|
// padding-bottom: 5px !important;
|
// }
|
// .avue-crud__tip,
|
// .el-tag,
|
// .el-tag--light {
|
// padding: 0 !important;
|
// }
|
|
.baoanzheng {
|
// position: fixed;
|
position: relative;
|
// top: 0;
|
top: 0;
|
// left: -10%;
|
left: 0;
|
// height: 0;
|
width: 100%;
|
height: calc(100% - 100px);
|
// background-color: rgba(0, 0, 0, 0.5);
|
background-color: #fff;
|
z-index: 9000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.baz-main {
|
position: relative;
|
top: 15px;
|
// width: 441px;
|
// height: 358px;
|
width: 750px;
|
height: 550px;
|
// background-color: #004ca7;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
}
|
.baz-m-body {
|
width: 750px;
|
height: 550px;
|
background-image: url('/img/register/bazbj1.png');
|
background-size: 100% 100%;
|
.bmb-heard {
|
font-size: 4rem;
|
width: 100%;
|
text-align: center;
|
letter-spacing: 1.4rem;
|
margin-bottom: 40px;
|
padding-left: 10px;
|
position: relative;
|
top: 20px;
|
}
|
.img {
|
width: 358px;
|
height: 441px;
|
border-radius: 10px;
|
position: absolute;
|
// border: 1px solid rgba($color: #888888, $alpha: 0.5);
|
top: 110px;
|
right: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.imgs {
|
width: 110px;
|
height: 110px;
|
border-radius: 10px;
|
position: absolute;
|
// border: 1px solid rgba($color: #888888, $alpha: 0.5);
|
top: 330px;
|
right: 103px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.bmb-b {
|
padding-left: 20px;
|
box-sizing: border-box;
|
height: 3.9rem;
|
margin-left: 3rem;
|
width: 100%;
|
font-size: 2rem;
|
font-weight: 300;
|
.bmb-b-s {
|
display: inline-block;
|
width: 20rem;
|
font-size: 2rem;
|
font-weight: 300;
|
}
|
}
|
}
|
.PrintBut {
|
margin-top: 15px;
|
}
|
</style>
|
