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

<template>
  <table :class="$style.table">
    <colgroup>
      <col :class="$style.label" />
      <col :class="$style.input" />
      <col :class="$style.label" />
      <col :class="$style.input" />
    </colgroup>
    <tr v-show="!docReadonly">
      <sd-form-item-td
        name="kmapCategory"
        :colspan="3"
        :input-props="{ defaultValue: defaultCategory }"
      >
        <template v-slot:read-and-edit="{ editable }">
          <km-tree-select
            v-model="model.kmapCategory"
            :editable="editable"
            tree-data-url="api/xcoa-mobile/v1/km-kmap-category/kmap-category-tree"
          ></km-tree-select>
        </template>
      </sd-form-item-td>
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="kmapName" :colspan="3" />
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="label" :colspan="3">
        <template v-slot:read-and-edit="{ editable }">
          <km-tag-picker v-model="model.label" :editable="editable" />
        </template>
      </sd-form-item-td>
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="abstractMessage" :colspan="3">
        <a-textarea v-model="model.abstractMessage" />
      </sd-form-item-td>
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="cover" :colspan="3">
        <template v-slot:read-and-edit="{ editable }">
          <km-upload-img
            v-model="model.cover"
            :read-only="!editable"
            :group-id="JSON.parse(fields.coverAttachment.value).value"
          ></km-upload-img>
        </template>
      </sd-form-item-td>
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="creatorName" />
      <sd-form-item-td name="createDeptName" />
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td name="type" :input-props="{ defaultValue: '1' }" />
      <td v-if="model.type === '1'" colspan="2">
        <a-button type="primary" @click="fnSelectKmapTemplate">
          选择模板
        </a-button>
      </td>
    </tr>
    <tr v-show="!docReadonly">
      <sd-form-item-td
        name="kmKmapKnowledgeList"
        :label="null"
        :colspan="4"
        :hidden="model.type === '1'"
        :input-props="{
          columns: [
            { dataIndex: 'type', sdHidden: true },
            { dataIndex: 'link', sdHidden: true },
            { dataIndex: 'knowledgeId', sdHidden: true },
            { dataIndex: 'title' },
            { dataIndex: 'categoryName' },
          ],
          readOnly: true,
        }"
      >
        <template v-slot:input-form="scope">
          <sd-form-item name="type"> </sd-form-item>
          <sd-form-item name="title" :hidden="scope.model.type === '1'">
            <a-input
              ref="childTitle"
              v-model="scope.model.title"
              placeholder="请点击选择"
              @click="fnShowSelect($event)"
          /></sd-form-item>
          <sd-form-item
            :hidden="scope.model.type === '1'"
            name="categoryName"
            :input-props="{ disabled: true }"
          ></sd-form-item>
          <sd-form-item name="title" :hidden="scope.model.type === '0'"> </sd-form-item>
          <sd-form-item :hidden="scope.model.type === '0'" name="categoryName"></sd-form-item>
          <sd-form-item :hidden="scope.model.type === '0'" name="link"></sd-form-item>
          <a-modal
            :destroy-on-close="true"
            title="选择知识"
            :width="1000"
            :mask-closable="false"
            :footer="null"
            :confirm-loading="confirmLoading"
            :visible="showSelectDoc"
            @cancel="showSelectDoc = false"
          >
            <km-knowledage-base
              :is-selectd="true"
              @selectedDoc="fnSelectedDoc($event, scope.model)"
            />
          </a-modal>
        </template>
      </sd-form-item-td>
    </tr>
    <tr v-show="docReadonly && model.type === '0'">
      <a-table :pagination="false" :columns="childColumns" :data-source="model.kmKmapKnowledgeList">
        <a slot="fldSubject" slot-scope="text, record" @click="fnOpenDoc(record)">
          {{ text }}
        </a>
      </a-table>
    </tr>
    <tr>
      <td colspan="4">
        <div v-if="model.type === '1'">
          <km-js-mind ref="jsmind" v-model="model.kmapTemplate" :read-only="docReadonly" />
        </div>
      </td>
    </tr>
  </table>
</template>

<script>
import { Message } from 'ant-design-vue'
import pickValues from '@/common/services/pick-values'
import PageService from '@/common/services/page-service'
import sdListPickerVue from '@/common/components/sd-list-picker.vue'
import KmKnowledageBase from '../knowledge-base/km-knowledage-base'
import components from './_import-components/km-kmap-table-import'

export default {
  name: 'KmKmapTable',
  components: {
    ...components,
    'km-knowledage-base': KmKnowledageBase,
  },
  props: {
    model: {
      type: Object,
      default: () => {},
    },
    fields: {
      type: Object,
      default: () => {},
    },
    docReadonly: {
      type: Boolean,
      default: false,
    },
    defaultCategory: {
      type: [Array, String],
      default: undefined,
    },
  },
  inject: {
    oaKmapContext: { default: () => ({}) },
  },
  data() {
    return {
      showSelectDoc: false,
      confirmLoading: false,
      KmapTemplateId: null,
      childColumns: [
        { dataIndex: 'title', title: '知识标题', scopedSlots: { customRender: 'fldSubject' } },
        { dataIndex: 'categoryName', title: '所属分类' },
      ],
    }
  },
  methods: {
    // 打开选择知识modal
    fnShowSelect(event) {
      if (event) {
        event.srcElement.blur()
      }
      this.showSelectDoc = true
    },
    // 选中知识
    fnSelectedDoc(records, model) {
      model.knowledgeId = records.id
      model.title = records.title
      model.categoryName = records.categoryName
      this.showSelectDoc = false
      this.$refs.childTitle.focus()
      this.$refs.childTitle.blur()
    },

    // 选择模板
    fnSelectKmapTemplate() {
      pickValues(sdListPickerVue, {
        single: true,
        loadListData: this.fnGetKmapTemplateList,
        // singleColumn: true,
        title: '选择模板',
        value: this.KmapTemplateId,
      }).then((res) => {
        if (!res) return
        const key = Symbol.for()
        const hide = Message.loading({ content: '处理中...', key })

        this.KmapTemplateId = res
        // 获取模板的值
        const params = {
          id: res[0].id,
        }
        PageService.get(params, 'kmap/kmKmapTemplate/kmKmapTemplate').then((res) => {
          const mapTemplate = res.data.pageFormData.pageFieldInfos.find(
            (item) => item.name === 'mapTemplate'
          )

          this.oaKmapContext.$refs.kMapDetail.setFieldValue('kmapTemplate', mapTemplate.value)
          this.$refs.jsmind.refresh(mapTemplate.value)
          hide()
        })
      })
    },

    // 获取知识地图模板数据
    fnGetKmapTemplateList() {
      const param = {
        columns: 'name,state,creationTim',
        maxResults: -1,
        startPosition: 0,
        expressions: [
          {
            dataType: 'str',
            name: 'state',
            op: 'eq',
            stringValue: 1,
          },
        ],
        formId: 'kmKmapTemplate',
        orderBy: 'creationTime desc',
      }
      return PageService.getList(param).then((res) => {
        return res.data.data.map((item) => {
          return {
            id: item.id,
            name: item.name,
          }
        })
      })
    },

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

<style module lang="scss">
@use '@/common/design' as *;
.table {
  .label {
    width: 20%;
  }
  .input {
    width: 30%;
  }
}
</style>