ebiz-h5/src/components/ebiz/billingDetail/tableDetail2.vue

<template>
  <div class="statisticsTable">
    <div class="statisticsTable_table">
      <div class="table">
        <table cellspacing="0" summary cellpadding="1">
          <thead>
            <tr>
              <th :class="{ 'th-fixed': index < 1 }" v-for="(item, index) in theads" :key="index">{{ item }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index" :ref="'th' + index" @click="(e) => double_click(index, item)">
              <td class="th-fixed" @click="goLink(item)">{{ Number(index) + 1 }}</td>
              <td class="timeDate" v-show="timeShow">{{ item.signDate }}</td>
              <td class="timeDate" v-show="timeShow == false">{{ item.appntDate }}</td>
              <td class="productName">{{ item.productName }}</td>
              <td class="prem">{{ item.prem }}</td>
              <td>
                <span class="td-sheng">{{ item.name }}</span>
              </td>
              <td>{{ item.manageComName }}</td>
              <td class="chakan">
                <van-button size="mini" type="danger" @click="download(item)">下载贺报</van-button>
                <van-button size="mini" type="info" @click="look(item.orderNo)">查看</van-button>
              </td>
<!--              <td>{{ item.branchTypeName }}</td>-->

            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="pagination" v-if="total > 5">
      <div type="text" @click="pageUp" :style="pageNum > 1 ? 'color:red' : ''">上一页</div>
      <div style="color: red">{{ pageNum }}/{{ Math.ceil(total / pageSize) }}</div>
      <div @click="pageDown" :style="pageNum < Math.ceil(total / pageSize) ? 'color:red' : ''">下一页 ></div>
      <div v-if="pageNum == 1" class="shangzheBox"></div>
      <div v-if="pageNum >= Math.ceil(total / pageSize)" class="xiazheBox"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tableDetail',
  props: {
    theads: {
      type: Array,
      default: []
    },
    isLink: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: false
    },
    pageSize: {
      type: Number,
      default: false
    },
    pageNum: {
      type: Number,
      default: false
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      timeShow: false,
    }
  },
  watch: {
    theads(newVal) {
      if (newVal) {
        for(let i=0;i<this.theads.length;i++) {
          if(this.theads[i] == '承保时间') {
            this.timeShow = true
          } else if(this.theads[i] == '预收时间') {
            this.timeShow = false
          }
        }
      }
    }
  },
  created() {
      for(let i=0;i<this.theads.length;i++) {
        if(this.theads[i] == '承保时间') {
          this.timeShow = true
        } else if(this.theads[i] == '预收时间') {
          this.timeShow = false
        }
      }
  },
  methods: {
    double_click(index, fn, data) {
      let timestamp = 0
      this.$refs['th' + index][0].addEventListener('click', () => {
        const now = new Date()
        if (now - timestamp <= 300) {
          this.$emit('double_click', this.tableData[index])
          // fn();
          timestamp = 0
        } else {
          timestamp = now
        }
      })
    },
    pageUp() {
      if (this.pageNum <= 1) {
        return false
      }
      let page = this.pageNum - 1
      this.$emit('currentChange', page)
    },
    pageDown() {
      let end_num = Math.ceil(this.total / this.pageNum)
      if (this.pageNum >= end_num) {
        return false
      }
      let page = this.pageNum + 1
      this.$emit('currentChange', page)
    },
    goLink(item) {
      if (this.isLink) {
        this.$emit('goLink', item)
      }
    },
    // 跳转至下载贺报页面
    download(data){
      this.$emit('from-child', data);
    },
    // 查看详情 跳转至详情页面
    look(num) {
      this.$emit('fro-child', num);
      // console.log(num);
      // this.$router.push({
      //   path: '/policyDetails',
      //   query: {
      //     orderNo: num,
      //   }
      // })
    },
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .shangzheBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 30px;
  }
  .xiazheBox {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 30px;
  }
}
.statisticsTable_table {
  height: 82.5vh;
  overflow: auto;
  //width: 1000px;
}
.statisticsTable_table .table {
  width: 195.6vw !important;
}
.timeDate {
  width: 90px !important;
}
.productName {
  width: 35vw;
}
.chakan {
  width: 130px;
}
.prem {
  text-align: right !important;
  width: 90px !important;
  padding-right: 7px !important;
}
.statisticsTable th {
  width: 90px;
}
table {
  // width: 200vw;
}
.th-fixed {
  position: sticky;
  border: 1px solid #999 !important;
  left: 0;
  width: 35px !important;
  padding: 0 5px;
}
.statisticsTable {
  width: 100%;
  overflow-x: hidden;
  table {
    border-collapse: collapse;
  }

  table,
  th,
  td {
    border: 1px solid #999;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    background: #fff;
  }
  thead {
    th {
      height: 40px;
      line-height: 40px;
      background: #e9332e;
      color: #fff;
    }
  }
}

.td-fixed {
  // position: sticky;
  width: 33px !important;
  padding: 0 5px;
  left: 0;
  text-decoration: underline;
}
.td-sheng {
  display: block;
  width: 65px; /* 设置span的宽度 */
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出span宽度的文本 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
  text-align: left; /* 文本对齐方式 */
  margin: 0 auto;
  text-align: center;
}
</style>