企业列表

src/api/enterprise.js

+import getFetch from './getFetch';
+
+let api = {
+  getEnterpriseList: '/wx-enterprise-list', // 获取企业管理列表
+  getEnterpriseDetail: '/enterprise-detail', // 获取企业详情
+}
+
+export default getFetch(api, '/hb-manage-web');

src/views/enterprise/enterprise-list.vue

 <template>
-  <div>企业管理列表</div>
+  <div style="padding: 20px">
+    <el-input
+      placeholder="请输入企业/商户"
+      style="width: 180px"
+      prefix-icon="el-icon-search"
+      clearable
+      v-model.trim="search.search"
+      @change="onSearch"
+    ></el-input>
+    <el-select style="margin-left: 10px;width: 106px" placeholder="全部版本" clearable v-model="search.version" @change="onSearch">
+      <el-option v-for="el in versionList" :key="el.value" :value="el.value" :label="el.label"></el-option>
+    </el-select>
+    <el-select style="margin-left: 10px;width: 106px" placeholder="全部状态" clearable v-model="search.bindFlag" @change="onSearch">
+      <el-option v-for="el in bindFlagList" :key="el.value" :value="el.value" :label="el.label"></el-option>
+    </el-select>
+    <el-table style="margin-top:20px" :data="enterpriseList">
+      <el-table-column label="企业信息">
+        <div slot-scope="{ row }" class="enterprise-info">
+          <div class="logo">
+            <img v-if="row.corpSquareLogoUrl" :src="row.corpSquareLogoUrl" alt="">
+          </div>
+          <span class="enterprise-name">{{ row.wxEnterpriseName }}</span>
+        </div>
+      </el-table-column>
+      <el-table-column label="订购版本" prop="version" :formatter="formatVersion"></el-table-column>
+      <el-table-column label="授权GIC商户数" prop="enterpriseCount"></el-table-column>
+      <el-table-column label="最近授权时间">
+        <div slot-scope="{ row }" style="line-height: normal">
+          <p>{{ row.auditTime | timeStampToYmd }}</p>
+          <p>{{ row.auditTime | timeStampToHms }}</p>
+        </div>
+      </el-table-column>
+      <el-table-column label="最近编辑时间">
+        <div slot-scope="{ row }" style="line-height: normal">
+          <p>{{ row.editTime | timeStampToYmd }}</p>
+          <p>{{ row.editTime | timeStampToHms }}</p>
+        </div>
+      </el-table-column>
+      <el-table-column label="操作">
+        <el-button slot-scope="{ row }" type="text" @click="toEnterpriseDetail(row)">详情</el-button>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-if="pager.total > 0"
+      style="text-align: right"
+      background
+      layout="total,sizes,prev,pager,next"
+      :total="pager.total"
+      :page-sizes="pager.pageSizes"
+      :page-size="pager.pageSize"
+      :current-page="pager.currentPage"
+      @size-change="onSizeChange"
+      @current-change="onCurrentChange"
+    ></el-pagination>
+  </div>
 </template>
 
 <script>
+import api from '@/api/enterprise.js';
+
+const { getEnterpriseList } = api;
+
 export default {
-  name: 'enterprise-list'
+  name: 'enterprise-list',
+  data() {
+    return {
+      versionList: [
+        { label: '基础版', value: '1' },
+        { label: '高级版', value: '2' }
+      ],
+      bindFlagList: [
+        { label: '未绑定', value: '1' },
+        { label: '已绑定', value: '2' }
+      ],
+      // 查询相关的数据
+      search: {
+        search: '',
+        version: '',
+        bindFlag: ''
+      },
+      // 分页相关的数据
+      pager: {
+        total: 0,
+        pageSizes: [20, 40, 60, 80],
+        pageSize: 20,
+        currentPage: 1
+      },
+      // 企业列表
+      enterpriseList: []
+    }
+  },
+  created() {
+    // this.getEnterpriseList();
+  },
+  methods: {
+    // 获取企业列表
+    getEnterpriseList() {
+      const { search, version, bindFlag } = this.search;
+      const { pageSize, currentPage } = this.pager;
+      const params = {
+        search,
+        version,
+        bindFlag,
+        pageSize,
+        pageNum: currentPage
+      }
+      getEnterpriseList(params).then(res => {
+        const { totalCount, result } = res.result || {};
+        this.pager.total = totalCount || 0;
+        this.enterpriseList = result || [];
+      })
+    },
+    onSearch() {
+      this.pager.currentPage = 1;
+      this.getEnterpriseList();
+    },
+    onCurrentChange(currentPage) {
+      this.pager.currentPage = currentPage;
+      this.getEnterpriseList();
+    },
+    onSizeChange(pageSize) {
+      this.pager.pageSize = pageSize;
+      this.onSearch();
+    },
+    formatVersion(row, col, val) {
+      let result = '--';
+      this.versionList.some(el => {
+        if (el.value == val) {
+          result = el.label;
+        }
+        return el.value == val;
+      })
+      return result;
+    },
+    toEnterpriseDetail(enterpriseData) {
+      const { wxEnterpriseId } = enterpriseData;
+      this.$router.push(`/enterprise-detail?enterpriseId=${wxEnterpriseId}`);
+    }
+  }
 }
 </script>
+
+<style scoped>
+.enterprise-info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.logo {
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+}
+.logo img {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 2px;
+}
+.enterprise-name {
+  display: block;
+  width: calc(100% - 50px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>