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 v-if="surveyStatus === '2'" square type="warning" text="挂起原因" native-type="button" @click="handleViewRemark(item.id)" />
            <van-button square type="danger" text="删除" native-type="button" @click="deleteContractor(item.id, index)" /> -->
            <div class="operation">
              <!-- delete 删除 edit编辑 view查看 list榜单 -->
              <div class="opera_btn view" v-if="surveyStatus === '2'" @click="handleViewRemark(item.id)">
                <p>挂起原因</p>
              </div>
              <div class="opera_btn delete" @click="deleteContractor(item.id, index)">
                <p>删除</p>
              </div>
            </div>
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
    <!-- 异常挂起备注信息弹出框 -->
    <van-dialog v-model="showRemark" title="异常挂起原因" :show-confirm-button="false" show-cancel-button cancelButtonText="关闭">
      <van-form ref="remarkForm" class="remarkForm">
        <van-field v-model="remark" label="挂起原因:" type="textarea" rows="4" placeholder="挂起原因" input-align="left"
                   label-width="auto" />
      </van-form>
    </van-dialog>
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { listCbf, getCbfById, 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,
          // 查询排序
          orderByColumn: "id",
          isAsc: "desc",
        },
        // 承包方列表
        cbfList: [],
        // 当前选中的调查状态
        tagName: null,
        // 当前调查状态下的承包方总数
        totalNum: 0,
        // 控制异常信息备注提示框的显示和隐藏
        showRemark: false,
        // 异常备注信息
        remark: null,
      };
    },
    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
          });
      },
      handleViewRemark(id) {
        this.remark = null;
        getCbfById(id).then(response => {
          this.showRemark = true;
          this.remark = response.data.surveyRemark;
        });
      }
    },
  };
</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;
  }

  /deep/ .remarkForm .van-cell__value {
    border: 1px solid #b0b3ba;
    border-radius: 5px;
    padding: 0 15px;
    .van-field__control {
      color: #646566;
    }
  }

  .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;
    }
  }

  .operation{
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: center;
    background: #fff;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    height: 100%;
    border-radius: 30px;
    margin-left: 2vw;
    overflow: hidden;
    .opera_btn{
      height: 100%;
      display: flex;
      align-items: center;
      color: #ffffff;
      padding: 0 5vw;
      &.delete{
        background:#ff3737;
      }
      &.edit{
        background: #a5f790;
      }
      &.view{
        background: #48e5a2;
      }
      &.list{
        background: #fb9627;
      }
    }
  }

</style>