|
|
|
|
@ -1,23 +1,50 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="townsman-container w">
|
|
|
|
|
<div class="contenttitle">
|
|
|
|
|
<!-- <span>我的老乡</span> -->
|
|
|
|
|
<div @click="getTownsman">
|
|
|
|
|
<button
|
|
|
|
|
@click="pagination.searchTag = 1"
|
|
|
|
|
:class="{ townsmanactive: pagination.searchTag === 1 }"
|
|
|
|
|
<ul @click="resetpag">
|
|
|
|
|
<li
|
|
|
|
|
@click="pagination.status = 0"
|
|
|
|
|
:class="{ townsmanactive: pagination.status === 0 }"
|
|
|
|
|
>
|
|
|
|
|
已在职
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
@click="pagination.searchTag = 0"
|
|
|
|
|
:class="{ townsmanactive: pagination.searchTag === 0 }"
|
|
|
|
|
全部<span>{{ pagination.total ? pagination.total : "0" }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pagination.status = 1"
|
|
|
|
|
:class="{ townsmanactive: pagination.status === 1 }"
|
|
|
|
|
>
|
|
|
|
|
未在职
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
空闲中<span>{{ pagination.total ? pagination.total : "0" }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pagination.status = 2"
|
|
|
|
|
:class="{ townsmanactive: pagination.status === 2 }"
|
|
|
|
|
>
|
|
|
|
|
报名中<span>{{ pagination.total ? pagination.total : "0" }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
@click="pagination.status = 3"
|
|
|
|
|
:class="{ townsmanactive: pagination.status === 3 }"
|
|
|
|
|
>
|
|
|
|
|
在职中<span>{{ pagination.total ? pagination.total : "0" }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="contentbody">
|
|
|
|
|
<div class="searchbox">
|
|
|
|
|
<div class="searchinput">
|
|
|
|
|
<a-input
|
|
|
|
|
placeholder="请输入老乡姓名/身份证号"
|
|
|
|
|
@keyup.enter="onSearch"
|
|
|
|
|
@input="resetsearch"
|
|
|
|
|
v-model="pagination.keys"
|
|
|
|
|
><i slot="prefix" class="iconfont icon-sousuo"></i>
|
|
|
|
|
<button slot="suffix" @click="onSearch">搜索</button>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pagechange">
|
|
|
|
|
<button @click="changepage(-1)">上一页</button>
|
|
|
|
|
<button @click="changepage(1)">下一页</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a-table
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:data-source="data"
|
|
|
|
|
@ -37,7 +64,7 @@
|
|
|
|
|
<a-pagination
|
|
|
|
|
:current="+pagination.pageNum"
|
|
|
|
|
:default-current="1"
|
|
|
|
|
:defaultPageSize="1"
|
|
|
|
|
:defaultPageSize="2"
|
|
|
|
|
:total="pagination.total"
|
|
|
|
|
@change="onChange"
|
|
|
|
|
/>
|
|
|
|
|
@ -57,7 +84,10 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { userTownsmanApi } from "../../../../api/userinfo";
|
|
|
|
|
import { formatDateYMD } from "../../../../utils/commonUtil";
|
|
|
|
|
import {
|
|
|
|
|
formatDateYMD,
|
|
|
|
|
getUserApplyOrderStatusById,
|
|
|
|
|
} from "../../../../utils/commonUtil";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
@ -85,19 +115,30 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
pagination: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 1,
|
|
|
|
|
pageSize: 2,
|
|
|
|
|
total: null, //分页配置
|
|
|
|
|
searchTag: 1,
|
|
|
|
|
status: 0,
|
|
|
|
|
// searchTag: 1,
|
|
|
|
|
},
|
|
|
|
|
isspinning: false,
|
|
|
|
|
columns: [
|
|
|
|
|
sortedInfo: null,
|
|
|
|
|
|
|
|
|
|
data: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {
|
|
|
|
|
columns() {
|
|
|
|
|
let { sortedInfo } = this;
|
|
|
|
|
sortedInfo = sortedInfo || {};
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: "序号",
|
|
|
|
|
dataIndex: "index",
|
|
|
|
|
key: "index",
|
|
|
|
|
scopedSlots: { customRender: "index" },
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 60,
|
|
|
|
|
width: 40,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "老乡姓名",
|
|
|
|
|
@ -111,31 +152,45 @@ export default {
|
|
|
|
|
dataIndex: "age",
|
|
|
|
|
key: "age",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 50,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "民族",
|
|
|
|
|
dataIndex: "nation",
|
|
|
|
|
key: "nation",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 50,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "手机号",
|
|
|
|
|
dataIndex: "tel",
|
|
|
|
|
key: "tel",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "身份证号",
|
|
|
|
|
dataIndex: "idCard",
|
|
|
|
|
key: "idCard",
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
// width: 50,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
data: [],
|
|
|
|
|
};
|
|
|
|
|
{
|
|
|
|
|
title: "状态",
|
|
|
|
|
dataIndex: "userApplyOrder",
|
|
|
|
|
key: "userApplyOrder",
|
|
|
|
|
sorter: (a, b) => {
|
|
|
|
|
a.userApplyOrderStatus - b.userApplyOrderStatus;
|
|
|
|
|
},
|
|
|
|
|
sortOrder:
|
|
|
|
|
sortedInfo.columnKey === "userApplyOrder" && sortedInfo.order,
|
|
|
|
|
ellipsis: true,
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
return columns;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {},
|
|
|
|
|
// 侦听器
|
|
|
|
|
watch: {},
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
@ -154,6 +209,7 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
onChange(e) {
|
|
|
|
|
this.pagination.pageNum = e;
|
|
|
|
|
console.log(this.pagination);
|
|
|
|
|
this.getTownsman();
|
|
|
|
|
console.log(e);
|
|
|
|
|
},
|
|
|
|
|
@ -177,16 +233,20 @@ export default {
|
|
|
|
|
// let jobinfo = {...this.pagination , searchTag:1}
|
|
|
|
|
try {
|
|
|
|
|
this.isspinning = true;
|
|
|
|
|
console.log(this.pagination);
|
|
|
|
|
const { data } = await userTownsmanApi(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.userApplyOrder = getUserApplyOrderStatusById(
|
|
|
|
|
item.userApplyOrderStatus
|
|
|
|
|
);
|
|
|
|
|
item.updateTime = formatDateYMD(item.updateTime);
|
|
|
|
|
item.index = index + 1;
|
|
|
|
|
});
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
|
|
console.log(true);
|
|
|
|
|
this.pagination.total = data.data.recordCount;
|
|
|
|
|
@ -205,6 +265,46 @@ export default {
|
|
|
|
|
return document.body;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
resetpag() {
|
|
|
|
|
this.pagination = {
|
|
|
|
|
//分页配置
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 2,
|
|
|
|
|
total: null,
|
|
|
|
|
status: this.pagination.status,
|
|
|
|
|
};
|
|
|
|
|
this.getTownsman();
|
|
|
|
|
},
|
|
|
|
|
resetsearch(e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
if (e.target.value.length === 0) {
|
|
|
|
|
this.pagination.keys = "";
|
|
|
|
|
|
|
|
|
|
this.getTownsman();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSearch() {
|
|
|
|
|
this.getTownsman();
|
|
|
|
|
},
|
|
|
|
|
changepage(num) {
|
|
|
|
|
console.log(Math.ceil(this.pagination.total / this.pagination.pageSize));
|
|
|
|
|
if (
|
|
|
|
|
(this.pagination.pageNum === 1 && num === -1) ||
|
|
|
|
|
(this.pagination.pageNum ===
|
|
|
|
|
Math.ceil(this.pagination.total / this.pagination.pageSize) &&
|
|
|
|
|
num === 1)
|
|
|
|
|
) {
|
|
|
|
|
if (num === -1) {
|
|
|
|
|
this.$message.warning("已经到第一页了");
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning("已经到最后一页了");
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
this.pagination.pageNum += num;
|
|
|
|
|
}
|
|
|
|
|
this.getTownsman();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -212,23 +312,62 @@ export default {
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.townsman-container {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #0000;
|
|
|
|
|
}
|
|
|
|
|
.contenttitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
padding-bottom: 0px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
border-bottom: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
|
|
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
span {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
div {
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 40px;
|
|
|
|
|
.townsmanactive {
|
|
|
|
|
border-color: #ff6a00;
|
|
|
|
|
// border-color: #;
|
|
|
|
|
width: 128px;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
border-bottom: 2px solid #ff6a00;
|
|
|
|
|
> span {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 118px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
// height: 40px;
|
|
|
|
|
padding-bottom: 16px;
|
|
|
|
|
color: #666;
|
|
|
|
|
// line-height: 40px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
transition: width 0.2s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
> span {
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 5px;
|
|
|
|
|
// transform: translateY(-50%);
|
|
|
|
|
background-color: #eeeeee;
|
|
|
|
|
}
|
|
|
|
|
&:last-child::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
width: 100px;
|
|
|
|
|
@ -238,7 +377,6 @@ export default {
|
|
|
|
|
border: 1px solid #cccccc;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
margin-right: -1px;
|
|
|
|
|
// transition: all 1s;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
@ -254,6 +392,92 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.contentbody {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/deep/ .searchbox {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
.searchinput {
|
|
|
|
|
width: 326px;
|
|
|
|
|
position: relative;
|
|
|
|
|
.ant-input {
|
|
|
|
|
// width: 300px;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 32px;
|
|
|
|
|
text-indent: 10px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
|
|
border-radius: 136px;
|
|
|
|
|
box-shadow: 0px 2px 4px 0px transparent;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
border-color: #e9e9e9;
|
|
|
|
|
// z-index: ;
|
|
|
|
|
&::placeholder {
|
|
|
|
|
text-indent: 10px;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #ff6a00;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
&:focus {
|
|
|
|
|
border-color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-input-affix-wrapper {
|
|
|
|
|
.ant-input-prefix {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 20px;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 16px;
|
|
|
|
|
i {
|
|
|
|
|
color: #c9c9c9;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-input-suffix {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
right: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
button {
|
|
|
|
|
width: 70px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
color: white;
|
|
|
|
|
background: #ff6a00;
|
|
|
|
|
border-color: #ff6a00;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #ff842b;
|
|
|
|
|
}
|
|
|
|
|
// &:focus {
|
|
|
|
|
// border: none;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagechange {
|
|
|
|
|
button {
|
|
|
|
|
width: 66px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #ff6a00;
|
|
|
|
|
color: #ff6a00;
|
|
|
|
|
}
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-table-placeholder {
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
> div {
|
|
|
|
|
@ -263,5 +487,30 @@ export default {
|
|
|
|
|
// transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-table-content {
|
|
|
|
|
.ant-table-body {
|
|
|
|
|
.ant-table-thead {
|
|
|
|
|
th {
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
|
> span {
|
|
|
|
|
// line-height: 22px;
|
|
|
|
|
> div {
|
|
|
|
|
// line-height: 1;
|
|
|
|
|
border-left: 1px solid #ccc;
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-table-tbody {
|
|
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
