diantou/src_product/iam/audit/auditsource/km/knowledge-base/km-atom-table.vue

<template>
  <table :class="$style.table">
    <colgroup>
      <col :class="$style.label" />
      <col :class="$style.input" />
    </colgroup>
    <tr>
      <sd-form-item-td name="category" :input-props="{ defaultValue: defaultCategory }">
        <template v-slot:read-and-edit="{ editable }">
          <km-tree-select
            v-model="model.category"
            :editable="editable"
            tree-data-url="api/xcoa-mobile/v1/km-knowledge-category/knowledge-category-tree?pageId=kmKnowledge"
          ></km-tree-select>
        </template> </sd-form-item-td
    ></tr>
    <tr>
      <sd-form-item-td name="title"></sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="label">
        <km-tag-picker v-model="model.label" />
      </sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="content">
        <sd-quill-editor v-model="model.content" :options="editorOption" :class="$style.editor" />
      </sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="source" :input-props="{ defaultValue: '创建' }"></sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="creatorName"></sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="createDeptName"></sd-form-item-td>
    </tr>
    <tr>
      <sd-form-item-td name="atomState" :hidden="true" />
    </tr>
    <tr>
      <sd-form-item-td name="type" :input-props="{ defaultValue: 1 }" :hidden="true" />
    </tr>
  </table>
</template>

<script>
import components from './_import-components/km-atom-table-import'

export default {
  name: 'KmAtomTable',
  components,
  props: {
    model: {
      type: Object,
      default: () => {},
    },
    defaultCategory: {
      type: [Array, String],
      default: undefined,
    },
  },
  data() {
    return {
      editorOption: {
        placeholder: '请从此处开始输入文本...',
      },
    }
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.table {
  .label {
    width: 15%;
  }
  .input {
    width: 85%;
  }
}
.editor {
  margin: 0 auto;
  :global(.ql-editor) {
    min-height: 300px;
    line-height: 1.5;
  }
}
</style>