github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/views/data/mine/Preview.vue (about)

     1  <template>
     2    <a-card>
     3      <div slot="title">
     4        <a-icon type="profile" />
     5        <span>{{$t('msg.preview')}}</span>
     6        <a-input v-model="previewUrl" id="url" />&nbsp;&nbsp;
     7        <a @click="doCopy" :title="$t('action.design')">
     8          {{ $t('copy.title') }}
     9        </a> &nbsp;
    10        <a @click="loadPreviewData" :title="$t('action.design')">
    11          {{ $t('preview.title') }}
    12        </a> &nbsp;
    13      </div>
    14      <pre v-if="previewData !== null" v-html="previewData" style="margin: 0"></pre>
    15      <div v-else style="padding: 10px; text-align: center"><a-icon type="loading" /></div>
    16    </a-card>
    17  </template>
    18  
    19  <script>
    20  import {previewDefData} from "../../../api/manage";
    21  import {serverUrl} from '../../../utils/request'
    22  
    23  export default {
    24    name: 'Preview',
    25    components: {
    26    },
    27    props: {
    28      record: {
    29        type: Object,
    30        required: true
    31      },
    32    },
    33    data: function() {
    34      return {
    35          previewData: null,
    36          previewUrl: serverUrl + "/data/generate?format=txt&config=" + this.record.referName.replace(/\\/g, "/"),
    37      };
    38    },
    39    mounted: function() {
    40      this.loadPreviewData();
    41    },
    42    methods: {
    43      loadPreviewData() {
    44        console.log(this.record)
    45        this.previewData = null;
    46        let params = this.getQuery()
    47  
    48        previewDefData(params).then(data => {
    49          this.previewData = data
    50        })
    51      },
    52      getQuery() {
    53      let url = decodeURI(this.previewUrl); // 获取url中"?"符后的字串(包括问号)
    54      url = url.replace(`${serverUrl}/data/generate`, "")
    55  
    56      let query = {};
    57      if (url.indexOf("?") != -1) {
    58          const str = url.substr(1);
    59          const pairs = str.split("&");
    60          for(let i = 0; i < pairs.length; i ++) {
    61               const pair = pairs[i].split("=");
    62              query[pair[0]] = pair[1];
    63          }
    64      }
    65      return query ;  // 返回对象
    66    },
    67    doCopy: function () {
    68      let that = this;
    69      this.$copyText(this.previewUrl).then(function () {
    70          that.$notification['success']({
    71          message: that.$t('copy.success'),
    72        });
    73      }, function (e) {
    74          console.log(e)
    75      })
    76      }
    77    },
    78    watch: {
    79      record: function() {
    80        this.previewUrl = serverUrl + "/data/generate?format=txt&config=" + this.record.referName.replace(/\\/g, "/");
    81        this.loadPreviewData();
    82      }
    83    }
    84  }
    85  </script>
    86  
    87  <style>
    88  #url{
    89      max-width: 30vw;
    90      margin-left: 20px;
    91  }
    92  </style>