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

     1  <template>
     2    <div class="mock-preview-main">
     3      <a-card>
     4        <span slot="title">
     5          <a-icon type="profile" />
     6        </span>
     7  
     8        <div v-if="mockItem.item">
     9          <div v-for="(path, url) in mockItem.item.paths" :key="url" class="path item">
    10            <div>{{url}}</div>
    11            <div v-for="(methodVal, method) in path" :key="method" class="method item">
    12              <div>{{method}}</div>
    13              <div v-for="(codeVal, code) in methodVal" :key="code" class="code item">
    14                <div>{{code}}</div>
    15                <div v-for="(mediaVal, media) in codeVal" :key="media" class="media item">
    16                  <div class="media-text">
    17                    <a @click="preview(mockItem.item.id, url, method, code, media)">{{media}}</a>
    18                  </div>
    19  
    20                  <div class="copy-link">
    21                    <a-tooltip>
    22                      <template slot="title">
    23                        {{ serverUrl + '/m/' + mockItem.path + url }}
    24                      </template>
    25                      <a><a-icon type="link" /></a>
    26                    </a-tooltip>
    27                  </div>
    28  
    29                  <div class="data-src">
    30                    <span :param="fullKey = url+'-'+method+'-'+code+'-'+media">
    31                      <span :param="samples = dataSrc[fullKey]">
    32                        <a-select v-if="samples && samples.length > 1"
    33                                  :defaultValue="mockSrcs[fullKey] || samples[0]"
    34                                  @change="selectSample"
    35                                  size="small" class="media-select">
    36                          <a-select-option v-for="(item, index) in samples" :value="item+'~~~'+fullKey" :key="index">
    37                            {{item}}
    38                          </a-select-option>
    39                        </a-select>
    40                      </span>
    41                    </span>
    42                  </div>
    43  
    44                  <div class="clear-both"></div>
    45                </div>
    46              </div>
    47            </div>
    48          </div>
    49  
    50        </div>
    51  
    52      </a-card>
    53  
    54      <a-drawer
    55          :title="$t('msg.mock.response')"
    56          placement="left"
    57          :closable="false"
    58          :visible="responseVisible"
    59          width="50%"
    60          @close="closePreview">
    61        <div>
    62          <div class="mock-preview-resp">
    63            <pre>{{respSample}}</pre>
    64          </div>
    65        </div>
    66      </a-drawer>
    67  
    68    </div>
    69  </template>
    70  
    71  <script>
    72  
    73  import mockMixin from "@/store/mockMixin";
    74  import {changeSampleSrc, getPreviewResp} from "@/api/mock";
    75  import request, {serverUrl} from "@/utils/request";
    76  
    77  export default {
    78    name: 'MockPreview',
    79    components: {
    80    },
    81    props: {
    82    },
    83    mixins: [mockMixin],
    84    data: function() {
    85      return {
    86        responseVisible: false,
    87        hovered: false,
    88        respSample: null,
    89        serverUrl: ''
    90      };
    91    },
    92    mounted: function() {
    93      this.serverUrl = serverUrl
    94    },
    95    methods: {
    96      preview(id, url, method, code, media) {
    97        console.log(id, url, method, code, media)
    98  
    99        getPreviewResp(id, url, method, code, media).then(json => {
   100          if (json.code === 0) {
   101            this.respSample = json.data
   102            this.responseVisible = true
   103          }
   104        })
   105      },
   106  
   107      closePreview() {
   108        this.responseVisible = false;
   109      },
   110  
   111      selectSample(value) {
   112        const arr = value.split('~~~')
   113        const val = arr[0]
   114        const key = arr[1]
   115  
   116        changeSampleSrc(this.mockItem.item.id, key, val)
   117      },
   118    },
   119    watch: {
   120  
   121    }
   122  }
   123  </script>
   124  
   125  <style lang="less" scoped>
   126  .mock-preview-main {
   127    .item {
   128      line-height: 26px;
   129    }
   130    .path {
   131      padding-left: 10px;
   132      .method {
   133        padding-left: 10px;
   134        .code {
   135          padding-left: 10px;
   136          .media {
   137            padding-left: 10px;
   138            .media-text {
   139              float: left;
   140            }
   141            .copy-link {
   142              float: left;
   143              margin-left: 16px;
   144              margin-top: 2px;
   145            }
   146            .data-src {
   147              float: left;
   148              margin-left: 16px;
   149              width: 100px;
   150  
   151              .media-select {
   152                width: 90px;
   153              }
   154            }
   155          }
   156        }
   157      }
   158    }
   159  }
   160  </style>
   161  
   162  <style lang="less">
   163  .mock-preview-resp {
   164    max-width: 600px;
   165    word-wrap:break-word;
   166  }
   167  </style>