picc-admin-portal/src/views/base/company-detail.vue

<template>
  <el-dialog
    :visible.sync="showDialog"
    title="企业信息"
    :modal-append-to-body="false"
    style="text-align:left;"
    @close="closeDialog"
    width="75%"
  >
    <div class="application-panel" v-loading="loading">
      <div class="title-von">
        <h4>企业详细信息</h4>
      </div>
      <table border="1" style="border-collapse:collapse;width: 100%;">
        <tr>
          <td width="10%">企业名称</td>
          <td width="20%">{{companyData.name}}</td>
          <td width="15%">统一社会信用代码</td>
          <td width="35%">
            {{companyData.usccCode}}
            <a :href="companyData.usccFiles" target="_blank">查看附件</a>
          </td>
          <td width="10%"></td>
          <td></td>
        </tr>
        <tr>
          <td>联系人</td>
          <td>{{companyData.person}}</td>
          <td>联系人手机号</td>
          <td>{{companyData.tel}}</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>法人代表</td>
          <td>{{companyData.legalName}}</td>
          <td>法人代表身份证</td>
          <td>
            {{companyData.legalCard}}
            <a :href="companyData.legalCardFile" target="_blank">查看附件</a>
          </td>
          <td>企业公章</td>
          <td>已加密</td>
        </tr>
      </table>
    </div>
    <div class="application-panel" v-loading="loading">
      <div class="title-von">
        <h4>账号信息</h4>
      </div>
      <table border="1" style="border-collapse:collapse;width: 100%;">
        <tr>
          <td colspan="4">
            <el-avatar :size="50" :src="avatar_url"></el-avatar>
                <span class="bind-von">账号<p>{{companyUserData.userName}}</p></span>
          </td>
        </tr>
        <tr>
          <td width="5%">用户名{{companyUserData.avatar}}</td>
          <td width="20%">{{companyUserData.realName}}</td>
          <td width="5%">手机号</td>
          <td width="20%">{{companyUserData.phone}}</td>
        </tr>
        <tr>
          <td width="5%">职业</td>
          <td width="20%">{{companyUserData.profession}}</td>
          <td width="5%"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>简介</td>
          <td colspan="3">{{companyUserData.summary}}</td>
        </tr>
      </table>
    </div>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import companyApi from "@/api/base/company";

export default {
  props: ["companyId"],
  data() {
    return {
      showDialog: true,
      loading: false,
      submitting: false,
      companyData: "",
      companyUserData: "",
      avatar: ""
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    tabsClick(tab, event) {
      if (tab.name == "20") {
        this.changePageRecord(1);
      }
    }
  },
  mounted: function() {
    var self = this;
    (function() {
      if (self.companyId.length == 0) {
        self.$message.error("未查到该企业信息!");
      } else {
        return companyApi.detail(self.companyId);
      }
    })()
      .then(response => {
        var jsonData = response.data;
        self.loading = false;

        if (jsonData.result) {
          self.companyData = jsonData.data;
        } else {
          self.$message.error(jsonData.message + "");
        }
      })
      .catch(error => {
        self.$message.error(error + "");
      });

    var formData = new FormData();
    formData.append("companyId", self.companyId);

    companyApi.companyUserDetail(formData).then(function(response) {
      var jsonData = response.data;
      if (jsonData.result) {
        self.companyUserData = jsonData.data;
        self.avatarUrl = jsonData.data.avatar;
      }
    });
  }
};
</script>


<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}

.application-panel td,
.accept-panel td {
  padding: 10px 0;
  font-size: 14px;
  border: 0;
  vertical-align: initial;
}

.application-panel table {
  border: 0;
}

.el-tabs.el-tabs--card.el-tabs--top {
  padding: 20px;
}

.table-bak {
  background: #f6f6f6;
}

.el-tab-pane .title-von {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
}

.title-von h4 {
  border-left: 2px solid red;
  padding-left: 10px;
}

.user-panel,
.application-panel,
.accept-panel {
  margin-bottom: 30px;
}

.el-pagination {
  padding: 10px 15px;
}

.accept-panel td p {
  font-weight: bold;
  margin: 0;
}

.application-panel table {
  width: 100%;
}

.el-container {
  border-left: 1px solid #efefef;
}

.el-form td {
  font-size: 14px;
}

.application-panel td {
  position: relative;
}

.bind-von {
  display: block;
  position: absolute;
  left: 70px;
  top: 50%;
  margin-top: -19px;
}

.bind-von p {
  margin: 0;
}
</style>