企业详情

src/api/enterprise.js

@@ -3,6 +3,7 @@ import getFetch from './getFetch';
 let api = {
   getEnterpriseList: '/wx-enterprise-list', // 获取企业管理列表
   getEnterpriseDetail: '/enterprise-detail', // 获取企业详情
+  refreshEnterpriseInfo: '/setting/wx-enterprise-info-flush', // 刷新企业信息
 }
 
 export default getFetch(api, '/hb-manage-web');

src/views/enterprise/enterprise-detail.vue

 <template>
-  <div>企业管理详情</div>
+  <div style="padding: 20px">
+    <h3 class="model-title">
+      企业信息
+      <el-button type="text" @click="onRefresh">刷新企业</el-button>
+    </h3>
+    <el-form label-width="140px">
+      <el-form-item label="小程序版本"></el-form-item>
+      <el-form-item label="企业名称">
+        <div>
+          <span>{{ enterpriseDetail.wxEnterpriseName }}</span>
+          <el-tag :type="enterpriseDetail.corpType == 'verified' ? '' : 'info'" effect="plain" style="margin: 0 10px;">
+            {{ enterpriseDetail.corpType == 'verified' ? '已认证' : '未认证' }}
+          </el-tag>
+          <span class="end-time">认证到期 {{ enterpriseDetail.verifiedEndTime | timeStampToYmd }}</span>
+        </div>
+      </el-form-item>
+      <el-form-item label="企业ID">{{ enterpriseDetail.corpId }}</el-form-item>
+      <el-form-item label="企业类型"></el-form-item>
+      <el-form-item label="应用权限"></el-form-item>
+      <el-form-item label="应用可见范围"></el-form-item>
+    </el-form>
+    <h3 class="model-title">好办自建应用</h3>
+    <div class="hb-app">
+      <div class="hb-app-name">好办助手</div>
+      <el-form label-width="150px" class="hb-app-info">
+        <el-form-item class="hb-app-info-item" label="Agentld">133546431</el-form-item>
+        <el-form-item class="hb-app-info-item" label="Secret">R8RSrhQsjXBe8U0dffgmKMksLw6GT_KDX3w1XzbSzaM</el-form-item>
+        <el-form-item class="hb-app-info-item" label="应用可见范围">阿飞门店;直营标签;阿飞</el-form-item>
+      </el-form>
+    </div>
+    <div></div>
+    <h3 class="model-title">授权信息</h3>
+    <el-table :data="enterpriseDetail.enterpriseList">
+      <el-table-column label="授权商户">
+        <div slot-scope="{ row }" class="store-info">
+          <div class="store-logo">
+            <img src="" alt="">
+          </div>
+          <span class="store-name">{{ row.enterpriseName }}</span>
+        </div>
+      </el-table-column>
+      <el-table-column label="门店绑定授权范围">
+        <template slot-scope="{ row }">
+          <!-- 0 全部 1部分分组 2 部分门店 -->
+          <span v-if="row.bindStoreMode == 0">所有门店</span>
+          <el-button type="text" v-else>
+            {{ row.bindCount }}{{ row.bindStoreMode == 1 ? '个分组' : row.bindStoreMode == 2 ? '家门店' : '' }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="门店共享授权范围">
+        <template slot-scope="{ row }">
+          <!-- 0 全部 1部分分组 2 部分门店 -->
+          <span v-if="row.shareStoreMode == 0">所有门店</span>
+          <el-button type="text" v-else>
+            {{ row.shareCount }}{{ row.shareStoreMode == 1 ? '个分组' : row.shareStoreMode == 2 ? '家门店' : '' }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
+import api from '@/api/enterprise.js';
+
+// eslint-disable-next-line
+const { getEnterpriseDetail, refreshEnterpriseInfo } = api;
+
+/**
+ * 企业信息
+ *    小程序版本字段
+ *    企业类型字段
+ *    应用权限字段
+ *    应用可见范围字段
+ */
+/**
+ * 好办自建应用
+ *    缺少模块数据
+ */
+/**
+ * 授权信息
+ *    列表，缺少logo字段
+ *    弹窗，缺少授权范围数据
+ */
 export default {
-  name: 'enterprise-detail'
+  name: 'enterprise-detail',
+  data() {
+    return {
+      bread: [
+        { path: '/enterprise-list', name: '企业列表' },
+        { name: '查看' }
+      ],
+      enterpriseId: '',
+      enterpriseDetail: {},
+    }
+  },
+  created() {
+    const { enterpriseId } = this.$route.query;
+    if (!enterpriseId) {
+      return this.$router.go(-1);
+    }
+    this.enterpriseId = enterpriseId;
+    this.getEnterpriseDetail();
+    this.$emit('updateBread', this.bread);
+  },
+  methods: {
+    getEnterpriseDetail() {
+      this.enterpriseDetail = {
+        wxEnterpriseName: '企业名称',
+        corpId: '企业id',
+        corpSubIndustry: '',
+        corpIndustry: '',
+        corpScale: '',
+        location: '',
+        verifiedEndTime: Date.now(),
+        corpType: 'verified',
+        enterpriseList: [
+          {
+            enterpriseId: '',
+            enterpriseName: '测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户测试商户',
+            bindStoreMode: 0, // 门店分享类型 0 全部 1部分分组 2 部分门店
+            bindCount: 10,
+            shareStoreMode: 0, // 门店分享类型 0 全部 1部分分组 2 部分门店
+            shareCount: 20
+          }
+        ]
+      }
+      return console.log(this.enterpriseId);
+      getEnterpriseDetail({ wxEnterpriseId: this.enterpriseId }).then(res => {
+        console.log(res)
+      })
+    },
+    onRefresh() {
+      refreshEnterpriseInfo().then(this.getEnterpriseDetail);
+    }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+.model-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0 15px;
+  font-size: 14px;
+  font-weight: 700;
+  color: @gray01;
+  line-height: 20px;
+  &:first-child {
+    margin-top: 0;
+  }
+}
+.end-time {
+  font-size: 12px;
+  font-weight: 400;
+  color: @gray03;
+  line-height: 17px;
+}
+.hb-app {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  width: 789px;
+  height: 115px;
+  border: 1px solid #E4E7ED;
+  .hb-app-name {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    width: 126px;
+    border-right: 1px solid #E4E7ED;
+  }
+  .hb-app-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    .hb-app-info-item {
+      margin-bottom: 10px;
+      font-size:14px;
+      font-weight: 400;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      /deep/.el-form-item__label, /deep/.el-form-item__content {
+        line-height: 20px;
+      }
+    }
+  }
+}
+.store-info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .store-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+    width: 40px;
+    height: 40px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 2px;
+    }
+  }
+  .store-name {
+    display: block;
+    width: calc(100% - 50px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>