我的应用列表页交互

src/components/app-card.vue

@@ -7,7 +7,11 @@
       <el-avatar shape="square" :size="56" fit="cover" :src="data.img" />
     </div>
     <div class="app_card-info">
-      <p class="app_card-name text_clip" v-text="data.name"></p>
+      <p
+        class="app_card-name text_clip"
+        v-text="data.name"
+        @click="intoDetail"
+      ></p>
       <p class="app_card-version text_clip" v-text="data.version"></p>
     </div>
     <div class="app_card-action" v-if="cardType == 0">
@@ -36,6 +40,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    detailsUrl: {
+      type: String,
+      default: 0,
+    },
   },
   methods: {
     deploymentAction() {
@@ -44,6 +52,9 @@ export default {
     deleteAction() {
       this.$emit("delete-action", this.data);
     },
+    intoDetail() {
+      this.$router.push(`${this.detailsUrl}${this.data.id}`);
+    },
   },
 };
 </script>
@@ -83,6 +94,7 @@ export default {
   font-size: 18px;
   line-height: 32px;
   color: #0d1847;
+  cursor: pointer;
 }
 .app_card-info > .app_card-version {
   font-size: 14px;

src/components/app-list.vue

@@ -7,6 +7,7 @@
       :card-type="cardType"
       @deployment-action="deploymentAction"
       @delete-action="deleteAction"
+      :details-url="detailsUrl"
     ></app-card>
   </div>
 </template>
@@ -27,6 +28,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    detailsUrl: {
+      type: String,
+      default: 0,
+    },
   },
   methods: {
     deploymentAction(item) {

src/pages/yyglList.vue

@@ -43,6 +43,7 @@
         :card-type="cardType"
         @deployment-action="deploymentAction"
         @delete-action="deleteAction"
+        :details-url="detailsUrl"
       ></app-list>
       <div class="flex_grow"></div>
       <comments-pagination
@@ -240,10 +241,12 @@ export default {
     detailsUrl() {
       let url = "";
 
-      if (this.level == 0 && this.type == 1) {
-        url = `/fwgl/${this.level}/${this.type}/applyserviceedit/`;
+      if (this.level == 0 && this.type == 0) {
+        url = `/yygl/${this.level}/${this.type}/detail/`;
+      } else if (this.level == 0 && this.type == 1) {
+        url = `/yygl/${this.level}/${this.type}/approvaldetail/`;
       } else {
-        url = `/fwgl/${this.level}/${this.type}/servicedetail/`;
+        url = `/yygl/${this.level}/${this.type}/detail/`;
       }
 
       return url;
@@ -298,10 +301,7 @@ export default {
       console.log("delete --- " + item.id);
     },
     editItem(item) {
-      console.log("edit --- " + item.id);
-      /* this.$router.push(
-        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
-      ); */
+      this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}`);
     },
     offLine(item) {
       console.log("off line --- " + item.id);
@@ -345,7 +345,6 @@ export default {
     // 普通用户 --- 审批的应用
     else if (level === 0 && type === 3) {
       this.listType = "table";
-
       this.headers = [
         { label: "应用名称", prop: "name", type: "href", align: "left" },
         { label: "应用版本", prop: "date", type: "", align: "center" },

src/router/index.js

@@ -82,17 +82,17 @@ export default new Router({
               component: () => import("@/pages/yyglList"),
             },
             {
-              path: "/yygldetail/:level/0", // 应用仓库详情
+              path: "/yygl/:level/:type/detail/:id", // 应用仓库详情
               name: "appdetail",
               component: () => import("@/pages/app_detail"),
             },
             {
-              path: "/yygledit/:level/0", // 应用仓库编辑
+              path: "/yygl/:level/:type/edit/:id", // 应用仓库编辑
               name: "appedit",
               component: () => import("@/pages/app_edit"),
             },
             {
-              path: "/yyglapprovaldetail/:level/1", // 应用仓库编辑
+              path: "/yygl/:level/:type/approvaldetail/:id", // 我部署的应用详情
               name: "approval_app_detail",
               component: () => import("@/pages/approval_app_detail"),
             },