nsgk_mobile/src/views/lawEnforcement/caseAllocation/caseListNew.vue

<template>
  <div class="home_wrapper">
    <div class="header_main">
      登记列表
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div style="height: 58px;"></div>
    <div class="search_box">
      <div class="search">
        <input type="text" v-model="searchInput" placeholder="请输入登记名称" />
        <img src="../../../../static/images/lawEnforcement/new/index_icon_04.png" @click="goSearch">
      </div>
      <img src="../../../../static/images/lawEnforcement/new/list_icon_03.png" @click="$router.push({name:'lawEnforcementCaseAdd'})"/>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <van-swipe-cell v-for="(item,index) in list" :key="index">
        <van-cell :title="item.caseName" center :to="{name:'lawEnforcementCaseDetailNew', query: {id:item.id}}">
          <template #icon>
            <van-icon name="../../../../static/images/lawEnforcement/new/list_icon_01.png" size="20" color="#FF4646" style="margin-right: 10px;" />
          </template>
          <template #label>
            <p>{{item.caseSourceText}}</p>
            <p>第{{item.belongTeamText}}</p>
            <p>{{item.registerDate}}</p>
          </template>
        </van-cell>
        <template #right>
          <van-row>
            <van-col>
              <van-button v-if="item.caseProgress == 1" square text="修改" type="info" :to="{name:'lawEnforcementCaseEdit', query: {id:item.id}}" class="delete-button" />
            </van-col>
            <van-col>
              <van-button v-if="item.caseProgress == 1" square text="删除" type="danger" @click="deleteCase(item.id)" class="delete-button" />
            </van-col>
            <van-col>
              <van-button v-if="item.caseProgress == 1" color="#FFA63E" square text="提交" type="info" @click="submitCase(item)" class="delete-button" />
            </van-col>
            <van-col>
              <van-button v-if="item.caseProgress != 1" color="#1CB8B1" square type="info" :to="{name:'lawEnforcementCaseEnforceList', query: {id:item.id}}" class="delete-button" >添加<br/>执法<br/>员</van-button>
            </van-col>
          </van-row>
        </template>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
  import { listCase , delCase , updateCase } from "@/api/lawEnforcement/index";
  export default {
    name: "caseAllocation",
    data() {
      return {
        loading: false,
        finished: false,
        searchInput:'',
        queryApplyParams: {
          // 分页
          pageNum: 1,
          pageSize: 10,
          // 查询排序
          orderByColumn: "id",
          isAsc: "desc",
          caseName: null,
          caseProgress: "1",
          createBy: "use",
        },
        list:[],
        belongTeamOptions:[],
        caseSourceOptions:[],
        caseProgressOptions:[],
      };
    },
    created() {
      this.getDicts("case_source").then(response => {
        this.caseSourceOptions = response.data;
      });
      this.getDicts("team_category").then(response => {
        this.belongTeamOptions = response.data;
      });
      this.getDicts("case_node").then(response => {
        this.caseProgressOptions = response.data;
      });
    },
    methods: {
      getList(){
        var _this = this;
        listCase(_this.queryApplyParams).then(response => {
          response.rows.map(res=>{
            res.caseSourceText = res.caseSource == '' ? '' : this.selectDictLabel(this.caseSourceOptions, res.caseSource);
            res.belongTeamText = res.belongTeam == '' ? '' : this.selectDictLabel(this.belongTeamOptions, res.belongTeam);
            this.list.push(res);
          })
          console.log(this.list.length)
          if(this.list.length >= response.total){
            this.finished = true;
            return;
          }else{
            this.loading = false;
            this.queryApplyParams.pageNum += 1 ;
          }
        });
      },
      goSearch(){
        // if (this.searchInput == ''){
        //   location.reload()
        // }
        this.list = [];
        this.queryApplyParams.caseName = this.searchInput;
        this.queryApplyParams.pageNum = 1 ;
        this.loading = false;
        this.finished = false;
        // this.getList();
      },
      deleteCase(id){
        this.$dialog.confirm({
          message: '是否确认删除案件登记标识为"' + id + '"的数据项?',
        }).then(function () {
          return delCase(id);
        }).then(() => {
          this.list = [];
          this.loading = false;
          this.finished = false;
          this.queryApplyParams.pageNum = 1 ;
          this.getList();
          this.$notify({ type: 'success', message: '删除成功' });
        }).catch(() => {});
      },
      submitCase(data){
        var _this = this;
        data.caseId = data.id;
        data.caseStatus = "1";
        data.caseProgress = "2"; // 勘察
        data.caseProgressName = this.selectDictLabel(this.caseProgressOptions, data.caseProgress); // 勘察
        this.$dialog.confirm({
          message: '提交后案件将进入后续流程并且不能修改,是否确认提交?',
        }).then(function () {
          // 更新案件的节点和状态
          updateCase(data).then(response => {
            _this.$notify({ type: 'success', message: '提交成功' });
          });
        }).then(() => {
          this.list = [];
          this.loading = false;
          this.finished = false;
          this.queryApplyParams.pageNum = 1 ;
          this.getList();
          this.$notify({ type: 'success', message: '提交成功' });
        }).catch(() => {});
      }
    },
  }
</script>

<style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    padding: 0 3% 0.2rem;
    .search_box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 92%;
      margin: 0PX auto;
      .search{
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 10PX auto;
        border: 1px solid #1D6FE9;
        padding: 1PX 1PX 1PX 12PX ;
        border-radius: 50PX;
        margin-right: 10PX;
        input{
          flex: 1;
          background: transparent;
        }
      }
    }
    .header_main{
      height: 116px;
      background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      z-index: 999;
      .return_btn{
        width: 24px;
        height: 43.2px;
        background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
      .add_btn{
        width: 56.4px;
        height: 40.8px;
        background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
        background-size: 47px 34px;
        position: absolute;
        right: 38px;
        top: 36px;
      }
    }

  }
  /deep/.van-cell__title span{
    font-family: Arial;
    font-size: 0.4rem;
    font-weight: normal;
    color: #666666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    overflow: hidden;
  }
  /deep/.van-cell__label {
    display: flex;
    justify-content: space-between;
    p{
      display: inline-block;
      &:first-child{
        background: rgba(28,184,177,0.2);
        padding: 0 5PX;
        border-radius: 3PX;
        color: #1CB8B1;
      }
    }
  }
  /deep/.van-cell__value{
    flex: 0.3;
    color: #1D6FE9;
    font-weight: bold;
  }
  /deep/.van-swipe-cell{
    margin-bottom: 0.2rem;
    border-radius: 0.2rem;
    overflow: hidden;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    .van-swipe-cell__right{
      right: -2PX;
    }
  }
  /deep/van-ellipsis{
    font-weight: bold;
  }
  .van-row{
    height: 100%;
  }
  .van-col{
    height: 100%;
  }
  .delete-button {
    height: 100%;
  }
</style>