grid-field-column.tsx 2.7 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
import {
  formatToCodeListText,
  GridFieldColumnController,
  GridRowController,
} from '@ibiz-template/controller';
import { computed, defineComponent } from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import '@ibiz-template/theme/style/components/widgets/grid/grid-field-column.scss';

export const GridFieldColumn = defineComponent({
  name: 'GridFieldColumn',
  props: {
    controller: {
      type: GridFieldColumnController,
      required: true,
    },
    row: {
      type: GridRowController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('grid-field-column');
24 25

    // 代码表转换文本,如果不转换则为null
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
    const codeListText = computed(() => {
      // 非前台处理,不做值转换
      if (props.controller.model.source.cLConvertMode !== 'FRONT') {
        return null;
      }
      const fieldValue = props.row.data[props.controller.model.codeName];
      if (props.controller.codeListItems?.length && fieldValue) {
        return formatToCodeListText(
          fieldValue,
          props.controller.codeListItems!,
        );
      }
      return null;
    });

    /**
     * 单元格点击事件
     *
     * @author lxm
     * @date 2022-09-28 18:09:27
     * @param {MouseEvent} event
     */
    const onCellClick = (event: MouseEvent) => {
      if (props.controller.isLinkColumn) {
        // 阻止触发行点击
        event.stopPropagation();
        props.controller.openLinkView(props.row, event);
      } else if (props.controller.hasAction) {
        // 阻止触发行点击
        event.stopPropagation();
        props.controller.triggerAction(props.row, event);
      }
    };

    const alignStyle = computed(() => {
      let justContent = '';
      switch (props.controller.model.align) {
        case 'LEFT':
          justContent = 'flex-start';
          break;
        case 'RIGHT':
          justContent = 'flex-end';
          break;
        default:
          justContent = 'center';
          break;
      }
      return ns.cssVarBlock({ 'justify-content': justContent });
    });

76 77 78 79 80 81 82
    const showText = computed(() => {
      return (
        codeListText.value || props.row.data[props.controller.model.codeName]
      );
    });

    return { ns, alignStyle, showText, onCellClick };
83 84 85 86 87 88 89 90 91 92
  },
  render() {
    const c = this.controller;
    return (
      <div
        class={[this.ns.b(), c.clickable && this.ns.m('clickable')]}
        style={this.alignStyle}
        onClick={this.onCellClick}
      >
        <span class={this.ns.e('text')}>
93 94
          {this.showText}
          {this.showText && c.model.unitName}
95 96 97 98 99 100
        </span>
      </div>
    );
  },
});
export default GridFieldColumn;