diantou/src_product/iam/audit/auditsource/km/person-center/km-create-modal.vue

<template>
  <div :class="$style.create">
    <sd-form-item name="folderName"></sd-form-item>
    <sd-form-item name="sortNumber"></sd-form-item>
    <sd-form-item name="parentId" :input-props="{ defaultValue: selectdParentId }">
      <a-tree-select
        v-model="model.parentId"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="modelTreeData"
        :replace-fields="replacefields"
        :default-selected-keys="selectdParentId"
        placeholder="请选择上级分类"
        tree-default-expand-all
        @select="modelSelected"
      >
      </a-tree-select>
    </sd-form-item>
    <sd-form-item name="belongedOrgId" :hidden="true"></sd-form-item>
    <sd-form-item name="id" :hidden="true"></sd-form-item>
  </div>
</template>

<script>
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-create-modal-import'

export default {
  name: 'KmCreateModal',
  metaInfo: {
    title: 'KmCreateModal',
  },
  components,
  props: {
    model: {
      type: Object,
      default: () => {},
    },
    fields: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      replacefields: {
        // 转换弹出框中选择树的默认字段
        title: 'text',
        key: 'id',
        value: 'id',
      },
      selectdParentId: null,
      modelTreeData: [],
    }
  },
  mounted() {
    this.getModalTreeData()
  },
  methods: {
    // 递归处理treeData的id
    handleData(data) {
      data.map((k) => {
        k.id = parseInt(k.id)
        if (k.children) {
          this.handleData(k.children)
        }
        return k
      })
    },
    getModalTreeData() {
      KmKnowledageService.getFavoritesTree(0).then((res) => {
        if (res.data) {
          const data = res.data
          this.handleData(data)
          this.modelTreeData = data
        }
      })
    },
    // 新建收藏夹弹窗下拉框选择
    modelSelected(value, node, extra) {
      this.$emit('modalTreeSelectd', value)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.create {
  :global(.ant-form-item) {
    display: flex;
  }
  :global(.ant-form-item-control) {
    width: 100%;
  }
  :global(.ant-col) {
    width: 60%;
  }
  :global(.ant-form-item-label) {
    width: 25%;
    margin-right: 7px;
  }
  :global(.ant-input-number) {
    width: 100%;
  }
  :global(.ant-select-selection) {
    width: 100%;
  }
}
</style>