diantou/src_product/iam/audit/auditsource/km/components/km-upload-img.vue

<template>
  <div>
    <div :class="$style.coverimgs" @click="handleSetImg">
      <div v-if="value === ''" :class="$style.noimg">
        暂无封面
      </div>
      <img
        v-else
        :src="(`api/flow-mobile/v1/task-form-process/download-attachments/` + value) | sdResource"
        :class="$style.uploadImg"
      />
      <div v-if="!readOnly" :class="$style.imgMask">设置封面</div>
    </div>
    <a-modal v-model="visible" title="封面设置" width="50%" @ok="handleOk">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="本地上传">
          <sd-attachment
            accept=".gif,.png,.jpg,.jpeg"
            :max="1"
            list-type="picture-card"
            :group-id="groupId"
            :selected-keys.sync="uploadActiveCode"
            @change="change"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="系统推荐" force-render>
          <a-empty v-if="systemImgData.length === 0" />
          <div v-else id="listPicture" class="ant-upload-list-picture-card">
            <div
              v-for="item in systemImgData"
              :key="item.code"
              class="ant-upload-list-picture-card-container"
              :class="{ [$style.checked]: activeCode && activeCode.includes(item.code) }"
              @click="handleImg(item)"
              ><div
                class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
                ><div class="ant-upload-list-item-info">
                  <a class="ant-upload-list-item-thumbnail">
                    <img
                      :src="
                        (`api/flow-mobile/v1/task-form-process/download-attachments/` + item.code)
                          | sdResource
                      "
                      class="ant-upload-list-item-image"/></a
                ></div>
                <span class="ant-upload-list-item-actions"
                  ><a
                    :href="
                      (`api/flow-mobile/v1/task-form-process/download-attachments/` + item.code)
                        | sdResource
                    "
                    target="_blank"
                    @click.stop="() => {}"
                  >
                    <a-icon type="eye-o" />
                  </a>
                </span>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import PageService from '@/common/services/page-service'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-upload-img-import'
export default {
  name: 'KmUploadImg',
  metaInfo: {
    title: 'OaUploadImg',
  },
  components,
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    // 图片code
    value: {
      required: true,
      type: String,
      default: '',
    },
    // 自定义封面附件groupId
    groupId: {
      required: true,
      type: String,
      default: '',
    },
    /**
     * 只读
     */
    readOnly: {
      required: true,
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      systemImgData: [],
      uploadActiveCode: [], // 自定义上传的图片code
      activeCode: [], // 系统预置选中的图片coede
    }
  },
  created() {
    if (!this.readOnly) {
      this.queryCoverImg()
    }
  },
  methods: {
    // 获取系统预置的封面图片
    queryCoverImg() {
      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.queryFirstCoverImg(this.docId)
          this.showForm = true
        } else {
          this.docId = undefined
          this.showForm = true
        }
      })
    },
    queryFirstCoverImg(params) {
      KmKnowledageService.getCoverImgList({ id: params }).then((res) => {
        const coverAttachmentValue = res.data.pageFormData.pageFieldInfos.find((n) => {
          return n.name === 'coverImage'
        })
        if (coverAttachmentValue.attr.attachments.length !== 0) {
          this.systemImgData = coverAttachmentValue.attr.attachments
          if (this.value === '') {
            // 起草的时候默认给系统预置的第一个封面图
            // this.activeCode = coverAttachmentValue.attr.attachments[0].code
            this.activeCode.push(coverAttachmentValue.attr.attachments[0].code)
            this.$emit('input', this.activeCode[0])
          }
        } else {
          this.systemImgData = []
        }
      })
    },
    // 选择默认封面
    handleImg(item) {
      // 只要选择了默认封面  就清空自定义上传的activeCoed
      this.uploadActiveCode = []
      if (this.activeCode.includes(item.code)) {
        this.activeCode.splice(this.activeCode.indexOf(item.code), 1)
      } else {
        this.activeCode = []
        this.activeCode.push(item.code)
      }
    },
    // 上传自定义的封面
    change(attachments) {
      this.uploadActiveCode = []
      if (attachments.length > 0) {
        this.uploadActiveCode.push(attachments[0].code)
      }
    },

    handleSetImg() {
      // 只读模式不弹窗
      if (this.readOnly) return
      // 打开的时候判断下是不是自定义的封面   看看value给哪个active
      if (this.systemImgData.findIndex((item) => item.code === this.value) !== -1) {
        this.activeCode = [this.value]
        this.uploadActiveCode = []
      } else {
        this.activeCode = []
        this.uploadActiveCode = [this.value]
      }
      this.visible = true
    },

    handleOk() {
      // 选了封面才赋值
      if (this.uploadActiveCode.length > 0 || this.activeCode.length > 0) {
        if (this.uploadActiveCode.length > 0) {
          this.$emit('change', this.uploadActiveCode[0])
        } else {
          this.$emit('change', this.activeCode[0])
        }
      }
      this.visible = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$img-line-height: 22px;
.coverimgs {
  .noimg {
    padding-top: 40px;
    color: $text-color;
    text-align: center;
  }

  position: relative;
  display: block;
  height: 100px;
  margin: 0 auto;
  .upload-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate3d(-50%, -50%, 0);
  }
  .img-mask {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 240px;
    height: 22px;
    line-height: $img-line-height;
    color: $white;
    text-align: center;
    background-color: $back-top-bg;
    transform: translate(-50%, 0);
  }
}
/* stylelint-disable  */
:global(#listPicture) {
  .checked {
    :global(.ant-upload-list-item-list-type-picture-card) {
      border: 2px solid $primary-5;
    }
  }
}
</style>