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

<template>
  <el-container>
    <el-main class="el-main-padding">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="200px"
        class="demo-ruleForm"
        :inline-message="true"
      >
        <el-form-item v-if="isSuperAdmin" label="学校">
          <el-select
            v-model="ruleForm.orgId"
            placeholder="请选择"
            style="width: 180px"
            filterable
          >
            <el-option
              v-for="item in rootSchoolSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="使用第三方登录"
          prop="STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY"
        >
          <el-switch
            v-model="ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item
          label="第三方登录页地址"
          prop="STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL"
        >
          <el-input
            v-model="ruleForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL"
            :disabled="!ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY"
            placeholder="请输入第三方登录页地址,以http://或https://开头"
            class="input-width"
          ></el-input>
        </el-form-item>
        <el-form-item label="展示我司logo" prop="SHOW_QMTH_LOGO">
          <el-switch
            v-model="ruleForm.SHOW_QMTH_LOGO"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item label="证件号隐私模式" prop="ID_NUMBER_PRIVATE_MODE">
          <el-switch
            v-model="ruleForm.ID_NUMBER_PRIVATE_MODE"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item
          label="展示APP下载二维码"
          prop="SHOW_STUDENT_CLIENT_APP_QRCODE"
        >
          <el-switch
            v-model="ruleForm.SHOW_STUDENT_CLIENT_APP_QRCODE"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item label="开放APP" prop="APP_ENABLED">
          <el-switch
            v-model="ruleForm.APP_ENABLED"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item label="开放微信小程序作答" prop="WEIXIN_ANSWER_ENABLED">
          <el-switch
            v-model="ruleForm.WEIXIN_ANSWER_ENABLED"
            on-text="是"
            off-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item
          label="活体检测方案"
          prop="IDENTIFICATION_OF_LIVING_BODY_SCHEME"
        >
          <el-radio-group
            v-model="ruleForm.IDENTIFICATION_OF_LIVING_BODY_SCHEME"
            class="input"
          >
            <el-radio label="S1">faceID</el-radio>
            <el-radio label="S2">自研活体</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="btnSaveDiabled"
            type="primary"
            @click="submitForm('ruleForm')"
            >保 存</el-button
          >
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import { CORE_API } from "@/constants/constants.js";

export default {
  data() {
    var validateUrl = (rule, value, callback) => {
      var ass = this.ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY;
      var reg = /^(http:\/\/|https:\/\/){1}.*$/;
      if (ass && !value) {
        return callback(new Error("请输入第三方登录页地址"));
      } else if (ass && !value.match(reg)) {
        return callback(new Error("url以http://或https://开头"));
      } else {
        callback();
      }
    };
    return {
      rootOrgList: [],
      propertyGroupId: "",
      formDataChanged: false,
      originalRuleForm: {},
      ruleForm: {
        relatedPropertyGroupIdList: [],
        orgId: null,
        STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY: false,
        SHOW_STUDENT_CLIENT_APP_QRCODE: false,
        STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL: "",
        SHOW_QMTH_LOGO: false,
        ID_NUMBER_PRIVATE_MODE: false,
        APP_ENABLED: false,
        WEIXIN_ANSWER_ENABLED: false,
        IDENTIFICATION_OF_LIVING_BODY_SCHEME: "",
        properties: {
          STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY: false,
          SHOW_STUDENT_CLIENT_APP_QRCODE: false,
          STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL: "",
          SHOW_QMTH_LOGO: false,
          ID_NUMBER_PRIVATE_MODE: false,
          APP_ENABLED: false,
          WEIXIN_ANSWER_ENABLED: false,
          IDENTIFICATION_OF_LIVING_BODY_SCHEME: "",
        },
      },
      rules: {
        STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL: [
          {
            validator: validateUrl,
            trigger: "change",
          },
        ],
      },
    };
  },
  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");
    },
    rootSchoolSelect() {
      let rootSchools = [];
      for (let i = 0; i < this.rootOrgList.length; i++) {
        let info = {
          name: this.rootOrgList[i].name + "（" + this.rootOrgList[i].id + "）",
          id: this.rootOrgList[i].id,
        };
        rootSchools.push(info);
      }
      return rootSchools;
    },
  },
  watch: {
    "ruleForm.orgId": {
      handler: function () {
        this.initForm();
      },
    },
    "ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY": {
      handler: function (val) {
        this.$refs["ruleForm"].validate();
        if (!val) {
          this.ruleForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL = "";
        }
      },
    },
    ruleForm: {
      deep: true,
      handler: function (newForm) {
        if (Object.keys(this.originalRuleForm).length > 0) {
          this.formDataChanged = !(
            newForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY ==
              this.originalRuleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY &&
            newForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL ==
              this.originalRuleForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL &&
            newForm.SHOW_QMTH_LOGO == this.originalRuleForm.SHOW_QMTH_LOGO &&
            newForm.ID_NUMBER_PRIVATE_MODE ==
              this.originalRuleForm.ID_NUMBER_PRIVATE_MODE &&
            newForm.APP_ENABLED == this.originalRuleForm.APP_ENABLED &&
            newForm.WEIXIN_ANSWER_ENABLED ==
              this.originalRuleForm.WEIXIN_ANSWER_ENABLED &&
            newForm.SHOW_STUDENT_CLIENT_APP_QRCODE ==
              this.originalRuleForm.SHOW_STUDENT_CLIENT_APP_QRCODE &&
            newForm.IDENTIFICATION_OF_LIVING_BODY_SCHEME ==
              this.originalRuleForm.IDENTIFICATION_OF_LIVING_BODY_SCHEME
          );
        } else {
          this.formDataChanged = false;
        }
      },
    },
  },
  created() {
    this.ruleForm.orgId = this.user.rootOrgId;
    this.propertyGroupId = "config4Edit1";
    if (this.isSuperAdmin) {
      this.$httpWithMsg
        .get(CORE_API + "/org/getRootOrgList")
        .then((response) => {
          this.rootOrgList = response.data;
        });
    }
    this.initForm();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.properties.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY = this.ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY;
          this.ruleForm.properties.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL = this.ruleForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL;
          this.ruleForm.properties.SHOW_QMTH_LOGO = this.ruleForm.SHOW_QMTH_LOGO;
          this.ruleForm.properties.ID_NUMBER_PRIVATE_MODE = this.ruleForm.ID_NUMBER_PRIVATE_MODE;
          this.ruleForm.properties.APP_ENABLED = this.ruleForm.APP_ENABLED;
          this.ruleForm.properties.WEIXIN_ANSWER_ENABLED = this.ruleForm.WEIXIN_ANSWER_ENABLED;
          this.ruleForm.properties.SHOW_STUDENT_CLIENT_APP_QRCODE = this.ruleForm.SHOW_STUDENT_CLIENT_APP_QRCODE;
          this.ruleForm.properties.IDENTIFICATION_OF_LIVING_BODY_SCHEME = this.ruleForm.IDENTIFICATION_OF_LIVING_BODY_SCHEME;

          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 {
          return false;
        }
      });
    },

    initForm() {
      this.ruleForm.relatedPropertyGroupIdList = ["studentClientConfig"];
      var url =
        CORE_API +
        "/org/getOrgPropertiesByGroupWithoutCache/" +
        this.ruleForm.orgId +
        "/" +
        this.propertyGroupId;
      this.$httpWithMsg.get(url).then((response) => {
        if (response) {
          this.ruleForm.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY =
            response.data.STUDENT_CLIENT_ACCESS_FROM_THIRD_PARTY == "true";
          this.ruleForm.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL =
            response.data.STUDENT_CLIENT_THIRD_PARTY_LOGIN_URL;
          this.ruleForm.SHOW_QMTH_LOGO = response.data.SHOW_QMTH_LOGO == "true";
          this.ruleForm.ID_NUMBER_PRIVATE_MODE =
            response.data.ID_NUMBER_PRIVATE_MODE == "true";

          this.ruleForm.APP_ENABLED = response.data.APP_ENABLED == "true";
          this.ruleForm.WEIXIN_ANSWER_ENABLED =
            response.data.WEIXIN_ANSWER_ENABLED == "true";
          this.ruleForm.SHOW_STUDENT_CLIENT_APP_QRCODE =
            response.data.SHOW_STUDENT_CLIENT_APP_QRCODE == "true";
          this.ruleForm.IDENTIFICATION_OF_LIVING_BODY_SCHEME =
            response.data.IDENTIFICATION_OF_LIVING_BODY_SCHEME;

          this.originalRuleForm = Object.assign({}, this.ruleForm);
        } else {
          this.$notify({
            message: "学校设置信息暂未初始化，请立即初始化",
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.input-width {
  width: 638px;
}
</style>