diantou/src_product/iam/audit/auditsource/km/knowledge-map/km-kmap-pages.vue

<template>
  <a-layout :class="$style.pages">
    <sd-header>
      <template>
        <span :class="$style.handleBtn">
          <span @click="close"><a-icon type="close-circle"></a-icon> 退出 </span>
        </span>
      </template>
    </sd-header>
    <a-layout-content v-if="inited" :class="$style.main">
      <div :class="$style.content">
        <sd-form
          v-if="formData.pageFormData"
          ref="form"
          :init-values="formData.pageFormData.pageFieldInfos"
          :read-only="docReadonly"
        >
          <template v-slot="{ model, fields }">
            <a-row type="flex">
              <a-col flex="1 1 ">
                <div :class="$style.leftDivContent">
                  <a-card>
                    <table :class="$style.table">
                      <h3 :class="$style.title">{{ fields.kmapName.value }}</h3>
                      <a-divider />
                      <tr v-if="model.type === '0'">
                        <td>
                          <a-table
                            :pagination="false"
                            :columns="childColumns"
                            :data-source="model.kmKmapKnowledgeList"
                          >
                            <a
                              slot="fldSubject"
                              slot-scope="text, record"
                              @click="fnOpenDoc(record)"
                            >
                              {{ text }}
                            </a>
                          </a-table>
                        </td>
                      </tr>
                      <tr v-else>
                        <td>
                          <div>
                            <km-js-mind
                              ref="jsmind"
                              v-model="model.kmapTemplate"
                              :read-only="docReadonly"
                            />
                          </div>
                        </td>
                      </tr>
                    </table>
                  </a-card>
                </div>
              </a-col>
              <a-col flex="0 1 300px">
                <div :class="$style.rightDivContent">
                  <div :class="$style.articleInfo">
                    <p :class="$style.title">文档信息</p>
                    <a-divider />
                    <div :class="$style.userInfo">
                      <div :class="$style.user">
                        <p>创建者</p>
                        <a-row :class="$style.userImg" type="flex">
                          <a-col flex="80px">
                            <a-avatar
                              :class="$style.userinfo"
                              icon="user"
                              :size="65"
                              :src="
                                `api/mobile/v1/user-manager/userAvatar/${fields.creatorAccount.value}`
                                  | sdResource
                              "
                              alt="avatar"
                            />
                          </a-col>
                          <a-col flex="auto">
                            <p :class="$style.username">{{ fields.creatorName.value }}</p>
                            <p>{{ fields.createDeptName.value }}</p>
                          </a-col>
                        </a-row>
                      </div>
                    </div>
                    <a-divider />
                    <div :class="$style.infos">
                      <p>
                        <i>分类</i>：<span>{{ fnGetCate(fields.kmapCategory.value) }}</span>
                      </p>
                      <p>
                        创建时间：<span>{{ fields.creationTime.value | sdDateFormat }}</span>
                      </p>
                      <p>
                        <i>标签</i>：<span>{{ fnGetLable(fields.label.value) }}</span>
                      </p>
                      <p>
                        <i>摘要</i>：<span :title="fields.abstractMessage.value">{{
                          fnGetMessage(fields.abstractMessage.value)
                        }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </template>
        </sd-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import PageService from '@/common/services/page-service'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-kmap-pages-import'

export default {
  name: 'KmKmapPages',
  metaInfo: {
    title: '知识地图',
  },
  components,
  data() {
    return {
      inited: false,
      formData: {},
      docReadonly: true,
      childColumns: [
        { dataIndex: 'title', title: '知识标题', scopedSlots: { customRender: 'fldSubject' } },
        { dataIndex: 'categoryName', title: '所属分类' },
      ],
    }
  },
  created() {
    this.getData()
    this.fnSetKmapReadNum()
  },
  methods: {
    // 获取表单数据
    getData() {
      const pageId = 'kmap/kmKmap/kmKmapData'
      const docId = parseInt(this.$route.params.docId)
      this.inited = true
      const params = {
        id: docId,
      }
      PageService.get(params, pageId).then((res) => {
        if (res.status === 200) {
          this.inited = true
          this.formData = res.data
        }
      })
    },

    // 知识地图阅读次数
    fnSetKmapReadNum() {
      const params = {
        id: this.$route.params.docId,
      }

      KmKnowledageService.setKmapReadNum(params).then((res) => {})
    },

    fnGetCate(val) {
      if (val) {
        if (Array.isArray(val)) {
          return val[0].name
        } else {
          return JSON.parse(val)[0].name
        }
      } else {
        return ''
      }
    },

    fnGetMessage(val) {
      if (!val) return ''
      if (val.length > 100) {
        return val.slice(0, 100) + '...'
      }
      return val
    },

    fnGetLable(val) {
      if (val) {
        let array = []
        if (Array.isArray(val)) {
          array = val
        } else {
          array = JSON.parse(val)
        }

        if (array.length > 1) {
          return array.join('，')
        } else {
          return array[0]
        }
      } else {
        return ''
      }
    },

    fnOpenDoc(record) {
      if (record.type === '1') {
        // 说明是外部知识
        window.open(record.link, '_blank')
      } else {
        window.open(`#/km-knowledage-view?id=${record.knowledgeId}&title=${record.title}`, '_blank')
      }
    },

    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.path, flag)
      window.close()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$link-icon-size: 22px;

.pages {
  min-height: 100%;
  :global(.ant-tabs-nav-wrap) {
    text-align: center;
  }
  .handle-btn {
    padding: 0 $link-icon-size / 2;
    span {
      padding: 0 $link-icon-size / 2;
      margin-right: 0;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .content {
      flex: 1;
      max-width: 1200px;
      margin: 0 auto;
      .left-div-content {
        min-height: 850px;
        margin: 0 10px;
        background-color: $white;
        .table {
          width: 100%;
          .title {
            font-size: $heading-3-size;
            text-align: center;
          }
        }
      }
      .right-div-content {
        background-color: $white;
        .article-info {
          padding: 20px;

          p.title {
            font-size: $font-size-lg;
            font-weight: bold;
          }
          .user-info {
            .user-img {
              .username {
                margin-top: 8px;
                margin-bottom: 0;
                font-size: $btn-font-size-lg;
                font-weight: bold;
              }
              .userinfo {
                width: 65px;
                height: 65px;
                border-radius: 50%;
              }
            }
          }
          .infos {
            p {
              margin-bottom: 5px;
              font-size: $btn-font-size-sm;

              i {
                width: 4em; /* 这个值是看最长能显示几个文字，如x，则为x em */
                margin-right: -2em; /* 同上 */
                font-style: normal;
                text-align: center;
                letter-spacing: 2em; /* 如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em */
              }
            }
          }
        }
      }
    }
  }
}
</style>