zhgdyun/src/views/jxjadmin/systemSettings.vue

<template>
  <div class="fullHeight enterpriseInfo">
    <div class="enterpriseInfoContent">
      <vue-scroll style="height: 720px">
        <el-form
          style="width: 100%"
          size="medium"
          :model="form"
          ref="form"
          :rules="rules"
          label-width="240px"
        >
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'平台名称'" prop="platformName">
                <el-input
                  v-model="form.platformName"
                  style="width: 150px"
                  :placeholder="$t('message.companyDiagram.PleaseEnter')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'模块图标类型'" prop="iconType">
                <el-radio-group v-model="iconType">
                  <el-radio label="1" size="medium">原图标</el-radio>
                  <el-radio label="2" size="small">图标2</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item :label="'大屏地图区域展示类型'" prop="areaType">
                <el-radio-group v-model="areaType">
                  <el-radio label="1" style="margin-left: 10px">省份</el-radio>
                  <el-radio label="2">城市</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'是否开启缩放'" prop="platformLogo">
                <el-switch
                  v-model="zoomType"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  :inactive-value="1"
                  @change='switchChange2'
                >
                </el-switch>
                {{ zoomType == 0? '是' : '否' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'是否开启登录超时处理'" prop="loginTimeOut">
                <el-switch
                  v-model="loginTimeOut"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  @change='switchChange'
                >
                </el-switch>
                {{ loginTimeOut == 1 ? '是' : '否' }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="标头配置" prop="headerConfiguration">
                <el-input
                  style="width: 150px"
                  v-model="form.headerConfiguration"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业后台" prop="enterpriseBackground">
                <el-input
                  style="width: 150px"
                  v-model="form.enterpriseBackground"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="企业前台" prop="enterpriseFront">
                <el-input
                  style="width: 150px"
                  v-model="form.enterpriseFront"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目后台" prop="projectBackground">
                <el-input
                  style="width: 150px"
                  v-model="form.projectBackground"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="设备中台" prop="equipmentChina">
                <el-input
                  style="width: 150px"
                  v-model="form.equipmentChina"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资料中心" prop="dataCenter">
                <el-input
                  style="width: 150px"
                  v-model="form.dataCenter"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="项目前台" prop="projectFront">
                <el-input
                  style="width: 150px"
                  v-model="form.projectFront"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否显示项目前台" prop="isShowProjectFront">
                <el-switch
                  v-model="form.isShowProjectFront"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
                {{ form.isShowProjectFront == 1 ? '是' : '否' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="是否开启劳务人员资质证书到期预警" prop="isOpenCertificateExpireWarn">
                <div class="form-item-content">
                  <el-switch
                    v-model="form.isOpenCertificateExpireWarn"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                  <span>{{ form.isOpenCertificateExpireWarn == 1 ? '是' : '否' }}</span>
                  <el-popover
                    placement="bottom-start"
                    :visible-arrow="false"
                    :offset="30"
                    width="200"
                    trigger="hover"
                    content="开启后将会对企业下的各个项目开启人员证书到期预警提示，提前预警时间可以自行设置，监测内容包括人员的合同信息、资格证书、保险信息">
                    <i class="el-icon-warning-outline" slot="reference"></i>
                  </el-popover>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="默认审批用户注册企业" prop="defaultApprovalCompanySn">
                <el-select v-model="form.defaultApprovalCompanySn" placeholder="请选择" style="width: 150px">
                  <el-option
                    v-for="item in companyList"
                    :key="item.companySn"
                    :label="item.companyName"
                    :value="item.companySn">
                  </el-option>
                </el-select>
                <!-- <div class="select-content">
                  <div class="tip-text" @click="isSelectCompany = !isSelectCompany">
                    <span>{{selectCompanyName}}</span>
                    <i class="el-icon-arrow-down" v-show="!isSelectCompany"></i>
                    <i class="el-icon-arrow-up" v-show="isSelectCompany"></i>
                  </div>
                  <div class="select-list" v-if="isSelectCompany">
                    <vue-scroll style="height: 100%">
                      <div class="select-list-item" v-for="(item,index) in companyList" :key="index" @click="changeSelectCompany(item)">
                          <span>{{item.companyName}}</span>
                      </div>
                    </vue-scroll>
                  </div>
                </div> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="提前" prop="certificateExpireWarnAheadDay">
                <div class="form-item-content">
                  <el-input-number v-model="form.certificateExpireWarnAheadDay" :controls="false" style="width: 80px"></el-input-number>
                  <span>天</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'登录页面logo'" prop="loginLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess"
                  :file-list="fileList"
                  :on-remove="handleDelete"
                  :class="{ hide_box: upload_btn1 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item :label="'数据看板logo'" prop="bigScreenLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess4"
                  :file-list="fileList4"
                  :on-remove="handleDelete4"
                  :class="{ hide_box: upload_btn2 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item :label="'登录页面背景'" prop="loginBackgroundImage">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess2"
                  :file-list="fileList2"
                  :on-remove="handleDelete2"
                  :class="{ hide_box: upload_btn3 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">
                    只能上传一张,建议上传大小为1920 x 562的图片
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="'平台内部logo'" prop="platformLogo">
                <el-upload
                  :action="$store.state.UPLOADURL"
                  name="files"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleAvatarSuccess3"
                  :file-list="fileList3"
                  :on-remove="handleDelete3"
                  :class="{ hide_box: upload_btn4 }"
                >
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传一张</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item :label="''" >
                <el-button type="primary" style="width: 200px" @click="submitData">保存</el-button>
            </el-form-item> -->
        </el-form>
        <el-button
          type="primary"
          style="width: 11%; margin: -0.5% 0 0 25%; position: absolute"
          @click="submitData"
          >保存</el-button
        >
      </vue-scroll>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      width="50%"
      title="查看大图"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  selectSystemLogoConfigApi,
  editSystemLogoConfigApi,
  getRegisterAuditList
} from '@/assets/js/api/jxjadmin'
export default {
  data() {
    return {
      upload_btn1: false, // 是否隐藏上传图片按钮
      upload_btn2: false, // 是否隐藏上传图片按钮
      upload_btn3: false, // 是否隐藏上传图片按钮
      upload_btn4: false, // 是否隐藏上传图片按钮
      form: {
        loginBackgroundImage: '',
        loginLogo: '',
        platformLogo: '',
        platformName: '',
        bigScreenLogo: '',
        headerConfiguration: '', //标头配置
        enterpriseBackground: '', //企业后台
        enterpriseFront: '', //企业前台
        projectBackground: '', //项目后台
        equipmentChina: '', //设备中台
        projectFront: '', // 项目前台
        isShowProjectFront: 0, // 是否显示项目前台
        isOpenCertificateExpireWarn: 0, // 是否开启资质证书到期预警
        certificateExpireWarnAheadDay: 0, // 提前多少天
        defaultApprovalCompanySn: "", // 默认审批用户注册企业
        dataCenter: '', //资料中心
        loginTimeOut:1,
        zoomType:0,

      },
      zoomType: 0,
      iconType: '1',
      areaType: '1',
      loginTimeOut:1,
      rules: {
        platformName: [
          {
            required: true,
            message: this.$t(
              'message.companyDiagram.dialog_Account_box.message'
            ),
            trigger: 'blur'
          }
        ],
        auditCompany: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        defaultApprovalCompanySn: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ]
      },
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      companyList: [],
      isSelectCompany: false,
      selectCompanyName: '未选择'
    }
  },
  mounted() {
    this.getDetail()
    this.getListData();
  },
  methods: {
    changeSelectCompany(obj){
      this.selectCompanyName = obj.companyName
      this.isSelectCompany = false;
    },
    //获取列表数据
    getListData() {
      getRegisterAuditList({pageSize: -1}).then(res => {
        console.log(res)
        this.companyList = res.result.records
      })
    },
     //切换缩放按钮
     switchChange2(val){
        console.log('切换的状态',val);
        this.form.zoomType=val
    },
     //切换登录超时按钮
     switchChange(val){
        this.form.loginTimeOut=val
    },
    getDetail() {
      selectSystemLogoConfigApi().then((res) => {
        if (res.result) {
          console.log(res.result)
          window.localStorage.setItem('systemInfo', JSON.stringify(res.result))
          this.form = res.result
          if (this.form.loginLogo) {
            this.fileList = [{ name: '', url: this.form.loginLogo }]
            this.upload_btn1 = true
          }
          if (this.form.bigScreenLogo) {
            this.fileList4 = [{ name: '', url: this.form.bigScreenLogo }]
            this.upload_btn2 = true;
          }
          if (this.form.loginBackgroundImage) {
            this.fileList2 = [{ name: '', url: this.form.loginBackgroundImage }]
            this.upload_btn3 = true;
          }
          if (this.form.platformLogo) {
            this.fileList3 = [{ name: '', url: this.form.platformLogo }]
            this.upload_btn4 = true;
          }
          this.zoomType = Number(res.result.zoomType) 
          this.loginTimeOut = Number(res.result.loginTimeOut)
          console.log(res.result.iconType)
          this.iconType = res.result.iconType ? res.result.iconType : '1'
          this.areaType = res.result.areaType ? res.result.areaType : '1'
        }
      })
    },
    submitData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.fileList.length == 0) {
            this.form.loginLogo = ''
          }
          if (this.fileList4.length == 0) {
            this.form.bigScreenLogo = ''
          }
          if (this.fileList2.length == 0) {
            this.form.loginBackgroundImage = ''
          }
          if (this.fileList3.length == 0) {
            this.form.platformLogo = ''
          }
          this.form.zoomType = this.zoomType
          this.form.iconType = this.iconType
          this.form.areaType = this.areaType
          // this.form.headquartersSn = this.$store.state.userInfo.headquartersSn
          // console.log('参数',this.form)
          editSystemLogoConfigApi(this.form).then((res) => {
            console.log('编辑的结果', res)
            if (res.success) {
              this.$message.success(
                this.$t('message.companyDiagram.editSuccess')
              ) //编辑成功！
              this.loginOut()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    loginOut() {
      this.$store.commit('setUserInfo', null)
      this.$store.commit('setMapBackArr', [])
      this.$store.commit('setMoudle', null)
      this.$store.commit('setProDetail', null)
      window.localStorage.removeItem('isIframe')
      window.localStorage.removeItem('soundList')
      let json = {
        name: '工作站',
        id: 1,
        url: '/projectV2/taskList',
        menuList: [
          {
            id: 100000,
            menuName: '任务清单',
            path: '/projectV2/taskList'
          },
          {
            id: 100001,
            menuName: '通知公告',
            path: '/projectV2/noticeList'
          },
          {
            id: 100002,
            menuName: '工作日程',
            path: '/projectV2/workerSchedule'
          }
        ]
      }
      this.$store.commit('setCurModule', json)
      // sessionStorage.clear();
      // this.$router.push('/login')
      if (COMPANY == 'nanchang' || COMPANY == '') {
        window.open('/index.html#/login', '_self')
      } else {
        window.open('/#/login', '_self')
      }
      // this.$router.push('/')
      window._paq.push(['trackEvent', '点击', '退出登录', '退出登录'])
    },

    handleAvatarSuccess(res, file) {
      this.form.loginLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList = [{ name: '', url: this.form.loginLogo }]
      if (this.fileList.length >= 1) {
        this.upload_btn1 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess2(res, file) {
      this.form.loginBackgroundImage =
        this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList2 = [{ name: '', url: this.form.loginBackgroundImage }]
      if (this.fileList2.length >= 1) {
        this.upload_btn3 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess3(res, file) {
      this.form.platformLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList3 = [{ name: '', url: this.form.platformLogo }]
      if (this.fileList3.length >= 1) {
        this.upload_btn4 = true; // 隐藏上传按钮
      }
    },
    handleAvatarSuccess4(res, file) {
      this.form.bigScreenLogo = this.$store.state.FILEURL + res.data[0].imageUrl
      this.fileList4 = [{ name: '', url: this.form.bigScreenLogo }]
      if (this.fileList4.length >= 1) {
        this.upload_btn2 = true; // 隐藏上传按钮
      }
    },


    handleDelete(file, fileList) {
      this.upload_btn1 = false;
      this.fileList = fileList
    },
    handleDelete2(file, fileList) {
      this.upload_btn3 = false;

      this.fileList2 = fileList
    },
    handleDelete3(file, fileList) {
      this.upload_btn4 = false;

      this.fileList3 = fileList
    },
    handleDelete4(file, fileList) {
      this.upload_btn2 = false;

      this.fileList4 = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.enterpriseInfo {
  background-color: white;
}
.enterpriseInfoContent {
  padding: 20px 50px;
  // width: 50%;
  width: 97%;
  // max-width: 430px;
  .select-content{
    box-sizing: border-box;
    width: 150px;
    height: 34px;
    line-height: 34px !important;
    border-radius: 3px;
    border: 1px solid #D7DBE9;
    padding: 0 15px;
    position: relative;
    .tip-text{
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }
    .select-list{
      width: 100%;
      height: 200px;
      position: absolute;
      top: 34px;
      left: -3px;
      z-index: 10;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 4px 4px 10px #E3E3E3;
      padding: 10px 8px;
      &-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        span{
          margin-left: 10px;
        }
      }
      &-item:hover{
        background-color: #DEE7FF;
      }
    }
  }
  .form-item-content{
    display: flex;
    align-items: center;
    span{
      margin: 0px 5px;
    }
  }
}
.el-upload__tip {
  line-height: 20px;
}
.hide_box /deep/ .el-upload--picture-card {
  display: none;
}
// 下拉框样式修改
/deep/.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #DEE7FF;
}
// .vertical-radio-group .el-radio {
//   display: block;
// }
</style>