luohe_fronted/src/pages/homepage/components/entityDetail.vue

<template>
  <div class="entity-detail">
    <el-card v-loading="loading">
      <div class="back-button" @click="handleReturn">
        <img :src="backIcon" alt="">
        返回
      </div>
      <div class="basic-info">
        <div class="collect-button" @click="handleCollect(basicData.isCollect)">
          <template v-if="basicData.isCollect">
            <img :src="unCollectPentacle" alt="">
            <span>
              已收藏
            </span>
          </template>
          <template v-else>
            <img :src="collectPentacle" alt="">
            <span>
              收藏
            </span>
          </template>
        </div>
        <div class="basic-info-content" v-for="(item, index) in basicInfo" :key="index">
          <div class="basic-info-title">{{ item.title }}</div>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(cItem, cIndex) in item.content" :key="cIndex">
              <div class="basic-info-item">
                <div class="basic-info-label">{{ cItem.label }}：</div>
                <div class="bacis-info-value">
                  <template v-if="cItem.key === 'resultNormalSample'">
                    <el-input type="textarea" :value="renderBasicValue(cItem.key)" disabled rows="6"
                      :resize="false"></el-input>
                  </template>
                  <template v-else>
                    {{ renderBasicValue(cItem.key) }}
                  </template>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="table-wrapper" v-if="['theme', 'special', 'api', 'message'].includes(type)">
        <div class="table-wrapper-title">
          <span>{{ type === 'api' ? 'API请求参数列表' : '实体属性' }}</span>
          <span v-if="type === 'theme' || type === 'special'">（{{ tableData.length }}）</span>
        </div>
        <div class="table-content">
          <el-table :data="tableData">
            <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
              <template slot-scope="scope">
                <span v-if="item.key === 'nameCh'" style="color: #0033FF;">{{ scope.row.nameCh }}</span>
                <span v-else-if="item.key === 'accessPolicy'">{{ scope.row.accessPolicy === 'all' ? '发布+订阅' :
                  scope.row.accessPolicy === 'pub' ? ' 发布' : '订阅' }}</span>
                <span v-else>{{ scope.row[item.key] }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePageChange"
              :current-page.sync="pageNum" :page-size.sync="pageSize">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from "@/api/homepage/entityDetail.js";
import data from './entityDetailData'
import collectPentacle from '@/assets/image/entityDetail/u1517.svg'
import unCollectPentacle from '@/assets/image/entityDetail/u3076.svg'
import backIcon from '@/assets/image/entityDetail/u1522.png'

export default {
  data() {
    let baseInfo = {}
    if (['theme', 'special'].includes(this.$route.query.type)) {
      baseInfo = data.theme
    } else {
      baseInfo = data[this.$route.query.type]
    }
    return {
      loading: false,
      articleInfo: {},
      id: this.$route.query.id,
      type: this.$route.query.type, // theme: 主题库，special：专题库，target：指标，api：api服务，message：消息队列
      basicInfo: baseInfo.basic || [],
      columns: baseInfo.columns || [],
      basicData: {},
      tableData: [],
      collectPentacle,
      unCollectPentacle,
      backIcon,
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  watch: {},
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      switch (this.type) {
        case 'theme' || 'special':
          this.getThemeData()
          break;
        case 'target':
          this.getTargetData()
          break;
        case 'api':
          this.getApiData()
          break
        case 'message':
          this.getMessageData()
          break
        default:
          break;
      }
    },
    getThemeData() {
      api.getThemeInfo({
        id: this.id
      }).then(res => {
        this.basicData = res.data
      })
      this.getThemeTableData()
    },
    getThemeTableData() {
      api.getThemeAttributesList({
        tableModelId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    getTargetData() {
      api.getIndexInfo({
        id: this.id
      }).then(res => {
        this.basicData = res.data
      })
    },
    getApiData() {
      api.getApiInfo({
        id: this.id
      }).then(res => {
        this.basicData = res.data
      })
      this.getApiTableData()
    },
    getApiTableData() {
      api.getApiReqParamList({
        apiId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    getMessageData() {
      api.getMqsInfo({
        id: this.id
      }).then(res => {
        this.basicData = res.data
      })
      this.getMessageTableData()
    },
    getMessageTableData() {
      api.getMqsPrivs({
        mqsName: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    renderBasicValue(key) {
      if (key === 'l1,l2,l3') {
        let text = `主题域分组：${this.basicData.l1 || '暂无'}>主题域：${this.basicData.l2 || '暂无'}>业务对象：${this.basicData.l3 || '暂无'}`
        return text
      }
      if (key === 'authType') {
        const value = this.basicData.authType
        let text = '暂无'
        switch (value) {
          case 'NONE':
            text = '无认证'
            break;
          case 'APP':
            text = 'APP认证'
            break;
          case 'IAM':
            text = 'IAM认证'
            break;
          case 'AUTHORIZER':
            text = '自定义认证'
            break;
          default:
            break
        }
        return text
      }
      return this.basicData[key] || '暂无'
    },
    handlePageChange() {
      switch (this.type) {
        case 'theme' || 'special':
          this.getThemeTableData()
          break
        case 'api':
          this.getApiTableData()
          break
        case 'message':
          this.getMessageTableData()
          break
        default:
          break
      }
    },
    handleCollect(value) {
      if (value) {
        return
      }
      const resourceTypeMap = {
        theme: 'theme',
        special: 'specialSubject',
        target: 'index',
        api: 'api',
        message: 'mqs'
      }
      api.addCollect({
        resourceId: this.id,
        Resource_type: resourceTypeMap[this.type]
      }).then(res => {
        if (res.success) {
          this.basicData = Object.assign({}, this.basicData, {
            isCollect: true
          })
          this.$message('收藏成功')
        } else {
          this.$message(res.message)
        }
      })
    },
    handleReturn() {
      this.$router.go(-1)
    }
  }
};
</script>

<style lang="scss" scoped>
.back-button {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #333;
  width: fit-content;
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  img {
    height: 20px;
  }
}

.basic-info {
  position: relative;
  border: 1px solid #e4e4e4;
  padding: 20px;
}

.basic-info-title {
  font-size: 20px;
  color: #333;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
}

.collect-button {
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
  align-items: center;
  cursor: pointer;
}

.basic-info-item {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #333;
}

.basic-info-label {
  white-space: nowrap;
}

.bacis-info-value {
  flex: 1;
}

.table-wrapper-title {
  font-size: 20px;
  padding: 20px;
  border: 1px solid #e4e4e4;
  display: flex;

  span {
    border-bottom: 2px solid #0066ff;
  }
}

.table-content {
  border: 1px solid #e4e4e4;
  padding: 20px;
}

.table-pagination {
  display: flex;
  flex-direction: row-reverse;
}

/deep/ .el-table th.el-table__cell {
  background-color: #f2f2f2;
}

/deep/ .el-table {
  font-size: 24px;
}
</style>