FE-V2-PC/src/views/comprehensive/system/publicConfig/basicsConfig.vue

<template>
  <div class="public-config-page">
    <el-form class="public-form-box scrollbar-box" :model="form" ref="form" :inline="true" :rules="rules" label-width="160px">
      <div class="form-max-box">
        <el-form-item label="学校名称：" prop="schoolName">
          <el-input
            v-model="form.schoolName"
            maxLength="20"
            placeholder="请输入学校名称"
          />
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="圆形Logo：" prop="circularLogo">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'circularLogo')"
            :headers="headers"
            :before-upload="(file)=>beforeAvatarUpload(file,'1')">
            <img v-if="form.circularLogo" :src="form.circularLogo" class="avatar" style="height:200px;width:200px;background: #dedede;padding:5px;border-radius:4px;">
            <i v-if="!form.circularLogo" class="el-icon-plus avatar-uploader-icon" style="height:80px;width:80px;border-radius: 40px;line-height: 80px;">上传</i>
          </el-upload>
          <i v-if="form.circularLogo" class="el-icon-view" @click="lookImg(form.circularLogo)"
             style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
            height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
        </el-form-item>
        <p style="margin-left:160px;font-size:16px;color:#666;font-weight:500;">尺寸限制为200*200px，支持PNG格式</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="长方形Logo：" prop="rectangleLogo">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'rectangleLogo')"
            :headers="headers"
            :before-upload="(file)=>beforeAvatarUpload(file,'2')">
            <img v-if="form.rectangleLogo" :src="form.rectangleLogo" class="avatar" style="height:110px;width:500px;background: #dedede;padding:5px;border-radius:4px;">
            <i v-if="!form.rectangleLogo" class="el-icon-plus avatar-uploader-icon">上传</i>
          </el-upload>
          <i v-if="form.rectangleLogo" class="el-icon-view" @click="lookImg(form.rectangleLogo)"
             style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
            height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
        </el-form-item>
        <p style="margin-left:160px;font-size:16px;color:#666;font-weight:500;">尺寸限制为110*500px，支持PNG格式</p>
      </div>
    </el-form>
    <div class="sub_btn">
      <p class="null-p"></p>
      <p class="inquire-button-one"  @click="submitForm">保存</p>
      <p class="null-p"></p>
    </div>
    <!--查看图片-->
    <el-dialog title="查看" :visible.sync="imgOpen" width="1200px" append-to-body>
      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
        <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { getLogoInfo,updateLogoInfo } from "@/api/system/publicConfig";
  import store from '@/store'
  export default {
    name: "publicConfig",
    data() {
      return {
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        form:{
          userType:[],
          expandType:[]
        },
        rules: {
          schoolName: [
            { required: true, message: "学校名称不能为空", trigger: "blur" },
            { required: true, message: "学校名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
          ],
          circularLogo: [
            { required: true, message: "圆形Logo不能为空", trigger: "blur" }
          ],
          rectangleLogo: [
            { required: true, message: "长方形Logo不能为空", trigger: "blur" }
          ],
        },
        imgUrl:"",
        imgOpen:false,
      };
    },
    created() {

    },
    mounted(){
      this.getLogoInfo();
    },
    methods: {
      /** 提交按钮 */
      submitForm: function() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = {
              schoolName:this.form.schoolName,
              circularLogo:this.form.circularLogo,
              rectangleLogo:this.form.rectangleLogo,
            }

            updateLogoInfo(obj).then(response => {
              this.msgSuccess(response.msg);
              this.getLogoInfo();
            });
          }
        });
      },
      //查看图片
      lookImg(url){
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //获取数据
      getLogoInfo(){
        getLogoInfo().then(response => {

          this.$set(this,'form',response.data)
        });
      },
      //上传
      handleAvatarSuccess(res,type) {
        if(type == 'circularLogo'){
          this.$set(this.form,'circularLogo',res.data.url);
        }else if(type == 'rectangleLogo'){
          this.$set(this.form,'rectangleLogo',res.data.url);
        }
        this.$forceUpdate()
      },
      beforeAvatarUpload(file,type) {
        return new Promise((resolve, reject) => {
          if (file.type == 'image/png') {
            let reader = new FileReader()
            reader.readAsDataURL(file) // 必须用file.raw
            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
              let img = e.target.result;
              const image = new Image()
              image.src=img
              image.onload = _=>{
                if(type == '1'){
                  if(image.width == 200 && image.height == 200){
                    resolve()
                  }else{
                    this.$message.error('尺寸限制为200*200px，支持PNG格式')
                    reject();
                  }
                }else if(type == '2'){
                  if(image.width == 500 && image.height == 110){
                    resolve()
                  }else{
                    this.$message.error('尺寸限制为110*500px，支持PNG格式')
                    reject();
                  }
                }
              }
            }
          }else{
            this.$message.error('请上传PNG格式');
            reject();
          }
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .public-config-page{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .public-form-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    /*底部按钮弹框*/
    .sub_btn{
      display: flex;
      background: #fff;
      height: 112px;
      .null-p{
        flex:1;
      }
      .inquire-button-one{
        cursor:pointer;
        display: inline-block;
        text-align: center;
        width: 70px;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #0045af;
        color:#ffffff;
        background:#0045af;
        margin:36px 10px 0 0;
      }
    }
    *{
      margin:0;
    }
    .title-box{
      border-bottom:1px solid #dedede;
      p{
        margin-left:40px;
        color:#0045af;
        line-height:60px;
      }
    }
    .form-max-box{
      margin-top:20px;
      margin-left: 100px;
    }
    .avatar-uploader-icon{
      width: 200px;
      height: 120px;
      line-height: 120px;
      font-size: 16px;
      font-weight: 400;
      color: #CCCCCC;
    }
    .avatar{
      width: 200px;
      height: 120px;
    }
  }
</style>