opms_frontend/src/views/base/distributor/detail.vue

<template>
  <div class="detail">
    <div class="side-layout">
      <div class="info">
        <div class="title">
          <p>经销商</p>
          <h3>
            {{ detail.distName }}
            <el-button @click="handleFollow">添加跟进</el-button>
          </h3>
        </div>
        <header>
          <el-descriptions :colon="false" :column="6" direction="vertical" style="padding-top: 15px">
            <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.saleNum }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="ABC项目总数量" label-class-name="my-label">
              {{ detail.projectNum }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="成交项目数量" label-class-name="my-label">
              {{ detail.saledProjectNum }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="成交总金额" label-class-name="my-label">
              {{ formatPrice(detail.saledAmount) }}
            </el-descriptions-item>
            <el-descriptions-item content-class-name="my-content" label="归属人员" label-class-name="my-label">
              {{ detail.belongSale }}
            </el-descriptions-item>
          </el-descriptions>
        </header>
        <el-tabs v-model="activeName">
          <el-tab-pane label="详细信息" name="details">
            <el-descriptions border :column="2" size="medium" title="经销商详情">
              <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.businessScope }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="注册资金" label-class-name="my-label">
                {{ detail.capital }}万元
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="注册地" label-class-name="my-label">
                {{ detail.registerDistrict }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="授权客户类型" label-class-name="my-label">
                {{ setCustomerType(detail.customerType) }}
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="my-content"
                label="ABC项目出货总金额"
                label-class-name="my-label">
                {{ formatPrice(detail.allProductAmount) }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="未回款金额" label-class-name="my-label">
                {{ formatPrice(detail.unpaidAmount) }}
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="my-content"
                label="已有代理品牌和产品"
                label-class-name="my-label">
                {{ detail.existedProduct }}
              </el-descriptions-item>
              <el-descriptions-item
                content-class-name="my-content"
                label="历史合作终端客户名称"
                label-class-name="my-label">
                {{ detail.historyCustomer }}
              </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.saleNum }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="创建时间" label-class-name="my-label">
                {{ parseTime(detail.createdTime, '{y}-{m}-{d}') }}
              </el-descriptions-item>
              <el-descriptions-item content-class-name="my-content" label="更新时间" label-class-name="my-label">
                {{ parseTime(detail.updatedTime, '{y}-{m}-{d}') }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="跟进记录" name="follow">
            <follow v-if="activeName == 'follow'" ref="followEl" target-type="50" />
          </el-tab-pane>
          <el-tab-pane label="联系人" name="contacts">
            <contacts v-if="activeName == 'contacts'" @initRecords="getRecord" />
          </el-tab-pane>
          <el-tab-pane label="项目记录" name="projectRecords">
            <project-records v-if="activeName == 'projectRecords'" />
          </el-tab-pane>
          <el-tab-pane label="合同记录" name="contractRecords">
            <contract-records v-if="activeName == 'contractRecords'" />
          </el-tab-pane>
          <el-tab-pane label="历史代理记录" name="historyProxy">
            <history-proxy v-if="activeName == 'historyProxy'" />
          </el-tab-pane>
          <el-tab-pane label="协访记录" name="visit">
            <visit v-if="activeName == 'visit'" ref="followEl" target-type="50" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="info-side">
        <div class="buttons">
          <!-- <el-button v-permissions="['contract:manage:edit']" type="primary" @click="handleEdit">编辑</el-button>
          <el-button v-permissions="['contract:manage:delete']" @click="handleDelete">删除</el-button> -->
          <el-button @click="back">返回</el-button>
        </div>
        <details-records :dynamics-list="dynamicsList" />
      </div>
    </div>
    <!-- 添加跟进记录 -->
    <follow-add ref="follow-add" @fetch-data="getFollowData" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import { mapGetters } from 'vuex'
  import api from '@/api/base/distr'
  import Contacts from '../components/Contacts.vue'
  import ProjectRecords from '../components/ProjectRecords'
  import ContractRecords from '../components/ContractRecords'
  import HistoryProxy from '../components/HistoryProxy'
  import DetailsRecords from './components/DetailsRecords'
  import Follow from '../components/Follow'
  import Visit from '../components/Visit'
  import FollowAdd from '@/views/proj/business/components/FollowAdd'

  export default {
    name: 'DistributorDetail',
    components: { DetailsRecords, Contacts, ProjectRecords, ContractRecords, HistoryProxy, Follow, FollowAdd, Visit },
    data() {
      return {
        id: 0,
        privateCus: '',
        list: [],
        activeName: 'details',
        detail: {
          distCode: '', //经销商编码
          distName: '', //经销商名称
          abbrName: '', //助记名
          distBoss: '', //负责人
          distBossPhone: '', //负责人电话
          belongSale: '', //销售人
          provinceDesc: '', //归属省份
          businessScope: '', //业务范围
          createdName: '', //创建人名字
          createdTime: '', //创建时间
        },
        customerOptions: [],
        dynamicsList: [],
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
      }),
    },
    mounted() {
      this.id = parseInt(this.$route.query.id)
      this.privateCus = this.$route.query.privateCus
      this.init()
      this.getOptions()
      this.getRecord()
      //this.getDynamics()
    },
    methods: {
      getFollowData() {
        if (this.activeName == 'follow') {
          this.$refs.followEl.getFollowList()
        }
      },
      // 添加跟进记录
      handleFollow() {
        this.followup = {
          targetId: this.detail.id,
          targetType: '50',
          targetName: this.detail.distName,
        }
        let tilte = '经销商联系人'
        console.log(this.followup)
        this.$refs['follow-add'].showEdit(this.followup, tilte)
      },
      setCustomerType(type) {
        if (this.customerOptions.length == 0) return
        if (!type) return
        let arr = []
        let typeArr = type.split(',')
        typeArr.map((item) => {
          arr.push(this.customerOptions.find((e) => e.key == item).value)
        })
        return arr.join(',')
      },
      getOptions() {
        Promise.all([this.getDicts('cust_idy')])
          .then(([data]) => {
            this.customerOptions = data.data.values
            // data.data.values.filter((i) => {
            //   this.customerOptions[i.key] = i.value
            // })
          })
          .catch((err) => console.log(err))
      },
      async init() {
        Promise.all([api.getEntity({ id: this.id })]).then(([detail]) => {
          console.log('detail', detail)
          this.detail = detail.data.list
        })
      },
      async getRecord() {
        const [err, res] = await to(api.getDynamicsList({ distId: this.id }))
        if (err) return
        if (res.data.list) {
          let obj = res.data.list
          const keys = Object.keys(obj).reverse()
          let records = {}
          for (const item of keys) {
            records[item] = obj[item]
          }
          this.dynamicsList = records
        }
      },

      setSelectRows(val) {
        this.selectRows = val
      },
      back() {
        this.$router.go(-1)
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.detail';

  #{$base} {
    height: calc(100vh - 60px - 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;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .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;
          }
        }
      }
    }
  }

  .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>