1. 添加了element-ui 2. 修改了选择题开放回答的弹框样式 3. 填写了开放性回答后刷新选项列表,将回答附加在选项后.当选择其他后重新刷新 4. 当选择了开放性回答进入下一题时进行校验

package-lock.json

@@ -260,6 +260,14 @@
       "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -562,8 +570,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
-      "dev": true
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -1091,7 +1098,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -2023,8 +2029,7 @@
     "core-js": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
-      "dev": true
+      "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3081,6 +3086,11 @@
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -3357,6 +3367,19 @@
       "integrity": "sha512-jasjtY5RUy/TOyiUYM2fb4BDaPZfm6CXRFeJDMfFsXYADGxUN49RBqtgB7EL2RmJXeIRUk9lM1U6A5yk2YJMPQ==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
+      "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.0.tgz",
@@ -4116,7 +4139,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4137,12 +4161,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4157,17 +4183,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4284,7 +4313,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4296,6 +4326,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4310,6 +4341,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4317,12 +4349,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4341,6 +4375,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4421,7 +4456,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4433,6 +4469,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4518,7 +4555,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4554,6 +4592,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4573,6 +4612,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4616,12 +4656,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -5473,7 +5515,8 @@
     },
     "js-yaml": {
       "version": "3.7.0",
-      "resolved": "",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
+      "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -6263,6 +6306,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9377,8 +9425,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -9505,6 +9552,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
@@ -10432,6 +10484,11 @@
       "integrity": "sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "element-ui": "^2.13.2",
     "mint-ui": "^2.2.13",
     "vue": "^2.5.2",
     "vue-axios": "^2.1.4"

src/components/WebQn.vue

@@ -81,7 +81,6 @@ import axios from "axios";
 import dateFormat from "../dateFormat.js";
 import indicatorBiz from "../indicatorBiz.js";
 import Vue from "vue";
-import { MessageBox } from "mint-ui";
 
 // CREATED(0, "已创建"),
 // CLICKED(1, "已点击"),
@@ -90,9 +89,6 @@ import { MessageBox } from "mint-ui";
 
 export default {
   name: "WebQn",
-  data: function() {
-    return {};
-  },
   data: function() {
     return {
       webQuestionaire: {},
@@ -119,7 +115,11 @@ export default {
       historyStack: [],
       nextBtnVisible: true,
       webQnUrl: "",
-      lastCheckList: []
+      lastCheckList: [],
+
+      // 选择题选中开放式选项的开放回答值
+      selectedOpenIndex: "",
+      selectedOpenValue: "",
     };
   },
   mounted: function() {
@@ -269,6 +269,8 @@ export default {
     questionOptions() {
       console.log("call questionOptions");
       let opts = [];
+      let openValue = this.selectedOpenValue;
+      let openIndex = this.selectedOpenIndex;
       if (this.upperDatasourceQuestion == 0) {
         opts = this.currentQuestion.options;
       } else {
@@ -310,15 +312,18 @@ export default {
         opts = subOptions;
       }
       // 组装成 mt-radio 或 mt-checklist 组件需要的格式
-      for (let i = 0; i < opts.length; i++) {
+      for (var index = 0; index < opts.length; index++) {
         // let label = `${i + 1}、${opts[i].optionContent}`;
-        let label = `${opts[i].optionContent}`;
-        let value = i.toString();
-        Vue.set(opts[i], "label", label);
-        Vue.set(opts[i], "value", value);
+        let label = `${opts[index].optionContent}`;
+        if (openIndex == index && opts[index].open && openValue) {
+          label = label + "(" + openValue + ")";
+        } 
+        let value = index.toString();
+        Vue.set(opts[index], "label", label);
+        Vue.set(opts[index], "value", value);
       }
       return opts;
-    }
+    },
   },
   watch: {
     questionHEAD() {
@@ -448,13 +453,19 @@ export default {
         selectedOpt = this.questionOptions[index];
       }
       // 处理开放选项
+      this.selectedOpenIndex = "";
+      this.selectedOpenValue = "";
       if (selectedOpt.open) {
-        MessageBox.prompt(selectedOpt.openOptionTips, "请填写").then(
-          ({ value }) => {
-            console.log(`Dialog value: ${value}, `);
-            this.answerNote[selectedOpt.id] = value;
-          }
-        );
+        this.$prompt(selectedOpt.openOptionTips, "请填写", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          customClass: "select-open-dialog",
+        }).then(({ value }) => {
+          console.log(`Dialog value: ${value}, `);
+          this.selectedOpenValue = value;
+          this.selectedOpenIndex = index;
+          this.answerNote[selectedOpt.id] = value;
+        });
       }
     },
     onQuestionLoaded(isBack) {
@@ -536,6 +547,10 @@ export default {
           alert(`最少需选中${this.currentQuestion.minOptions}项`);
           return;
         }
+        if(this.selectedOpenIndex && !this.selectedOpenValue){
+          alert("请填写开放性选项答案")
+          return;
+        }
 
         // 确定答案
         // this.answers[questionId] = selectionIds.join(',');
@@ -655,12 +670,7 @@ export default {
           .then(() => {
             // this.updateAnswerSheetDataUploaded(true);
             // alert('问卷结果已提交');
-            if (this.openWay == "Project") {
-              this.webQuestionaire.status = 3;
-            } else {
-              // 登录状态打开方式
-              this.webQuestionaire.status = 3;
-            }
+            this.webQuestionaire.status = 3;
           });
       }
     },
@@ -741,4 +751,10 @@ export default {
   margin-top: 40px;
   margin-left: 2%;
 }
-</style>
+</style>
+
+<style>
+.select-open-dialog {
+  width: 50%;
+}
+</style>

src/main.js

@@ -4,9 +4,12 @@ import Vue from 'vue'
 import App from './App'
 import axios from 'axios';
 import MintUI from 'mint-ui'
+import ElementUI from 'element-ui';
 import 'mint-ui/lib/style.css'
+import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.use(MintUI)
+Vue.use(ElementUI);
 Vue.config.productionTip = false;
 Vue.prototype.$baseUrl = process.env.ROOT_API;