examcloud-admin-web/src/modules/basic/view/clientConfig.vue

<template>
  <el-container>
    <el-main class="el-main-padding">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="136px"
        class="demo-ruleForm"
        :inline-message="true"
      >
        <el-form-item v-if="isSuperAdmin" label="学校">
          <el-select
            v-model="ruleForm.orgId"
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option
              v-for="item in rootOrgList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="系统名称" prop="OE_STUDENT_SYS_NAME">
          <el-input
            v-model="ruleForm.OE_STUDENT_SYS_NAME"
            placeholder="请输入系统名称"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校logo" prop="LOGO_FILE_URL">
          <el-upload
            class="upload-width"
            ref="upload"
            accept=".png"
            :action="uploadAction"
            :headers="uploadHeaders"
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
            list-type="picture"
          >
            <el-button size="small" slot="trigger" type="primary"
              >选择文件</el-button
            >&nbsp;
            <el-button size="small" type="success" @click="submitUpload"
              >确认上传</el-button
            >
            <el-button size="small" type="danger" @click="removeFile"
              >清空文件</el-button
            >
            <div slot="tip" class="el-upload__tip">
              图片大小(长*宽)为400*100的png文件
            </div>
          </el-upload>
          <el-input v-show="false" v-model="ruleForm.LOGO_FILE_URL"></el-input>
        </el-form-item>

        <el-form-item label="登录帐号选择" prop="loginType">
          <el-checkbox-group v-model="ruleForm.loginType">
            <el-checkbox
              v-for="lt in loginTypes"
              name="loginType"
              :label="lt.code"
              v-model="lt.code"
              :key="lt.code"
              >{{ lt.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="学号登录别名" prop="STUDENT_CODE_LOGIN_ALIAS">
          <el-input
            v-model="ruleForm.STUDENT_CODE_LOGIN_ALIAS"
            placeholder="请输入学号登录别名"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号登录别名"
          prop="IDENTITY_NUMBER_LOGIN_ALIAS"
        >
          <el-input
            v-model="ruleForm.IDENTITY_NUMBER_LOGIN_ALIAS"
            placeholder="请输入身份号登录别名"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="考生端登录方式" prop="loginSupport">
          <el-checkbox-group v-model="ruleForm.loginSupport">
            <el-checkbox
              v-for="lt in loginSupports"
              name="loginSupport"
              :label="lt.code"
              v-model="lt.code"
              :key="lt.code"
              >{{ lt.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="防作弊配置" prop="preventCheatingConfig">
          <el-checkbox-group v-model="ruleForm.preventCheatingConfig">
            <el-checkbox
              v-for="pcc in preventCheatingConfigs"
              name="preventCheatingConfig"
              :label="pcc.code"
              v-model="pcc.code"
              :key="pcc.code"
              >{{ pcc.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-show="false"
          label="窗口默认大小"
          prop="STUDENT_CLIENT_DEFAULT_SIZE"
        >
          <el-input
            v-model="ruleForm.STUDENT_CLIENT_DEFAULT_SIZE"
            placeholder="窗口大小格式为：宽度*高度"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生端版本" prop="studentClientVersion">
          <el-checkbox-group v-model="ruleForm.studentClientVersion">
            <el-checkbox
              v-for="pcc in studentClientVersions"
              name="studentClientVersion"
              :label="pcc.code"
              v-model="pcc.code"
              :key="pcc.code"
              >{{ pcc.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="控制台配置" prop="STUDENT_CLIENT_CONSOLE_CONFIG">
          <el-input
            v-model="ruleForm.STUDENT_CLIENT_CONSOLE_CONFIG"
            placeholder="系统预留，无需配置"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="btnSaveDiabled"
            type="primary"
            @click="submitForm('ruleForm')"
            >保 存</el-button
          >
          <!-- <el-button class="btn-margin-left" @click="resetForm('ruleForm')">取 消</el-button> -->
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import {
  LOGIN_TYPE,
  PREVENT_CHEATING_CONFIG,
  STUDENT_CLIENT_VERSION,
  CORE_API,
  LOGIN_SUPPORT
} from "@/constants/constants.js";
export default {
  data() {
    return {
      rootOrgList: [],
      loginTypes: LOGIN_TYPE,
      loginSupports: LOGIN_SUPPORT,
      propertyGroupId: "",
      preventCheatingConfigs: PREVENT_CHEATING_CONFIG,
      studentClientVersions: STUDENT_CLIENT_VERSION,
      formDataChanged: false,
      originalRuleForm: {},
      ruleForm: {
        relatedPropertyGroupIdList: [],
        orgId: null,
        OE_STUDENT_SYS_NAME: "",
        LOGO_FILE_URL: "",
        LOGIN_TYPE: "",
        PREVENT_CHEATING_CONFIG: "",
        STUDENT_CLIENT_VERSION: "",
        STUDENT_CLIENT_DEFAULT_SIZE: "",
        STUDENT_CLIENT_CONSOLE_CONFIG: "",
        STUDENT_CODE_LOGIN_ALIAS: "学号登录",
        IDENTITY_NUMBER_LOGIN_ALIAS: "身份证号登录",
        LOGIN_SUPPORT: "",
        properties: {
          OE_STUDENT_SYS_NAME: "",
          LOGO_FILE_URL: "",
          LOGIN_TYPE: "",
          PREVENT_CHEATING_CONFIG: "",
          STUDENT_CLIENT_VERSION: "",
          STUDENT_CLIENT_DEFAULT_SIZE: "",
          STUDENT_CLIENT_CONSOLE_CONFIG: "",
          STUDENT_CODE_LOGIN_ALIAS: "学号登录",
          IDENTITY_NUMBER_LOGIN_ALIAS: "身份证号登录",
          LOGIN_SUPPORT: ""
        },
        loginType: [],
        preventCheatingConfig: [],
        studentClientVersion: [],
        loginSupport: []
      },
      logoDialog: false,
      uploadAction: "",
      uploadHeaders: {},
      uploadData: {},
      fileList: [],
      rules: {
        OE_STUDENT_SYS_NAME: [
          { required: true, message: "请输入系统名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        LOGO_FILE_URL: [
          { required: true, message: "请上传学校logo", trigger: "change" }
        ],
        loginType: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个登录账号选择",
            trigger: "change"
          }
        ],
        loginSupport: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个考生端登录方式",
            trigger: "change"
          }
        ],
        STUDENT_CLIENT_DEFAULT_SIZE: [
          { required: true, message: "请输入客户端默认大小", trigger: "blur" }
        ],
        STUDENT_CODE_LOGIN_ALIAS: [
          { required: true, message: "请输入学号登录别名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        IDENTITY_NUMBER_LOGIN_ALIAS: [
          {
            required: true,
            message: "请输入身份证号登录别名",
            trigger: "blur"
          },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        studentClientVersion: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个学生端版本",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.properties.OE_STUDENT_SYS_NAME = this.ruleForm.OE_STUDENT_SYS_NAME;
          this.ruleForm.properties.LOGO_FILE_URL = this.ruleForm.LOGO_FILE_URL;
          this.ruleForm.properties.STUDENT_CLIENT_DEFAULT_SIZE = this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE;
          this.ruleForm.properties.STUDENT_CLIENT_CONSOLE_CONFIG = this.ruleForm.STUDENT_CLIENT_CONSOLE_CONFIG;
          this.ruleForm.properties.LOGIN_TYPE = this.ruleForm.LOGIN_TYPE = this.ruleForm.loginType.join(
            ","
          );
          this.ruleForm.properties.LOGIN_SUPPORT = this.ruleForm.LOGIN_SUPPORT = this.ruleForm.loginSupport.join(
            ","
          );
          this.ruleForm.properties.STUDENT_CODE_LOGIN_ALIAS = this.ruleForm.STUDENT_CODE_LOGIN_ALIAS;
          this.ruleForm.properties.IDENTITY_NUMBER_LOGIN_ALIAS = this.ruleForm.IDENTITY_NUMBER_LOGIN_ALIAS;
          if (
            this.ruleForm.preventCheatingConfig == null ||
            this.ruleForm.preventCheatingConfig.length == 0
          ) {
            this.ruleForm.properties.PREVENT_CHEATING_CONFIG = this.ruleForm.PREVENT_CHEATING_CONFIG =
              "NONE";
          } else {
            let defaultArr = [];
            for (let lt of PREVENT_CHEATING_CONFIG) {
              defaultArr.push(lt.code);
            }
            let validArr = [];
            //保存时清理一下历史数据
            for (
              let i = 0;
              i < this.ruleForm.preventCheatingConfig.length;
              i++
            ) {
              let code = this.ruleForm.preventCheatingConfig[i];
              if (defaultArr.indexOf(code) > -1) {
                validArr.push(code);
              }
            }
            let res = "";
            if (validArr.length == 0) {
              res = "NONE";
            } else {
              res = validArr.join(",");
            }
            this.ruleForm.properties.PREVENT_CHEATING_CONFIG = this.ruleForm.PREVENT_CHEATING_CONFIG = res;
          }

          if (
            this.ruleForm.studentClientVersion == null ||
            this.ruleForm.studentClientVersion.length == 0
          ) {
            this.ruleForm.properties.STUDENT_CLIENT_VERSION = this.ruleForm.STUDENT_CLIENT_VERSION =
              "NONE";
          } else {
            let defaultArr = [];
            for (let lt of STUDENT_CLIENT_VERSION) {
              defaultArr.push(lt.code);
            }
            let validArr = [];
            //保存时清理一下历史数据
            for (
              let i = 0;
              i < this.ruleForm.studentClientVersion.length;
              i++
            ) {
              let code = this.ruleForm.studentClientVersion[i];
              if (defaultArr.indexOf(code) > -1) {
                validArr.push(code);
              }
            }
            let res = "";
            if (validArr.length == 0) {
              res = "NONE";
            } else {
              res = validArr.join(",");
            }
            this.ruleForm.properties.STUDENT_CLIENT_VERSION = this.ruleForm.STUDENT_CLIENT_VERSION = res;
          }

          this.$httpWithMsg
            .put(CORE_API + "/org/saveOrgProperties", this.ruleForm)
            .then(
              () => {
                this.$notify({
                  message: "保存成功",
                  type: "success"
                });
                this.originalRuleForm = Object.assign({}, this.ruleForm);
                this.formDataChanged = false;
              },
              () => {}
            );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    initForm() {
      this.uploadAction = CORE_API + "/org/importLogo/" + this.ruleForm.orgId;
      this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE = "1400*900";
      this.ruleForm.relatedPropertyGroupIdList = ["studentClientConfig"];
      let url =
        CORE_API +
        "/org/getOrgPropertiesByGroupWithoutCache/" +
        this.ruleForm.orgId +
        "/" +
        this.propertyGroupId;
      this.$httpWithMsg.get(url).then(response => {
        console.log(response);

        if (response) {
          this.ruleForm.properties = response.data;
          // if (this.ruleForm.properties.OE_STUDENT_SYS_NAME) {
          this.ruleForm.OE_STUDENT_SYS_NAME =
            this.ruleForm.properties.OE_STUDENT_SYS_NAME ||
            this.ruleForm.OE_STUDENT_SYS_NAME;
          // }

          this.ruleForm.LOGO_FILE_URL =
            this.ruleForm.properties.LOGO_FILE_URL ||
            this.ruleForm.LOGO_FILE_URL;
          this.ruleForm.LOGIN_TYPE =
            this.ruleForm.properties.LOGIN_TYPE || this.ruleForm.LOGIN_TYPE;
          this.ruleForm.LOGIN_SUPPORT =
            this.ruleForm.properties.LOGIN_SUPPORT ||
            this.ruleForm.LOGIN_SUPPORT;
          this.ruleForm.PREVENT_CHEATING_CONFIG =
            this.ruleForm.properties.PREVENT_CHEATING_CONFIG ||
            this.ruleForm.PREVENT_CHEATING_CONFIG;
          this.ruleForm.STUDENT_CLIENT_VERSION =
            this.ruleForm.properties.STUDENT_CLIENT_VERSION ||
            this.ruleForm.STUDENT_CLIENT_VERSION;
          this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE =
            this.ruleForm.properties.STUDENT_CLIENT_DEFAULT_SIZE ||
            this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE;
          this.ruleForm.STUDENT_CLIENT_CONSOLE_CONFIG =
            this.ruleForm.properties.STUDENT_CLIENT_CONSOLE_CONFIG ||
            this.ruleForm.STUDENT_CLIENT_CONSOLE_CONFIG;
          this.ruleForm.STUDENT_CODE_LOGIN_ALIAS =
            this.ruleForm.properties.STUDENT_CODE_LOGIN_ALIAS ||
            this.ruleForm.STUDENT_CODE_LOGIN_ALIAS;
          this.ruleForm.IDENTITY_NUMBER_LOGIN_ALIAS =
            this.ruleForm.properties.IDENTITY_NUMBER_LOGIN_ALIAS ||
            this.ruleForm.IDENTITY_NUMBER_LOGIN_ALIAS;

          if (this.ruleForm.properties.LOGIN_TYPE) {
            this.ruleForm.loginType = this.ruleForm.properties.LOGIN_TYPE.split(
              ","
            );
          } else {
            let defaultValue = [];
            for (let lt of LOGIN_TYPE) {
              defaultValue.push(lt.code);
            }
            this.ruleForm.loginType = defaultValue;
            console.log(defaultValue);
          }

          if (this.ruleForm.properties.LOGIN_SUPPORT) {
            this.ruleForm.loginSupport = this.ruleForm.properties.LOGIN_SUPPORT.split(
              ","
            );
          }

          if (this.ruleForm.properties.PREVENT_CHEATING_CONFIG) {
            if (this.ruleForm.properties.PREVENT_CHEATING_CONFIG != "NONE") {
              this.ruleForm.preventCheatingConfig = this.ruleForm.properties.PREVENT_CHEATING_CONFIG.split(
                ","
              );
            } else {
              this.ruleForm.preventCheatingConfig = [];
            }
          } else {
            let defaultValue = [];
            for (let lt of PREVENT_CHEATING_CONFIG) {
              defaultValue.push(lt.code);
            }
            this.ruleForm.preventCheatingConfig = defaultValue;
            console.log(defaultValue);
          }
          if (this.ruleForm.properties.STUDENT_CLIENT_VERSION) {
            if (this.ruleForm.properties.STUDENT_CLIENT_VERSION != "NONE") {
              this.ruleForm.studentClientVersion = this.ruleForm.properties.STUDENT_CLIENT_VERSION.split(
                ","
              );
            } else {
              this.ruleForm.studentClientVersion = [];
            }
          } else {
            let defaultValue = [];
            // for (let lt of STUDENT_CLIENT_VERSION) {
            //   defaultValue.push(lt.code);
            // }
            this.ruleForm.studentClientVersion = defaultValue;
            console.log(defaultValue);
          }
          let fileUrl = response.data.LOGO_FILE_URL;
          let fname = "";
          if (fileUrl) {
            let lastIndex = fileUrl.lastIndexOf("/");
            let len = fileUrl.length;
            fname = fileUrl.substr(lastIndex + 1, len - lastIndex);
            this.fileList = [{ name: fname, url: this.ruleForm.LOGO_FILE_URL }];
          } else {
            this.fileList = [];
          }
          this.originalRuleForm = Object.assign({}, this.ruleForm);
        } else {
          this.$notify({
            message: "学生客户端信息暂未初始化，请立即初始化",
            type: "warning"
          });
        }
      });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    initUpload() {
      this.fileList = [];
    },
    beforeUpload(file) {
      if (!this.checkUpload()) {
        return false;
      }
      console.log(file);
    },
    uploadProgress() {
      console.log("uploadProgress");
    },
    uploadSuccess(response) {
      console.log("uploadSuccess");
      console.log(response);
      if (response && response.length > 0) {
        this.$notify({
          message: "上传成功",
          type: "success"
        });
        let fileUrl = response;

        this.ruleForm.LOGO_FILE_URL = this.ruleForm.properties.LOGO_FILE_URL = fileUrl;
      } else {
        this.errDialog = true;
      }
      this.fileLoading = false;
      this.logoDialog = false;
      // this.removeFile();
    },
    uploadError(response) {
      let json = JSON.parse(response.message);
      if (response.status == 500) {
        this.$notify({
          message: json.desc,
          type: "error"
        });
      }
      this.fileLoading = false;
    },
    //确定上传
    submitUpload() {
      if (!this.checkUpload()) {
        return false;
      }
      this.$refs.upload.submit();
      this.fileLoading = true;
    },
    checkUpload() {
      let fileList = this.$refs.upload.uploadFiles;
      if (fileList.length == 0) {
        this.$notify({
          message: "上传文件不能为空",
          type: "error"
        });
        return false;
      }
      if (fileList.length > 1) {
        this.$notify({
          message: "每次只能上传一个文件",
          type: "error"
        });
        return false;
      }
      for (let file of fileList) {
        let fileName = file.name;
        if (
          // !fileName.endsWith(".jpg") &&
          // !fileName.endsWith(".gif") &&
          !fileName.endsWith(".png")
        ) {
          this.$notify({
            message: "上传文件格式必须为[png]",
            type: "error"
          });
          this.initUpload();
          return false;
        }
      }
      return true;
    },
    //清空文件
    removeFile() {
      this.fileList = [];
      this.ruleForm.LOGO_FILE_URL = this.ruleForm.properties.LOGO_FILE_URL = "";
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.removeFile();
    },
    handleExceed() {
      this.$notify({
        message: "当前限制选择 1 个文件,请先清空文件再试",
        type: "error"
      });
    },
    equalArrayIgnoreSequence(arr1, arr2) {
      // 判断数组的长度
      if (arr1.length !== arr2.length) {
        return false;
      } else {
        let a = Object.assign([], arr1);
        let b = Object.assign([], arr2);
        a.sort();
        b.sort();
        // 循环遍历数组的值进行比较
        for (let i = 0; i < a.length; i++) {
          if (a[i] !== b[i]) {
            return false;
          }
        }
        return true;
      }
    }
  },
  created() {
    this.ruleForm.orgId = this.user.rootOrgId;
    this.propertyGroupId = "config4Edit3";
    this.uploadHeaders = {
      key: this.user.key,
      token: this.user.token
    };
    if (this.isSuperAdmin) {
      this.$httpWithMsg.get(CORE_API + "/org/getRootOrgList").then(response => {
        this.rootOrgList = response.data;
      });
    }
    this.initForm();
  },
  watch: {
    "ruleForm.orgId": {
      handler: function() {
        this.initForm();
      }
    },
    ruleForm: {
      deep: true,
      handler: function(newForm) {
        if (Object.keys(this.originalRuleForm).length > 0) {
          this.formDataChanged = !(
            newForm.OE_STUDENT_SYS_NAME ==
              this.originalRuleForm.OE_STUDENT_SYS_NAME &&
            newForm.LOGO_FILE_URL == this.originalRuleForm.LOGO_FILE_URL &&
            this.equalArrayIgnoreSequence(
              newForm.loginType,
              this.originalRuleForm.loginType
            ) &&
            this.equalArrayIgnoreSequence(
              newForm.loginSupport,
              this.originalRuleForm.loginSupport
            ) &&
            this.equalArrayIgnoreSequence(
              newForm.preventCheatingConfig,
              this.originalRuleForm.preventCheatingConfig
            ) &&
            this.equalArrayIgnoreSequence(
              newForm.studentClientVersion,
              this.originalRuleForm.studentClientVersion
            ) &&
            newForm.STUDENT_CLIENT_CONSOLE_CONFIG ==
              this.originalRuleForm.STUDENT_CLIENT_CONSOLE_CONFIG &&
            newForm.STUDENT_CODE_LOGIN_ALIAS ==
              this.originalRuleForm.STUDENT_CODE_LOGIN_ALIAS &&
            newForm.IDENTITY_NUMBER_LOGIN_ALIAS ==
              this.originalRuleForm.IDENTITY_NUMBER_LOGIN_ALIAS
          );
        } else {
          this.formDataChanged = false;
        }
      }
    }
  },
  computed: {
    ...mapState({ user: state => state.user }),
    btnSaveDiabled() {
      console.log(this.formDataChanged);
      return !this.formDataChanged;
    },
    isSuperAdmin() {
      return this.user.roleList.some(role => role.roleCode == "SUPER_ADMIN");
    }
  }
};
</script>
<style scoped>
.input-width {
  width: 638px;
}
.upload-width {
  width: 638px;
}
/* .btn-margin-left {
  margin-left: 20px;
} */
</style>