ops-web/src/modules/admin/components/AppDeployDeviceInfoView.vue

<template>
  <el-dialog
    class="app-deploy-device-info-view"
    :visible.sync="modalIsShow"
    title="设备信息"
    top="10px"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <div class="box-justify">
      <h4 class="info-title">{{ deviceId }}</h4>
      <el-button type="primary" @click="copy">复制信息</el-button>
    </div>
    <div class="info-body">
      <json-viewer v-if="info" :value="info" :expand-depth="9"></json-viewer>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { appDeployDeviceInfo } from "../api";

export default {
  name: "app-deploy-device-info-view",
  props: {
    deviceId: {
      type: String
    }
  },
  data() {
    return {
      modalIsShow: false,
      info: null
    };
  },
  methods: {
    async visibleChange() {
      this.info = null;
      const data = await appDeployDeviceInfo(this.deviceId);
      this.info = data || {};
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    copy() {
      const inputDom = document.createElement("textarea");
      inputDom.value = JSON.stringify(this.info);
      document.body.appendChild(inputDom);
      inputDom.select();
      document.execCommand("copy");
      inputDom.parentNode.removeChild(inputDom);
      this.$message.success("复制成功！");
    }
  }
};
</script>

<style scoped>
.info-title {
  font-size: 18px;
}
.info-body {
  margin-top: 10px;
  min-height: 200px;
  background-color: #f0f4f9;
}
.info-body >>> .jv-container.jv-light {
  background-color: transparent;
  border-radius: 10px;
}
.info-body >>> .jv-code {
  padding: 15px;
  line-height: 20px;
}
.info-body >>> .jv-toggle {
  margin-right: 5px;
}
</style>