cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,755 +0,0 @@
-<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) }" class="choice-span">{{ 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) }"
-              class="choice-span"
-            >{{ 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="debounceSearch"
-      @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, Spin } 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 vexutils from '@/utils/vexutils';
-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,
-    [Spin.name]: Spin,
-    [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}`;
-      };
-    },
-    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: {}
-    };
-  },
-  created(){
-    this.debounceSearch = vexutils.debounce(this.handleSearch, 100);
-  },
-  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.fetching = true;
-        this.curOptions = await this.getSearchOptions(
-          {
-            values: this.columnKey,
-            showField: this.labelKey,
-            keyword: value
-          },
-          this.cloneItem
-        );
-        this.fetching = false;
-        console.log(this.curOptions, 'curOptions');
-      } catch (error) {
-        this.fetching = false;
-        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>