feat: 企微工具 - 平台管理 - "列表"前端页面

project/src/components/manage/platformManage/platformManage.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-loading="loading" class="platformManage-wrap">
+    <div class="screenBox flex">
+      <div></div><!-- 占位 -->
+      <div class="right">
+        <el-button type="primary" size="mini">添加平台</el-button>
+      </div>
+    </div>
+    <el-table :height="height" :data="platformList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+      <el-table-column label="平台" prop="name" min-width="160" align="center" />
+      <el-table-column label="描述" prop="name" min-width="160" align="center" />
+      <el-table-column label="账号" min-width="300" align="center">
+        <template slot-scope="{ row }">
+          <div class="account-wrap">
+            <span>123123123</span>
+            <i class="el-icon-delete" />
+          </div>
+          <div class="account-add-btn">
+            <i class="el-icon-plus" />
+            <span>添加账号</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.enable == 1" class="c-448AFF">启用</span>
+          <span v-else class="c-F03F5C">禁用</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" min-width="160" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini">编辑</el-button>
+          <el-button type="danger" size="mini" v-if="row.enable == 1">禁用</el-button>
+          <el-button type="primary" size="mini" v-else>启用</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination" v-show="pagination.total > 0">
+      <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'platformManage',
+  data () {
+    return {
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      platformList: [],
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    this.handleGetPlatform()
+  },
+  methods: {
+    // 获取列表数据
+    async handleGetPlatform() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.pitcher_dramaList}`
+        const params = {
+          is_select: 0,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        }
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.platformList = res.rst.data;
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.platformList = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        console.log(error)
+        this.platformList = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCurrentChange (val) {
+      this.handleGetPlatform(val)
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+.platformManage-wrap {
+  .account-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      color: #F46C6C;
+      cursor: pointer;
+      margin-left: 4px;
+    }
+  }
+  .account-add-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #32B38A;
+    cursor: pointer;
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -62,6 +62,9 @@ const fansActiveTrends = () => import(/* webpackChunkName: 'fansActiveTrends' */
 // 数据看板 - 用户流失趋势
 const loseUserTrends = () => import(/* webpackChunkName: 'loseUserTrends' */ '@/components/dataBoard/loseUserTrends.vue')
 
+// 平台管理
+const platformManage = () => import(/* webpackChunkName: 'platformManage' */ '@/components/manage/platformManage/platformManage.vue')
+
 // name与菜单配置的页面路由一致
 // meta下isData:true为数据看板,否则为助手
 export var allRouter = [
@@ -313,6 +316,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'platformManage',
+        name: 'platformManage',
+        component: platformManage,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '平台管理'
+        }
+      },
+      {
         path: 'memberManage',
         name: 'memberManage',
         component: memberManage,