From 3fb1c3c9febdcbca5b1ddb534cd646910c90ed49 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Tue, 19 May 2020 17:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=BA=94=E7=94=A8=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/tool_yingyong.png | Bin 0 -> 4039 bytes
 src/components/app-card.vue       |  18 +-
 src/components/app-list.vue       |  15 ++
 src/components/side-nav-bar.vue   |  10 +-
 src/components/table-um.vue       |  48 +++-
 src/pages/fwglList.vue            |   3 +-
 src/pages/yygl.vue                |   2 +
 src/pages/yyglList.vue            | 378 ++++++++++++++++++++++++++++--
 static/data.json                  |   2 +-
 9 files changed, 429 insertions(+), 47 deletions(-)
 create mode 100644 src/assets/imgs/tool_yingyong.png

diff --git a/src/assets/imgs/tool_yingyong.png b/src/assets/imgs/tool_yingyong.png
new file mode 100644
index 0000000000000000000000000000000000000000..422bd2d82fa0347fbc8bda64065a878d5d914e65
GIT binary patch
literal 4039
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
Uy>H~ouWzB1`7yH+lhYUe164X0Gynhq

literal 0
HcmV?d00001

diff --git a/src/components/app-card.vue b/src/components/app-card.vue
index c1b1ce2..b3b899c 100644
--- a/src/components/app-card.vue
+++ b/src/components/app-card.vue
@@ -1,6 +1,6 @@
 <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);
     },
   },
 };
diff --git a/src/components/app-list.vue b/src/components/app-list.vue
index 15344f2..5aa020d 100644
--- a/src/components/app-list.vue
+++ b/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>
diff --git a/src/components/side-nav-bar.vue b/src/components/side-nav-bar.vue
index c4af1a3..bb839a5 100644
--- a/src/components/side-nav-bar.vue
+++ b/src/components/side-nav-bar.vue
@@ -1,11 +1,7 @@
 <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: () => "",
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index cd56f7b..b20155a 100644
--- a/src/components/table-um.vue
+++ b/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;
diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue
index 4c21276..5b29afd 100644
--- a/src/pages/fwglList.vue
+++ b/src/pages/fwglList.vue
@@ -392,10 +392,9 @@ export default {
           },
         ];
       }
-
+      
       // Error
       else {
-        this.headers = [];
         throw Error("The page doesn't exist");
       }
     },
diff --git a/src/pages/yygl.vue b/src/pages/yygl.vue
index 3e94daa..d114114 100644
--- a/src/pages/yygl.vue
+++ b/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">
diff --git a/src/pages/yyglList.vue b/src/pages/yyglList.vue
index c65a9ee..c5fbfeb 100644
--- a/src/pages/yyglList.vue
+++ b/src/pages/yyglList.vue
@@ -6,21 +6,31 @@
         <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">
-        <el-button
-          v-if="filterList && filterList.length"
-          size="small"
-          @click="showFliterList = !showFliterList"
-        >
-          {{ showFliterList ? "收起" : "筛选" }}
-          <i
-            class="el-icon--right"
-            :class="
-              showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
-            "
-          ></i>
-        </el-button>
+        <div class="filter_action">
+          <el-button
+            v-if="filterList && filterList.length"
+            size="small"
+            @click="showFliterList = !showFliterList"
+          >
+            {{ showFliterList ? "收起" : "筛选" }}
+            <i
+              class="el-icon--right"
+              :class="
+                showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+              "
+            ></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>
diff --git a/static/data.json b/static/data.json
index a8f30d5..19410ca 100644
--- a/static/data.json
+++ b/static/data.json
@@ -27,7 +27,7 @@
         "name": "王小虎",
         "address": "0",
         "id": "ssss22",
-        "state": 0
+        "state": 2
       }
     ],
     "tableData1": [
-- 
2.26.0