111

k94314517

2025-06-19 a27b2b1e241937cf60ff38e6e403ec164bc8224b

 admin/src/components/common/ColumnDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,124 @@
<template>
  <span v-if="content == null || content.length <= limit">{{content}}</span>
  <el-popover
    v-else
    v-model="visible"
    popper-class="eva-column-detail-popover"
    trigger="click"
  >
    <div class="eva-column-detail">
      <pre class="eva-column-detail__main">{{formattedContent}}</pre>
      <div class="eva-column-detail__action">
        <el-button size="mini" @click="cancel">关闭</el-button>
        <el-button
          size="mini"
          type="primary"
          v-clipboard:copy="formattedContent"
          v-clipboard:success="copySuccess"
          v-clipboard:error="copyFailed"
          @click="confirm"
        >{{ confirmButtonText }}</el-button>
      </div>
    </div>
    <el-button slot="reference" :type="buttonType">查看</el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'ColumnDetail',
  props: {
    // æŒ‰é’®ç±»åž‹
    buttonType: {
      type: String
    },
    // å†…容
    content: {
      type: String,
      default: ''
    },
    // é™åˆ¶ï¼Œå¤§äºŽé™åˆ¶æ—¶å±•ç¤ºæŸ¥çœ‹æŒ‰é’®
    limit: {
      type: Number,
      default: 12
    },
    // è‡ªåŠ¨è¯†åˆ«æ•°æ®ç±»åž‹å¹¶æ ¼å¼åŒ–
    analyse: {
      type: Boolean,
      default: true
    },
    // æ˜¯å¦å…è®¸å¤åˆ¶
    allowCopy: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {
    // ç¡®è®¤æŒ‰é’®æ–‡æ¡ˆ
    confirmButtonText () {
      return this.allowCopy ? '复制' : '确定'
    },
    // æ ¼å¼åŒ–后的内容
    formattedContent () {
      let content = this.content
      if (this.analyse) {
        try {
          content = JSON.stringify(JSON.parse(this.content), null, 2)
        } catch (e) {
        }
      }
      return content
    }
  },
  methods: {
    /**
     * ç¡®è®¤
     */
    confirm () {
      this.visible = false
      this.$emit('confirm')
    },
    /**
     * å–消
     */
    cancel () {
      this.visible = false
      this.$emit('cancel')
    },
    /**
     * å¤åˆ¶æˆåŠŸ
     */
    copySuccess () {
      this.$tip.success('复制成功')
    },
    /**
     * å¤åˆ¶å¤±è´¥
     */
    copyFailed () {
      this.$tip.error('复制失败')
    }
  }
}
</script>

<style lang="scss">
.eva-column-detail-popover {
  max-width: 80%;
}
</style>
<style scoped lang="scss">
.eva-column-detail {
  .eva-column-detail__main {
    max-height: 500px;
    overflow: auto;
  }
  .eva-column-detail__action {
    text-align: right;
  }
}
</style>