我的应用列表页

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,9 +30,8 @@
           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>
@@ -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

@@ -395,7 +395,6 @@ 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">

src/pages/yyglList.vue

@@ -6,8 +6,9 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="main_container">
+    <div class="main_container card" v-if="listType == 'card'">
       <div class="filter_contaner">
+        <div class="filter_action">
           <el-button
             v-if="filterList && filterList.length"
             size="small"
@@ -21,6 +22,15 @@
               "
             ></i>
           </el-button>
+          <el-input
+            v-model="search"
+            prefix-icon="el-icon-search"
+            placeholder="请输入应用名称"
+            style="width:180px;"
+            @input="searchChange"
+            class="ces_toolbar_inp"
+          ></el-input>
+        </div>
         <table-filter
           :show="showFliterList"
           :filter-list="filterList"
@@ -28,7 +38,13 @@
           style="margin-top: 5px;"
         ></table-filter>
       </div>
-      <app-list :data="appList"></app-list>
+      <app-list
+        :data="appList"
+        :card-type="cardType"
+        @deployment-action="deploymentAction"
+        @delete-action="deleteAction"
+      ></app-list>
+      <div class="flex_grow"></div>
       <comments-pagination
         :total="100"
         :page-sizes="pageSizes"
@@ -38,13 +54,41 @@
         @current-change="changeCurrentPage"
       ></comments-pagination>
     </div>
+    <div class="main_container" v-if="listType == 'table'">
+      <ces-table
+        class="r_yhgl_table"
+        size="mini"
+        url="tableData"
+        input-placeholder="请输入应用名称"
+        empty-text="暂时没数据"
+        :detailsUrl="detailsUrl"
+        :border="false"
+        :headers="headers"
+        :searchShow="true"
+        :autoAdd="false"
+        :stripe="true"
+        :pageSizeShow="true"
+        :filterList="filterList"
+        :isIndex="false"
+        @action-approval="approvalItem"
+        @action-delete="deleteItem"
+        @action-edit="editItem"
+        @off-line="offLine"
+        @goods-shelf="goodsShelf"
+        style="margin-top: 44px;"
+      ></ces-table>
+    </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirm-options="confirmOptions"
+    ></dialog-action>
   </div>
 </template>
 
 <script>
 import tableFilter from "@/components/table-filter";
 import appList from "@/components/app-list";
-import tableUm from "@/components/table-um";
+import cesTable from "@/components/table-um";
 import dialogAction from "@/components/dialog-action";
 import commentsPagination from "@/components/comments-pagination";
 import { mapState } from "vuex";
@@ -53,13 +97,15 @@ export default {
   components: {
     tableFilter,
     appList,
-    tableUm,
+    cesTable,
     dialogAction,
     commentsPagination,
   },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
+    listType: "",
+    cardType: "",
     showFliterList: false,
     filterList: [
       {
@@ -172,9 +218,17 @@ export default {
         time: "2019-04-11 12:50:30",
       },
     ],
+    search: "",
     pageSizes: [10, 50, 100],
     pageSize: 10,
     currentPage: 1,
+    confirmOptions: {
+      title: "",
+      message: "",
+      btnCancelText: "",
+      btnSubmitText: "",
+      item: null,
+    },
   }),
   computed: {
     ...mapState({
@@ -183,11 +237,53 @@ export default {
     pathName() {
       return this.yyglNav[this.level][this.type];
     },
+    detailsUrl() {
+      let url = "";
+
+      if (this.level == 0 && this.type == 1) {
+        url = `/fwgl/${this.level}/${this.type}/applyserviceedit/`;
+      } else {
+        url = `/fwgl/${this.level}/${this.type}/servicedetail/`;
+      }
+
+      return url;
+    },
   },
   methods: {
+    searchChange(value) {
+      console.log(value);
+    },
     filterChange(filter) {
       console.log(filter);
     },
+    deploymentAction(item) {
+      console.log("deployment " + item.name);
+    },
+    deleteAction(item) {
+      if (this.cardType === 0) {
+        this.confirmOptions.title = "删除提示";
+        this.confirmOptions.message =
+          "您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
+        this.confirmOptions.btnCancelText = "";
+        this.confirmOptions.btnSubmitText = "";
+        this.confirmOptions.confirmSubmit = () => {
+          console.log("deleteItem - " + item.name);
+          this.$refs.myConfirm.hideModel();
+        };
+      } else if (this.cardType === 1) {
+        this.confirmOptions.title = "是否删除部署的应用";
+        this.confirmOptions.message =
+          "该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
+        this.confirmOptions.btnCancelText = "";
+        this.confirmOptions.btnSubmitText = "发送通知";
+        this.confirmOptions.confirmSubmit = () => {
+          console.log("deleteItem - " + item.name);
+          this.$refs.myConfirm.hideModel();
+        };
+      }
+
+      this.$refs.myConfirm.showModel();
+    },
     changePageSize(value) {
       this.pageSize = value;
       this.currentPage = 1;
@@ -195,16 +291,249 @@ export default {
     changeCurrentPage(value) {
       this.currentPage = value;
     },
+    approvalItem(item) {
+      console.log("approval --- " + item.id);
+    },
+    deleteItem(item) {
+      console.log("delete --- " + item.id);
+    },
+    editItem(item) {
+      console.log("edit --- " + item.id);
+      /* this.$router.push(
+        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
+      ); */
+    },
+    offLine(item) {
+      console.log("off line --- " + item.id);
+    },
+    goodsShelf(item) {
+      console.log("goods shelf", item.state);
+    },
   },
   created() {
     this.level = parseInt(this.$route.params.level);
     this.type = parseInt(this.$route.params.type);
+
+    let level = this.level;
+    let type = this.type;
+
+    // 普通用户 --- 应用仓库 card列表形式
+    if (level === 0 && type === 0) {
+      this.listType = "card";
+      this.cardType = 0;
+    }
+    // 普通用户 --- 我部署的应用
+    else if (level === 0 && type === 1) {
+      this.listType = "card";
+      this.cardType = 1;
+    }
+    // 普通用户 --- 申请的应用 card列表形式
+    else if (level === 0 && type === 2) {
+      this.listType = "table";
+
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "申请时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 普通用户 --- 审批的应用
+    else if (level === 0 && type === 3) {
+      this.listType = "table";
+
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "审批状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // 组织管理员 --- 应用仓库管理
+    else if (level === 1 && type === 0) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线状态", prop: "address", type: "", align: "center" },
+        { label: "创建时间", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "goods-shelf",
+            },
+          ],
+        },
+      ];
+    }
+    // 组织管理员 --- 部署的应用
+    else if (level === 1 && type === 1) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "上架区域", prop: "address", type: "", align: "center" },
+        { label: "部署时间", prop: "address", type: "", align: "center" },
+        { label: "部署区域", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 组织管理员 --- 应用审批管理
+    else if (level === 1 && type === 2) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // 超级管理员 --- 平台应用管理
+    else if (level === 2 && type === 0) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线状态", prop: "address", type: "", align: "center" },
+        { label: "所属组织", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 240,
+          btnList: [
+            {
+              type: "action-edit",
+              label: "编辑",
+              line: "|",
+            },
+            {
+              type: "off-line",
+              label: "下线",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+    // 超级管理员 --- 应用部署管理
+    else if (level === 2 && type === 1) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "上架区域", prop: "address", type: "", align: "center" },
+        { label: "所属组织", prop: "address", type: "", align: "center" },
+        { label: "部署时间", prop: "address", type: "", align: "center" },
+        { label: "部署区域", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 超级管理员 --- 应用审批管理
+    else if (level === 2 && type === 2) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // Error
+    else {
+      throw Error("The page doesn't exist");
+    }
   },
 };
 </script>
 
 <style scoped>
 .list_container {
+  height: 100%;
   padding: 0 20px;
 }
 .main_container {
@@ -214,7 +543,18 @@ export default {
   overflow: hidden;
   background-color: #fff;
 }
-.main_container .ces-table-page {
-  margin-top: 18px;
+.main_container.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.flex_grow {
+  flex-grow: 1;
+}
+.filter_action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 </style>

static/data.json

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