diantou/src_product/iam/audit/auditsource/km/expert-database/km-expert-details.vue

<template>
  <a-card>
    <div :class="$style.details">
      <a-list item-layout="horizontal" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="">
          <a-list-item-meta>
            <div slot="title" :class="$style.user">
              <div :class="$style.userName">
                {{ kmExpertDetailsInfo.userName }}
                <a-button type="primary" @click="goQuestion(kmExpertDetailsInfo.id)">
                  向他提问
                </a-button>
              </div>
              <div :class="$style.userInfo">
                <a-descriptions :column="1">
                  <a-descriptions-item label="知识领域">
                    {{ kmExpertDetailsInfo.domain }}
                  </a-descriptions-item>
                  <a-descriptions-item label="职务">
                    {{ kmExpertDetailsInfo.station }}
                  </a-descriptions-item>
                  <a-descriptions-item label="部门">
                    {{ kmExpertDetailsInfo.departmentName }}
                  </a-descriptions-item>
                  <a-descriptions-item label="办公电话">
                    <span :class="$style.tel">{{ kmExpertDetailsInfo.phoneNumber }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="电子邮件">
                    {{ kmExpertDetailsInfo.email }}
                  </a-descriptions-item>
                  <a-descriptions-item label="专家简介">
                    {{ kmExpertDetailsInfo.introduction }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
              <div> </div>
            </div>
            {{ kmExpertDetailsInfo.exportImg }}
            <a-avatar
              v-if="kmExpertDetailsInfo.exportImg !== null"
              slot="avatar"
              :size="65"
              :class="$style.userImg"
              :src="
                `api/flow-mobile/v1/task-form-process/download-attachments/${kmExpertDetailsInfo.exportImg}`
                  | sdResource
              "
            />

            <a-avatar
              v-else
              slot="avatar"
              :class="$style.userImg"
              icon="user"
              :size="65"
              :src="''"
              alt="avatar"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" :tab="questionNum" :class="$style.tables">
          <a-list
            v-if="questionAccounts.length > 0"
            item-layout="vertical"
            size="large"
            :pagination="pagination"
            :data-source="questionAccounts"
            :class="$style.questionList"
          >
            <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
              <div v-if="item.isShow" slot="extra" :class="$style.btn">
                <span>{{ item.answersNumber }}回复</span>
                <a-button type="primary" @click="showModal(item.id)">
                  写回答
                </a-button>
              </div>
              <a-icon
                :class="$style.questionCircle"
                type="question-circle"
                theme="twoTone"
                two-tone-color="#eb2f96"
              />
              <a-list-item-meta
                :class="$style.questionTitle"
                :description="item.description"
                @click="lookreply(item, index)"
              >
              </a-list-item-meta>
              <p>{{ item.supplementaryNotes }}</p>
              <p v-if="item.isShow"
                >提问者：<span>{{ questionAccountDetails.account }}</span> 阅读次数：<span
                  >{{ questionAccountDetails.readTimes }}次</span
                ></p
              >

              <div v-if="item.isShow" :class="$style.reply">
                <div>
                  <a-list
                    :class="$style.demoLoadmoreList"
                    :loading="loading"
                    item-layout="horizontal"
                    :data-source="replyData"
                  >
                    <a-list-item slot="renderItem" slot-scope="items">
                      <a-list-item-meta :description="items.answersStr">
                        <a-avatar
                          slot="avatar"
                          icon="user"
                          :src="
                            `api/mobile/v1/user-manager/userAvatar/${items.creatorAccount}`
                              | sdResource
                          "
                        />
                        <span slot="title" :class="$style.time"
                          >{{ items.creatorName }} | 部门：{{ items.createDeptName }}
                          <i>{{ items.creationTime | sdDateFormat }}</i>
                        </span>
                      </a-list-item-meta>
                    </a-list-item>
                  </a-list>
                </div>
              </div>
            </a-list-item>
          </a-list>
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane key="2" :tab="maptotalSize" force-render>
          <sd-data-table
            v-if="expressionsmap.length !== 0"
            ref="dataTable"
            data-url="api/xcoa-mobile/v1/kmkmap/kmKmapData-account-expert"
            :columns="columns"
            :row-key="'account'"
            :filter-expressions="expressionsmap"
            @rowClick="rowClick"
            @dataLoaded="tableMapDataLoaded"
          >
            <template v-slot:name="text">
              <a>{{ text }}</a>
            </template>
          </sd-data-table>
        </a-tab-pane>
        <a-tab-pane key="3" :tab="articeNum" force-render>
          <sd-data-table
            v-if="expressionsKnowledge.length !== 0"
            ref="dataTable2"
            data-url="api/xcoa-mobile/v1/kmknowledge/knowledge-account-expert"
            :columns="columns2"
            :row-key="'account'"
            :filter-expressions="expressionsKnowledge"
            @rowClick="rowClick2"
            @dataLoaded="tableDataLoaded"
          >
            <template v-slot:name="text">
              <a>{{ text }}</a>
            </template>
          </sd-data-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 回答弹框 -->
    <sd-detail-modal
      ref="fwDetail"
      page-id="expert/kmExpertAnswers/kmExpertAnswers"
      :modal-props="{ width: 1000 }"
      @saved="fwSaved"
    >
      <template v-slot="{ model }">
        <sd-form-item name="reply">
          <a-textarea v-model="model.reply" :rows="4" placeholder="请输入您的问题" allow-clear />
        </sd-form-item>
        <sd-form-item
          name="expertQuestionId"
          :hidden="true"
          :input-props="{ defaultValue: answers }"
        ></sd-form-item>
      </template>
    </sd-detail-modal>
    <!-- 向他提问弹出框 -->
    <sd-detail-modal
      ref="question"
      page-id="expert/kmExpertQuestion/kmExpertQuestion"
      :modal-props="{ width: 1000 }"
      @saved="questionfwSaved"
    >
      <template v-slot="{ model }">
        <sd-form-item name="description" />
        <sd-form-item name="supplementaryNotes">
          <a-textarea
            v-model="model.supplementaryNotes"
            :rows="4"
            placeholder="请输入说明"
            allow-clear
          />
        </sd-form-item>
        <sd-form-item name="label" :colspan="3">
          <template v-slot:read-and-edit="{ editable }">
            <km-tag-picker v-model="model.label" :editable="editable" />
          </template>
        </sd-form-item>
        <sd-form-item
          name="expertDataId"
          :hidden="true"
          :input-props="{ defaultValue: quiz }"
        ></sd-form-item>
      </template>
    </sd-detail-modal>
  </a-card>
</template>

<script>
import { Modal } from 'ant-design-vue'
import TableColumnTypes from '@/common/services/table-column-types'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-expert-details-import'
const data = [{}]
const columns = [
  {
    title: '序号',
    width: '100px',
    align: 'center',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '地图名称',
    dataIndex: 'kmapTitle',
    sdClickable: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '发布者名称',
    dataIndex: 'accountName',
  },
  {
    title: '所属分类',
    dataIndex: 'category',
  },
]
const columns2 = [
  {
    title: '序号',
    width: '100px',
    align: 'center',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '标题',
    dataIndex: 'title',
    sdClickable: true,
    scopedSlots: { customRender: 'bt' },
  },
  {
    title: '所属分类',
    dataIndex: 'category',
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    sorter: (a, b) => a.creationTime - b.creationTime,
    sdRender: TableColumnTypes.dateTime, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
  },
  {
    title: '阅读次数',
    dataIndex: 'readTimes',
    sorter: (a, b) => a.readTimes - b.readTimes,
    width: '120px',
  },
  {
    title: '推荐次数',
    dataIndex: 'recommendTimes',
    sorter: (a, b) => a.recommendTimes - b.recommendTimes,
    width: '120px',
  },
  {
    title: '点评次数',
    dataIndex: 'commentTimes',
    sorter: (a, b) => a.commentTimes - b.commentTimes,
    width: '120px',
  },
]
export default {
  name: 'KmExpertDetails',
  metaInfo: {
    title: '专家库详情',
  },
  components: {
    ...components,
  },
  props: {
    expertId: {
      type: Number,
      default: undefined,
    },
    expertUserAccount: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      data,
      columns,
      columns2,
      isReply: false,
      visible: false,
      kmExpertDetailsInfo: {},
      questionAccounts: [],
      questionAccountDetails: {},
      replyData: [],
      answers: null,
      questionNum: '',
      maptotalSize: '',
      articeNum: '',
      kMapid: null,
      docReadonly: false,
      loading: true,
      loadingMore: false,
      pagination: {
        onChange: (page) => {},
        pageSize: 5,
      },
      actions: [
        { type: 'star-o', text: '156' },
        { type: 'like-o', text: '156' },
        { type: 'message', text: '2' },
      ],
      expressionsmap: [],
      expressionsKnowledge: [],
      quiz: null,
      showAnswer: false,
      isShow: false,
    }
  },
  created() {
    // 获取专家信息详情
    this.querykmExpertDetails()
  },
  methods: {
    // 向他提问
    goQuestion(id) {
      this.quiz = id
      this.$refs.question.show()
    },
    // 向他提问保存
    questionfwSaved() {
      Modal.confirm({
        title: '向他提问',
        content: '已提交',
        onOk: () => {
          this.$forceUpdate()
          // 获取问题列表
          this.queryQuestionAccountExpert()
        },
      })
    },
    // 详情
    querykmExpertDetails() {
      const params = {
        id: this.expertId,
      }
      KmKnowledageService.getkmExpertDetails(params).then((res) => {
        this.kmExpertDetailsInfo = { ...res.data }
        // 获取问题列表
        this.queryQuestionAccountExpert()
        const selectValue = {
          dataType: 'str',
          name: 'account',
          op: 'eq',
          stringValue: this.kmExpertDetailsInfo.account,
        }
        this.expressionsmap.push(selectValue)
        this.expressionsKnowledge.push(selectValue)
      })
    },
    // 获取问题列表
    queryQuestionAccountExpert() {
      const params = {
        maxResults: 10,
        startPosition: 0,
        orderBy: 'id desc',
        expressions: [
          {
            dataType: 'str',
            name: 'expertDataId',
            op: 'eq',
            stringValue: this.kmExpertDetailsInfo.id,
          },
        ],
      }
      KmKnowledageService.getQuestionAccountExpert(params).then((res) => {
        this.questionNum = 'TA的爱问知识' + '（' + res.data.totalSize + '）'
        if (res.data.data.length > 0) {
          this.loading = false
          this.questionAccounts = res.data.data.map((item) => {
            this.$set(item, 'isShow', false)
            return item
          })
        } else {
          this.questionAccounts = []
        }
      })
    },
    // 加载更多
    onLoadMore() {
      this.loadingMore = true
      this.queryAnswersAccountPages((res) => {
        this.replyData = this.replyData.concat(res.results)
        this.loadingMore = false
        this.$nextTick(() => {
          window.dispatchEvent(new Event('resize'))
        })
      })
    },
    // 获取问题详情
    queryQuestionAccountDetails(item) {
      const params = {
        id: item.id,
      }
      KmKnowledageService.getQuestionAccountDetails(params).then((res) => {
        this.questionAccountDetails = res.data
      })
    },
    // 写回答弹框
    showModal(id) {
      this.answers = id
      this.$refs.fwDetail.show()
    },
    // 展开回答列表
    lookreply(item, index) {
      if (item.isShow) {
        item.isShow = false
        this.isShow = item.isShow
        return
      }
      this.queryAnswersAccountPages(item)
      this.queryQuestionAccountDetails(item)
    },
    // 点击问题  回复接口
    queryAnswersAccountPages(item) {
      const params = {
        maxResults: 10,
        startPosition: 0,
        orderBy: 'id desc',
        expressions: [
          {
            dataType: 'str',
            name: 'expertQuestionId',
            op: 'eq',
            stringValue: item.id,
          },
        ],
      }
      KmKnowledageService.getAnswersAccountPages(params).then((res) => {
        this.replyData = res.data.data.length > 0 ? res.data.data : []

        this.questionAccounts.forEach((i) => {
          i.isShow = false
        })
        item.isShow = true
      })
    },
    // 知识地图详情
    rowClick(record, { rowIndex }) {
      window.open(`#/km-kmap-pages/${record.id}`, '_blank')
    },

    // 知识文档详情
    rowClick2(record, { rowIndex }) {
      setTimeout(() => {
        this.$refs.dataTable2.refresh()
      }, 5000)
      window.open(`#/km-knowledage-view?id=${record.id}&title=${record.title}`, '_blank')
    },
    callback(key) {},
    // 回答保存
    fwSaved() {
      Modal.success({
        title: '已回答',
        onOk: () => {
          this.$forceUpdate()
          const params = {
            id: this.answers,
          }
          this.queryQuestionAccountExpert()
          this.queryAnswersAccountPages(params)
        },
      })
    },
    tableMapDataLoaded(pagination) {
      this.maptotalSize = 'TA的知识地图' + '（' + pagination.total + '）'
    },
    tableDataLoaded(pagination) {
      this.articeNum = 'TA的知识文档' + '（' + pagination.total + '）'
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.details {
  .user-img {
    width: 70px;
    height: 70px;
    border: 2px solid $primary-color;
  }
  .user {
    margin-left: 10px;
    .user-name {
      padding: 0 0 15px 0;
      border-bottom: 1px solid #efe9e9;
      button {
        margin-left: 50px;
      }
    }
    .user-info {
      margin-top: 15px;
      :global(.ant-descriptions-item-label) {
        font-weight: 500;
      }
      .tel {
        color: $primary-color;
        text-decoration: underline;
      }
    }
  }
  .tables {
    margin-top: 20px;
  }
  .question-list {
    padding: 0;
    margin-top: -30px;
    cursor: pointer;
    :global(.ant-list-item-meta) {
      display: inline-block;
    }
    .btn {
      button {
        margin-left: 10px;
      }
    }
    .question-circle {
      padding-right: 10px;
    }
  }
  .demo-loadmore-list {
    max-height: 350px;
    margin-bottom: 10px;
    overflow-y: scroll;
    :global(.ant-list-item-meta-avatar) {
      float: left;
    }
    .time {
      font-size: $font-size-base;
      font-weight: normal;
      i {
        padding-left: 20px;
        font-style: normal;
        font-weight: normal;
      }
    }
  }
  :global(.ant-list-item-meta-description) {
    color: $breadcrumb-last-item-color;
  }
  .reply {
    width: 118%;
    border-top: 1px solid #efe9e9;
  }
}
</style>