diantou/src_product/iam/audit/auditsource/km/config-center/km-default-picture-manage.vue

<template>
  <a-card>
    <sd-detail-form
      v-if="showForm"
      ref="docform"
      :record-id="docId"
      :page-id="pageId"
      :class="$style.docform"
      @saved="fnSaved"
    >
      <template v-slot="{ model, fields }">
        <sd-form-item name="coverImage">
          <sd-attachment
            v-model="model.coverImage"
            accept=".png,.jpeg,.jpg"
            max-file-size="0.5"
            :class="$style.upload"
            list-type="picture-card"
            :selected-keys="selectedKeys"
            :group-id="JSON.parse(fields.coverImage.value).value"
          />
        </sd-form-item>

        <div :class="$style.explanation">
          说明：<br />
          <p :class="$style.content">建议尺寸:640*360 </p>
          <p :class="$style.content">格式：jpg、png</p>
          <p :class="$style.content">大小限制：512KB</p>
        </div>
      </template>
    </sd-detail-form>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import PageService from '@/common/services/page-service'
import components from './_import-components/km-default-picture-manage-import'

export default {
  name: 'KmDefaultPictureManage',
  metaInfo: {
    title: '知识封面维护',
  },
  components,
  data() {
    return {
      pageId: 'km/admin/kmKnowledgeCover',
      docId: null,
      showForm: false,
      selectedKeys: [],
    }
  },
  created() {
    this.getFirstDocData()
  },
  methods: {
    // 进来的时候先调用列表接口，然后打开第一条文档，没有的话打开新建的页面
    getFirstDocData() {
      const params = {
        columns: 'id,coverImage',
        maxResults: -1,
        startPosition: 0,
        expressions: [],
        formId: 'kmKnowledgeCover',
      }

      PageService.getList(params).then((res) => {
        if (res.data.data.length > 0) {
          this.docId = res.data.data[0].id
          this.showForm = true
        } else {
          this.docId = undefined
          this.showForm = true
        }
      })
    },

    // 保存后
    fnSaved() {
      Message.success('保存成功')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.explanation {
  margin-left: 20%;
  color: $text-color;
  p {
    margin: 0;
    text-indent: 2em;
    &:last-child {
      margin-bottom: 20px;
    }
  }
}
</style>