cnhis-design-vue 2.1.78 → 2.1.79

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

@@ -1,746 +1,746 @@
-<template>
-  <div class="r-choice">
-    <a-radio-group
-      v-model="curvalue"
-      v-if="item.type == 'RADIO_BLOCK' || item.type === 'EVALUATE_RADIO_BLOCK'"
-      @change="radioChange"
-      class="choice-wrap"
-      :class="['choice-wrap-' + (item.setting.chooseStyleSetting || 1)]"
-    >
-    <div
-      v-for="(o, i) in curOptions"
-      :key="o.key + i + o.label"
-      class="choice-radio-div"
-    >
-      <a-radio
-        class="choice-radio"
-        :value="o[choiceUseKey]"
-        :disabled="isLock"
-        :style="{ color: choiceColor(o) }"
-        :class="{'choice-radio-presuffix':showPreSuffix(o)}"
-      >
-        <template v-if="showImgWrap(o)">
-          <span class="scale-choice-img-wrap" @click.stop.prevent>
-            <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)">
-            <template
-              v-if="o.prefix"
-              class="prefix-span"
-              :style="{ color: choiceColor(o) }"
-            >{{ o.prefix }}</template>
-            <a-input
-              v-model="optionsPreSuffixObj[o.key]"
-              :disabled="isLock || inputLock"
-              @change="inputPreSuffixChange(o, i)"
-              :style="{ color: choiceColor(o) }"
-              placeholder="请输入"
-            />
-            <template
-              v-if="o.suffix"
-              class="suffix-span"
-              :style="{ color: choiceColor(o) }"
-            >{{ o.suffix }}</template>
-          </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>
-    </div>
-    </a-radio-group>
-    <a-checkbox-group
-      v-else-if="item.type == 'CHECKBOX_BLOCK' || item.type === 'EVALUATE_CHECKBOX_BLOCK'"
-      @change="checkboxChange"
-      v-model="curCheckboxValue"
-      class="choice-wrap"
-      :class="['choice-wrap-' + (item.setting.chooseStyleSetting || 1)]"
-    >
-      <div
-        v-for="(o, i) in curOptions"
-        :key="o.key + i + o.label"
-        class="choice-radio-div"
-      >
-        <a-checkbox
-          class="choice-checkbox"
-          :value="o[choiceUseKey]"
-          :disabled="isLock"
-          :style="{ color: choiceColor(o) }"
-          :class="{'choice-checkbox-presuffix':showPreSuffix(o)}"
-        >
-          <template v-if="showImgWrap(o)">
-            <span class="scale-choice-img-wrap" @click.stop.prevent>
-              <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)">
-              <template
-                v-if="o.prefix"
-                class="prefix-span"
-                :style="{ color: choiceColor(o) }"
-              >{{ o.prefix }}</template>
-              <a-input
-                v-model="optionsPreSuffixObj[o.key]"
-                :disabled="isLock || inputLock"
-                @change="inputPreSuffixCheckboxChange(o, i)"
-                :style="{ color: choiceColor(o) }"
-                placeholder="请输入"
-              />
-              <template
-                v-if="o.suffix"
-                class="suffix-span"
-                :style="{ color: choiceColor(o) }"
-              >{{ o.suffix }}</template>
-            </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>
-      </div>
-    </a-checkbox-group>
-    <a-select
-      v-else-if="cloneItem.type == 'SELECT' || item.type === 'EVALUATE_SELECT'"
-      v-model="choiceValue"
-      placeholder="请选择"
-      show-search
-      :mode="showMulti"
-      :disabled="isLock"
-      @search="handleSearch"
-      @change="handleSelectChange"
-      :getPopupContainer="getPopupContainer"
-      :filterOption="filterOption"
-      :notFoundContent="fetching ? undefined : '暂无数据'"
-    >
-      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
-      <a-select-option v-for="(v, i) in curOptions" :key="i" :value="v[columnKey]">{{ v[labelKey] }}</a-select-option>
-    </a-select>
-    <a-cascader
-      v-else-if="cloneItem.type == 'SEARCH_CASCADE'"
-      v-model="choiceValue"
-      class="m-cascader"
-      placeholder="请选择"
-      :options="curOptions"
-      :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>
-
-<script>
-/**
- *  getSelectOptions 获取下拉框数据的 function
- *  getSearchOptions 关键字检索的 function
- *  getCascadeOptions 获取级联数据的 furnction
- */
-import { Select, Input, Radio, Checkbox, Cascader, Icon } from 'ant-design-vue';
-import { judgeTypes } from '../mixin/judgeTypes';
-// import format from "@/components/table/mixins/format";
-// 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,
-      default: () => Promise.resolve([])
-    },
-    getSearchOptions: {
-      type: Function,
-      default: () => Promise.resolve([])
-    },
-    getCascadeOptions: {
-      type: Function,
-      default: () => Promise.resolve([])
-    },
-    openType: { type: String, default: '' }
-  },
-  components: {
-    Viewer,
-    [Icon.name]: Icon,
-    [Input.name]: Input,
-    [Cascader.name]: Cascader,
-    [Checkbox.name]: Checkbox,
-    [Checkbox.Group.name]: Checkbox.Group,
-    [Radio.name]: Radio,
-    [Radio.Group.name]: Radio.Group,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option
-  },
-  computed: {
-    choiceValue: {
-      get() {
-        return this.value ? this.value : undefined;
-      },
-      set(val) {
-        this.$emit('input', val);
-      }
-    },
-    choiceUseKey() {
-      if (this.item.type === 'RADIO_BLOCK' || this.item.type === 'CHECKBOX_BLOCK') return 'key';
-      return 'value';
-    },
-    choiceColor() {
-      return function (p) {
-        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;
-      };
-    },
-    isDynamic2Static() {
-      // 分享链接的量表用 optionType 1：静态，2：动态，3：动态转静态
-      let { targetSource = {}, options = [], optionType } = this.item || {};
-      if (targetSource.target_id && (options.length || optionType == 3)) return true;
-      return false;
-    },
-    isMultiple() {
-      return this.item?.setting?.isMultiple;
-    },
-    showMulti() {
-      return this.isMultiple ? 'multiple' : 'default';
-    },
-    // 取值字段
-    columnKey() {
-      let { target_id, values } = this.item?.targetSource || {};
-      if (!target_id || !values) return 'value';
-      if (this.isDynamic2Static) return values || 'value';
-      return values;
-    },
-    // 显示字段
-    labelKey() {
-      let { target_id, showField } = this.item?.targetSource || {};
-      if (!target_id || !showField) return 'label';
-      if (this.isDynamic2Static) return showField || 'label';
-      return showField;
-    }
-  },
-  watch: {
-    item: {
-      immediate: true,
-      deep: true,
-      handler(value) {
-        if (!value || !Object.keys(value).length) return;
-        this.init(JSON.parse(JSON.stringify(value)));
-      }
-    }
-  },
-  data() {
-    return {
-      selectParams: { tableType: 'TABLE_LIST', pageSize: 20, page: 1 },
-      cascaderParams: { tableType: 'TABLE_LIST' },
-      cloneItem: {},
-      curvalue: '',
-      curCheckboxValue: [],
-      othersText: '',
-      curOptions: [],
-      fieldList: [],
-      buttonList: [],
-      source: 'guageChoice',
-      fetching: false,
-      previewImages: [],
-      optionsPreSuffixObj: {}
-    };
-  },
-  methods: {
-    init(value) {
-      let options = value.options || [];
-      if (this.isEvaluation(value.type)) {
-        options = value.scoreConfigs?.scoreRules || [];
-      }
-      if (value.type === 'RADIO_BLOCK' || value.type === 'EVALUATE_RADIO_BLOCK') {
-        const defVal = value.dbValue || value.setting.defaultValue || this.value;
-        this.handleRadioDef(value, defVal, options);
-        return;
-      }
-      if (value.type === 'CHECKBOX_BLOCK' || value.type === 'EVALUATE_CHECKBOX_BLOCK') {
-        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;
-      }
-      if (value.type == 'SELECT' || value.type == 'SEARCH_CASCADE' || value.type === 'EVALUATE_SELECT') {
-        this.cloneItem = JSON.parse(JSON.stringify(value));
-        let options = this.cloneItem.options || [];
-        if (this.isEvaluation(value.type)) {
-          options = this.cloneItem.scoreConfigs?.scoreRules || [];
-        }
-        this.curOptions = options;
-        this.initSelectOptions();
-      }
-    },
-    handleRadioDef(item, curValue, options) {
-      this.curOptions = this.handleOptions(options, item.type);
-      if (!options.length || !curValue) return;
-      // 测评单选回显
-      if (item.type === 'EVALUATE_RADIO_BLOCK') {
-        this.curvalue = curValue;
-        this.radioChange();
-        return;
-      }
-      // 普通单选回显 普通选项/其它/前后缀 所以用key标识
-      let hasOther = options.find(v => v.value === curValue);
-      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 = '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 = this.handleOptions(options, item.type);
-      if (!options.length || !curValue || !curValue.length) return;
-      // 测评多选回显
-      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() {
-      let choiceObj = {
-        othersText: this.othersText,
-        optionsPreSuffixObj: this.optionsPreSuffixObj
-      };
-      this.$emit('radioChange', this.curvalue, this.item, choiceObj);
-    },
-    checkboxChange() {
-      this.handleCheckboxOther();
-    },
-    inputChange() {
-      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(true);
-    },
-    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：动态转静态
-      const { targetSource, type, options = [], optionType = 1 } = this.cloneItem;
-      if (!targetSource?.target_id) return;
-      // 动态数据源转静态数据
-      if (type == 'SELECT' && this.isDynamic2Static) {
-        this.curOptions = this.handleDynamic2StaticOptions(options);
-        return;
-      }
-      if (type === 'SELECT') {
-        this.fetching = true;
-        this.curOptions = await this.getSelectOptions(this.cloneItem);
-        this.fetching = false;
-      } else {
-        this.curOptions = await this.getCascadeOptions(this.cloneItem);
-      }
-    },
-    handleDynamic2StaticOptions(options) {
-      if (!options || !options.length) return [];
-      let arr =  options.map(item => {
-        if ('cascadeData' in item) {
-          Object.assign(item, {
-            ...item.cascadeData
-          });
-        }
-        // 容错 没有配置的key 添加一个
-        if (!(this.columnKey in item)) {
-          item[this.columnKey] = item.value || item.label;
-        }
-        if (!(this.labelKey in item)) {
-          item[this.labelKey] = item.label;
-        }
-        return item;
-      });
-      
-      return this.uniqArrObj(arr, this.columnKey);
-    },
-    // 数组对象去重
-    uniqArrObj(arr, name = "value") {
-      let obj = {};
-      return arr.reduce((cur, next) => {
-        obj[next[name]] ? "" : (obj[next[name]] = true && cur.push(next));
-        return cur;
-      }, []);
-    },
-    // 下拉组件搜索
-    async handleSearch(value) {
-      try {
-        // 动态数据源转静态数据
-      if (this.cloneItem?.type == 'SELECT' && this.isDynamic2Static) return
-        this.curOptions = await this.getSearchOptions(
-          {
-            values: this.columnKey,
-            showField: this.labelKey,
-            keyword: value
-          },
-          this.cloneItem
-        );
-        console.log(this.curOptions, 'curOptions');
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 下拉组件选值
-    handleSelectChange(value) {
-      let res = {
-        value: '',
-        list: []
-      };
-      let matchItem;
-      if (Array.isArray(value)) {
-        res.value = value;
-        if (!value.length) {
-          res.list = [];
-        } else {
-          value.forEach(item => {
-            matchItem = this.curOptions.find(v => v.value === item);
-            if (matchItem) {
-              res.list.push(matchItem);
-            }
-          });
-        }
-      } else {
-        res.value = value;
-        matchItem = this.curOptions.find(v => v.value === value);
-        if (matchItem) {
-          res.list.push(matchItem);
-        }
-      }
-      this.$emit('change', res);
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-    },
-    getPopupContainer(triggerNode) {
-      if (this.openType == 'formIframe') {
-        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();
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.r-choice {
-  /deep/ .ant-radio-group {
-    width: 100%;
-  }
-  /deep/ .choice-radio,
-  /deep/ .choice-checkbox {
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: 5px;
-    margin-right: 8px;
-    margin-left: 0px;
-    > span:last-child {
-      display: inline-flex;
-      align-items: center;
-      word-break: break-all;
-    }
-    input {
-      height: 100%;
-      flex: 1;
-      background: transparent;
-      border-radius: 0;
-      border-color: transparent !important;
-      border-bottom: 1px solid #d9d9d9 !important;
-    }
-  }
-  
-  /deep/ .ant-select {
-    min-width: 160px;
-  }
-  /deep/ .ant-select ~ div {
-    position: relative !important;
-  }
-  /deep/.ant-select-dropdown {
-    top: 0px !important;
-    left: 1px !important;
-  }
-  .choice-radio-div {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  .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: 4px 0;
-    }
-    /deep/.ant-radio-wrapper span.ant-radio + * {
-      display: inline-flex;
-      align-items: center;
-      white-space: initial;
-    }
-    &.choice-wrap-1 .choice-radio-div {
-      width: 100%;
-      /deep/ input {
-        max-width: 300px;
-      }
-    }
-    &.choice-wrap-2 .choice-radio-div {
-      width: 50%;
-    }
-    &.choice-wrap-3 .choice-radio-div {
-      width: 33%;
-    }
-    &.choice-wrap-4 .choice-radio-div {
-      width: 25%;
-    }
-    /deep/ .ant-checkbox {
-      // margin-top: -0.2em;
-      margin-top: 5px;
-    }
-    /deep/ .ant-checkbox-inner {
-      vertical-align: top;
-    }
-
-    /deep/ .choice-radio-presuffix,
-    /deep/ .choice-checkbox-presuffix {
-      width: 100%;
-      box-sizing: border-box;
-      > span:last-child {
-        display: inline-table;
-        width: calc(100% - 20px);
-        max-width: calc(100% - 20px);
-        flex-wrap: wrap;
-      }
-      input {
-        flex: unset;
-        width: unset;
-        max-width: 300px;
-        min-width: 80px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="r-choice">
+    <a-radio-group
+      v-model="curvalue"
+      v-if="item.type == 'RADIO_BLOCK' || item.type === 'EVALUATE_RADIO_BLOCK'"
+      @change="radioChange"
+      class="choice-wrap"
+      :class="['choice-wrap-' + (item.setting.chooseStyleSetting || 1)]"
+    >
+    <div
+      v-for="(o, i) in curOptions"
+      :key="o.key + i + o.label"
+      class="choice-radio-div"
+    >
+      <a-radio
+        class="choice-radio"
+        :value="o[choiceUseKey]"
+        :disabled="isLock"
+        :style="{ color: choiceColor(o) }"
+        :class="{'choice-radio-presuffix':showPreSuffix(o)}"
+      >
+        <template v-if="showImgWrap(o)">
+          <span class="scale-choice-img-wrap" @click.stop.prevent>
+            <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)">
+            <template
+              v-if="o.prefix"
+              class="prefix-span"
+              :style="{ color: choiceColor(o) }"
+            >{{ o.prefix }}</template>
+            <a-input
+              v-model="optionsPreSuffixObj[o.key]"
+              :disabled="isLock || inputLock"
+              @change="inputPreSuffixChange(o, i)"
+              :style="{ color: choiceColor(o) }"
+              placeholder="请输入"
+            />
+            <template
+              v-if="o.suffix"
+              class="suffix-span"
+              :style="{ color: choiceColor(o) }"
+            >{{ o.suffix }}</template>
+          </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>
+    </div>
+    </a-radio-group>
+    <a-checkbox-group
+      v-else-if="item.type == 'CHECKBOX_BLOCK' || item.type === 'EVALUATE_CHECKBOX_BLOCK'"
+      @change="checkboxChange"
+      v-model="curCheckboxValue"
+      class="choice-wrap"
+      :class="['choice-wrap-' + (item.setting.chooseStyleSetting || 1)]"
+    >
+      <div
+        v-for="(o, i) in curOptions"
+        :key="o.key + i + o.label"
+        class="choice-radio-div"
+      >
+        <a-checkbox
+          class="choice-checkbox"
+          :value="o[choiceUseKey]"
+          :disabled="isLock"
+          :style="{ color: choiceColor(o) }"
+          :class="{'choice-checkbox-presuffix':showPreSuffix(o)}"
+        >
+          <template v-if="showImgWrap(o)">
+            <span class="scale-choice-img-wrap" @click.stop.prevent>
+              <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)">
+              <template
+                v-if="o.prefix"
+                class="prefix-span"
+                :style="{ color: choiceColor(o) }"
+              >{{ o.prefix }}</template>
+              <a-input
+                v-model="optionsPreSuffixObj[o.key]"
+                :disabled="isLock || inputLock"
+                @change="inputPreSuffixCheckboxChange(o, i)"
+                :style="{ color: choiceColor(o) }"
+                placeholder="请输入"
+              />
+              <template
+                v-if="o.suffix"
+                class="suffix-span"
+                :style="{ color: choiceColor(o) }"
+              >{{ o.suffix }}</template>
+            </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>
+      </div>
+    </a-checkbox-group>
+    <a-select
+      v-else-if="cloneItem.type == 'SELECT' || item.type === 'EVALUATE_SELECT'"
+      v-model="choiceValue"
+      placeholder="请选择"
+      show-search
+      :mode="showMulti"
+      :disabled="isLock"
+      @search="handleSearch"
+      @change="handleSelectChange"
+      :getPopupContainer="getPopupContainer"
+      :filterOption="filterOption"
+      :notFoundContent="fetching ? undefined : '暂无数据'"
+    >
+      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+      <a-select-option v-for="(v, i) in curOptions" :key="i" :value="v[columnKey]">{{ v[labelKey] }}</a-select-option>
+    </a-select>
+    <a-cascader
+      v-else-if="cloneItem.type == 'SEARCH_CASCADE'"
+      v-model="choiceValue"
+      class="m-cascader"
+      placeholder="请选择"
+      :options="curOptions"
+      :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>
+
+<script>
+/**
+ *  getSelectOptions 获取下拉框数据的 function
+ *  getSearchOptions 关键字检索的 function
+ *  getCascadeOptions 获取级联数据的 furnction
+ */
+import { Select, Input, Radio, Checkbox, Cascader, Icon } from 'ant-design-vue';
+import { judgeTypes } from '../mixin/judgeTypes';
+// import format from "@/components/table/mixins/format";
+// 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,
+      default: () => Promise.resolve([])
+    },
+    getSearchOptions: {
+      type: Function,
+      default: () => Promise.resolve([])
+    },
+    getCascadeOptions: {
+      type: Function,
+      default: () => Promise.resolve([])
+    },
+    openType: { type: String, default: '' }
+  },
+  components: {
+    Viewer,
+    [Icon.name]: Icon,
+    [Input.name]: Input,
+    [Cascader.name]: Cascader,
+    [Checkbox.name]: Checkbox,
+    [Checkbox.Group.name]: Checkbox.Group,
+    [Radio.name]: Radio,
+    [Radio.Group.name]: Radio.Group,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option
+  },
+  computed: {
+    choiceValue: {
+      get() {
+        return this.value ? this.value : undefined;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    },
+    choiceUseKey() {
+      if (this.item.type === 'RADIO_BLOCK' || this.item.type === 'CHECKBOX_BLOCK') return 'key';
+      return 'value';
+    },
+    choiceColor() {
+      return function (p) {
+        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;
+      };
+    },
+    isDynamic2Static() {
+      // 分享链接的量表用 optionType 1：静态，2：动态，3：动态转静态
+      let { targetSource = {}, options = [], optionType } = this.item || {};
+      if (targetSource.target_id && (options.length || optionType == 3)) return true;
+      return false;
+    },
+    isMultiple() {
+      return this.item?.setting?.isMultiple;
+    },
+    showMulti() {
+      return this.isMultiple ? 'multiple' : 'default';
+    },
+    // 取值字段
+    columnKey() {
+      let { target_id, values } = this.item?.targetSource || {};
+      if (!target_id || !values) return 'value';
+      if (this.isDynamic2Static) return values || 'value';
+      return values;
+    },
+    // 显示字段
+    labelKey() {
+      let { target_id, showField } = this.item?.targetSource || {};
+      if (!target_id || !showField) return 'label';
+      if (this.isDynamic2Static) return showField || 'label';
+      return showField;
+    }
+  },
+  watch: {
+    item: {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        if (!value || !Object.keys(value).length) return;
+        this.init(JSON.parse(JSON.stringify(value)));
+      }
+    }
+  },
+  data() {
+    return {
+      selectParams: { tableType: 'TABLE_LIST', pageSize: 20, page: 1 },
+      cascaderParams: { tableType: 'TABLE_LIST' },
+      cloneItem: {},
+      curvalue: '',
+      curCheckboxValue: [],
+      othersText: '',
+      curOptions: [],
+      fieldList: [],
+      buttonList: [],
+      source: 'guageChoice',
+      fetching: false,
+      previewImages: [],
+      optionsPreSuffixObj: {}
+    };
+  },
+  methods: {
+    init(value) {
+      let options = value.options || [];
+      if (this.isEvaluation(value.type)) {
+        options = value.scoreConfigs?.scoreRules || [];
+      }
+      if (value.type === 'RADIO_BLOCK' || value.type === 'EVALUATE_RADIO_BLOCK') {
+        const defVal = value.dbValue || value.setting.defaultValue || this.value;
+        this.handleRadioDef(value, defVal, options);
+        return;
+      }
+      if (value.type === 'CHECKBOX_BLOCK' || value.type === 'EVALUATE_CHECKBOX_BLOCK') {
+        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;
+      }
+      if (value.type == 'SELECT' || value.type == 'SEARCH_CASCADE' || value.type === 'EVALUATE_SELECT') {
+        this.cloneItem = JSON.parse(JSON.stringify(value));
+        let options = this.cloneItem.options || [];
+        if (this.isEvaluation(value.type)) {
+          options = this.cloneItem.scoreConfigs?.scoreRules || [];
+        }
+        this.curOptions = options;
+        this.initSelectOptions();
+      }
+    },
+    handleRadioDef(item, curValue, options) {
+      this.curOptions = this.handleOptions(options, item.type);
+      if (!options.length || !curValue) return;
+      // 测评单选回显
+      if (item.type === 'EVALUATE_RADIO_BLOCK') {
+        this.curvalue = curValue;
+        this.radioChange();
+        return;
+      }
+      // 普通单选回显 普通选项/其它/前后缀 所以用key标识
+      let hasOther = options.find(v => v.value === curValue);
+      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 = '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 = this.handleOptions(options, item.type);
+      if (!options.length || !curValue || !curValue.length) return;
+      // 测评多选回显
+      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() {
+      let choiceObj = {
+        othersText: this.othersText,
+        optionsPreSuffixObj: this.optionsPreSuffixObj
+      };
+      this.$emit('radioChange', this.curvalue, this.item, choiceObj);
+    },
+    checkboxChange() {
+      this.handleCheckboxOther();
+    },
+    inputChange() {
+      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(true);
+    },
+    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：动态转静态
+      const { targetSource, type, options = [], optionType = 1 } = this.cloneItem;
+      if (!targetSource?.target_id) return;
+      // 动态数据源转静态数据
+      if (type == 'SELECT' && this.isDynamic2Static) {
+        this.curOptions = this.handleDynamic2StaticOptions(options);
+        return;
+      }
+      if (type === 'SELECT') {
+        this.fetching = true;
+        this.curOptions = await this.getSelectOptions(this.cloneItem);
+        this.fetching = false;
+      } else {
+        this.curOptions = await this.getCascadeOptions(this.cloneItem);
+      }
+    },
+    handleDynamic2StaticOptions(options) {
+      if (!options || !options.length) return [];
+      let arr =  options.map(item => {
+        if ('cascadeData' in item) {
+          Object.assign(item, {
+            ...item.cascadeData
+          });
+        }
+        // 容错 没有配置的key 添加一个
+        if (!(this.columnKey in item)) {
+          item[this.columnKey] = item.value || item.label;
+        }
+        if (!(this.labelKey in item)) {
+          item[this.labelKey] = item.label;
+        }
+        return item;
+      });
+      
+      return this.uniqArrObj(arr, this.columnKey);
+    },
+    // 数组对象去重
+    uniqArrObj(arr, name = "value") {
+      let obj = {};
+      return arr.reduce((cur, next) => {
+        obj[next[name]] ? "" : (obj[next[name]] = true && cur.push(next));
+        return cur;
+      }, []);
+    },
+    // 下拉组件搜索
+    async handleSearch(value) {
+      try {
+        // 动态数据源转静态数据
+      if (this.cloneItem?.type == 'SELECT' && this.isDynamic2Static) return
+        this.curOptions = await this.getSearchOptions(
+          {
+            values: this.columnKey,
+            showField: this.labelKey,
+            keyword: value
+          },
+          this.cloneItem
+        );
+        console.log(this.curOptions, 'curOptions');
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 下拉组件选值
+    handleSelectChange(value) {
+      let res = {
+        value: '',
+        list: []
+      };
+      let matchItem;
+      if (Array.isArray(value)) {
+        res.value = value;
+        if (!value.length) {
+          res.list = [];
+        } else {
+          value.forEach(item => {
+            matchItem = this.curOptions.find(v => v.value === item);
+            if (matchItem) {
+              res.list.push(matchItem);
+            }
+          });
+        }
+      } else {
+        res.value = value;
+        matchItem = this.curOptions.find(v => v.value === value);
+        if (matchItem) {
+          res.list.push(matchItem);
+        }
+      }
+      this.$emit('change', res);
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    },
+    getPopupContainer(triggerNode) {
+      if (this.openType == 'formIframe') {
+        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();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.r-choice {
+  /deep/ .ant-radio-group {
+    width: 100%;
+  }
+  /deep/ .choice-radio,
+  /deep/ .choice-checkbox {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 5px;
+    margin-right: 8px;
+    margin-left: 0px;
+    > span:last-child {
+      display: inline-flex;
+      align-items: center;
+      word-break: break-all;
+    }
+    input {
+      height: 100%;
+      flex: 1;
+      background: transparent;
+      border-radius: 0;
+      border-color: transparent !important;
+      border-bottom: 1px solid #d9d9d9 !important;
+    }
+  }
+  
+  /deep/ .ant-select {
+    min-width: 160px;
+  }
+  /deep/ .ant-select ~ div {
+    position: relative !important;
+  }
+  /deep/.ant-select-dropdown {
+    top: 0px !important;
+    left: 1px !important;
+  }
+  .choice-radio-div {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .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: 4px 0;
+    }
+    /deep/.ant-radio-wrapper span.ant-radio + * {
+      display: inline-flex;
+      align-items: center;
+      white-space: initial;
+    }
+    &.choice-wrap-1 .choice-radio-div {
+      width: 100%;
+      /deep/ input {
+        max-width: 300px;
+      }
+    }
+    &.choice-wrap-2 .choice-radio-div {
+      width: 50%;
+    }
+    &.choice-wrap-3 .choice-radio-div {
+      width: 33%;
+    }
+    &.choice-wrap-4 .choice-radio-div {
+      width: 25%;
+    }
+    /deep/ .ant-checkbox {
+      // margin-top: -0.2em;
+      margin-top: 5px;
+    }
+    /deep/ .ant-checkbox-inner {
+      vertical-align: top;
+    }
+
+    /deep/ .choice-radio-presuffix,
+    /deep/ .choice-checkbox-presuffix {
+      width: 100%;
+      box-sizing: border-box;
+      > span:last-child {
+        display: inline-table;
+        width: calc(100% - 20px);
+        max-width: calc(100% - 20px);
+        flex-wrap: wrap;
+      }
+      input {
+        flex: unset;
+        width: unset;
+        max-width: 300px;
+        min-width: 80px;
+      }
+    }
+  }
+}
+</style>