playlet/project/src/components/smartRadar/radarList.vue

<template>
  <div>
  <!-- table -->
    <div class="infinite-list-wrapper" v-loading.body="loading">
      <div class="tHead">
        <div v-for="item in desCol"
             :style="{width:item.min_width?item.min_width:'11%'}">{{item.label?item.label:'-'}}</div>
      </div>
      <div class="tBody"
           v-if="tableData&&tableData.length>0"
           v-infinite-scroll="load"
           :infinite-scroll-distance="20"
           :infinite-scroll-immediate="false"
           infinite-scroll-disabled="disabled">
        <draggable class="syllable_ul" element="ul"
                   @sort="draggableSort"
                   :list="tableData"
                   :emptyInsertThreshold="0"
                   :options="{group:'name',
                 animation:200,
                 ghostClass:'ghostClass',
                 dragClass:'dragClass'}">
          <div class="body_item" v-for="(row,index) in tableData"
               :class="index == tableData.length-1 ? 'borderBottomline' : ''">
          <div class="body_cell" v-for="item in desCol"
               :style="{width:item.min_width?item.min_width:'11%'}">
            <div v-if="item.prop=='type'">
              <span v-if="row.type==1">链接</span>
              <span v-else-if="row.type==2">PDF</span>
              <span v-else-if="row.type==3">图片</span>
              <span v-else-if="row.type==4">视频</span>
              <span v-else="row.type==1">-</span>
            </div>
            <div v-else-if="item.prop=='tag_list'" class="flex-align-jus-center">
              <template v-if="row.tag_list&&row.tag_list.length==0 || !row.tag_list">-</template>
              <div class="customerServiceTagBox biaoqian" v-else>
                <div class="customerServiceTag" v-for="(item,index) in row.tag_list" :key="index+'biaoqian'">{{item}}</div>
              </div>
            </div>
            <div v-else-if="item.prop=='oprate'">
              <div class="flex" style="padding: 0 10px">
                <div class="c-00B38A pointer" @click="editRadar(row.radar_id)">编辑</div>
                <el-popconfirm @confirm="deleRadar(row.radar_id)" :title="`确定删除【${row.name}】渠道活码？`">
                  <div slot="reference" class="c-00B38A pointer lMar8">删除</div>
                </el-popconfirm>
                <div class="c-00B38A pointer lMar8" @click="goDataAanlyse(row.radar_id)">分析数据</div>
              </div>
            </div>
            <div v-else>{{row[item.prop] ||row[item.prop]==0 ? row[item.prop] : '-'}}</div>
          </div>
        </div>
        </draggable>
          <p class="text-center f14 tMar8 c-d3" v-if="moreloading">加载中...</p>
        <p class="text-center f14 tMar8 c-d3" v-if="noMore">没有更多了</p>
      </div>
      <div class="noData" v-else>暂无数据</div>

    </div>

  </div>
</template>

<script>
  import draggable from "vuedraggable"
export default {
  name: "radarList",
  components:{
    draggable
  },
  props:['propsData'],
  computed: {
    noMore () {
      return this.currPage_len < this.page_size
    },
    disabled () {
      return this.moreloading || this.noMore
    }
  },
  data(){
    return{
      loading: false,
      moreloading: false,
      page: 1,
      page_size: 20,
      height: '',
      tableData:[],
      copy_tableData:[],
      currPage_len:0,
      desCol:[
        { prop: "name", label: "名称" },
        { prop: "type", label: "类型" },
        { prop: "group_name", label: "分组" },
        { prop: "tag_list", label: "客户标签" },
        { prop: "uv_count", label: "总访问人数",},
        { prop: "send_count", label: "总发送次数",},
        { prop: "create_time", label: "添加时间", min_width:'17%'},
        { prop: "oprate", label: "操作", min_width:'17%'}
      ],
    }
  },
  watch:{
    'propsData.initFlag'(){
      this.page=1
      this.tableData=[]
      this.copy_tableData=[]
      this.init()
    }
  },
  created() {
    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
    this.init(1)
  },
  methods:{
    load(){
      this.page += 1
      this.init()
    },
    goDataAanlyse(id){
      this.$router.push('/radar_dataAnalyse/'+id)
    },
    editRadar(id){
      this.$router.push({path:'/createRadar',query: {id:id}})
    },
    deleRadar(id){
      this.loading = true
      this.$axios.post(this.URL.BASEURL + this.URL.radar_radarDele, {
        radar_id:id
      }).then((res) => {
        var res = res.data
        this.loading = false
        this.$message({
          message: res.err,
          type: "warning"
        })
        if (res && res.errno == 0) {
          this.init(1)
        }
      }).catch((err) => {
        this.loading = false
      });
    },

    draggableSort({to,from,item,clone,oldIndex,newIndex}){
      if(!this.copy_tableData[oldIndex].radar_id){
        this.$message({
          message: '被拖动的雷达id错误',
          type: "warning"
        })
        return
      }
      this.$axios.post(this.URL.BASEURL + this.URL.radar_radarSort, {
        operate_radar_id:this.copy_tableData[oldIndex].radar_id,
        behind_radar_id:newIndex-1>=0?this.tableData[newIndex-1].radar_id:'',
        front_radar_id:newIndex+1<this.tableData.length?this.tableData[newIndex+1].radar_id:'',
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {

      } else if (res.errno != 4002) {
        this.$message({
          message: res.err,
          type: "warning"
        })
      }
    })
    },
    init () {
      this.loading = true
      if(this.currPage_len>=this.page_size){
        this.moreloading = true
      }
      this.$axios.get(this.URL.BASEURL + this.URL.radar_radarList, {
        params:{
          group_id:this.propsData.group_id,
          name:this.propsData.radar_val,
          page: this.page,
          page_size: this.page_size,
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.tableData = [...this.tableData,...res.rst.data]
          this.copy_tableData =  JSON.parse(JSON.stringify(this.tableData))
          this.currPage_len=res.rst.data.length
          this.moreloading = false
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
  }
}
</script>

<style lang="scss" scoped>
  .span_title{
    font-weight: 600;
    color: #000;
    margin: 10px 0 ;
  }
  .ghostClass{
    font-weight: 600;
  }
  .tHead{
    border:1px solid #ddd;
    border-bottom: none;
    div{
      background-color: #f6f6f6 ;
      font-size:14px;
      display:inline-block;
      font-weight:600;
      color:#777;
      text-align: center;
      height:48px;
      line-height:48px
    };

  }
  .tBody{
    height: calc(100vh - 60px - 62px - 20px - 10px - 50px);
    overflow-y: auto;
    .body_item{
      display: flex;
      align-items: center;
      cursor: move;
      padding:20px 0;
      border:1px solid #ddd;
      border-bottom:none;
      .body_cell{
        font-size:14px;
        color:#333;
        text-align: center;

      }
    }
  }
  .borderBottomline{
    border-bottom:1px solid #ddd!important;
  }
  .c-00B38A {
    color: #00B38A!important;
  }
  .noData{
    text-align:center;
    margin:20px auto;
  }
</style>