FE-V2-PC/src/views/comprehensive/system/publicConfig/chemicalsConfig.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="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-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>
    </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: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/base/upload", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        form:{
          userType:[],
          expandType:[]
        },
        rules: {

          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 = {

            }
            //判断使用身份配置
            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';
              }
            }
            //判断扩展配置(智能锁配置/气瓶标签配置)
            let oneType = 0;
            let twoType = 0;
            for(let i=0;i<self.form.expandType.length;i++){
              if(self.form.expandType[i] == '11'){
                obj.smartLock = 1;
                oneType++
              }else if(self.form.expandType[i] == '22'){
                obj.airBottle = 1;
                twoType++
              }
            }
            if(oneType==0){
              obj.smartLock = 0;
            }
            if(twoType==0){
              obj.airBottle = 0;
            }
            updateLogoInfo(obj).then(response => {
              this.msgSuccess(response.msg);
              this.getLogoInfo();
            });
          }
        });
      },
      //查看图片
      lookImg(url){
        this.imgUrl = url;
        this.imgOpen = true;
      },
      //获取数据
      getLogoInfo(){
        getLogoInfo().then(response => {
          //判断使用身份配置
          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)
        });
      },

    },
  };
</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;
    }
  }
</style>