nsgk_mobile/src/views/contracted/village/contractor/contractor.vue

<template>
  <div class="app-container">

    <van-nav-bar :title="$route.query.deptName" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />

    <div class="tap_block">
      <p class="active">承包方</p>
      <p @click="$router.push({path:'/contracted/village/employer', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">发包方</p>
      <p @click="$router.push({path:'/contracted/village/massif', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地块</p>
      <p @click="$router.push({path:'/contracted/village/map', query: { deptId: $route.query.deptId, deptName: $route.query.deptName }})">地图</p>
    </div>

    <div class="search_main">

      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="请输入姓名搜索"
        @search="onSearch"
      ></van-search>

      <div class="search_btn" @click="addContractor">
        <p class="active"> + 新增</p>
      </div>

    </div>

    <div class="second_tap">
      <!-- <p class="active">待调查 1553</p>
      <p>挂起 527</p>
      <p>已完成 321</p> -->
      <p v-for="dict in surveyStatusOptions" :key="dict.dictValue" :class="{active: surveyStatus === dict.dictValue}" @click="surveyStatusChange(dict.dictValue, dict.dictLabel)">{{dict.dictLabel}}</p>
    </div>

    <p class="page_tab">{{ tagName }} <span>{{ totalNum }} 户</span></p>
    <div class="list_main">
      <van-row style="color: #888888;font-size: 14px;">
        <van-col span="5">姓名</van-col>
        <van-col span="14">证件号</van-col>
        <van-col span="5">成员数</van-col>
      </van-row>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="getList"
      >
        <van-swipe-cell v-for="(item,index) in cbfList" :key="item.id">
          <van-row @click="goDetail(item)">
            <van-col span="5">{{ item.cbfmc }}</van-col>
            <van-col span="14">{{ item.cbfzjhm }}</van-col>
            <van-col span="5" style="color: #f78200">{{ item.cbfcysl }}</van-col>
          </van-row>
          <template #right>
            <van-button square type="danger" text="删除" native-type="button" @click="deleteContractor(item.id, index)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { listCbf, deleteCbf } from "@/api/contracted/cbf";

  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        loading:false,
        finished:false,
        value:'',
        // 确权调查状态字典
        surveyStatusOptions: [],
        // 调查状态
        surveyStatus: null,
        // 查询参数
        queryParams: {
          deptId: null,
          cbfmc: null,
          surveyStatus: null,
          pageNum:1,
          pageSize:20,
        },
        // 承包方列表
        cbfList: [],
        // 当前选中的调查状态
        tagName: null,
        // 当前调查状态下的承包方总数
        totalNum: 0,
      };
    },
    created() {
      this.queryParams.deptId = this.$route.query.deptId;
      this.getDicts("confirmed_survey_status").then(response => {
        this.surveyStatusOptions = response.data;
        if (this.surveyStatusOptions.length > 0) {
          this.surveyStatus = this.surveyStatusOptions[0].dictValue;
          this.queryParams.surveyStatus = this.surveyStatusOptions[0].dictValue;
          this.tagName = this.surveyStatusOptions[0].dictLabel;
        }
        this.getList();
      });
    },
    methods: {
      getList(){
        this.loading = true;
        listCbf(this.queryParams).then(response => {
          response.rows.forEach(item => {
            this.cbfList.push(item);
          });
          this.totalNum = response.total;
          if (this.cbfList.length >= response.total) {
            this.finished = true;
            return;
          } else {
            this.loading = false;
            this.queryParams.pageNum += 1;
          }
        });
      },
      onSearch(){
        this.queryParams.cbfmc = this.value;
        this.queryData();
      },
      surveyStatusChange(dictValue, dictLabel) {
        this.surveyStatus = dictValue;
        this.queryParams.surveyStatus = dictValue;
        this.tagName = dictLabel;
        this.totalNum = 0;
        this.queryData();
      },
      queryData() {
        this.queryParams.pageNum = 1;
        this.finished = false;
        this.cbfList = [];
        this.getList();
      },
      goDetail(item){
        this.$router.push({
          name: 'contractedVillageContractorDetail',
          params: {
            deptId: item.deptId,
            cbfbm: item.cbfbm,
            cbfmc: item.cbfmc,
            surveyStatus: item.surveyStatus
          }
        });
      },
      addContractor() {
        this.$router.push({
          name: 'contractedVillageContractorDetailAdd',
          params: {
            deptId: this.$route.query.deptId
          }
        });
      },
      deleteContractor(id, index) {
        this.$dialog.confirm({
          message: '是否确认删除此条承包方信息？',
        }).then(() => {
            // on confirm
            deleteCbf(id).then(res => {
              if(res.code == 200){
                this.$toast({
                  icon: 'success',
                  message: '删除成功',
                  duration: "1000",
                  onClose: () => {
                    this.cbfList.splice(index, 1);
                    this.totalNum = this.totalNum - 1;
                  }
                });

              }
            });
          }).catch(() => {
            // on cancel
          });
      }
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .search_main{
    display: flex;
    margin-top: 2vh;
    .search_btn{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      margin-left: 10PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  .second_tap{
    display: flex;
    align-items: center;
    margin-top: 1vh;
    p{
      background: #dbf1ea;
      border: 1px solid #cdcdcd;
      color: #5f5f5f;
      padding: 5PX 15PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .list_main{
    margin-top: 4vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 77vh;
    overflow-y: scroll;
    .van-col{
      padding: 15PX 0;
    }
  }

  .page_tab{
    position: absolute;
    background: rgba(255,255,255,.5);
    padding: 3PX 10PX 15PX;
    color: #828282;
    right: 4vw;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    margin-top: 1.5vh;
    span{
      color: #f78200;
    }
  }

</style>