考生端登录界面图片

src/modules/basic/view/clientConfig.vue

@@ -41,6 +41,50 @@
                 class="input-width"
               ></el-input>
             </el-form-item>
+            <el-form-item label="考生端登录页图片">
+              <el-upload
+                ref="uploadClientBgPicture"
+                class="upload-width"
+                accept=".jpg,.png,.jpeg"
+                :action="uploadActionClientBgPicture"
+                :headers="uploadHeaders"
+                :data="uploadDataClientBgPicture"
+                :before-upload="beforeUploadClientBgPicture"
+                :on-success="uploadSuccessClientBgPicture"
+                :on-error="uploadError"
+                :on-remove="handleRemoveClientBgPicture"
+                :file-list="fileListClientBgPicture"
+                :auto-upload="false"
+                :multiple="false"
+                :limit="1"
+                :on-exceed="handleExceed"
+                list-type="picture"
+              >
+                <el-button slot="trigger" size="small" type="primary"
+                  >选择文件</el-button
+                >&nbsp;
+                <el-button
+                  size="small"
+                  type="success"
+                  @click="submitUploadClientBgPicture"
+                  >确认上传</el-button
+                >
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="handleRemoveClientBgPicture"
+                  >清空文件</el-button
+                >
+                <div slot="tip" class="el-upload__tip">
+                  图片宽高比3:2；宽至少为1200px，不超过2000px；小于1MB；.jpg
+                  .jpeg .png 文件
+                </div>
+              </el-upload>
+              <el-input
+                v-show="false"
+                v-model="ruleForm.STUDENT_CLIENT_BG_PICTURE_URL"
+              ></el-input>
+            </el-form-item>
             <el-form-item label="学校logo" prop="LOGO_FILE_URL">
               <el-upload
                 ref="upload"
@@ -453,6 +497,7 @@ export default {
         LOGIN_SUPPORT: "",
         IS_CUSTOM_MENU_LOGO: "false",
         CUS_MENU_LOGO_FILE_URL: "",
+        STUDENT_CLIENT_BG_PICTURE_URL: "",
         properties: {
           OE_STUDENT_SYS_NAME: "",
           LOGO_FILE_URL: "",
@@ -467,6 +512,7 @@ export default {
           LOGIN_SUPPORT: "",
           IS_CUSTOM_MENU_LOGO: "false",
           CUS_MENU_LOGO_FILE_URL: "",
+          STUDENT_CLIENT_BG_PICTURE_URL: "",
         },
         loginType: [],
         preventCheatingConfig: [],
@@ -481,6 +527,10 @@ export default {
       uploadHeaders: {},
       uploadData: {},
       fileList: [],
+
+      uploadActionClientBgPicture: "",
+      uploadDataClientBgPicture: {},
+      fileListClientBgPicture: [],
       menuRules: {
         name: [
           {
@@ -663,6 +713,8 @@ export default {
           this.formDataChanged = !(
             newForm.OE_STUDENT_SYS_NAME ==
               this.originalRuleForm.OE_STUDENT_SYS_NAME &&
+            newForm.STUDENT_CLIENT_BG_PICTURE_URL ==
+              this.originalRuleForm.STUDENT_CLIENT_BG_PICTURE_URL &&
             newForm.LOGO_FILE_URL == this.originalRuleForm.LOGO_FILE_URL &&
             this.equalArrayIgnoreSequence(
               newForm.loginType,
@@ -726,6 +778,74 @@ export default {
   },
 
   methods: {
+    beforeUploadClientBgPicture() {
+      if (!this.checkUploadClientBgPicture()) {
+        return false;
+      }
+    },
+    checkUploadClientBgPicture() {
+      let fileList = this.$refs.uploadClientBgPicture.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(".jpeg") &&
+          !fileName.endsWith(".png")
+        ) {
+          this.$notify({
+            message: "上传文件格式必须为jpg jpeg png",
+            type: "error",
+          });
+          this.fileListClientBgPicture = [];
+          return false;
+        }
+      }
+      return true;
+    },
+    uploadSuccessClientBgPicture(response) {
+      if (response && response.length > 0) {
+        this.$notify({
+          message: "上传成功",
+          type: "success",
+        });
+        let fileUrl = response;
+
+        this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL =
+          this.ruleForm.properties.STUDENT_CLIENT_BG_PICTURE_URL = fileUrl;
+      } else {
+        this.errDialog = true;
+      }
+      this.fileLoading = false;
+    },
+    handleRemoveClientBgPicture() {
+      this.fileListClientBgPicture = [];
+      this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL =
+        this.ruleForm.properties.STUDENT_CLIENT_BG_PICTURE_URL = "";
+      if (this.$refs.uploadClientBgPicture) {
+        this.$refs.uploadClientBgPicture.clearFiles();
+      }
+    },
+    submitUploadClientBgPicture() {
+      if (!this.checkUploadClientBgPicture()) {
+        return false;
+      }
+      this.$refs.uploadClientBgPicture.submit();
+      this.fileLoading = true;
+    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -742,6 +862,8 @@ export default {
 
           this.ruleForm.properties.OE_STUDENT_SYS_NAME =
             this.ruleForm.OE_STUDENT_SYS_NAME;
+          this.ruleForm.properties.STUDENT_CLIENT_BG_PICTURE_URL =
+            this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL;
           this.ruleForm.properties.LOGO_FILE_URL = this.ruleForm.LOGO_FILE_URL;
           this.ruleForm.properties.STUDENT_CLIENT_DEFAULT_SIZE =
             this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE;
@@ -862,6 +984,8 @@ export default {
 
     async initForm() {
       this.uploadAction = CORE_API + "/org/importLogo/" + this.ruleForm.orgId;
+      this.uploadActionClientBgPicture =
+        CORE_API + "/org/importClientBgPicture/" + this.ruleForm.orgId;
       this.uploadAnswer =
         CORE_API + "/org/importAnswers/" + this.ruleForm.orgId;
       this.ruleForm.STUDENT_CLIENT_DEFAULT_SIZE = "1400*900";
@@ -1031,7 +1155,9 @@ export default {
             this.ruleForm.properties.OE_STUDENT_SYS_NAME ||
             this.ruleForm.OE_STUDENT_SYS_NAME;
           // }
-
+          this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL =
+            this.ruleForm.properties.STUDENT_CLIENT_BG_PICTURE_URL ||
+            this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL;
           this.ruleForm.LOGO_FILE_URL =
             this.ruleForm.properties.LOGO_FILE_URL ||
             this.ruleForm.LOGO_FILE_URL;
@@ -1111,6 +1237,22 @@ export default {
             // console.log(defaultValue);
           }
 
+          let fileUrlClientBgPicture =
+            response.data.STUDENT_CLIENT_BG_PICTURE_URL;
+          if (fileUrlClientBgPicture) {
+            let lastIndex = fileUrlClientBgPicture.lastIndexOf("/");
+            let len = fileUrlClientBgPicture.length;
+            let fname = fileUrlClientBgPicture.substr(
+              lastIndex + 1,
+              len - lastIndex
+            );
+            this.fileListClientBgPicture = [
+              { name: fname, url: this.ruleForm.STUDENT_CLIENT_BG_PICTURE_URL },
+            ];
+          } else {
+            this.fileListClientBgPicture = [];
+          }
+
           let fileUrl = response.data.LOGO_FILE_URL;
           let fname = "";
           if (fileUrl) {