我的应用列表页

src/components/app-card.vue

 <template>
   <div class="app_card">
-    <a class="remove_btn" @click.prevent="deleteApp">
+    <a class="remove_btn" @click.prevent="deleteAction">
       <i class="el-icon-close"></i>
     </a>
     <div class="app_card-icon">
@@ -10,18 +10,18 @@
       <p class="app_card-name text_clip" v-text="data.name"></p>
       <p class="app_card-version text_clip" v-text="data.version"></p>
     </div>
-    <div class="app_card-action">
+    <div class="app_card-action" v-if="cardType == 0">
       <el-button type="primary" plain @click="deploymentAction">
         一键部署
       </el-button>
     </div>
-    <!-- <p class="app_card-text">
+    <p class="app_card-text" v-if="cardType == 1">
       <span>
         <i class="el-icon-time"></i>
         <span>上线时间：</span>
       </span>
       <span class="text_clip" v-text="data.time"></span>
-    </p> -->
+    </p>
   </div>
 </template>
 
@@ -32,13 +32,17 @@ export default {
       type: Object,
       default: {},
     },
+    cardType: {
+      type: [String, Number],
+      default: 0,
+    },
   },
   methods: {
     deploymentAction() {
-      console.log("一键部署 --- " + this.data.id);
+      this.$emit("deployment-action", this.data);
     },
-    deleteApp() {
-      console.log("删除应用 --- " + this.data.id);
+    deleteAction() {
+      this.$emit("delete-action", this.data);
     },
   },
 };

src/components/app-list.vue

@@ -4,6 +4,9 @@
       v-for="(item, index) in data"
       :key="'app_card_' + index"
       :data="item"
+      :card-type="cardType"
+      @deployment-action="deploymentAction"
+      @delete-action="deleteAction"
     ></app-card>
   </div>
 </template>
@@ -20,6 +23,18 @@ export default {
       type: Array,
       default: [],
     },
+    cardType: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  methods: {
+    deploymentAction(item) {
+      this.$emit("deployment-action", item);
+    },
+    deleteAction(item) {
+      this.$emit("delete-action", item);
+    },
   },
 };
 </script>

src/components/side-nav-bar.vue

 <template>
   <div class="side_nav_bar">
     <h3 class="side_nav_bar_title" @click="titleAction">
-      <img
-        :src="require('../assets/imgs/tool_fuwu.png')"
-        width="20"
-        style="margin-right: 10px;"
-      />
+      <img :src="titleIcon" width="20" style="margin-right: 10px;" />
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
@@ -31,6 +27,10 @@ export default {
       type: String,
       default: () => "我的服务",
     },
+    titleIcon: {
+      type: String,
+      default: () => require("../assets/imgs/tool_fuwu.png"),
+    },
     titlePath: {
       type: String,
       default: () => "",

src/components/table-um.vue

@@ -30,18 +30,17 @@
           prefix-icon="el-icon-search"
           v-if="searchShow"
           v-model="search"
-          placeholder="请输入账号、中文名"
-          style="max-width:220px;"
-          size="mini"
+          :placeholder="inputPlaceholder"
+          style="width:180px;"
           @input="searchVal"
           class="ces_toolbar_inp"
         ></el-input>
       </div>
-      <v-apaas-table-filter 
-      :show="showFliterList" 
-      :filter-list="filterList"
-      @filter-change="filterChange"
-    ></v-apaas-table-filter>
+      <v-apaas-table-filter
+        :show="showFliterList"
+        :filter-list="filterList"
+        @filter-change="filterChange"
+      ></v-apaas-table-filter>
       <el-table
         :data="selectedTabsPage"
         :size="size"
@@ -104,6 +103,28 @@
                   </em>
                 </em>
 
+                <em v-if="btn.type == 'goods-shelf'">
+                  <em
+                    v-if="scope.row.state == 0"
+                    class="cur_pointer"
+                    style="color: #0f2683"
+                    @click="handleClick(btn.type, scope.row)"
+                  >
+                    上架
+                  </em>
+                  <em
+                    v-if="scope.row.state == 1"
+                    class="cur_pointer"
+                    style="color: #0f2683"
+                    @click="handleClick(btn.type, scope.row)"
+                  >
+                    下架
+                  </em>
+                  <em v-if="scope.row.state == 2">
+                    下架
+                  </em>
+                </em>
+
                 <em
                   class="cur_pointer"
                   v-else-if="btn.label == '删除' && btn.local"
@@ -237,7 +258,7 @@ export default {
     "v-apaas-table-select": tableSelect,
     "v-apaas-table-umhref": tableUmhref,
     "d-confirm": DConfirm,
-    "v-apaas-table-filter": tableFilter
+    "v-apaas-table-filter": tableFilter,
   },
   props: {
     // 表格型号：mini,medium,small
@@ -264,6 +285,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inputPlaceholder: {
+      type: String,
+      default: "请输入账号、中文名",
+    },
     url: {
       type: String,
       default: "",
@@ -515,7 +540,7 @@ export default {
     },
     filterChange(filter) {
       console.log(filter);
-    }
+    },
   },
 };
 </script>
@@ -669,9 +694,6 @@ em {
 .ces_toolbar .ces_toolbar_btn {
   margin-right: 10px;
 }
-.ces_toolbar .ces_toolbar_inp {
-  margin-right: 10px;
-}
 .ces-pagination {
   margin-top: 20px;
   padding-bottom: 20px;

src/pages/fwglList.vue

@@ -392,10 +392,9 @@ export default {
           },
         ];
       }
-
+      
       // Error
       else {
-        this.headers = [];
         throw Error("The page doesn't exist");
       }
     },

src/pages/yygl.vue

@@ -2,6 +2,8 @@
   <div class="yygl_container">
     <side-nav-bar
       :nav-list="navList"
+      title="我的应用"
+      :title-icon="require('../assets/imgs/tool_yingyong.png')"
       :title-path="navList[0] && navList[0].path"
     ></side-nav-bar>
     <div class="main_container">

static/data.json

@@ -27,7 +27,7 @@
         "name": "王小虎",
         "address": "0",
         "id": "ssss22",
-        "state": 0
+        "state": 2
       }
     ],
     "tableData1": [