mz666
/
bocai_supplyChain_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
cyl/dev
wangxia 3 years ago
parent 05e821dd75
commit 9b8d8d0799
4 changed files with 379 additions and 165 deletions
Show Stats Download Patch File Download Diff File

2
src/App.vue
Unescape Escape View File

@ -33,6 +33,8 @@ export default {
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

7
src/api/userinfo.js
Unescape Escape View File

@ -48,6 +48,13 @@ export function userBillNumberApi(data) {
params: data, params: data,
}); });
} }
// 获取跟进记录详情
export function userBillDetailApi(data) {
return request({
url: "/yishoudan/user/apply/order/details?orderId=" + data,
// method: "post",
});
}
// 获取用户信息 // 获取用户信息
export function userBaseInfoApi(data) { export function userBaseInfoApi(data) {
return request({ return request({

450
src/components/userinfo/usercenter/components/mybill.vue
Unescape Escape View File

@ -2,46 +2,25 @@
<div class="mybill-container w"> <div class="mybill-container w">
<div class="contenttitle"> <div class="contenttitle">
<ul @click="resetpag"> <ul @click="resetpag">
<li <li @click="pagination.status = -1" :class="{ townsmanactive: pagination.status === -1 }">
@click="pagination.status = -1"
:class="{ townsmanactive: pagination.status === -1 }"
>
全部<span>{{ billNumber.num == 0 ? "" : billNumber.num }}</span> 全部<span>{{ billNumber.num == 0 ? "" : billNumber.num }}</span>
</li> </li>
<li <li @click="pagination.status = 10" :class="{ townsmanactive: pagination.status === 10 }">
@click="pagination.status = 10"
:class="{ townsmanactive: pagination.status === 10 }"
>
待审核<span>{{ billNumber.num10 == 0 ? "" : billNumber.num10 }}</span> 待审核<span>{{ billNumber.num10 == 0 ? "" : billNumber.num10 }}</span>
</li> </li>
<li <li @click="pagination.status = 20" :class="{ townsmanactive: pagination.status === 20 }">
@click="pagination.status = 20"
:class="{ townsmanactive: pagination.status === 20 }"
>
待接待<span>{{ billNumber.num20 == 0 ? "" : billNumber.num20 }}</span> 待接待<span>{{ billNumber.num20 == 0 ? "" : billNumber.num20 }}</span>
</li> </li>
<li <li @click="pagination.status = 25" :class="{ townsmanactive: pagination.status === 25 }">
@click="pagination.status = 25"
:class="{ townsmanactive: pagination.status === 25 }"
>
待面试<span>{{ billNumber.num25 == 0 ? "" : billNumber.num25 }}</span> 待面试<span>{{ billNumber.num25 == 0 ? "" : billNumber.num25 }}</span>
</li> </li>
<li <li @click="pagination.status = 30" :class="{ townsmanactive: pagination.status === 30 }">
@click="pagination.status = 30"
:class="{ townsmanactive: pagination.status === 30 }"
>
待入职<span>{{ billNumber.num30 == 0 ? "" : billNumber.num30 }}</span> 待入职<span>{{ billNumber.num30 == 0 ? "" : billNumber.num30 }}</span>
</li> </li>
<li <li @click="pagination.status = 40" :class="{ townsmanactive: pagination.status === 40 }">
@click="pagination.status = 40"
:class="{ townsmanactive: pagination.status === 40 }"
>
跟在职<span>{{ billNumber.num40 == 0 ? "" : billNumber.num40 }}</span> 跟在职<span>{{ billNumber.num40 == 0 ? "" : billNumber.num40 }}</span>
</li> </li>
<li <li @click="pagination.status = 999" :class="{ townsmanactive: pagination.status === 999 }">
@click="pagination.status = 999"
:class="{ townsmanactive: pagination.status === 999 }"
>
已完成<span>{{ 已完成<span>{{
billNumber.num999 == 0 ? "" : billNumber.num999 billNumber.num999 == 0 ? "" : billNumber.num999
}}</span> }}</span>
@ -69,13 +48,7 @@
<div class="contentbody"> <div class="contentbody">
<div class="searchbox"> <div class="searchbox">
<div class="searchinput"> <div class="searchinput">
<a-input <a-input placeholder="搜索工单号/职位/姓名/电话/身份证号" allowClear @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys"><i slot="prefix" class="iconfont icon-sousuo"></i>
placeholder="搜索工单号/职位/姓名/电话/身份证号"
allowClear
@keyup.enter="onSearch"
@input="resetsearch"
v-model="pagination.keys"
><i slot="prefix" class="iconfont icon-sousuo"></i>
<button slot="suffix" @click="onSearch">搜索</button> <button slot="suffix" @click="onSearch">搜索</button>
</a-input> </a-input>
<div> <div>
@ -98,22 +71,9 @@
<!-- <button @click="statusFilter">filter</button> --> <!-- <button @click="statusFilter">filter</button> -->
<li> <li>
<div>状态：</div> <div>状态：</div>
<a-select <a-select size="small" placeholder="" allowClear @change="resetStatus" :dropdownMatchSelectWidth="false" dropdownClassName="statusclass" style="">
size="small" <a-select-option v-for="(i, index) in orderStatus" :key="index" @click="handleChange(i)">
placeholder="" {{ i.name }}</a-select-option>
allowClear
@change="resetStatus"
:dropdownMatchSelectWidth="false"
dropdownClassName="statusclass"
style=""
>
<a-select-option
v-for="(i, index) in orderStatus"
:key="index"
@click="handleChange(i)"
>
{{ i.name }}</a-select-option
>
</a-select> </a-select>
</li> </li>
</ul> </ul>
@ -125,12 +85,7 @@
<a-empty class="nodata" description="暂无数据" /> <a-empty class="nodata" description="暂无数据" />
</template> </template>
<div class="subsetbox" v-if="!isspinning"> <div class="subsetbox" v-if="!isspinning">
<div <div class="infoSubset" v-for="(item, index) in billList" :key="item.id" :class="item.isDown ? '' : 'isDownstyle'">
class="infoSubset"
v-for="(item, index) in billList"
:key="item.id"
:class="item.isDown ? '' : 'isDownstyle'"
>
<ul class="proxyInfo"> <ul class="proxyInfo">
<li>报名时间: {{ item.createTime }}</li> <li>报名时间: {{ item.createTime }}</li>
<li>工单号: {{ item.orderNum }}</li> <li>工单号: {{ item.orderNum }}</li>
@ -143,14 +98,9 @@
<ul class="billInfo" style=""> <ul class="billInfo" style="">
<li> <li>
<div class="serial">{{ index + 1 }}</div> <div class="serial">{{ index + 1 }}</div>
<i <i class="iconfont icon-shenfenzheng" :style="{
class="iconfont icon-shenfenzheng"
:style="{
color: item.idCardImageUrl !== '' ? '#ff4400cc' : '#666', color: item.idCardImageUrl !== '' ? '#ff4400cc' : '#666',
}" }" @click.stop="showdiymodal(item)"></i><span>{{ item.userName }}/{{ item.sex }}/{{ item.age }}</span>
@click.stop="showdiymodal(item)"
></i
><span>{{ item.userName }}/{{ item.sex }}/{{ item.age }}</span>
<span>{{ item.tel }}</span> <span>{{ item.tel }}</span>
</li> </li>
<li> <li>
@ -158,49 +108,23 @@
</li> </li>
<li> <li>
<p>{{ item.policy }}</p> <p>{{ item.policy }}</p>
<div <div v-show="item.isunfold" class="policyControl" @click="changeStatus(item, index)" :ref="'Control' + index">
v-show="item.isunfold" <span v-show="item.controlUnfold">展开</span><span v-show="!item.controlUnfold">收起</span>
class="policyControl"
@click="changeStatus(item, index)"
:ref="'Control' + index"
>
<span v-show="item.controlUnfold">展开</span
><span v-show="!item.controlUnfold">收起</span>
</div> </div>
</li> </li>
<li> <li>
<span <span style="color: #ff4400; cursor: pointer" @click="showDetail(item)">{{ item.statusTag }}</span><span v-show="item.statusShowTime">{{ item.statusTimeInfo }}: {{ item.statusShowTime }}</span>
style="color: #ff4400; cursor: pointer" <span v-show="item.status == 40 || item.status == 50">具体以出名单时间为准</span>
@click="showDetail(item)"
>{{ item.statusTag }}</span
><span v-show="item.statusShowTime"
>{{ item.statusTimeInfo }}: {{ item.statusShowTime }}</span
>
<span v-show="item.status == 40 || item.status == 50"
>具体以出名单时间为准</span
>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="pagecontainer" v-if="billList.length !== 0"> <div class="pagecontainer" v-if="billList.length !== 0">
<a-pagination <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="10" :total="pagination.total" @change="onChange" />
:current="+pagination.pageNum"
:default-current="1"
:defaultPageSize="10"
:total="pagination.total"
@change="onChange"
/>
<div class="ant-pagination-options-quick-jumper"> <div class="ant-pagination-options-quick-jumper">
<span>共{{ pagination.total }}条，</span> <span>共{{ pagination.total }}条，</span>
跳至<input 跳至<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" style="" />页
ref="pageinput"
type="text"
@keyup.enter="inputpageChange"
@blur="inputpageChange"
style=""
/>页
</div> </div>
</div> </div>
</div> </div>
@ -210,10 +134,7 @@
</div> </div>
<div class="body" @mousewheel.prevent="mousewhell"> <div class="body" @mousewheel.prevent="mousewhell">
<div class="imgbox1" v-if="idcardimg !== ''"> <div class="imgbox1" v-if="idcardimg !== ''">
<div <div class="imgbox" :style="{ background: `url('${idcardimg}')` }"></div>
class="imgbox"
:style="{ background: `url('${idcardimg}')` }"
></div>
</div> </div>
<div class="warningbox" v-else> <div class="warningbox" v-else>
<div> <div>
@ -225,23 +146,99 @@
<!-- <img :src="idcardimg" alt="" draggable="false" /> --> <!-- <img :src="idcardimg" alt="" draggable="false" /> -->
</div> </div>
<div class="footer"> <div class="footer">
<i <i class="iconfont icon-rotatexuanzhuan" title="旋转" @click="rotate(-90)"></i>
class="iconfont icon-rotatexuanzhuan" <i class="iconfont icon-rotatexuanzhuan2" title="旋转" @click="rotate(90)"></i>
title="旋转"
@click="rotate(-90)"
></i>
<i
class="iconfont icon-rotatexuanzhuan2"
title="旋转"
@click="rotate(90)"
></i>
</div> </div>
</div> </div>
<a-modal class="billDetailModal" v-model="billDetailVisible" width="756px" @cancel="billDetailModalClose" :footer="null">
<div slot='title'>
跟进记录
</div>
<div id="progressinfo" v-if="Object.keys(currentBillDetail).length != 0">
<template v-for="(group,key) in currentBillDetail">
<div class="titleMain" :key="key">
<div v-if="spliceStr(key) == '1'">
<img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/shz.svg" alt="">
报名审核中
</div>
<div v-if="spliceStr(key) == '2'"> <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt="">报名成功</div>
<div v-if="spliceStr(key) == '3'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/mstg.svg" alt="">待入职</div>
<div v-if="spliceStr(key) == '4'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/rzcg.svg" alt="">在职中</div>
<div v-if="spliceStr(key) == '5'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/ylz.svg" alt="">已离职</div>
<div v-if="spliceStr(key) == '6'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt="">已完成</div>
<div v-if="spliceStr(key) == '9'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yylz.svg" alt="">约离职</div>
<div v-if="spliceStr(key) == '11'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">报名失败</div>
<div v-if="spliceStr(key) == '12'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yjd.svg" alt="">已接到</div>
<div v-if="spliceStr(key) == '13'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">未接到</div>
<div v-if="spliceStr(key) == '14'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">面试未通过</div>
<div v-if="spliceStr(key) == '15'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">未入职</div>
</div>
<div v-for="(item,index) in group" class="ui-step-one">
<div class="cb-cricle"></div>
<div class="ui-list-info">
<!-- :style="padding-bottom: item.desp == '' ? '18px' : '24px';" -->
<div class="f12 c6" style="white-space: pre-line;" v-if="item.desp != ''">{{item.desp}}
<template v-if="item.policy"><span class="ml12" style="color:#1890ff;cursor: pointer;" @click="showInfo2(item.policy)">详情</span>
</template>
<a-modal title="报名信息" :visible="zzvisible" @cancel="policyModalCancel">
<span class="f16 c3 mb8 mt8 display-flex">
<span style="min-width:90px" class="dib tr">姓名：</span>
<span class="fwb" v-if='currentBillInfo.userName'>{{currentBillInfo.userName}}</span>
<span class="fwb" v-if='currentBillInfo.sex'>/{{currentBillInfo.sex == '1' || currentBillInfo.sex == '男' ? '男' : '女'}}</span>
<span class="fwb" v-if='currentBillInfo.age'>/{{currentBillInfo.age}}岁</span>
<span class="fwb" v-if='currentBillInfo.nation && currentBillInfo.nation!="族"'>/{{currentBillInfo.nation}}</span>
</span>
<span class="f16 c3 mb8 display-flex">
<span style="min-width:90px" class="dib tr">电话：</span>
<span style="color:#576B95;">{{currentBillInfo.tel == '' || currentBillInfo.tel == null || currentBillInfo.tel == 'undefined' ? '-' : currentBillInfo.tel}}</span>
</span>
<span class="f16 c3 mb8 display-flex">
<span style="min-width:90px" class="dib tr">身份证号：</span>
<span>{{currentBillInfo.idCard == '' || currentBillInfo.idCard == null || currentBillInfo.idCard == 'undefined' ? '-' : currentBillInfo.idCard}}</span>
</span>
<span class="f16 c3 mb8 display-flex">
<span style="min-width:90px" class="dib tr">家庭住址：</span>
<span>{{currentBillInfo.address == '' || currentBillInfo.address == null || currentBillInfo.address == 'undefined' ? '-' : currentBillInfo.address}}</span>
</span>
<div style="border-top: 1px dashed #eeeeee;margin-top: 10px;margin-bottom: 10px;"></div>
<span class="f16 c3 mb8 display-flex">
<span style="min-width:90px" class="dib tr">报名岗位：</span>
<span class="fwb">{{currentBillInfo.storeJobName || '-'}}</span>
</span>
<span class="f16 c3 mb8 display-flex">
<span style="min-width:90px" class="dib tr">政策：</span>
<span>{{currentBillInfo.policy || '-'}}</span>
</span>
<div class="bfbutton">
<a-button style="marginRight: 8px" @click="handleCancel">
复制文本
</a-button>
<a-button type="primary" @click="handleOk">
确定
</a-button>
</div>
</a-modal>
</div>
<div class="f12 c9 mt8">{{item.creator}} <span class="ml8">
{{ formatDateYMDHM(item.createTime) }}
</span></div>
</div>
</div>
</template>
</div>
<div v-else>
<a-empty class="nodata" description="暂无数据" style="padding:40px"/>
</div>
</a-modal>
</div> </div>
</template> </template>
<script> <script>
import { userBillApi, userBillNumberApi } from "../../../../api/userinfo"; import {
userBillApi,
userBillNumberApi,
userBillDetailApi,
} from "../../../../api/userinfo";
import { import {
getUserApplyOrderStatusById, getUserApplyOrderStatusById,
isEmptyCheck, isEmptyCheck,
@ -267,6 +264,10 @@ export default {
searchvalue: "", // 搜索框检索信息 searchvalue: "", // 搜索框检索信息
filterStatus: 1, // 排序状态 filterStatus: 1, // 排序状态
saveBill: [], // 缓存的报名列表 saveBill: [], // 缓存的报名列表
billDetailVisible: false, // 工单详情显示
currentBillDetail: {}, // 当前点击的报名详情
zzvisible: false, // 跟进记录的政策信息弹出框显示
currentBillInfo: {}, // 当前的工单跟进详情
pagination: { pagination: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
@ -759,11 +760,112 @@ export default {
// console.log(e); // console.log(e);
}, },
/* /*
显示报名详情 显示工单跟进记录弹出框
*/ */
showDetail(item) { showDetail(item) {
userBillDetailApi(item.id).then((res) => {
let { data } = res;
if (data.status == 200) {
console.log(res);
this.currentBillDetail = data.data.records;
} else {
this.currentBillDetail = {};
}
console.log(this.currentBillDetail);
console.log(this.currentBillDetail.length);
let test = {
}
console.log(test[0]);
console.log(toString(this.currentBillDetail) == '{}');
});
this.billDetailVisible = true;
console.log(item); console.log(item);
}, },
/*
关闭工单跟进记录弹出框
*/
billDetailModalClose() {
this.billDetailVisible = false;
},
/*
关闭政策显示框
*/
policyModalCancel() {
this.zzvisible = false;
},
/*
截出跟进记录字符串
*/
spliceStr(str) {
return str.split("_")[1];
},
/*
显示跟进记录详情弹出框
*/
showInfo2(record) {
this.currentBillInfo = record;
this.zzvisible = true;
},
/*
复制跟进记录详情文本
*/
handleCancel() {
var that = this;
var text =
"姓名：" +
that.currentBillInfo.userName +
"/" +
(that.currentBillInfo.sex == 1 || that.currentBillInfo.sex == "男"
? "男"
: "女") +
"/" +
that.currentBillInfo.age +
"岁" +
(that.currentBillInfo.nation == "族"
? ""
: "/" + that.currentBillInfo.nation) +
"\n电话：" +
(that.currentBillInfo.tel == "" ||
that.currentBillInfo.tel == undefined ||
that.currentBillInfo.tel == null
? "-"
: that.currentBillInfo.tel) +
"\n身份证号：" +
(that.currentBillInfo.idCard == ""
? "-"
: that.currentBillInfo.idCard) +
"\n家庭地址：" +
(that.currentBillInfo.address == "" ||
that.currentBillInfo.address == undefined ||
that.currentBillInfo.address == null
? "-"
: that.currentBillInfo.address) +
"\n报名岗位：" +
that.currentBillInfo.storeJobName +
"\n政策：" +
that.currentBillInfo.policy;
this.zzvisible = false;
this.$copyText(text).then(
(e) => {
console.log("复制成功：", e);
that.$message.success("复制成功");
},
(e) => {
console.log("复制失败：", e);
}
);
},
/*
关闭跟进详情弹出框
*/
handleOk() {
this.zzvisible = false;
},
formatDateYMDHM(time) {
return formatDateYMDHM(time);
},
}, },
}; };
</script> </script>
@ -1307,4 +1409,128 @@ export default {
.icon-zhengjian { .icon-zhengjian {
transform: scaleX(-1.2); transform: scaleX(-1.2);
} }
.billDetailModal {
/deep/ .ant-modal-content {
.ant-modal-body {
max-height: 700px;
overflow: auto;
padding: 30px;
// 跟进信息的状态
#progressinfo {
margin: 0 !important;
}
#progressinfo > div {
margin-left: 24px;
padding-top: 0;
padding-bottom: 0;
padding-right: 16px;
position: relative;
}
.titleMain div {
padding-bottom: 20px;
padding-left: 13px;
border-left: 2px solid #cccccc;
left: 16px;
line-height: 20px;
/*height: 22px;*/
font-size: 16px;
font-weight: bold;
color: #333333;
}
.cg-cricle,
.cb-cricle {
position: absolute;
left: -4.5px;
top: 1px;
background: #cccccc;
width: 10px;
height: 10px;
border-radius: 100%;
}
.ui-list-info {
padding-bottom: 24px;
border-left: 2px solid #cccccc;
padding-left: 13px;
position: relative;
top: -3px;
margin-bottom: -4px;
}
#progressinfo {
margin-top: 24px;
font-size: 14px;
margin-bottom: 125px;
ul {
margin-bottom: 0;
li {
display: flex;
justify-content: space-between;
align-items: center;
border-left: 1px solid #e8e8e8;
margin-left: 4px;
position: relative;
padding-bottom: 29px;
p {
margin-bottom: 0;
}
> div:first-child {
position: absolute;
width: 8px;
height: 8px;
left: -4.5px;
top: 0;
border: 2px solid #1890ff;
background-color: #fff;
border-radius: 50%;
box-sizing: border-box;
}
> div:nth-child(2) {
margin-left: 37px;
margin-top: -7px;
}
> div:last-child {
color: #ccc;
cursor: pointer;
}
}
li:last-child {
border-color: transparent;
}
}
.loadmore {
text-align: center;
color: #1890ff;
}
}
.titleMain > div > img {
position: absolute;
top: 0px;
left: -10px;
display: inline-block;
width: 20px;
height: 20px;
background-color: #ccc;
line-height: 20px;
border-radius: 50%;
padding: 2px;
}
.titleMain:first-of-type > div > img {
background-color: #ff4400;
}
}
.ant-modal-header {
background-color: #f5f5f5;
border-bottom: 0px solid #000;
}
}
}
</style> </style>

85
src/components/userinfo/usercenter/components/townsman.vue
Unescape Escape View File

@ -2,28 +2,16 @@
<div class="townsman-container w"> <div class="townsman-container w">
<div class="contenttitle"> <div class="contenttitle">
<ul @click="resetpag"> <ul @click="resetpag">
<li <li @click="pagination.status = 0" :class="{ townsmanactive: pagination.status === 0 }">
@click="pagination.status = 0"
:class="{ townsmanactive: pagination.status === 0 }"
>
全部<span>{{ statusNum.num0 == 0 ? "" : statusNum.num0 }}</span> 全部<span>{{ statusNum.num0 == 0 ? "" : statusNum.num0 }}</span>
</li> </li>
<li <li @click="pagination.status = 1" :class="{ townsmanactive: pagination.status === 1 }">
@click="pagination.status = 1"
:class="{ townsmanactive: pagination.status === 1 }"
>
空闲中<span>{{ statusNum.num1 == 0 ? "" : statusNum.num1 }}</span> 空闲中<span>{{ statusNum.num1 == 0 ? "" : statusNum.num1 }}</span>
</li> </li>
<li <li @click="pagination.status = 2" :class="{ townsmanactive: pagination.status === 2 }">
@click="pagination.status = 2"
:class="{ townsmanactive: pagination.status === 2 }"
>
报名中<span>{{ statusNum.num2 == 0 ? "" : statusNum.num2 }}</span> 报名中<span>{{ statusNum.num2 == 0 ? "" : statusNum.num2 }}</span>
</li> </li>
<li <li @click="pagination.status = 3" :class="{ townsmanactive: pagination.status === 3 }">
@click="pagination.status = 3"
:class="{ townsmanactive: pagination.status === 3 }"
>
在职中<span>{{ statusNum.num3 == 0 ? "" : statusNum.num3 }}</span> 在职中<span>{{ statusNum.num3 == 0 ? "" : statusNum.num3 }}</span>
</li> </li>
</ul> </ul>
@ -31,12 +19,7 @@
<div class="contentbody"> <div class="contentbody">
<div class="searchbox"> <div class="searchbox">
<div class="searchinput"> <div class="searchinput">
<a-input <a-input placeholder="请输入老乡姓名/身份证号" @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys"><i slot="prefix" class="iconfont icon-sousuo"></i>
placeholder="请输入老乡姓名/身份证号"
@keyup.enter="onSearch"
@input="resetsearch"
v-model="pagination.keys"
><i slot="prefix" class="iconfont icon-sousuo"></i>
<button slot="suffix" @click="onSearch">搜索</button> <button slot="suffix" @click="onSearch">搜索</button>
</a-input> </a-input>
</div> </div>
@ -45,46 +28,28 @@
<button @click="changepage(1)">下一页</button> <button @click="changepage(1)">下一页</button>
</div> </div>
</div> </div>
<a-table <a-table :columns="columns" :data-source="data" :pagination="false" @change="onChange" :loading="{
:columns="columns"
:data-source="data"
:pagination="false"
@change="onChange"
:loading="{
spinning: isspinning, spinning: isspinning,
tip: '加载中', tip: '加载中',
wrapperClassName: 'spinstyle', wrapperClassName: 'spinstyle',
}" }" :locale="tablenodata" :rowKey="(record) => record.index">
:locale="tablenodata"
:rowKey="(record) => record.index"
>
<a slot="name" slot-scope="text">{{ text }}</a> <a slot="name" slot-scope="text">{{ text }}</a>
<a <a slot="userDetail" style="color: #ff4400" slot-scope="text, text1" @click="toDetail(text1)">详情</a>
slot="userDetail"
style="color: #ff4400"
slot-scope="text, text1"
@click="toDetail(text1)"
>详情</a
>
</a-table> </a-table>
<div class="pagecontainer"> <div class="pagecontainer">
<a-pagination <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :total="pagination.total" @change="onChange" />
:current="+pagination.pageNum"
:default-current="1"
:defaultPageSize="8"
:total="pagination.total"
@change="onChange"
/>
<div class="ant-pagination-options-quick-jumper"> <div class="ant-pagination-options-quick-jumper">
<span>共{{ pagination.total }}条，</span>跳至<input <span>共{{ pagination.total }}条，</span>跳至<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
ref="pageinput"
type="text"
@keyup.enter="inputpageChange"
@blur="inputpageChange"
/>页
</div> </div>
</div> </div>
</div> </div>
<!-- 老乡详情的弹出框 -->
<a-modal class="townsmanDetailModal" transitionName="" v-model="townsmanDetailVisible" width="756px" @cancel="townsmanDetailModalClose" :footer="null">
<div slot='title'>
老乡详情
</div>
</a-modal>
</div> </div>
</template> </template>
@ -136,6 +101,7 @@ export default {
num3: 0, num3: 0,
}, },
data: [], data: [],
townsmanDetailVisible: false, // 控制详情弹出框的显示
}; };
}, },
// 计算属性 // 计算属性
@ -351,11 +317,18 @@ export default {
this.getTownsman(); this.getTownsman();
}, },
/* /*
前往详情页 弹出详情页
*/ */
toDetail(e) { toDetail(e) {
this.townsmanDetailVisible = true;
console.log(e); console.log(e);
}, },
/*
关闭详情弹出框
*/
townsmanDetailModalClose() {
this.townsmanDetailVisible = false;
},
}, },
}; };
</script> </script>
@ -571,4 +544,10 @@ export default {
/deep/ .ant-table-column-sorter-inner { /deep/ .ant-table-column-sorter-inner {
height: 16px !important; height: 16px !important;
} }
.townsmanDetailModal {
/deep/ .ant-modal-header {
background-color: #f5f5f5;
border-bottom: 0px solid #000;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save