cnhis-design-vue 0.2.65-beta → 0.2.68-beta

package/packages/scale-view/answerParse.vue

@@ -5,7 +5,7 @@
         <svg-icon :iconClass="answerIcon"></svg-icon>
         {{ answerResText }}
       </div>
-      <div v-if="answerSuccess"> 本题得分：{{ questionScore }}分 </div>
+      <div v-if="answerSuccess"> {{ scoreText }}得分：{{ questionScore }}分 </div>
     </div>
     <div class="correct-answer" v-if="correctAnswer">
       <p>正确答案：</p>
@@ -37,8 +37,17 @@ export default {
       return this.answerSuccess ? "xitongtubiaodui" : "xitongtubiaocuo";
     },
     answerResText() {
+      if ("questionPartScore" in this.item) {
+        return "部分正确";
+      }
       return this.answerSuccess ? "回答正确" : "回答错误";
     },
+    scoreText() {
+      if ("questionPartScore" in this.item) {
+        return "部分";
+      }
+      return "本题";
+    },
     correctAnswer() {
       let { correctAnswer } = this.item?.scoreConfigs || {};
       return correctAnswer;

package/packages/scale-view/formitem/r-choice.vue

@@ -10,30 +10,42 @@
       <a-radio
         v-for="(o, i) in curOptions"
         class="choice-radio"
-        :value="o.value"
-        :key="o.value + i"
+        :value="o[choiceUseKey]"
+        :key="o.key + i"
         :class="{ 'block-radio': !item.setting.isHorizontal }"
         :disabled="isLock"
         :style="{ color: choiceColor(o) }"
       >
-        <!-- <text-over-tooltip
-          :refName="'chooseValue' + curIndex + i"
-          class="choose-value"
-          :content="o.label"
-          :textColor="choiceColor(o)"
-        ></text-over-tooltip> -->
-        <!-- <a-tooltip :title="o.label">
-          {{ o.label }}
-        </a-tooltip> -->
-         {{ o.label }}
-
-        <a-input
-          v-model="othersText"
-          :disabled="isLock"
-          v-if="o.importability"
-          @change="inputChange"
-          :style="{ color: choiceColor(o) }"
-        />
+        <template v-if="showImgWrap(o)">
+          <span class="scale-choice-img-wrap">
+            <img class="show-picture" :src="o.imageUrl" />
+            <div class="scale-preview-wrap">
+              <a-icon type="zoom-in" @click.stop.prevent="handlePreview(o.imageUrl, i)" />
+            </div>
+          </span>
+        </template>
+         <template>
+            <template v-if="isRadioItem && showPreSuffix(o)">
+              <span v-if="o.prefix" class="prefix-span" :style="{ color: choiceColor(o) }">{{ o.prefix }}</span>
+              <a-input
+                v-model="optionsPreSuffixObj[o.key]"
+                :disabled="isLock || inputLock"
+                @change="inputPreSuffixChange(o, i)"
+                :style="{ color: choiceColor(o) }"
+                placeholder="请输入"
+              />
+              <span v-if="o.suffix" class="suffix-span"  :style="{ color: choiceColor(o) }">{{ o.suffix }}</span>
+            </template>
+          <span v-else :style="{ color: choiceColor(o) }">{{ o.label }}</span>
+          <a-input
+            v-if="o.importability"
+            v-model="othersText"
+            :disabled="isLock || inputLock"
+            :style="{ color: choiceColor(o) }"
+            placeholder="请输入"
+            @change="inputChange"
+          />
+        </template>
       </a-radio>
     </a-radio-group>
     <a-checkbox-group
@@ -45,29 +57,45 @@
     >
       <a-checkbox
         class="choice-checkbox"
-        v-for="(o) in curOptions"
-        :key="o.value"
-        :value="o.value"
+        v-for="(o, i) in curOptions"
+        :key="o.key + i"
+        :value="o[choiceUseKey]"
         :class="{ 'block-checkbox': !item.setting.isHorizontal }"
         :disabled="isLock"
+        :style="{ color: choiceColor(o) }"
       >
-        <!-- <a-tooltip :title="o.label">
-          {{ o.label }}
-        </a-tooltip> -->
-        <span style="white-space: initial;">
-          {{ o.label }}
-        </span>
-        <!-- <text-over-tooltip
-          :refName="'chooseValue' + curIndex + i"
-          class="choose-value"
-          :content="o.label"
-        ></text-over-tooltip> -->
-        <a-input
-          v-model="othersText"
-          :disabled="isLock"
-          v-if="o.importability"
-          @change="inputCheckboxChange"
-        />
+        <template v-if="showImgWrap(o)">
+          <span class="scale-choice-img-wrap">
+            <img class="show-picture" :src="o.imageUrl" />
+            <div class="scale-preview-wrap">
+              <a-icon type="zoom-in" @click.stop.prevent="handlePreview(o.imageUrl, i)" />
+            </div>
+          </span>
+        </template>
+        <template>
+          <template v-if="isCheckboxItem && showPreSuffix(o)">
+            <span v-if="o.prefix" class="prefix-span" :style="{ color: choiceColor(o) }">{{ o.prefix }}</span>
+            <a-input
+              v-model="optionsPreSuffixObj[o.key]"
+              :disabled="isLock || inputLock"
+              @change="inputPreSuffixCheckboxChange(o, i)"
+              :style="{ color: choiceColor(o) }"
+              placeholder="请输入"
+            />
+            <span v-if="o.suffix" class="suffix-span" :style="{ color: choiceColor(o) }">{{ o.suffix }}</span>
+          </template>
+          <span v-else style="white-space: initial;" :style="{ color: choiceColor(o) }">
+            {{ o.label }}
+          </span>
+          <a-input
+            v-if="o.importability"
+            v-model="othersText"
+            :disabled="isLock || inputLock"
+            :style="{ color: choiceColor(o) }"
+            @change="inputCheckboxChange"
+            placeholder="请输入"
+          />
+      </template>
       </a-checkbox>
     </a-checkbox-group>
     <a-select
@@ -97,6 +125,19 @@
       :disabled="isLock"
       change-on-select
     />
+
+    <!-- 图片预览 -->
+    <viewer
+      class="viewer"
+      ref="viewer"
+      :images="previewImages"
+      @inited="inited"
+      style="display: none"
+    >
+      <template slot-scope="scope">
+        <img v-for="src in scope.images" :src="src" :key="src" />
+      </template>
+    </viewer>
   </div>
 </template>
 
@@ -112,12 +153,15 @@ import { judgeTypes } from "../mixin/judgeTypes";
 // import TextOverTooltip from "./text-over-tooltip/TextOverTooltip.vue";
 import utils from "@/utils/utils-map";
 import axios from 'axios';
+import 'viewerjs/dist/viewer.css';
+import { component as Viewer } from "v-viewer";
 export default {
   mixins: [judgeTypes],
   props: {
     value: { default: undefined, type: [String, Array, Number] },
     item: { type: Object, default: () => {} },
     isLock: { type: Boolean, default: false },
+    inputLock: { type: Boolean, default: false },
     curIndex: Number,
     getSelectOptions: {
       type: Function,
@@ -134,7 +178,7 @@ export default {
     openType: { type: String, default: "" }
   },
   components: {
-    // TextOverTooltip,
+    Viewer,
     [Input.name]: Input,
     [Cascader.name]: Cascader,
     [Checkbox.name]: Checkbox,
@@ -153,10 +197,30 @@ export default {
         this.$emit("input", val);
       }
     },
+    choiceUseKey() {
+      if (this.item.type === "RADIO_BLOCK" || this.item.type === "CHECKBOX_BLOCK") return "key";
+      return "value";
+    },
     choiceColor() {
       return function(p) {
-        if (this.item.type != "RADIO_BLOCK") return "rgba(0, 0, 0, 0.65)";
-        return p.color || "rgba(0, 0, 0, 0.65)";
+        let color = p.color || "rgba(0, 0, 0, 0.65)";
+        return `${color} !important`;
+      };
+    },
+    showImgWrap() {
+      return function(o) {
+        return !o.prefix && !o.suffix && o.imageUrl;
+      };
+    },
+    isRadioItem() {
+      return this.item.type === "RADIO_BLOCK";
+    },
+    isCheckboxItem() {
+      return this.item.type === "CHECKBOX_BLOCK";
+    },
+    showPreSuffix() {
+      return function(o) {
+        return o.prefix || o.suffix;
       };
     }
   },
@@ -171,7 +235,7 @@ export default {
           options = value.scoreConfigs?.scoreRules || [];
         }
         if (value.type === "RADIO_BLOCK" || value.type === "EVALUATE_RADIO_BLOCK") {
-          const defVal = value.dbValue || value.setting.defaultValue;
+          const defVal = value.dbValue || value.setting.defaultValue || this.value;
           this.handleRadioDef(value, defVal, options);
           return;
         }
@@ -179,6 +243,8 @@ export default {
           let defVal = [];
           if (utils.isJSON(value.setting.defaultValue)) {
             defVal = JSON.parse(value.setting.defaultValue);
+          } else {
+            defVal = this.value;
           }
           this.handleCheckboxDef(value, value.dbValue || defVal, options);
           return;
@@ -213,61 +279,171 @@ export default {
       fieldList: [],
       buttonList: [],
       source: "guageChoice",
-      fetching: false
+      fetching: false,
+      previewImages: [],
+      optionsPreSuffixObj: {}
     };
   },
   methods: {
     handleRadioDef(item, curValue, options) {
-      this.curOptions = options.filter(v => v.label);
+      this.curOptions = this.handleOptions(options, item.type);
       if (!options.length || !curValue) return;
-      this.curvalue = curValue;
+      // 测评单选回显
+      if (item.type === "EVALUATE_RADIO_BLOCK") {
+        this.curvalue = curValue;
+        this.radioChange();
+        return;
+      }
+      // 普通单选回显 普通选项/其它/前后缀 所以用key标识
       let hasOther = options.find(v => v.value === curValue);
-      if (!hasOther) {
+      if (hasOther) {
+        this.curvalue = hasOther.key;
+        this.radioChange();
+        return;
+      }
+      let preSuffixItem = options.find((v, i) => {
+        let res = this.handleDefPreSuffix(v, i, curValue);
+        if (res) {
+          this.curvalue = res;
+        }
+        return !!res || false;
+      });
+      if (!preSuffixItem) {
         this.othersText = curValue;
-        this.curvalue = "其他";
+        this.curvalue = "other";
+      }
+      this.radioChange();
+    },
+    handleDefPreSuffix(v, i, curValue, isCheckbox, hasOther) {
+      if (v.prefix || v.suffix) {
+        let value = v.value;
+        // 有前后缀的option input为必填, 如果直接相等则为other
+        if (value === curValue) return false;
+        if (v.prefix) {
+          if (curValue.indexOf(v.prefix) === 0) {
+            let inputValue = curValue.substring(v.prefix.length);
+            this.$set(this.optionsPreSuffixObj, v.key, inputValue);
+            return v.key;
+          }
+        }
+        if (v.suffix) {
+          let lastIndexOf = curValue.lastIndexOf(v.suffix);
+          lastIndexOf + v.suffix.length;
+          if (curValue.length === lastIndexOf + v.suffix.length) {
+            let index = curValue.lastIndexOf(v.suffix);
+            let inputValue = curValue.substring(0, index);
+            this.$set(this.optionsPreSuffixObj, v.key, inputValue);
+            return v.key;
+          }
+        }
+      }
+      if (curValue === v.value) return v.key;
+      if (isCheckbox && hasOther) {
+        this.othersText = curValue;
+        return "other";
       }
     },
     async handleCheckboxDef(item, curValue, options) {
-      this.curOptions = options.filter(v => v.label);
+      this.curOptions = this.handleOptions(options, item.type);
       if (!options.length || !curValue || !curValue.length) return;
-      this.curCheckboxValue = curValue;
-      let op = options.map(v => v.value);
-      let minus = curValue.filter(x => op.indexOf(x) == -1) || [];
-      if (minus.length) {
-        let tempValue = minus[0];
-        let valueIndex = curValue.findIndex(v => v === tempValue);
-        this.othersText = tempValue;
-        this.curCheckboxValue[valueIndex] = "其他";
+      // 测评多选回显
+      if (item.type === "EVALUATE_CHECKBOX_BLOCK") {
+        this.curCheckboxValue = curValue;
+        this.handleCheckboxOther();
+        return;
+      }
+      // 普通多选回显 普通选项/其它/前后缀 所以用key标识
+      let resArr = [],
+        i = 0,
+        x,
+        len = curValue.length;
+      let hasOther = options.some(v => v.importability || v.key === "other");
+      for (; i < len; i++) {
+        x = curValue[i];
+        if (x === "其他") {
+          this.othersText = x;
+          this.curvalue = "other";
+          !resArr.includes("other") && resArr.push("other");
+          continue;
+        }
+        let matchIndex = options.findIndex(v => v.value === x);
+        if (matchIndex > 0) {
+          let res = options[matchIndex]?.key;
+          !resArr.includes(res) && resArr.push(res);
+          continue;
+        }
+        options.map(v => {
+          let res = this.handleDefPreSuffix(v, i, x, true, hasOther);
+          res && !resArr.includes(res) && resArr.push(res);
+        });
       }
+      this.curCheckboxValue = resArr;
+      this.handleCheckboxOther();
+    },
+    handleOptions(options, type) {
+      return (
+        options
+          .map((v, i) => {
+            if (v.prefix || v.suffix) {
+              this.$set(this.optionsPreSuffixObj, v.key, undefined);
+              return v;
+            }
+            if (v.label) return v;
+            return null;
+          })
+          .filter(Boolean) || []
+      );
     },
     radioChange() {
-      if (this.curvalue === "其他") {
-        this.$emit("radioChange", this.othersText || this.curvalue, this.item);
-      } else {
-        this.$emit("radioChange", this.curvalue, this.item);
-      }
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      this.$emit("radioChange", this.curvalue, this.item, choiceObj);
     },
     checkboxChange() {
-      this.handleCheckboxOther(true);
+      this.handleCheckboxOther();
     },
     inputChange() {
-      if (this.curvalue === "其他") {
-        this.$emit("radioChange", this.othersText || "其他", this.item);
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      this.curvalue = "other";
+      this.$emit("radioChange", "other", this.item, choiceObj);
+    },
+    inputPreSuffixChange(o, i) {
+      this.curvalue = o.key;
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      this.$emit("radioChange", this.curvalue, this.item, choiceObj);
+    },
+    inputPreSuffixCheckboxChange(o, i) {
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      if (!this.curCheckboxValue.includes(o.key)) {
+        this.curCheckboxValue.push(o.key);
       }
+      let curCheckboxValue = JSON.parse(JSON.stringify(this.curCheckboxValue));
+      this.$emit("checkboxChange", curCheckboxValue, this.item, choiceObj);
     },
     inputCheckboxChange() {
-      this.handleCheckboxOther();
+      this.handleCheckboxOther(true);
     },
-    handleCheckboxOther(isContinue = false) {
-      let hasOther = this.curCheckboxValue?.some(v => v === "其他") || false;
-      if (hasOther) {
-        let otherIndex = this.curCheckboxValue.findIndex(v => v === "其他");
-        let temp = JSON.parse(JSON.stringify(this.curCheckboxValue));
-        temp[otherIndex] = this.othersText || "其他";
-        this.$emit("checkboxChange", temp, this.item);
-      } else {
-        isContinue && this.$emit("checkboxChange", this.curCheckboxValue, this.item);
+    handleCheckboxOther(isOtherInput) {
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      if (isOtherInput && !this.curCheckboxValue.includes("other")) {
+        this.curCheckboxValue.push("other");
       }
+      let curCheckboxValue = JSON.parse(JSON.stringify(this.curCheckboxValue));
+      this.$emit("checkboxChange", curCheckboxValue, this.item, choiceObj);
     },
     async initSelectOptions() {
       // 分享链接的量表用 optionType 1：静态，2：动态，3：动态转静态
@@ -435,6 +611,16 @@ export default {
         return document.body;
       }
       return triggerNode.parentNode;
+    },
+    inited(viewer) {
+      this.$viewer = viewer;
+    },
+    handlePreview(url, i) {
+      let imgs = this.curOptions.map(v => v.imageUrl);
+      if (!imgs.length) return;
+      this.previewImages = imgs;
+      this.$viewer.index = i;
+      this.$viewer.show();
     }
   }
 };
@@ -448,26 +634,29 @@ export default {
   /deep/ .choice-radio,
   /deep/ .choice-checkbox {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     margin-bottom: 5px;
     margin-right: 8px;
     margin-left: 0px;
-    span {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      vertical-align: middle;
-    }
-    span:last-child {
+    > span:last-child {
       flex: 1;
       display: inline-flex;
       align-items: center;
       word-break: break-all;
-      input {
-        margin-left: 4px;
-        width: 300px;
-        max-width: calc(100% - 40px);
-      }
+    }
+    input {
+      height: 100%;
+      flex: 1;
+      background: transparent;
+      border-radius: 0;
+      border-color: transparent !important;
+      border-bottom: 1px solid #d9d9d9 !important;
+    }
+    .prefix-span {
+      padding-right: 8px;
+    }
+    .suffix-span {
+      padding-left: 8px;
     }
   }
 
@@ -489,12 +678,49 @@ export default {
   .choice-wrap {
     display: flex;
     flex-wrap: wrap;
+    .scale-choice-img-wrap {
+      position: relative;
+      width: 74px;
+      min-width: 74px;
+      height: 62px;
+      background: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #d5d5d5;
+      margin-right: 16px;
+      &:hover {
+        .scale-preview-wrap {
+          display: flex;
+        }
+      }
+      > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .scale-preview-wrap {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: none;
+        justify-content: center;
+        align-items: center;
+        background: rgba(0, 0, 0, 0.75);
+        border-radius: 8px;
+        font-size: 20px;
+        i.anticon {
+          color: #fff;
+          margin: 0px;
+        }
+      }
+    }
     /deep/ .choose-value .el-tooltip.ellipsis {
       color: rgba(0, 0, 0, 0.65);
       font-size: 14px;
     }
     label {
-      margin: 0;
+      margin: 4px 0;
     }
     /deep/.ant-radio-wrapper span.ant-radio + * {
       display: inline-flex;
@@ -503,6 +729,9 @@ export default {
     }
     &.choice-wrap-1 label {
       width: 100%;
+      /deep/ input {
+        max-width: 300px;
+      }
     }
     &.choice-wrap-2 label {
       width: 50%;
@@ -521,14 +750,5 @@ export default {
       vertical-align: top;
     }
   }
-  /deep/.choice-radio span,
-  /deep/.choice-checkbox span {
-    &:last-child {
-      display: inline-block;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      max-width: 100%;
-    }
-  }
 }
 </style>

package/packages/scale-view/formitem/r-input.vue

@@ -1,17 +1,5 @@
 <template>
   <div class="my-input">
-    <!-- <a-input
-      :type="type"
-      :disabled="isLock"
-      placeholder="请输入"
-      v-if="eleType == 'INPUT'"
-      v-model="inputValue"
-      @keydown="keydown"
-      :rows="row"
-      style="resize: none;"
-      autocomplete="off"
-    /> -->
-    <!-- inputmode="numeric" -->
     <a-textarea
       :disabled="isLock"
       :placeholder="defaultPlaceHolder"
@@ -19,7 +7,7 @@
       v-model="inputValue"
       @input="changeTextarea"
       @keydown="keydown"
-      :rows="row"
+      :autoSize="setTextareaRow"
       style="resize: none;"
       autocomplete="off"
     />
@@ -50,7 +38,7 @@ export default {
     type: { default: "" },
     eleType: { default: "INPUT", type: String },
     isLock: { type: Boolean, default: false },
-    row: { type: Number, default: 1 },
+    row: { type: [Number, String], default: 1 },
     defaultPlaceHolder: String
   },
   computed: {
@@ -61,6 +49,14 @@ export default {
       set(val) {
         this.$emit("input", val);
       }
+    },
+    setTextareaRow() {
+      if (!this.row || this.row == "auto") {
+        return {
+          minRows: 1
+        };
+      }
+      return { minRows: this.row || 1, maxRows: this.row || 1 };
     }
   },
   methods: {

package/packages/scale-view/mixin/NoData.js

@@ -1,5 +1,4 @@
 /** 无数据 */
-
 export default {
   data() {
     return {
@@ -13,12 +12,27 @@ export default {
     setNoData(noData, noDataTip = "1.1.6.11", noDataImg = "nodata") {
       this.noData = noData;
       this.noDataTip = noDataTip || "1.1.6.11";
-      this.noDataImg = this.$utils.errResult(noDataImg) || "nodata";
+      this.noDataImg = this.errResult(noDataImg) || "nodata";
     },
     resetNodata() {
       this.noData = false;
       this.noDataTip = "1.1.6.11";
       this.noDataImg = "nodata";
+    },
+    errResult(result) {
+      let res = "nodata";
+      switch (result) {
+        case "10000":
+          res = "no-permission";
+          break;
+        case "Failure":
+          res = "failure";
+          break;
+        default:
+          res = "nodata";
+          break;
+      }
+      return res;
     }
   }
 };