refactor: 分享按钮样式 (#5529)

Co-authored-by: chenjianxing <jianxing.chen@fit2cloud.com>
2021-08-20 13:31:18 +08:00 · 2021-08-20 13:31:18 +08:00 · 696a73635c
parent 92c7b2c31d
commit 696a73635c
7 changed files with 102 additions and 76 deletions
--- a/backend/src/main/java/io/metersphere/api/controller/APITestController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/APITestController.java
@ -28,6 +28,7 @@ import io.metersphere.dto.ScheduleDao;
 import io.metersphere.notice.annotation.SendNotice;
 import io.metersphere.service.CheckPermissionService;
 import io.metersphere.service.ScheduleService;
+import org.springframework.context.annotation.Lazy;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;

@ -45,6 +46,7 @@ import static io.metersphere.commons.utils.JsonPathUtils.getListJson;
@RequestMapping(value = "/api")
 public class APITestController {
    @Resource
+    @Lazy
    private APITestService apiTestService;
    @Resource
    private ApiDefinitionService apiDefinitionService;
--- a/frontend/src/business/components/common/components/MsShareButton.vue
+++ b/frontend/src/business/components/common/components/MsShareButton.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="share-button">
+    <el-popover
+      placement="right"
+      width="260">
+      <p>{{shareUrl}}</p>
+      <div style="text-align: right; margin: 0">
+        <el-button type="primary" size="mini"
+                   v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>
+      </div>
+      <i class="el-icon-share" @click="$emit('click')" slot="reference" style="margin-right: 10px;cursor: pointer"></i>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MsShareButton",
+  props: ['shareUrl']
+}
+</script>
+
+<style scoped>
+.share-button {
+  margin: 10px;
+  font-size: 18px;
+}
+</style>
--- a/frontend/src/business/components/track/plan/view/TestPlanView.vue
+++ b/frontend/src/business/components/track/plan/view/TestPlanView.vue
@ -25,7 +25,7 @@
                   :plan-id="planId"/>
    <test-plan-load v-if="activeIndex === 'load'" :redirectCharType="redirectCharType" :clickType="clickType"
                    :plan-id="planId"/>
-    <test-plan-detail-report :test-plan="currentPlan" v-if="activeIndex === 'report'"/>
+    <test-plan-report-content v-if="activeIndex === 'report'" :plan-id="planId"/>

  </div>

@ -45,12 +45,12 @@ import TestPlanFunctional from "./comonents/functional/TestPlanFunctional";
 import TestPlanApi from "./comonents/api/TestPlanApi";
 import TestPlanLoad from "@/business/components/track/plan/view/comonents/load/TestPlanLoad";
 import {getCurrentProjectID} from "@/common/js/utils";
-import TestPlanDetailReport from "./comonents/report/TestPlanDetailReport";
+import TestPlanReportContent from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent";

 export default {
  name: "TestPlanView",
  components: {
-    TestPlanDetailReport,
+    TestPlanReportContent,
    TestPlanApi,
    TestPlanFunctional,
    MsTestPlanHeaderBar,
--- a/frontend/src/business/components/track/plan/view/comonents/report/TestPlanDetailReport.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TestPlanDetailReport.vue
@ -1,29 +0,0 @@
-<template>
-  <div>
-    <div class="container">
-      <el-main>
-        <test-plan-report-content :is-template="isTemplate" :is-share="isShare" :plan-id="planId" ref="reportContent"/>
-      </el-main>
-    </div>
-  </div>
-</template>
-
-<script>
-import TestPlanReportContent from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent";
-
-export default {
-  name: "TestPlanDetailReport",
-  components: {
-    TestPlanReportContent,
-  },
-  computed: {
-    planId() {
-      return this.testPlan.id;
-    },
-  },
-  props: ['testPlan', 'isTemplate', 'isShare'],
-}
-</script>
-
-<style scoped>
-</style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
@ -1,30 +1,44 @@
 <template>
-  <el-card v-loading="result ? result.loading : false">
+  <div class="container">
+    <el-main>
+      <el-card v-loading="result ? result.loading : false">

-      <div v-if="!isTemplate && !isShare" class="head-bar head-right">
-        <el-row>
-          <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExportHtml()">
-            {{'导出HTML'}}
-          </el-button>
-        </el-row>
-        <el-row>
-          <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEditTemplate()">
-            {{'编辑模板'}}
-          </el-button>
-        </el-row>
-        <el-row>
-          <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleShare()">
-            {{'分享连接'}}
-          </el-button>
-        </el-row>
-      </div>
+          <div v-if="!isTemplate && !isShare" class="head-bar head-right">

-    <test-plan-report-header :is-template="isTemplate" :is-share="isShare" :report="report" :plan-id="planId"/>
-    <test-plan-functional-report :is-share="isShare" :is-template="isTemplate" v-if="functionalEnable" :plan-id="planId" :report="report"/>
-    <test-plan-api-report :is-share="isShare" :is-template="isTemplate" v-if="apiEnable" :report="report" :plan-id="planId"/>
-    <test-plan-load-report :is-share="isShare" :is-template="isTemplate" v-if="loadEnable" :report="report" :plan-id="planId"/>
+<!--            <div style="font-size: 17px">-->
+<!--              <el-popover-->
+<!--                placement="right"-->
+<!--                width="260">-->
+<!--                <p>{{shareUrl}}</p>-->
+<!--                <div style="text-align: right; margin: 0">-->
+<!--                  <el-button type="primary" size="mini"-->
+<!--                             v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>-->
+<!--                </div>-->
+<!--                <i class="el-icon-share" @click="shareApiDocument" slot="reference" style="margin-right: 10px;cursor: pointer"></i>-->
+<!--              </el-popover>-->
+<!--            </div>-->
+            <ms-share-button :share-url="shareUrl" @click="shareApiDocument"/>

-  </el-card>
+            <el-row>
+              <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExportHtml()">
+                {{'导出HTML'}}
+              </el-button>
+            </el-row>
+            <el-row>
+              <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEditTemplate()">
+                {{'编辑模板'}}
+              </el-button>
+            </el-row>
+          </div>
+
+        <test-plan-report-header :is-template="isTemplate" :is-share="isShare" :report="report" :plan-id="planId"/>
+        <test-plan-functional-report :is-share="isShare" :is-template="isTemplate" v-if="functionalEnable" :plan-id="planId" :report="report"/>
+        <test-plan-api-report :is-share="isShare" :is-template="isTemplate" v-if="apiEnable" :report="report" :plan-id="planId"/>
+        <test-plan-load-report :is-share="isShare" :is-template="isTemplate" v-if="loadEnable" :report="report" :plan-id="planId"/>
+
+      </el-card>
+    </el-main>
+  </div>
 </template>

 <script>
@ -34,10 +48,12 @@ import TestPlanFunctionalReport
 import {getShareTestPlanReport, getTestPlanReport} from "@/network/test-plan";
 import TestPlanApiReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport";
 import TestPlanLoadReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport";
-import {generateApiDocumentShareInfo, generateShareInfo} from "@/network/share";
+import {generateShareInfo} from "@/network/share";
+import MsShareButton from "@/business/components/common/components/MsShareButton";
 export default {
  name: "TestPlanReportContent",
  components: {
+    MsShareButton,
    TestPlanLoadReport,
    TestPlanApiReport,
    TestPlanFunctionalReport,
@ -46,14 +62,21 @@ export default {
    planId:String,
    isTemplate: Boolean,
    isShare: Boolean,
+    shareId: String
  },
  data() {
    return {
      report: {},
      result: {},
-      isTestManagerOrTestUser: false
+      isTestManagerOrTestUser: false,
+      shareUrl: ''
    };
  },
+  watch: {
+    planId() {
+      this.getReport();
+    }
+  },
  created() {
    this.isTestManagerOrTestUser = true;
    this.getReport();
@ -85,6 +108,15 @@ export default {
    },
    handleEditTemplate() {

+    },
+    shareApiDocument(){
+      let pram = {};
+      pram.customData = this.planId;
+      pram.shareType = 'PLAN_REPORT';
+      generateShareInfo(pram, (data) => {
+        let thisHost = window.location.host;
+          this.shareUrl = thisHost + "/sharePlanReport" + data.shareUrl;
+      });
    },
    handleExportHtml() {
      let config = {
--- a/frontend/src/template/report/plan/PlanReportTemplate.vue
+++ b/frontend/src/template/report/plan/PlanReportTemplate.vue
@ -1,25 +1,21 @@
 <template>
  <div>
    <el-main>
-      <test-plan-detail-report :is-template="true" :test-plan="testPlan"/>
+      <test-plan-report-content :is-template="true" :plan-id="testPlan.planId"/>
    </el-main>
  </div>
 </template>

 <script>
-import TestPlanDetailReport from "@/business/components/track/plan/view/comonents/report/TestPlanDetailReport";
+import TestPlanReportContent from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent";
 export default {
  name: "PlanReportTemplate",
-  components: {TestPlanDetailReport},
+  components: {TestPlanReportContent},
  data() {
    return {
      testPlan: {"id": "96791ef8-8a75-4335-a48c-832e0ddece5f"}
    }
  },
-
-  methods: {
-
-  }
 }
 </script>

--- a/frontend/src/template/report/plan/share/SharePlanReportTemplate.vue
+++ b/frontend/src/template/report/plan/share/SharePlanReportTemplate.vue
@ -1,28 +1,25 @@
 <template>
-  <div>
-    <el-main>
-      <test-plan-detail-report v-if="visible" :is-share="true" :test-plan="testPlan"/>
-    </el-main>
-  </div>
+  <test-plan-report-content :is-share="true" :plan-id="planId"/>
 </template>

 <script>
-import TestPlanDetailReport from "@/business/components/track/plan/view/comonents/report/TestPlanDetailReport";
 import {getShareId} from "@/common/js/utils";
 import {getShareInfo} from "@/network/share";
+import TestPlanReportContent from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent";
 export default {
  name: "SharePlanReportTemplate",
-  components: {TestPlanDetailReport},
+  components: {TestPlanReportContent},
  data() {
    return {
-      testPlan: {"id": "96791ef8-8a75-4335-a48c-832e0ddece5f"},
-      visible: false
+      planId: '',
+      visible: false,
+      shareId: ''
    }
  },
  created() {
-    let shareId = getShareId();
-    getShareInfo(shareId, (data) => {
-      this.testPlan.id = data.customData;
+    this.shareId = getShareId();
+    getShareInfo(this.shareId, (data) => {
+      this.planId = data.customData;
      this.visible = true;
    });
  },