xujiecloud-vue/src/views/modules/quote/detail/tpCost.vue

<script>
import {queryQuoteDetailReportByTP} from "../../../../api/quote/quoteDetail";

export default {
  name: "tpCost",
  props:{
    quoteDetail:{
      type:Object,
      required:true
    },
    height:{
      type:[String,Number],
      default:300
    }
  },
  data(){
    return{
      queryLoading:false,
      dataList:[],
    }
  },
  methods:{
    handleQuery(){
      let params = {
        id:this.quoteDetail.id
      }
      this.queryLoading = true;
      queryQuoteDetailReportByTP(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows
        }else {
          this.queryLoading = false;
        }
        this.queryLoading = false;
      }).catch((error)=>{
        this.queryLoading = false;
        this.$message.error(error);
      })
    },
    alignIsNan(key,arr){
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (isNaN(item[key])){
          return 'left';
        }
      }
      return 'right';
    },
    flexColumnWidth (str, arr1, flag = 'max') {
      str = str + ''
      let columnContent = ''
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            continue
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]+''
      }
      let flexWidth = 0
      if (columnContent && columnContent.length > 0){
        for (const char of columnContent) {
          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符，为字符分配8个单位宽度
            flexWidth += 8
          } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符，为字符分配15个单位宽度
            flexWidth += 15
          } else {
            // 其他种类字符，为字符分配8个单位宽度
            flexWidth += 8
          }
        }
      }
      let flexWidthStr = 0
      for (const char of str){
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidthStr += 8
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidthStr += 15
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidthStr += 8
        }
      }
      if (flexWidthStr > flexWidth){
        flexWidth = flexWidthStr
      }
      if (flexWidth < 120) {
        // 设置最小宽度
        flexWidth = 120
      }
      return flexWidth + 'px'
    }
  },
  watch:{
    quoteDetail(newVal,oldVal){
      if (newVal){
        this.handleQuery();
      }else {
        this.dataList = [];
      }
    },
  },
  computed:{
    objectKeys:{
      get(){
        return Object.keys(this.dataList[0] || {});
      }
    }
  }
}
</script>

<template>
<div>
  <el-table :data="dataList" border :height="height" v-loading="queryLoading">
    <el-table-column v-for="key in objectKeys" :align="alignIsNan(key,dataList)" header-align="center" :width="flexColumnWidth(key,dataList)" :key="key" :prop="key" :label="key"></el-table-column>
  </el-table>
</div>
</template>

<style scoped>

</style>