diantou/src_product/iam/workbench/iam-logo-config.vue

<template>
  <a-card>
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" :class="$style.form">
      <a-form-item v-for="(item, i) in formInfo" :key="i" :label="item.label">
        <a-input
          v-if="item.name === 'platformName'"
          v-model="item.value"
          placeholder="平台名最多设置20个字符"
          :max-length="20"
        />
        <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          accept=".png,.jpg,.jpeg"
          :show-upload-list="false"
          :custom-request="({ action, file }) => selfUpload(file, item)"
          :before-upload="beforeUpload"
          @change="(info) => handleChange(info, item)"
        >
          <a-tooltip v-if="item.name !== 'platformName'">
            <template slot="title"> 建议图片尺寸大小{{ size[item.name] }} </template>
            <div v-if="item.value" :class="$style.imgContent">
              <img :src="item.value" />
              <span :class="$style.actions">
                <a-icon type="eye" @click.stop="preview(item)" />
                <a-icon type="delete" @click.stop="deletePic(item)" />
              </span>
            </div>
            <div v-else>
              <a-icon :type="formInfo[i].loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-tooltip>
        </a-upload>
      </a-form-item>
      <div :class="$style.button">
        <a-button type="primary" :loading="isSubmitting" @click="btnClick">
          保存
        </a-button>
      </div>
    </a-form>
    <a-modal
      title="预览图片"
      :visible="previewVisible"
      :dialog-class="$style.preview"
      :footer="null"
      @cancel="previewVisible = false"
    >
      <img :src="previewUrl" />
    </a-modal>
  </a-card>
</template>

<script>
import { xmLocalStorage } from '@/common/services/storage-service'
import { message } from 'ant-design-vue'
import IamWorkbenchService from './iam-workbench-service'
import components from './_import-components/iam-logo-config-import'
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  name: 'OaLogoConfig',
  metaInfo: {
    title: 'Logo配置',
  },
  components,
  data() {
    return {
      formInfo: [
        {
          name: 'backgroundImg',
          label: '登录页背景图',
          loading: false,
          value: '',
        },
        {
          name: 'platformName',
          label: '登录页系统名称',
          value: '',
        },
        {
          name: 'loginLogo',
          label: '登录页Logo',
          loading: false,
          value: '',
        },
        {
          name: 'homeLogo',
          label: '首页Logo',
          loading: false,
          value: '',
        },
      ],
      pageflowId: '',
      isSubmitting: false,
      previewVisible: false,
      previewUrl: '',
      size: { backgroundImg: '1922x688', loginLogo: '185x27', homeLogo: '200x28' },
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    deletePic(item) {
      item.value = ''
    },
    preview(item) {
      this.previewUrl = item.value
      this.previewVisible = true
    },
    getConfig() {
      IamWorkbenchService.getLogoConfig().then((res) => {
        if (res.data) {
          const data = res.data
          this.formInfo.forEach((f) => {
            f.value = data[f.name]
          })
        }
      })
    },
    btnClick() {
      xmLocalStorage.removeItem('homeLogo')
      const params = this.formInfo.reduce((res, item) => {
        res = { ...res, ...{ [item.name]: item.value } }
        return res
      }, {})
      this.isSubmitting = true
      IamWorkbenchService.saveLogoConfig(params).then((res) => {
        this.isSubmitting = false
        message.success('保存成功')
      })
      if (params.homeLogo) xmLocalStorage.setItem('homeLogo', true)
    },
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        message.error('图片大小不可超过10M，请重新上传！')
      }
      return isLt10M
    },
    selfUpload(file, record) {
      const base64 = new Promise((resolve) => {
        const fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = () => {
          resolve(fileReader.result)
        }
      })
      return base64
    },
    handleChange(info, record) {
      getBase64(info.file.originFileObj, (imageUrl) => {
        record.value = imageUrl
        record.loading = true
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$back-color: rgba(0, 0, 0, 0.5);
.form {
  width: 50%;
  margin: 0 auto;
  .button {
    text-align: center;
  }
}
.img-content {
  position: relative;
  width: 110px;
  height: 110px;
  &:hover {
    background-color: $back-color;
    .actions {
      opacity: 1;
    }
    &::before {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: ' ';
      background-color: $back-color;
      opacity: 1;
      transition: all 0.3s;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
  .actions {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s;
    transform: translate(-50%, -50%);
    :global(.anticon) {
      margin: 0 4px;
      color: $white;
      cursor: pointer;
    }
  }
}
.preiew {
  img {
    width: 100%;
  }
}
</style>