@wg-npm/survey-response 0.5.1 → 0.5.123

package/src/components/question/type/multi-selection.vue

@@ -1,6 +1,6 @@
 <template>
   <FormItem
-    :prop="`answers[${index}].answer`"
+    :prop="answerProp"
     :rules="{
       required: question.options.required && !question.options.disabled,
       type: 'array',
@@ -9,14 +9,15 @@
     }"
   >
     <CheckboxGroup v-model="value.answer" @on-change="selChange">
-      <Row type="flex" justify="start" :gutter="60">
+      <Row :type="flexOrBlock" justify="start" :gutter="60" :style="{'display':(isMobile()?'inline-block':'flex')}">
         <Col
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"
-          style="display: flex"
+          :style="{'display':(isMobile()?'inline-block':'flex')}"
         >
           <Checkbox
+            :style="{'display':(isMobile()?'inline-block':'flex'),'align-items':(isMobile()?'':'center')}"
             :label="choice.id"
             :key="choice.id"
             :disabled="
@@ -37,7 +38,7 @@
                 choice.id === inputAnswer.choiceId &&
                 value.answer.includes(choice.id)
               "
-              :prop="`answers[${index}].inputAnswers[${inputIndex}].inputText`"
+              :prop="inputAnswerProp(inputIndex)"
               :rules="[
                 {
                   required: true,
@@ -54,10 +55,12 @@
                 },
               ]"
             >
-              <Input
-                :disabled="question.options.readonly || choice.readonly"
-                v-model.trim="inputAnswer.inputText"
+                <Span v-if="responseStatus=='ENABLED'">
+                    {{ inputAnswer.inputText }}</Span>
+              <Input v-if="responseStatus=='DRAFT'"
+                     v-model.trim="inputAnswer.inputText"
               />
+
             </FormItem>
           </div>
         </Col>
@@ -66,125 +69,134 @@
   </FormItem>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import _ from "lodash";
-import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import {
-  FormItem,
-  CheckboxGroup,
-  Checkbox,
-  Row,
-  Col,
-  Input,
-} from "view-design";
-
-export default Vue.extend({
-  name: "multi-selection",
-  inject: ["$rootComponent"],
-  mixins: [OptionLayoutMixin],
-  components: {
+  import Vue from "vue";
+  import _ from "lodash";
+  import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
+  import QuestionMixin from "../../../mixins/question-mixin";
+  import {
     FormItem,
     CheckboxGroup,
     Checkbox,
     Row,
     Col,
-    Input,
-  },
-  props: {
-    question: {
-      type: Object,
-      required: true,
+    Input
+  } from "view-design";
+
+  export default Vue.extend({
+    name: "multi-selection",
+    inject: ["responseStatus", "$rootComponent"],
+    mixins: [OptionLayoutMixin, QuestionMixin],
+    components: {
+      FormItem,
+      CheckboxGroup,
+      Checkbox,
+      Row,
+      Col,
+      Input
     },
-    index: Number,
-    answer: {
-      type: Object,
-      required: true,
+    props: {
+      question: {
+        type: Object,
+        required: true
+      },
+      answer: {
+        type: Object,
+        required: true
+      }
     },
-  },
-  data() {
-    return {
-      value: this.answer,
-    };
-  },
-  watch: {
-    answer(n) {
-      this.value = n;
+    data() {
+      return {
+        value: this.answer
+      };
     },
-  },
-  methods: {
-    setCheckboxStatus() {
-      let exclusiveChoiceId = "";
-      const notExclusiveChoices = new Array();
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
-        if (choice.options.exclusiveEnabled) {
-          exclusiveChoiceId = choice.id;
+    watch: {
+      answer(n) {
+        this.value = n;
+      }
+    },
+    computed: {
+      flexOrBlock() {
+        if (this.isMobile()) {
+          return "inline-block";
         } else {
-          notExclusiveChoices.push(choice);
+          return "flex";
         }
-      });
+      }
+    },
+    methods: {
+      inputAnswerProp(inputIndex) {
+        return this.isMoreSurvey
+          ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
+          : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
+      },
+      setCheckboxStatus() {
+        let exclusiveChoiceId = "";
+        const notExclusiveChoices = new Array();
+        // @ts-ignore
+        _.each(this.question.choices, (choice) => {
+          if (choice.options.exclusiveEnabled) {
+            exclusiveChoiceId = choice.id;
+          } else {
+            notExclusiveChoices.push(choice);
+          }
+        });
 
-      // @ts-ignore
-      _.each(notExclusiveChoices, (choice) => {
         // @ts-ignore
-        choice.readonly = _.includes(this.value.answer, exclusiveChoiceId);
-      });
-    },
-    selChange(val) {
-      let score = 0;
-      let minStarCount = 0;
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
+        _.each(notExclusiveChoices, (choice) => {
+          // @ts-ignore
+          choice.readonly = _.includes(this.value.answer, exclusiveChoiceId);
+        });
+      },
+      selChange(val) {
+        let score = 0;
+        let minStarCount = 0;
         // @ts-ignore
-        _.each(val, (id) => {
-          if (choice.id == id) {
-            if (choice.options.exclusiveEnabled) {
-              this.value.answer = [id];
-              score = parseInt(choice?.options?.score ?? 0);
-              minStarCount = 1;
-            } else {
-              score += parseInt(choice?.options?.score ?? 0);
-              minStarCount++;
+        _.each(this.question.choices, (choice) => {
+          // @ts-ignore
+          _.each(val, (id) => {
+            if (choice.id == id) {
+              if (choice.options.exclusiveEnabled) {
+                this.value.answer = [id];
+                score = parseInt(choice?.options?.score ?? 0);
+                minStarCount = 1;
+              } else {
+                score += parseInt(choice?.options?.score ?? 0);
+                minStarCount++;
+              }
             }
+          });
+        });
+
+        //处理输入题
+        _.forEach(this.value.inputAnswers, (input) => {
+          if (!_.includes(val, input.choiceId)) {
+            input.inputText = null;
           }
         });
-      });
+        this.setCheckboxStatus();
 
-      //处理输入题
-      _.forEach(this.value.inputAnswers, (input) => {
-        if (!_.includes(val, input.choiceId)) {
-          input.inputText = null;
+        // @ts-ignore
+        this.answer.score = score;
+        if (this.question.options.starEnabled) {
+          this.answer.star =
+            minStarCount >= this.question.options.starMinCount ? 1 : 0;
         }
-      });
-      this.setCheckboxStatus();
-
-      // @ts-ignore
-      this.answer.score = score;
-      if (this.question.options.starEnabled) {
-        this.answer.star =
-          minStarCount >= this.question.options.starMinCount ? 1 : 0;
       }
-    },
-  },
-});
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.ivu-row-flex-start {
-  align-items: center;
-}
-.ivu-checkbox-group-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
+  .choice-title {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
 
-.choice-title {
-  margin-left: 8px;
-  margin-right: 8px;
-}
+  .choice-score {
+    margin-right: 8px;
+  }
 
-.choice-score {
-  margin-right: 8px;
-}
+  .ivu-checkbox-wrapper {
+    white-space: nowrap;
+  }
 </style>

package/src/components/question/type/quill-rich-text.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <div ref="editor"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+import { EventBus } from "../../../event-bus";
+import LocalMixin from "../../../mixins/locale-mixin.ts";
+import { consts } from "../../../constants.ts";
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "QuillEditor",
+  inject: {
+    showVideoScreenShotButton: {
+      default: false,
+    },
+    $rootComponent: {
+      default: {},
+    },
+  },
+  mixins: [LocalMixin],
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    maxlength: {
+      type: Number,
+      default: 5000,
+    },
+  },
+  mounted() {
+    this.initQuill();
+    EventBus.$on("screen-shot-urls", this.addScreenShotUrl);
+    this.componentId = this.generateRandomId();
+  },
+  computed: {
+    imageCount() {
+      if (this.value) {
+        let imgTagRegex = /<img\s[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/g;
+        let matches = this.value.match(imgTagRegex);
+        return matches ? matches.length : 0;
+      }
+      return 0;
+    },
+  },
+  methods: {
+    addScreenShotUrl(screenData) {
+      if (this.componentId === screenData.messageId) {
+        if (this.imageCount > consts.RICH_TEXT_IMAGE_COUNT_LIMIT) {
+          this.$Message.error(
+            this.getLocaleValue(
+              "survey_response.common.tips.upload_image_exceed_the_limit"
+            )
+          );
+          return;
+        }
+        for (let url of screenData.urls) {
+          this.insertImageUrl(url);
+        }
+      }
+    },
+    insertImageEmbed(url) {
+      let range = this.quill.getSelection();
+      if (!range) {
+        range = { index: this.quill.getLength(), length: 0 };
+      }
+      this.quill.insertEmbed(range, "image", url, "user");
+      this.$nextTick(() => {
+        this.quill.update("user");
+      });
+    },
+    insertImageUrl(url) {
+      if (url) {
+        let range = this.quill.getSelection();
+        if (!range) {
+          range = { index: this.quill.getLength(), length: 0 };
+        }
+        const imgTag = `<img src="${url}" alt="image load fail">`;
+        this.quill.clipboard.dangerouslyPasteHTML(range.index, imgTag);
+        this.quill.setSelection(range.index + 1);
+      }
+    },
+    changeVideoScreenShotButtonName() {
+      // 查找自定义按钮并更新其文本
+      const toolbar = this.quill.getModule("toolbar");
+      const buttons = toolbar.container.querySelectorAll(
+        "button.ql-video-screen-shot"
+      );
+      if (buttons.length > 0) {
+        let button = buttons[0];
+        button.innerHTML = this.getLocaleValue(
+          "survey_response.common.tips.get_screen_shot_name"
+        );
+        button.style.padding = "2px";
+        button.style.fontSize = "12px";
+        button.style.color = "rgb(105, 140, 208)";
+        button.style.border = "1px solid rgb(105, 140, 208)";
+        button.style.borderRadius = "4px";
+        button.style.width = "auto";
+        button.style.display = "flex";
+        button.style.alignItems = "center";
+      }
+    },
+    initQuill() {
+      let toolbarOptions = [
+        [
+          "bold",
+          "italic",
+          "underline",
+          "strike",
+          { list: "ordered" },
+          { list: "bullet" },
+          { color: [] },
+          { background: [] },
+          { align: [] },
+          "clean",
+        ],
+      ];
+      if (this.showVideoScreenShotButton) {
+        toolbarOptions.push([{ "video-screen-shot": "video-screen-shot" }]);
+      }
+      this.quill = new Quill(this.$refs.editor, {
+        theme: "snow", // 或者 'bubble'
+        placeholder: this.disabled ? "" : this.placeholder,
+        readOnly: this.disabled,
+        modules: {
+          toolbar: this.disabled
+            ? false
+            : {
+                container: toolbarOptions,
+                handlers: {
+                  "video-screen-shot": this.customVideoScreenShot,
+                },
+              },
+        },
+      });
+      this.quill.root.innerHTML = this.value;
+      this.quill.on("text-change", this.handleTextChange);
+      //quill 剪切事件自定义处理
+      this.quill.root.addEventListener("paste", this.handlePaste, true);
+      if (this.showVideoScreenShotButton && !this.disabled) {
+        this.changeVideoScreenShotButtonName();
+      }
+    },
+    handleTextChange() {
+      let text = this.quill.getText().trim();
+      if (text.length > this.maxlength) {
+        this.quill.deleteText(this.maxlength, text.length);
+        this.$Message.error(
+          this.getLocaleValue("survey_response.common.tips.max_length_hint")
+        );
+      }
+      text = this.quill.getText();
+      let html = this.quill.root.innerHTML;
+      //手动删除文字时，删空富文本留下的内容是<p><br></p>。需要将内容修改为'',外层必填校验才会生效
+      if (html.trim() === "<p><br></p>") {
+        // 设置编辑器内容为空
+        this.quill.root.innerHTML = "";
+        html = "";
+      }
+      this.$emit("input", html);
+    },
+    handlePaste(event) {
+      if (this.imageCount > consts.RICH_TEXT_IMAGE_COUNT_LIMIT) {
+        this.$Message.error(
+          this.getLocaleValue(
+            "survey_response.common.tips.upload_image_exceed_the_limit"
+          )
+        );
+        return;
+      }
+      let clipboard = event.clipboardData || window.clipboardData;
+      // IE 11 is .files other browsers are .items
+      if (clipboard && (clipboard.items || clipboard.files)) {
+        let items = clipboard.items || clipboard.files;
+        const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png|svg|webp)$/i;
+
+        for (let i = 0; i < items.length; i++) {
+          if (IMAGE_MIME_REGEX.test(items[i].type)) {
+            let file = items[i].getAsFile ? items[i].getAsFile() : items[i];
+
+            if (file) {
+              this.quill.focus();
+              this.range = this.quill.getSelection();
+              event.preventDefault();
+              setTimeout(() => {
+                this.quill.focus();
+                this.range = this.quill.getSelection();
+                this.uploadAndInsertImage(file);
+              }, 0);
+            }
+          }
+        }
+      }
+    },
+    customVideoScreenShot() {
+      //获取视频截图
+      EventBus.$emit("get-screen-shot-image", this.componentId);
+    },
+    generateRandomId() {
+      return "id-" + Math.random().toString(36).slice(2, 11) + "-" + Date.now();
+    },
+    getLocaleValue(key) {
+      return this.t(key, this.$rootComponent.currentLanguage);
+    },
+    uploadAndInsertImage(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      let qmsAxios = this.$serverHttp;
+      if (qmsAxios) {
+        qmsAxios
+          .post("/api/storage/upload/file", formData)
+          .then((response) => {
+            if (response.status === 200 && response.data.data) {
+              let imageUrl = response.data.data.downloadUrl;
+              this.insertImageUrl(imageUrl);
+            }
+          })
+          .catch((error) => {
+            console.log("upload fail", error);
+            this.$Message.error(
+              this.getLocaleValue("survey_response.common.tips.upload_fail")
+            );
+          });
+      }
+    },
+  },
+  data() {
+    return {
+      quill: null,
+      componentId: null,
+    };
+  },
+  watch: {
+    value(newValue) {
+      if (newValue !== this.quill.root.innerHTML) {
+        this.quill.root.innerHTML = newValue;
+        this.$nextTick(() => {
+          this.quill.setSelection(newValue.length);
+        });
+      }
+    },
+  },
+  beforeDestroy() {
+    // 移除事件监听器
+    EventBus.$off("screen-shot-urls", this.handleScreenShotUrl);
+    this.quill.root.removeEventListener("paste", this.handlePaste);
+  },
+});
+</script>
+<style src="quill/dist/quill.snow.css"></style>
+<style src="quill/dist/quill.core.css"></style>
+<style>
+/* Quill的基本样式已经包含在引入的CSS文件中，如有需要，可以在这里添加额外的样式 */
+
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 0 4px 2px 4px;
+}
+.ql-snow .ql-editor img {
+  max-width: 600px;
+  height: auto;
+  width: 100%;
+}
+.ql-editor {
+  box-sizing: border-box;
+  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
+    list-9;
+  line-height: 1.42;
+  height: 100%;
+  outline: 0;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 500px;
+}
+</style>