hz_crm_web/src/views/custom_manage/compontents/clickNumberDetailDia.vue

<template>
  <div>
    <el-dialog title="点击量详情" append-to-body width="800px" top="10vh"
    :visible.sync="visible" @closed="closeDia" :close-on-click-modal="false">
      <div  style="padding:10px 20px 35px 20px;">
        <div style="display:flex;justify-content:space-between;margin-bottom:20px;">
          <p class="custom-title">{{name}}</p>
          <div>
            <el-select 
              v-model="params.ClickType" 
              placeholder="请选择所属模块" 
              @change="handleClickTypeChange" 
              clearable 
              style="width:180px"
              v-if="type=='contacts'"
            >
              <el-option label="英文研报" :value="0"></el-option>
              <el-option label="线上路演" :value="1"></el-option>
            </el-select>
            <el-cascader
              v-model="varietyVal"
              :options="varietyOpt"
              collapse-tags
              clearable
              :props="{
                multiple:true,
                value:'EnPermissionId',
                label:'EnPermissionName',
                children:'Child'
              }"
              placeholder="请选择品种"
              @change="handleChangeVariety"
              style="width:220px"
              class="bg-input"
            />
          </div>
        </div>
        <el-table :data="dataList" border @sort-change="clickNumSortChange" v-loading="showLoading" element-loading-text="加载中">
          <!-- 客户点击量 - 联系人姓名 -->
          <el-table-column label="联系人姓名" align="center" width="120" prop="UserName" v-if="type=='customer'">
            <template slot-scope="{row}">
              {{row.UserName}}
            </template>
          </el-table-column>
          <!-- 客户点击量 - 邮箱地址 -->
          <el-table-column label="邮箱地址" align="center" prop="Email" v-if="type=='customer'">
            <template slot-scope="{row}">
              {{row.Email}}
            </template>
          </el-table-column>
          <!-- 客户点击量 - 报告标题 -->
          <el-table-column label="标题" align="center" prop="ReportTitle" v-if="type=='contacts'">
            <template slot-scope="{row}">
              {{row.ReportTitle}}
            </template>
          </el-table-column>
          <el-table-column label="分类" align="center" prop="ReportType" v-if="type=='contacts'">
            <template slot-scope="{row}">
              {{row.ReportType}}
            </template>
          </el-table-column>
          <el-table-column label="所属模块" align="center" prop="ClickType" v-if="type=='contacts'">
            <template slot-scope="{row}">
              {{row.ClickType?'线上路演':'英文研报'}}
            </template>
          </el-table-column>
          <el-table-column label="点击次数" align="center" width="120" sortable="custom"
          prop="ViewTotal">
            <template slot-scope="{row}">
              {{row.ViewTotal}}
            </template>
          </el-table-column>
          <el-table-column label="最近点击时间" align="center" width="160" sortable="custom"
          prop="LastViewTime">
            <template slot-scope="{row}">
              {{row.LastViewTime}}
            </template>
          </el-table-column>
        </el-table>
        <!-- 页数选择器 -->
        <m-page
          v-show="total!=0"
          style="float: none;text-align: right;margin-top: 30px;"
          :page_no="params.CurrentIndex"
          :pageSize="params.PageSize"
          :total="total"
          @handleCurrentChange="pageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue';
import { customInterence,reportVarietyENInterence } from '@/api/api.js'

  export default {
    name:"clickNumberDetailDia",
    components:{mPage},
    data() {
      this.sortParamArray = new Map([["ViewTotal",1],["LastViewTime",2]])
      return {
        dataList:[],
        params:{
          CurrentIndex:1,
          PageSize:10,
          //客户Id
          CompanyId:0,
          // 联系人Id
          EmailId:0,
          SortParam:"",
          SortType:"",
          ClickType:''
        },
        total:0,
        showLoading:false,
        apiName:"",

        //品种筛选
        varietyVal:[],
        varietyOpt:[],
      }
    },
    props:{
      visible:{
        type:Boolean,
        required:true
      },
      name:{
        type:String,
        required:true
      },
      id:{
        type:Number,
        required:true
      },
      type:{
        type:String,
        default:"customer" // customer-客户 contacts-联系人
      }
    },
    watch:{
      visible(newVal){
        if(!newVal) return 
        this.showLoading=true
        this.params={
          CurrentIndex:1,
          PageSize:10,
          CompanyId:this.id,
          EmailId:this.id,
          SortParam:"",
          SortType:"",
          ClickType:''
        },
        this.apiName=this.type == 'customer'?"customEnHitNumber":"contactsEnHitNumber"
        this.varietyVal=[]
        this.getList()
        this.getENReportVarietyOpts()
      }
    },
    methods: {
      // 获取英文品种权限数据
      getENReportVarietyOpts(){
        reportVarietyENInterence.filterVarietyOpts({}).then(res=>{
          this.varietyOpt=res
        })
      },
      handleChangeVariety(){
        this.params.CurrentIndex=1
        this.getList()
      },
      getList(){
        const arr=[]
        this.varietyVal&&this.varietyVal.forEach(_e => {
          arr.push(_e[1])
        });
        customInterence[this.apiName]({...this.params,EnPermissionIds:arr.join(',')}).then(res=>{
          // console.log(res);
          if(res.Ret == 200){
            this.dataList = res.Data.List || []
            this.total = res.Data.Paging.Totals
            this.showLoading=false
          }
        })
      },
      //切换页码
      pageChange(page_no){
        this.params.CurrentIndex=page_no
        this.getList()
      },
      // 排序
      clickNumSortChange({prop,order}){
        this.params.SortParam=this.sortParamArray.get(prop)
        this.params.SortType=order=="ascending"?2:order=="descending"?1:0
        this.getList()
      },
      // 所属模块改变
      handleClickTypeChange(){
        this.params.CurrentIndex=1
        this.getList()
      },
      closeDia(){
        this.$emit("update:visible",false)
      },
    },
  }
</script>

<style lang="scss">
  .bg-input{
    .el-input{
      width: 100% !important;
    }
  }
</style>

<style lang="scss" scoped>
  .custom-title{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
  }
  
  
</style>