VUE查询分页完整版

<template>
  <div class="content">
    <tool-table>
      <template #toolbar>
        <el-form ref="searchForm" :inline="true" :model="searchForm" @submit.native.prevent>
          <el-form-item label="发送时间">
            <el-date-picker
              v-model="reSendTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="客户卡号">
            <el-input v-model="searchForm.reCustomerCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="模板名称">
            <el-input v-model="searchForm.reTemplateName" clearable></el-input>
          </el-form-item>
          <el-form-item label="模板内容">
            <el-input v-model="searchForm.reContent" clearable></el-input>
          </el-form-item>
          <el-form-item label="发送状态">
            <el-select v-model="searchForm.reStatus" placeholder="请选择" clearable>
              <el-option
                v-for="item in reStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary" @click="sendNew">重新发送</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #table>
        <el-table
          :data="tableData"
          style="width: 100%;overflow-y: auto;"
          v-loading="loading"
          @selection-change="onSelectionChange"
          border
          highlight-current-row
          :header-cell-style="headerClass"
        >
          <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
          <el-table-column label="序号" type="index">
            <template slot-scope="scope">
              <div
                class="nowrapTxt"
              >{{ (searchForm.pageIndex-1)*searchForm.pageSize+scope.$index+1 }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="reCustomerName" label="客户信息" width="100px"></el-table-column>
          <el-table-column prop="reCustomerCode" label="客户卡号" width="130px">
            <template slot-scope="scope">
              <div class="nowrapTxt">{{ scope.row.reCustomerCode }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="reSendTime" label="发送时间" width="160px"></el-table-column>

          <el-table-column prop label="发送结果" width="100px">
            <template #default="scope">
              <span v-if="scope.row.reStatus == 2">发送失败</span>
              <span v-else-if="scope.row.reStatus == 0">待发送</span>
              <span v-else-if="scope.row.reStatus == 1">发送中</span>
              <span v-else-if="scope.row.reStatus == 3">发送成功</span>
            </template>
          </el-table-column>

          <el-table-column prop="reTemplateName" label="模板名称" width="200px">
            <template #default="scope">
              <div class="nowrapTxt">{{ scope.row.reTemplateName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="reTemplateType" label="模板类型" width="100px">
            <template #default="scope">
              <span v-if="scope.row.reTemplateType == 1">腾讯云信</span>
              <span v-else-if="scope.row.reTemplateType == 2">网易云信</span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="reContent" label="模板内容">
            <template #default="scope">
              <el-tooltip placement="bottom" effect="light">
                <pre slot="content" style="overflow: hidden">{{ scope.row.reContent }}</pre>
                <div class="nowrapTxt">{{ scope.row.reContent }}</div>
              </el-tooltip>
            </template>
          </el-table-column> -->

          <el-table-column prop="reContent" label="模板内容" show-overflow-tooltip>
            <template #default="scope" >
              <div class="nowrapTxt">{{ scope.row.reContent }}</div>
            </template>
          </el-table-column>


          <el-table-column prop="reRetryCount" label="发送次数" width="80px" align="center">
            <template #default="scope">
              <div class="nowrapTxt">{{ scope.row.reRetryCount }}</div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.pageIndex"
          :page-sizes="[20, 50, 100, 200, 300, 400, 500]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </template>
    </tool-table>
  </div>
</template>
<script>
import { get_sms_ListNew, send_batch_msgNewRet } from './api'

import sendBatch from '@/views/sms/sendSms/sendBatch'
import tool_table from '@/views/components/tool_table'
import DatePickerOptions from '@/components/core/DatePickerOptions'

export default {
  components: {
    'tool-table': tool_table,
    sendBatch: sendBatch
  },
  data() {
    return {
      searchForm: {
        pageIndex: 1,
        pageSize: 20,
        reContent: '',
        startDate: '',
        endDate: '',
        reCustomerCode: '',
        reTemplateName: '',
        reStatus: ''
      },
      reSendTime: '',
      loading: false,
      tableData: [],
      planList: [],
      msgdialogVisible: false,
      pickerOptions: DatePickerOptions,
      reStatusOptions: [
        {
          value: 0,
          label: '待发送'
        },
        {
          value: 1,
          label: '发送中'
        },
        {
          value: 2,
          label: '发送失败'
        },
        {
          value: 3,
          label: '发送成功'
        }
      ],
      isResend: true,
      total: 0
    }
  },
  mounted() {
    this.searchFn()
  },
  methods: {
    // create(){
    // },
    // 复选框可否选中
    headerClass() {
      return 'background:#f8f8f9;'
    },
    selectable(row) {
      return row.reStatus == 2
    },
    // 复选框
    onSelectionChange(val) {
      // const distinct = new Set(val.map((x) => x.createUserId));
      // this.planList = [...distinct].map((createUserId) => ({ createUserId }));
      this.planList = val
    },
    // 查询
    search() {
      this.searchForm.startDate = this.reSendTime ? this.reSendTime[0] : ''
      this.searchForm.endDate = this.reSendTime ? this.reSendTime[1] : ''
      this.searchForm.pageIndex = 1
      this.searchFn()
    },
    // 重置
    reset() {
      ;(this.searchForm = {
        pageIndex: 1,
        pageSize: 20,
        reContent: '',
        startDate: '',
        endDate: '',
        reCustomerCode: '',
        reTemplateName: '',
        reStatus: ''
      }),
        (this.reSendTime = '')
    },

    // 从新发送
    sendNew() {
      if (!this.planList || !this.planList.length) {
        this.$message.warning('请选择需要发送短信的客户')
        return
      }
      const customerEntityList = []
      this.planList.map(item => {
        customerEntityList.push({
          reId: item.reId
        })
      })
      send_batch_msgNewRet(customerEntityList).then(res => {
        if (res.code == 200) {
          $message.success(res.data)
          this.searchFn()
        } else {
          if (res.msg.includes('登录已失效，请重新登录')) {
            $message.error('登录已失效，请重新登录')
            this.$router.push('/login')
            return
          } else {
            $message.error(res.msg)
          }
        }
      })
    },
    sendMsgClose() {
      this.msgdialogVisible = false
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.searchFn()
    },
    handleCurrentChange(val) {
      this.searchForm.pageIndex = val
      this.searchFn()
    },
    async searchFn() {
      this.loading = true
      await get_sms_ListNew(this.searchForm).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        } else {
          if (res.msg.includes('登录已失效，请重新登录')) {
            $message.error('登录已失效，请重新登录')
            this.$router.push('/login')
            return
          } else {
            $message.error(res.msg)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
}
.nowrapTxt {
  white-space: nowrap;
}

.el-table::before {
  height: 0px;
}

</style>
<style lang="css">
.el-tooltip__popper {
  width: 520px;
  line-height: 25px;
}
</style>