code-list.tsx 2.5 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
import { ref, watch, defineComponent } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import { isNil } from 'ramda';
import './code-list.scss';

export const CodeList = defineComponent({
  props: {
    codeListItems: {
      type: Array<IData>,
    },
    codeList: {
      type: Object,
      required: true,
    },
    value: {
      type: [String, Number],
    },
  },
  setup(props) {
    const ns = useNamespace('code-list');
    const items = ref<IData[]>([]);

    watch(
      () => props.value,
      (newVal, oldVal) => {
        if (newVal !== oldVal) {
          if (isNil(newVal) || newVal === '') {
            // 空值置空
            items.value = [];
            // 非空值解析代码表
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
          } else if (
            props.codeList.orMode === 'NUM' &&
            props.codeListItems?.length
          ) {
            const numVal =
              typeof newVal === 'string' ? parseInt(newVal, 10) : newVal;
            // 数值或模式
            items.value = props
              .codeListItems!.filter(
                // eslint-disable-next-line no-bitwise
                item => numVal & item.value,
              )
              .map(item => ({ text: item.text, color: item.color }));
          } else {
            // 字符串或模式
46 47 48 49 50 51 52 53
            let values: string[] | number[];
            if (typeof newVal === 'string') {
              values = newVal.split(',');
            } else {
              values = [newVal];
            }
            items.value = values.map(val => {
              const findItem = props.codeListItems?.find(
54 55
                // eslint-disable-next-line eqeqeq
                item => item.value == val,
56 57 58 59
              );
              return {
                text: findItem?.text || val,
                color: findItem?.color,
60
                textCls: findItem?.textCls,
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
              };
            });
          }
        }
      },
      { immediate: true },
    );

    return { items, ns };
  },
  render() {
    if (this.items.length === 0) {
      return this.codeList.emptyText;
    }
    return (
      <span class={this.ns.b()}>
        {this.items.map((item, index) => {
          return [
            index !== 0 ? this.codeList?.textSeparator : null,
            <span
81
              class={[this.ns.e('item'), item.textCls ? item.textCls : null]}
82 83 84 85 86 87 88 89 90 91 92 93
              style={this.ns.cssVarBlock({
                'item-color': `${item.color}`,
              })}
            >
              {item.text}
            </span>,
          ];
        })}
      </span>
    );
  },
});