rongxin.dashboard/src/views/app/project/list.vue

<template>
    <div class="home_wrapper">
    <van-nav-bar
      title="土地列表管理"
      left-arrow
      placeholder
      safe-area-inset-top
      @click-left="onClickLeft"
    />

      <div class="search_box">
        <div class="left">
          <p @click="showPicker = true">{{surveyStatus}}<van-icon name="play" /></p>
          <van-field v-model="value" @input="searchChange" @clear="searchClear" clearable left-icon="search" placeholder="请输入地块名称" />
        </div>
        <van-button type="primary" round @click="goSearch" >搜索</van-button>
      </div>

      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="dict.type.survey_status"
          value-key="label"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

      <div class="list_main">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <!--1-->
          <van-swipe-cell right-width="200" class="item" v-for="(item,index) in landList" :key="index">
            <div class="item_box" @click="$router.push({name:'appDetail',query:{dkbm:item.dkbm}})">
              <div class="head_block">
                <div class="title">{{item.dkbm}}</div>
                <div class="describe"><dict-tag :options="dict.type.survey_status" :value="item.surveyStatus"/></div>
              </div>
              <div class="order_block">
                <div class="order">{{item.dkmc}}</div>
                <div class="describe">{{item.scmjm}}</div>
              </div>
            </div>
            <template #right>
              <div style="background-color: #29D2AF;height: 100%" @click="$router.push({name:'appAttributeEdit',query:{dkbm:item.dkbm}})">属性<br/>修改</div>
              <div style="background-color: #0E82EB;height: 100%" @click="$router.push({name:'appOperateEdit',query:{dkbm:item.dkbm}})">经营<br/>修改</div>
              <div style="background-color: #ee0a24;height: 100%" @click="handleDelete(item)">删除</div>
            </template>
          </van-swipe-cell>

        </van-list>
      </div>

    </div>
</template>

<script>
  // import { getMenuApp } from "@/api/app/index";
  import { Dialog } from 'vant';
  import { listLand, delLand } from "@/api/resource/land"
  export default {
    dicts: ['ownership_type', 'land_use_type', 'survey_status', 'is_common', 'land_grade_type', 'land_type', 'land_use'],
    name: "appList",
    data() {
      return {
        loading: false,
        finished: false,
        showPicker: false,
        value:'',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          // 查询排序
          //orderByColumn: "id",
          //isAsc: "desc",
          // 翻译字典
          //toTranslateDict: "1",
          dkbm: null,
          dkmc: null,
          syqxz: null,
          dklb: null,
          tdlylx: null,
          dldj: null,
          tdyt: null,
          sfjbnt: null,
          surveyStatus: null,
          importCode: null,
          sfzwd: null,
        },
        landList:[],
        surveyStatus:'调查状态'
      };
    },
    created() {
      console.log(this.dict.type.survey_status)
    },
    methods: {
      onClickLeft(){
        history.back(-1);
      },
      getList(){
        listLand(this.queryParams).then(response => {
          this.total = response.total
          for (var i = 0; i < response.rows.length; i++) {
            this.landList.push(response.rows[i]);
          }
          if(this.landList.length >= response.total){
            this.finished = true;
            return;
          }else{
            this.loading = false;
            this.queryParams.pageNum += 1 ;
          }
        })
      },
      onConfirm(value) {
        console.log(value)
        this.surveyStatus = value.label;
        this.queryParams.surveyStatus = value.value;
        this.showPicker = false;
      },
      searchChange(value) {
        this.queryParams.dkmc = value;
      },
      goSearch(){
        this.queryParams.pageNum = 1;
        this.landList = [];
        this.finished = false;
        this.loading = false;
        this.getList();
      },
      searchClear(){
        this.surveyStatus = '调查状态';
        this.queryParams.surveyStatus = '';
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const fids = row.fid || this.ids

        Dialog.confirm({
          title: '提示',
          message: '是否确认删除地块属性编号为"' + fids + '"的数据项？',
        })
          .then(() => {
            return delLand(fids)
          })
          .then(() => {
            this.goSearch()
            this.$modal.msgSuccess("删除成功")
          })
          .catch(() => {
            // on cancel
          });

      }
    },
  };
</script>

<style scoped lang="scss">
  p{margin: 0;}
  ::v-deep .el-tag{
    padding: 0;
  }
  .home_wrapper{
    width: 100vw;
    min-height: 100vh;
    background: #F6F9FB;
  }
  .van-nav-bar{
    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
    ::v-deep.van-icon{
      color: #000000;
    }
  }
  .list_main{
    padding:0 3vw;
    .item{
      border-radius: 10px;
      background: #fff;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      margin-bottom: 20px;
      .item_box{
        padding:15px;
      }
      .head_block{
        display: flex;
        align-items: center;
        width: 100%;
        .title{
          flex:1;
          font-size: 16px;
          color: #252525;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-right: 20px;
        }
        .describe{
          font-size: 14px;
          color: #29D2AF;
        }
      }
      .order_block{
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 10px;
        .order{
          flex: 1;
          font-size: 16px;
          color: #666666;
        }
        .describe{
          font-size: 22px;
          color: #29D2AF;
        }
      }
      .function_block{
        height: 46px;
        display: flex;
        align-items: center;
        .time{
          display: flex;
          flex: 1;
          align-items: center;
          font-size: 24px;
          color: #858585;
          .icon{
            width: 25px;
            height: 25px;
            display: block;
            margin-right: 8px;
          }
        }
        .state{
          /*flex: 1;*/
          display: flex;
          justify-content: center;
          align-items: center;
          &.sell{
            color: #f69600;
          }
          &.scrap{
            color: #858585;
          }
          &.normal{
            color: #68c000;
          }
        }
        .value{
          flex:1;
          display: flex;
          align-items: center;
          justify-content:flex-end;
          font-size: 24px;
          color: #858585;
          .amount{
            color: #eb1616;
          }
        }
      }

    }
  }
  ::v-deep .van-swipe-cell__right{
    display: flex;
    align-items: center;
    width: 200PX;
    margin-left: 5PX;
    a,div{
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 14PX;
      height: 100%;
      flex: 1;
    }
  }

  .search_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    margin: 2vh auto;
    .left{
      display: flex;
      align-items: center;
      flex: 1;
      background-color: #ffffff;
      border-radius: 50vh;
      padding-left: 6%;
      overflow: hidden;
      margin-right: 3vw;
    }
    p{
      flex-shrink: 0;
    }
    button{
      flex-shrink: 0;
      background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);
      border: none;
      width: 20%;
    }
  }

</style>