|
|
@@ -0,0 +1,422 @@
|
|
|
+<template>
|
|
|
+ <div class="detail">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="title">
|
|
|
+ <p>产品名称</p>
|
|
|
+ <h3>
|
|
|
+ {{ detail.prodName }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <header>
|
|
|
+ <el-descriptions :colon="false" :column="6" direction="vertical">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="产品分类" label-class-name="my-label">
|
|
|
+ {{ detail.prodClass }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="建议成交价" label-class-name="my-label">
|
|
|
+ {{ detail.guidPrice }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="经销商价" label-class-name="my-label">
|
|
|
+ {{ detail.distPrice }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="签约代理价" label-class-name="my-label">
|
|
|
+ {{ detail.agentPrice }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="市场报价" label-class-name="my-label">
|
|
|
+ {{ detail.marketPrice }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
|
|
|
+ {{ detail.createdName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </header>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="buttons">
|
|
|
+ <el-button type="primary" @click="handleEdit">编辑</el-button>
|
|
|
+ <el-button @click="handleDelete">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <ul class="records">
|
|
|
+ <li v-for="(value, key) in records" :key="key">
|
|
|
+ <div class="date">
|
|
|
+ <h2>{{ key.split('-')[2] }}</h2>
|
|
|
+ <h3>{{ key.split('-').splice(0, 2).join('.') }}</h3>
|
|
|
+ </div>
|
|
|
+ <ul class="content">
|
|
|
+ <li v-for="(item, index) in records[key]" :key="index">
|
|
|
+ <!-- <el-avatar class="user-avatar"
|
|
|
+ :src="avatar" /> -->
|
|
|
+ <vab-icon class="user-avatar" icon="account-circle-fill" />
|
|
|
+ <div class="text">
|
|
|
+ <p class="action">{{ item.opnPeople }} {{ item.opnType }}</p>
|
|
|
+ <p>{{ item.opnDate }}</p>
|
|
|
+ <p v-if="item.opnContent.custName">
|
|
|
+ 客户名称：
|
|
|
+ <span>{{ item.opnContent.custName }}</span>
|
|
|
+ </p>
|
|
|
+ <template v-else-if="item.opnContent.cuctName">
|
|
|
+ <p>
|
|
|
+ 联系人名称：
|
|
|
+ <span>{{ item.opnContent.cuctName }}</span>
|
|
|
+ </p>
|
|
|
+ <p>职务：{{ item.opnContent.postion }}</p>
|
|
|
+ <p>手机：{{ item.opnContent.telephone }}</p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <Contact ref="contact" @contactSave="contactSave" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
+ import api from '@/api/product'
|
|
|
+ export default {
|
|
|
+ name: 'CustomerDetail',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ privateCus: '',
|
|
|
+ detail: {
|
|
|
+ prodClass: '', //产品分类
|
|
|
+ guidPrice: '', //建议成交价
|
|
|
+ distPrice: '', //经销商价
|
|
|
+ agentPrice: '', //签约代理价
|
|
|
+ marketPrice: '', //市场报价
|
|
|
+ createdName: '', //创建人
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.doGetEntityById({ ids: [parseInt(this.id)] }),
|
|
|
+ // api.getAbstract({ id: parseInt(this.id) }),
|
|
|
+ ]).then(([detail, abstract]) => {
|
|
|
+ if (detail.data.list[0]) this.detail = detail.data.list[0]
|
|
|
+ if (abstract.data.list) this.abstract = abstract.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: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::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>
|
wangxingcheng