|
|
|
|
@ -1,23 +1,23 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="mybill-container">
|
|
|
|
|
<div class="mybill-container w">
|
|
|
|
|
<div class="contenttitle">
|
|
|
|
|
<span>我的工单</span>
|
|
|
|
|
<span>我的报名</span>
|
|
|
|
|
<div @click="resetpag">
|
|
|
|
|
<button
|
|
|
|
|
@click="pagination.searchTag = 0"
|
|
|
|
|
:class="{ townsmanactive: pagination.searchTag === 0 }"
|
|
|
|
|
@click="pagination.statusTag = 0"
|
|
|
|
|
:class="{ townsmanactive: pagination.statusTag === 0 }"
|
|
|
|
|
>
|
|
|
|
|
打电话
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
@click="pagination.searchTag = 1"
|
|
|
|
|
:class="{ townsmanactive: pagination.searchTag === 1 }"
|
|
|
|
|
@click="pagination.statusTag = 1"
|
|
|
|
|
:class="{ townsmanactive: pagination.statusTag === 1 }"
|
|
|
|
|
>
|
|
|
|
|
推工作
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
@click="pagination.searchTag = 2"
|
|
|
|
|
:class="{ townsmanactive: pagination.searchTag === 2 }"
|
|
|
|
|
@click="pagination.statusTag = 2"
|
|
|
|
|
:class="{ townsmanactive: pagination.statusTag === 2 }"
|
|
|
|
|
>
|
|
|
|
|
跟在职
|
|
|
|
|
</button>
|
|
|
|
|
@ -37,13 +37,30 @@
|
|
|
|
|
:locale="tablenodata"
|
|
|
|
|
:rowKey="(record) => record.index"
|
|
|
|
|
>
|
|
|
|
|
<a slot="name" slot-scope="text">{{ text }}</a>
|
|
|
|
|
<span
|
|
|
|
|
slot="userName"
|
|
|
|
|
slot-scope="text, userName"
|
|
|
|
|
style="display: flex; align-items: center; line-height: 18px"
|
|
|
|
|
><a
|
|
|
|
|
class="iconfont icon-zhengjian"
|
|
|
|
|
style="margin-right: 5px"
|
|
|
|
|
:style="{ color: userName.idCardImageUrl !== '' ? 'blue' : '#999' }"
|
|
|
|
|
@click="showdiymodal(userName)"
|
|
|
|
|
></a
|
|
|
|
|
>{{ userName.userName }}/{{ userName.sex }}/{{ userName.age }}</span
|
|
|
|
|
>
|
|
|
|
|
<a
|
|
|
|
|
slot="operate"
|
|
|
|
|
slot-scope="text, operate"
|
|
|
|
|
@click="customRendert(operate)"
|
|
|
|
|
>查看</a
|
|
|
|
|
>
|
|
|
|
|
</a-table>
|
|
|
|
|
<div class="pagecontainer">
|
|
|
|
|
<a-pagination
|
|
|
|
|
:current="+pagination.pageNum"
|
|
|
|
|
:default-current="1"
|
|
|
|
|
:defaultPageSize="2"
|
|
|
|
|
:defaultPageSize="6"
|
|
|
|
|
:total="pagination.total"
|
|
|
|
|
@change="onChange"
|
|
|
|
|
/>
|
|
|
|
|
@ -58,15 +75,52 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="diymodal" class="diymodal" v-if="isdiymodalshow">
|
|
|
|
|
<div class="title" @mousedown.stop="movebox">
|
|
|
|
|
<i class="iconfont icon-guanbi" @click.stop="closemodal"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="body" @mousewheel="mousewhell">
|
|
|
|
|
<div class="imgbox1" v-if="idcardimg !== ''">
|
|
|
|
|
<div
|
|
|
|
|
class="imgbox"
|
|
|
|
|
:style="{ background: `url('${idcardimg}')` }"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="warningbox" v-else>
|
|
|
|
|
<div>
|
|
|
|
|
<img src="../../../../assets/warning.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<p>未上传身份证照片,无法查看</p>
|
|
|
|
|
<div><button @click="isdiymodalshow = false">确定</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <img :src="idcardimg" alt="" draggable="false" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont icon-rotatexuanzhuan"
|
|
|
|
|
title="旋转"
|
|
|
|
|
@click="rotate(-90)"
|
|
|
|
|
></i>
|
|
|
|
|
<i
|
|
|
|
|
class="iconfont icon-rotatexuanzhuan2"
|
|
|
|
|
title="旋转"
|
|
|
|
|
@click="rotate(90)"
|
|
|
|
|
></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { userBillApi } from "../../../../api/userinfo";
|
|
|
|
|
import { formatDateYMD } from "../../../../utils/commonUtil";
|
|
|
|
|
import {
|
|
|
|
|
getUserApplyOrderStatusById,
|
|
|
|
|
formatDateYMDHMS,
|
|
|
|
|
} from "../../../../utils/commonUtil";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: "",
|
|
|
|
|
name: "mybillcontainer",
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {},
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
@ -89,11 +143,15 @@ export default {
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
isspinning: false,
|
|
|
|
|
idcardimg: "", // 回显的身份证图片url
|
|
|
|
|
isdiymodalshow: false, // 控制身份证图片显示
|
|
|
|
|
scaleNum: 1, // 身份证图片显示倍率
|
|
|
|
|
rotateNum: 0,
|
|
|
|
|
pagination: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 2,
|
|
|
|
|
pageSize: 6,
|
|
|
|
|
total: null, //分页配置
|
|
|
|
|
searchTag: 0,
|
|
|
|
|
statusTag: 0,
|
|
|
|
|
},
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
@ -105,32 +163,63 @@ export default {
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "老乡姓名",
|
|
|
|
|
dataIndex: "nickName",
|
|
|
|
|
key: "nickName",
|
|
|
|
|
title: "姓名",
|
|
|
|
|
dataIndex: "userName",
|
|
|
|
|
key: "userName",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 90,
|
|
|
|
|
width: 120,
|
|
|
|
|
scopedSlots: { customRender: "userName" },
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "老乡手机号",
|
|
|
|
|
title: "电话",
|
|
|
|
|
dataIndex: "tel",
|
|
|
|
|
key: "tel",
|
|
|
|
|
width: 120,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "跟进记录",
|
|
|
|
|
dataIndex: "userServeRecordDespLatest",
|
|
|
|
|
key: "userServeRecordDespLatest",
|
|
|
|
|
title: "报名企业",
|
|
|
|
|
dataIndex: "storeName",
|
|
|
|
|
key: "storeName",
|
|
|
|
|
width: 120,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "更新时间",
|
|
|
|
|
dataIndex: "updateTime",
|
|
|
|
|
key: "updateTime",
|
|
|
|
|
title: "报名岗位",
|
|
|
|
|
dataIndex: "storeJobName",
|
|
|
|
|
key: "storeJobName",
|
|
|
|
|
width: 120,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "面试时间",
|
|
|
|
|
dataIndex: "interviewTime",
|
|
|
|
|
key: "interviewTime",
|
|
|
|
|
width: 150,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "政策",
|
|
|
|
|
dataIndex: "policy",
|
|
|
|
|
key: "policy",
|
|
|
|
|
width: 120,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "状态",
|
|
|
|
|
dataIndex: "statusTag",
|
|
|
|
|
key: "statusTag",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 160,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "操作",
|
|
|
|
|
dataIndex: "operate",
|
|
|
|
|
key: "operate",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 160,
|
|
|
|
|
scopedSlots: { customRender: "operate" },
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
data: [],
|
|
|
|
|
};
|
|
|
|
|
@ -176,20 +265,29 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
async getBill() {
|
|
|
|
|
console.log("click");
|
|
|
|
|
console.log(this.pagination.searchTag);
|
|
|
|
|
console.log(this.pagination.statusTag);
|
|
|
|
|
try {
|
|
|
|
|
this.isspinning = true;
|
|
|
|
|
const { data } = await userBillApi(this.pagination);
|
|
|
|
|
console.log(data);
|
|
|
|
|
if (data.status === 200) {
|
|
|
|
|
// console.log();
|
|
|
|
|
|
|
|
|
|
this.data = data.data.recordList;
|
|
|
|
|
this.data.forEach((item, index) => {
|
|
|
|
|
console.log(item);
|
|
|
|
|
item.updateTime = formatDateYMD(item.updateTime);
|
|
|
|
|
if (item.sex === 1) {
|
|
|
|
|
item.sex = "男";
|
|
|
|
|
} else if (item.sex === 2) {
|
|
|
|
|
item.sex = "女";
|
|
|
|
|
} else {
|
|
|
|
|
item.sex = "未知";
|
|
|
|
|
}
|
|
|
|
|
item.statusTag = getUserApplyOrderStatusById(item.status);
|
|
|
|
|
item.interviewTime = formatDateYMDHMS(item.interviewTime);
|
|
|
|
|
item.index = index + 1;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log(this.data);
|
|
|
|
|
console.log(true);
|
|
|
|
|
this.pagination.total = data.data.recordCount;
|
|
|
|
|
}
|
|
|
|
|
@ -201,17 +299,214 @@ export default {
|
|
|
|
|
resetpag() {
|
|
|
|
|
this.pagination = {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 2,
|
|
|
|
|
total: 8, //分页配置
|
|
|
|
|
searchTag: this.pagination.searchTag,
|
|
|
|
|
pageSize: 6,
|
|
|
|
|
total: null, //分页配置
|
|
|
|
|
statusTag: this.pagination.statusTag,
|
|
|
|
|
};
|
|
|
|
|
this.getBill();
|
|
|
|
|
},
|
|
|
|
|
customRendert(a) {
|
|
|
|
|
console.log(a);
|
|
|
|
|
this.$message.success(a.id);
|
|
|
|
|
// console.log(c);
|
|
|
|
|
},
|
|
|
|
|
showdiymodal(info) {
|
|
|
|
|
// 显示 身份证图片弹出框
|
|
|
|
|
console.log(info);
|
|
|
|
|
this.isdiymodalshow = true;
|
|
|
|
|
if (info.idCardImageUrl !== null && info.idCardImageUrl !== "") {
|
|
|
|
|
this.idcardimg = info.idCardImageUrl;
|
|
|
|
|
}
|
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
movebox(e) {
|
|
|
|
|
// 移动身份证弹出框
|
|
|
|
|
let modalbox = document.querySelector("#diymodal");
|
|
|
|
|
var x = e.pageX - modalbox.offsetLeft;
|
|
|
|
|
var y = e.pageY - modalbox.offsetTop;
|
|
|
|
|
var mousemove = function (e) {
|
|
|
|
|
modalbox.style.left = e.pageX - x + "px"; // e.pageX是鼠标在点击之后移动的时候实时传过来的坐标信息,而x是在点击的一瞬间就确定的坐标,
|
|
|
|
|
modalbox.style.top = e.pageY - y + "px";
|
|
|
|
|
};
|
|
|
|
|
modalbox.addEventListener("mousemove", mousemove);
|
|
|
|
|
var mouseup = function () {
|
|
|
|
|
// modalbox.removeEventListener("mousedown", mousedown);
|
|
|
|
|
modalbox.removeEventListener("mousemove", mousemove);
|
|
|
|
|
};
|
|
|
|
|
modalbox.addEventListener("mouseup", mouseup);
|
|
|
|
|
},
|
|
|
|
|
mousewhell(e) {
|
|
|
|
|
// 滚动鼠标缩放图片
|
|
|
|
|
let that = this;
|
|
|
|
|
console.log(e);
|
|
|
|
|
console.log(that.scaleNum);
|
|
|
|
|
console.log(this.scaleNum);
|
|
|
|
|
var delta = 0;
|
|
|
|
|
let imgbox = document.querySelector(".imgbox");
|
|
|
|
|
// if (Math.abs(that.rotateNum / 90) % 2 !== 0) {
|
|
|
|
|
// imgbox.style.transformOrigin = `${e.offsetY}px ${e.offsetX}px`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
|
|
|
|
|
// } else {
|
|
|
|
|
imgbox.style.transformOrigin = `${e.offsetX}px ${e.offsetY}px`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
|
|
|
|
|
// }
|
|
|
|
|
var handle = function (delta) {
|
|
|
|
|
// let
|
|
|
|
|
let scaleNum = (that.scaleNum += delta / 15);
|
|
|
|
|
if (delta < 0) {
|
|
|
|
|
//向下滚动
|
|
|
|
|
console.log(that.scaleNum);
|
|
|
|
|
if (scaleNum <= 0.5) {
|
|
|
|
|
that.scaleNum = 0.5;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
//向上滚动
|
|
|
|
|
console.log(that.scaleNum);
|
|
|
|
|
if (scaleNum >= 3) {
|
|
|
|
|
that.scaleNum = 3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
imgbox.style.transform = `scale(${that.scaleNum})`;
|
|
|
|
|
};
|
|
|
|
|
if (!e) e = window.event;
|
|
|
|
|
if (e.wheelDelta) {
|
|
|
|
|
//IE、chrome浏览器使用的是wheelDelta，并且值为“正负180”
|
|
|
|
|
delta = e.wheelDelta / 180;
|
|
|
|
|
if (window.opera) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
|
|
|
|
|
} else if (e.detail) {
|
|
|
|
|
//FF浏览器使用的是detail,其值为“正负3”
|
|
|
|
|
delta = -e.detail / 3;
|
|
|
|
|
}
|
|
|
|
|
if (delta) {
|
|
|
|
|
handle(delta);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
closemodal() {
|
|
|
|
|
this.isdiymodalshow = false;
|
|
|
|
|
this.idcardimg = "";
|
|
|
|
|
this.scaleNum = 1;
|
|
|
|
|
},
|
|
|
|
|
rotate(e) {
|
|
|
|
|
let imgbox1 = document.querySelector(".imgbox1");
|
|
|
|
|
let imgbox = document.querySelector(".imgbox");
|
|
|
|
|
this.scaleNum = 1;
|
|
|
|
|
console.log(this.scaleNum);
|
|
|
|
|
this.rotateNum += e;
|
|
|
|
|
console.log(imgbox1.style);
|
|
|
|
|
console.log(this.rotateNum);
|
|
|
|
|
imgbox.style.transformOrigin = `50% 50%`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
|
|
|
|
|
// imgbox.style.transformOrigin = `${e.offsetX}px ${e.offsetY}px`; // 设置图片的缩放中心,保证跟随鼠标的位置进行图片的缩放
|
|
|
|
|
|
|
|
|
|
imgbox1.style.transform = `rotate(${this.rotateNum}deg)`;
|
|
|
|
|
this.mousewhell(e);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.mybill-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
min-height: 536px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 1px 10px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
.diymodal {
|
|
|
|
|
// display: none;
|
|
|
|
|
width: 512px;
|
|
|
|
|
height: 512px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
border: #ebebeb solid 1px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
box-shadow: 0px 5px 20px #ddd;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
transform: translate(-50%, -60%);
|
|
|
|
|
.title {
|
|
|
|
|
height: 30px;
|
|
|
|
|
border-bottom: 1px solid rgb(240, 240, 240);
|
|
|
|
|
i {
|
|
|
|
|
float: right;
|
|
|
|
|
width: 30px;
|
|
|
|
|
margin: 2px 3px 0 0;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.body {
|
|
|
|
|
height: calc(100% - 60px);
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.imgbox1 {
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
.imgbox {
|
|
|
|
|
position: relative;
|
|
|
|
|
// width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-repeat: no-repeat !important;
|
|
|
|
|
background-size: contain !important;
|
|
|
|
|
background-position: center center !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.warningbox {
|
|
|
|
|
height: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
> div:first-child {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
img {
|
|
|
|
|
width: 88px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
> div:last-child {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
button {
|
|
|
|
|
float: right;
|
|
|
|
|
width: 72px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
background-color: #ff6a00;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// img {
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.footer {
|
|
|
|
|
height: 40px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-top: 1px solid rgb(240, 240, 240);
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
i {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
color: #a1a1a1;
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: 25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contenttitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
@ -250,4 +545,18 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.contentbody {
|
|
|
|
|
/deep/ .ant-table-placeholder {
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
> div {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 131px;
|
|
|
|
|
top: 30px;
|
|
|
|
|
// transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.icon-zhengjian {
|
|
|
|
|
transform: scaleX(-1.2);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
ws
4 years ago
