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

<template>
  <div class="app-container public-config-page">
    <el-form :model="form" ref="form" :inline="true" :rules="rules" label-width="160px">
      <div class="title-box">
        <p>基本信息</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="学校名称：" prop="schoolName">
          <el-input
            v-model="form.schoolName"
            maxLength="20"
            placeholder="请输入学校名称"
          />
        </el-form-item>
        <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="beforeAvatarUpload">
            <img v-if="form.circularLogo" :src="form.circularLogo" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.circularLogo" class="el-icon-plus avatar-uploader-icon"></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>
        <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="beforeAvatarUpload">
            <img v-if="form.rectangleLogo" :src="form.rectangleLogo" class="avatar" style="height:80px;width:80px;">
            <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>
      </div>
      <div class="title-box">
        <p>一体机</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="签到/离开示意图：" prop="signMap">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'signMap')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.signMap" :src="form.signMap" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.signMap" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i v-if="form.signMap" class="el-icon-view" @click="lookImg(form.signMap)"
             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>
        <el-form-item label="视频封面：" prop="videoCover">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'videoCover')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.videoCover" :src="form.videoCover" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.videoCover" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i v-if="form.videoCover" class="el-icon-view" @click="lookImg(form.videoCover)"
             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>
        <el-form-item label="操作指南：" prop="operationGuide">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'operationGuide')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.operationGuide" :src="form.operationGuide" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.operationGuide" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i v-if="form.operationGuide" class="el-icon-view" @click="lookImg(form.operationGuide)"
             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>
      </div>
      <div class="title-box">
        <p>小程序</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="登录页banner：" prop="loginBanner">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'loginBanner')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.loginBanner" :src="form.loginBanner" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.loginBanner" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i v-if="form.loginBanner" class="el-icon-view" @click="lookImg(form.loginBanner)"
             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>
        <el-form-item label="首页banner：" prop="homepageBanner">
          <el-upload
            class="certificate-avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/jpeg,image/gif,image/png"
            :on-success="(res)=>handleAvatarSuccess(res,'homepageBanner')"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.homepageBanner" :src="form.homepageBanner" class="avatar" style="height:80px;width:80px;">
            <i v-if="!form.homepageBanner" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <i v-if="form.homepageBanner" class="el-icon-view" @click="lookImg(form.homepageBanner)"
             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>
      </div>
      <div class="title-box">
        <p>化学品智能终端</p>
      </div>
      <div class="form-max-box">
        <el-form-item label="使用身份配置" prop="userType">
          <el-checkbox-group v-model="form.userType">
            <el-checkbox style="margin:4px 87px 0 20px;" label="11">教职工</el-checkbox>
            <el-checkbox label="22">学生</el-checkbox>
          </el-checkbox-group>
          <!--<el-radio-group v-model="form.userType">-->
            <!--<el-radio style="margin:4px 28px 0 20px;" label="-1">全部</el-radio>-->
            <!--<el-radio style="margin:4px 30px 0 0;" label="11">教职工</el-radio>-->
            <!--<el-radio label="22">学生</el-radio>-->
          <!--</el-radio-group>-->
          <!--<el-select v-model="form.userType" placeholder="请配置使用身份" style="width:200px;">-->
            <!--<el-option label="全部" value="-1" />-->
            <!--<el-option label="教职工" value="11" />-->
            <!--<el-option label="学生" value="22" />-->
          <!--</el-select>-->
        </el-form-item>
      </div>
      <div class="form-max-box">
        <el-form-item label="扩展配置" prop="expandType">
          <el-checkbox-group v-model="form.expandType">
            <el-checkbox style="margin:4px 30px 0 20px;" label="11">化学品柜智能锁</el-checkbox>
            <el-checkbox label="22">气瓶标签</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="智能锁配置" prop="smartLock">-->
          <!--<el-radio-group v-model="form.smartLock">-->
            <!--<el-radio style="margin:4px 40px 0 20px;" :label="1">有</el-radio>-->
            <!--<el-radio :label="0">无</el-radio>-->
          <!--</el-radio-group>-->
          <!--&lt;!&ndash;<el-select v-model="form.smartLock" placeholder="请配置智能锁" style="width:200px;">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-option label="有" :value="1" />&ndash;&gt;-->
            <!--&lt;!&ndash;<el-option label="无" :value="0" />&ndash;&gt;-->
          <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
        <!--</el-form-item>-->
      <!--</div>-->
      <!--<div class="form-max-box">-->
        <!--<el-form-item label="气瓶标签配置" prop="airBottle">-->
          <!--<el-radio-group v-model="form.airBottle">-->
            <!--<el-radio style="margin:4px 40px 0 20px;" :label="1">有</el-radio>-->
            <!--<el-radio :label="0">无</el-radio>-->
          <!--</el-radio-group>-->
          <!--&lt;!&ndash;<el-select v-model="form.airBottle" placeholder="请配置气瓶标签" style="width:200px;">&ndash;&gt;-->
            <!--&lt;!&ndash;<el-option label="有" :value="1" />&ndash;&gt;-->
            <!--&lt;!&ndash;<el-option label="无" :value="0" />&ndash;&gt;-->
          <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
        <!--</el-form-item>-->
      <!--</div>-->
    </el-form>
    <p class="inquire-button-one" style="margin:60px auto 60px;display: block" @click="submitForm">保存</p>
    <!--查看图片-->
    <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: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
        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" }
          ],
          signMap: [
            { required: true, message: "签到/离开示意图不能为空", trigger: "blur" }
          ],
          videoCover: [
            { required: true, message: "视频封面不能为空", trigger: "blur" }
          ],
          operationGuide: [
            { required: true, message: "操作指南不能为空", trigger: "blur" }
          ],
          loginBanner: [
            { required: true, message: "登录页banner不能为空", trigger: "blur" }
          ],
          homepageBanner: [
            { required: true, message: "首页banner不能为空", trigger: "blur" }
          ],
          userType: [
            { required: true, message: "请配置使用身份", trigger: "blur" }
          ],
          smartLock: [
            { required: true, message: "请配置智能锁", trigger: "blur" }
          ],
          airBottle: [
            { required: true, message: "请配置气瓶标签", trigger: "blur" }
          ],
          expandType: [
            { required: true, message: "请配置扩展配置", 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,
              signMap:this.form.signMap,
              videoCover:this.form.videoCover,
              operationGuide:this.form.operationGuide,
              loginBanner:this.form.loginBanner,
              homepageBanner:this.form.homepageBanner,
              smartLock:0,
              airBottle:0,
            }
            //判断使用身份配置
            if(self.form.userType[1]){
              obj.userType = '-1';
            }else{
              if(self.form.userType[0] == '11'){
                obj.userType = '11';
              }else if(self.form.userType[0] == '22'){
                obj.userType = '22';
              }
            }
            //判断扩展配置(智能锁配置/气瓶标签配置)
            for(let i=0;i<self.form.expandType.length;i++){
              if(self.form.expandType[i] == '11'){
                obj.smartLock = 1;
              }else if(self.form.expandType[i] == '22'){
                obj.airBottle = 1;
              }
            }
            updateLogoInfo(obj).then(response => {
              this.msgSuccess(response.msg);
              this.getLogoInfo();
            });
          }
        });
      },
      //查看图片
      lookImg(url){
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //获取数据
      getLogoInfo(){
        getLogoInfo().then(response => {
          store.dispatch('settings/setSmartAlarmType', response.data.smartLock)
          localStorage.setItem('setSmartAlarmType',response.data.smartLock)
          localStorage.setItem('circularLogo',response.data.circularLogo)
          localStorage.setItem('rectangleLogo',response.data.rectangleLogo)
          localStorage.setItem('videoCover',response.data.videoCover)
          //判断使用身份配置
          let listOne = [];
          if(response.data.userType == -1){
            listOne.push('11')
            listOne.push('22')
          }else if(response.data.userType == 11){
            listOne.push('11')
          }else if(response.data.userType == 22){
            listOne.push('22')
          }
          this.$set(response.data,'userType',listOne);
          //判断扩展配置
          let listTwo = [];
          if(response.data.smartLock == 1){
            listTwo.push('11')
          }
          if(response.data.airBottle == 1){
            listTwo.push('22')
          }
          this.$set(response.data,'expandType',listTwo);
          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);
        }else if(type == 'signMap'){
          this.$set(this.form,'signMap',res.data.url);
        }else if(type == 'videoCover'){
          this.$set(this.form,'videoCover',res.data.url);
        }else if(type == 'operationGuide'){
          this.$set(this.form,'operationGuide',res.data.url);
        }else if(type == 'loginBanner'){
          this.$set(this.form,'loginBanner',res.data.url);
        }else if(type == 'homepageBanner'){
          this.$set(this.form,'homepageBanner',res.data.url);
        }
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
    },
  };
</script>

<style scoped lang="scss">
  .public-config-page{
    *{
      margin:0;
    }
    .title-box{
      border-bottom:1px solid #dedede;
      p{
        margin-left:40px;
        color:#0045af;
        line-height:60px;
      }
    }
    .form-max-box{
      margin-top:20px;
    }
  }
</style>