1

src/api/userinfo.js

@@ -125,7 +125,7 @@ export function userTownsmanApi(data) {
   return request({
     url: "/yishoudan/agency/user/list",
     method: "post",
-    data: data,
+    params: data,
     // data,
   });
 }

src/components/userinfo/usercenter/components/townsman.vue

@@ -1,23 +1,50 @@
 <template>
   <div class="townsman-container w">
     <div class="contenttitle">
-      <!-- <span>我的老乡</span> -->
+      <ul @click="resetpag">
-      <div @click="getTownsman">
+        <li
-        <button
+          @click="pagination.status = 0"
-          @click="pagination.searchTag = 1"
+          :class="{ townsmanactive: pagination.status === 0 }"
-          :class="{ townsmanactive: pagination.searchTag === 1 }"
         >
-          已在职
+          全部<span>{{ pagination.total ? pagination.total : "0" }}</span>
-        </button>
+        </li>
-        <button
+        <li
-          @click="pagination.searchTag = 0"
+          @click="pagination.status = 1"
-          :class="{ townsmanactive: pagination.searchTag === 0 }"
+          :class="{ townsmanactive: pagination.status === 1 }"
         >
-          未在职
+          空闲中<span>{{ pagination.total ? pagination.total : "0" }}</span>
-        </button>
+        </li>
-      </div>
+        <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;
+  ul {
-    color: #ff6a00;
+    display: flex;
-  }
+    height: 40px;
-  div {
     .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>

src/utils/commonUtil.js

@@ -1198,13 +1198,26 @@ function getJobSpecialLabelNamesArray(jobSpecialLabelNames) {
  * 处理工单状态
  */
 export function userApplyOrderStatusArray() {
+  // let orderStatus = [
+  //   { id: "10", name: "审核中", value: "10", text: "审核中" },
+  //   { id: "20", name: "待面试", value: "20", text: "待面试" },
+  //   { id: "30", name: "待入职", value: "30", text: "待入职" },
+  //   { id: "40", name: "在职中", value: "40", text: "在职中" },
+  //   { id: "50", name: "待离职", value: "50", text: "待离职" },
+  //   { id: "60", name: "已完成", value: "60", text: "已完成" },
+  // ];
   let orderStatus = [
-    { id: "10", name: "审核中", value: "10", text: "审核中" },
+    { id: "10", name: "报名审核中", value: "10", text: "报名审核中", num: 0 },
-    { id: "20", name: "待面试", value: "20", text: "待面试" },
+    { id: "20", name: "审核通过", value: "20", text: "审核通过", num: 0 },
-    { id: "30", name: "待入职", value: "30", text: "待入职" },
+    { id: "21", name: "审核未通过", value: "21", text: "审核未通过", num: 0 },
-    { id: "40", name: "在职中", value: "40", text: "在职中" },
+    { id: "25", name: "已接到", value: "25", text: "已接到", num: 0 },
-    { id: "50", name: "待离职", value: "50", text: "待离职" },
+    { id: "26", name: "未接到", value: "26", text: "未接到", num: 0 },
-    { id: "60", name: "已完成", value: "60", text: "已完成" },
+    { id: "30", name: "待入职", value: "30", text: "待入职", num: 0 },
+    { id: "35", name: "面试未通过", value: "35", text: "面试未通过", num: 0 },
+    { id: "40", name: "在职中", value: "40", text: "在职中", num: 0 },
+    { id: "45", name: "未入职", value: "45", text: "未入职", num: 0 },
+    { id: "50", name: "已离职", value: "50", text: "已离职", num: 0 },
+    // { id: "60", name: "已完成", value: "60", text: "已完成", num: 0 }
   ];
   return orderStatus;
 }

src/views/main.vue

@@ -38,13 +38,13 @@
                 >我的报名
               </router-link>
             </li>
-            <!-- <li>
+            <li>
               <router-link
                 to="/mytownsman"
                 :class="routertitleindex === 4 ? 'titleactiveafter' : ''"
                 >我的老乡
               </router-link>
-            </li> -->
+            </li>
             <!-- <li>
               <router-link to="/serviceoutlets"
                 ><a