|
|
@@ -0,0 +1,402 @@
|
|
|
+<template>
|
|
|
+ <div class="detail">
|
|
|
+ <el-row :gutter="30">
|
|
|
+ <el-col :span="25">
|
|
|
+ <div class="title">
|
|
|
+ <p>经销商</p>
|
|
|
+ <h3>
|
|
|
+ {{ detail.distName }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <header>
|
|
|
+ <el-descriptions :colon="false" :column="10" direction="vertical" style="padding-top: 15px">
|
|
|
+ <el-descriptions-item
|
|
|
+ content-class-name="my-content"
|
|
|
+ label="经销商编码"
|
|
|
+ label-class-name="my-label"
|
|
|
+ style="width: auto">
|
|
|
+ {{ detail.distCode.substring(1, 7) }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="经销商名称" label-class-name="my-label">
|
|
|
+ {{ detail.distName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="助记名" label-class-name="my-label">
|
|
|
+ {{ detail.abbrName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="负责人" label-class-name="my-label">
|
|
|
+ {{ detail.distBoss }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="负责人电话" label-class-name="my-label">
|
|
|
+ {{ detail.distBossPhone }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="销售人" label-class-name="my-label">
|
|
|
+ {{ detail.belongSale }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="归属省份" label-class-name="my-label">
|
|
|
+ {{ detail.provinceDesc }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="业务范围" label-class-name="my-label">
|
|
|
+ {{ detail.businessScope }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
|
|
|
+ {{ detail.createdName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="创建时间" label-class-name="my-label">
|
|
|
+ {{ detail.createdTime }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </header>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
+ import api from '@/api/base/distr/distr'
|
|
|
+ export default {
|
|
|
+ name: 'Detail',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ privateCus: '',
|
|
|
+ list: [],
|
|
|
+ detail: {
|
|
|
+ distCode: '', //经销商编码
|
|
|
+ distName: '', //经销商名称
|
|
|
+ abbrName: '', //助记名
|
|
|
+ distBoss: '', //负责人
|
|
|
+ distBossPhone: '', //负责人电话
|
|
|
+ belongSale: '', //销售人
|
|
|
+ provinceDesc: '', //归属省份
|
|
|
+ businessScope: '', //业务范围
|
|
|
+ createdName: '', //创建人名字
|
|
|
+ createdTime: '', //创建时间
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ avatar: 'user/avatar',
|
|
|
+ username: 'user/username',
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.id = this.$route.query.id
|
|
|
+ this.privateCus = this.$route.query.privateCus
|
|
|
+ this.init()
|
|
|
+ //this.getDynamics()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async init() {
|
|
|
+ Promise.all([api.getEntity({ id: parseInt(this.id) })]).then(([detail]) => {
|
|
|
+ console.log('detail', detail)
|
|
|
+ this.detail = detail.data.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ setSelectRows(val) {
|
|
|
+ this.selectRows = val
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $base: '.detail';
|
|
|
+
|
|
|
+ #{$base} {
|
|
|
+ height: calc(100vh - 60px - 50px - 12px * 2 - 40px);
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 40px;
|
|
|
+
|
|
|
+ > .el-row {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ > .el-col {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ p,
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 36px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ height: 74px;
|
|
|
+ background: rgba(196, 196, 196, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ ::v-deep .el-descriptions__body {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .my-label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d66dc;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .my-content {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs {
|
|
|
+ height: calc(100% - 148px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ ::v-deep .el-tabs__content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .el-tab-pane {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ padding-top: 28px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .records {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px 20px;
|
|
|
+ list-style: none;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ & + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h2,
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ & + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #1d66dc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ p:nth-child(2) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .follow {
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 20px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h2,
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ > li {
|
|
|
+ border: 1px solid rgb(215, 232, 244);
|
|
|
+ background: rgb(247, 251, 254);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .text-container {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comments {
|
|
|
+ padding-left: 60px;
|
|
|
+ margin-top: 10px;
|
|
|
+ max-height: 200px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #e3e5e7;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:first-child {
|
|
|
+ line-height: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ p:last-child {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9499a0;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ + li {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 10px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 32px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #1d66dc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ span:first-child {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter-active,
|
|
|
+ .height-leave-active {
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter-to,
|
|
|
+ .height-leave {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter,
|
|
|
+.height-leave-to
|
|
|
+
|
|
|
+ /* .fade-leave-active below version 2.1.8 */ {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+</style>
|