Huaihua-High-tech-Zone/src/views/CEEnterprise/companydetail/index.vue

<script setup>
import {fieldMap, tableMap} from './map';
import {getCompanyDetail} from '@/api/companyDetail';
import {onUnmounted, ref} from 'vue'
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";

const activeNames = ref([])
const showList = ref([])
const route = useRoute();
const detailContainer = ref(null);
const loading = ref(true);
const handleChange = (val) => {
  console.log(val)
}
const getTableLength = (tableObj) => {
  if (!tableObj) return null;
  let excludeList = ['id', 'update_time', 'create_time'];
  let newObj = {};
  for (let key in tableObj) {
    if (!excludeList.includes(key)) {
      newObj[key] = tableObj[key];
    }
  }
  return Object.keys(newObj);
}
getCompanyDetail(route.query.unifiedSocialCreditCode).then(res => {
  if (res.code == 200) {
    for (let i = 0; i < res.data.length; i++) {
      activeNames.value.push(i)
    }
    showList.value = res.data;
  }else {
    ElMessage.error(res.msg);
  }
})
const specialHanle = (rowProp, index, label) => {
  if (!rowProp) return;
  if (typeof rowProp == 'string') {
    if (rowProp.includes('script') || rowProp.includes("img")) {
      return "违禁词"
    }
  }
  if (index == 5 && label == '录入时间') {
    return rowProp.split('T')[0];
  }
  return rowProp;
}
// 定义定时器
let timer;
let timeoutTimer;
timer = setInterval(() => {
  if (detailContainer.value.offsetHeight > 50) {
    loading.value = false;
    clearInterval(timer);
    timer = null;
  }
}, 10);
timeoutTimer = setTimeout(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}, 5000);
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
  clearTimeout(timeoutTimer);
  timeoutTimer = null;
});
</script>

<template>
  <div ref="detailContainer">
    <div style="font-size: 18px;font-weight: bold;">企业名称:{{ route.query.enterpriseName }}</div>
    <div style="font-size: 18px;font-weight: bold;">当前查询的统一信用代码是：{{ route.query.unifiedSocialCreditCode }}
    </div>
    <div class="demo-collapse" v-loading.fullscreen.lock="loading" element-loading-text="加载数据中...">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item,index) in showList" :title="tableMap[item.tableName]" :name="index">
          <el-table :data="item.data" max-height="250">
            <template v-for="(t,i) in getTableLength(item.data[0])" :key="i">
              <el-table-column :prop="t" :label="fieldMap[t]" width="300">
                <template #default="scope">
                  <div v-html="specialHanle(scope.row[t],i,fieldMap[t])"/>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style lang="scss">
.demo-collapse .el-collapse-item__header {
  font-size: 18px;
  font-weight: bold;
}
</style>