|
|
@@ -0,0 +1,414 @@
|
|
|
+<template>
|
|
|
+ <div class="details">
|
|
|
+ <div class="side-layout">
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ <p>调研问卷</p>
|
|
|
+ </div>
|
|
|
+ <header>
|
|
|
+ <el-descriptions :colon="false" :column="7" direction="vertical">
|
|
|
+ <el-descriptions-item content-class-name="my-content" label="单位名称" label-class-name="my-label">
|
|
|
+ <span style="color: #1890ff; cursor: pointer">
|
|
|
+ {{ details.unitName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </header>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="详细信息" name="details">
|
|
|
+ <el-descriptions
|
|
|
+ border
|
|
|
+ :column="2"
|
|
|
+ :content-style="{ width: '25%', 'word-break': 'break-all' }"
|
|
|
+ :label-style="{ width: '25%' }"
|
|
|
+ size="small">
|
|
|
+ <el-descriptions-item label="单位名称">
|
|
|
+ {{ details.unitName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="职位">
|
|
|
+ {{ details.objPosition }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="称呼">
|
|
|
+ {{ details.objName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="电话">
|
|
|
+ {{ details.objPhone }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="咨询事项">
|
|
|
+ {{ details.csnMatters }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="跟进状态">
|
|
|
+ {{ details.qstStatus === '10' ? '待跟进' : '已跟进' }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="跟进情况">
|
|
|
+ {{ details.followUp }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建时间">
|
|
|
+ {{ details.createdTime }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="问题描述" :span="24">
|
|
|
+ {{ details.remark }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
+ import questionnaireApi from '@/api/plat/questionnaire'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'BusinessDetail',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: undefined,
|
|
|
+ details: {},
|
|
|
+ activeName: 'details',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ avatar: 'user/avatar',
|
|
|
+ username: 'user/username',
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = parseInt(this.$route.query.id)
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ Promise.all([questionnaireApi.getEntityById({ id: this.id })]).then(([details]) => {
|
|
|
+ if (details.data) this.details = details.data
|
|
|
+ // console.log(this.details,"this.details")
|
|
|
+ // debugger
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick() {},
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ ::v-deep .el-tabs__content {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ $base: '.details';
|
|
|
+ #{$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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 190px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-follow {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter-active,
|
|
|
+ .height-leave-active {
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter-to,
|
|
|
+ .height-leave {
|
|
|
+ height: 190px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-enter, .height-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-descriptions__table tbody {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|