ed-frame-vue/lib/packages/mixins/useTable.jsx

easydata 基础组件

import {getControlProp} from "../../utils/useBusiness";
import {getVarType} from "../../utils/utils";
import {formatDate} from "../../utils/dateUtils";
import FileView from "../components/FileView.vue";

export default {
  methods: {
    /**
     * @name getColumns
     * @returns {*[]}
     */
    getColumns(controlInfos, controlProps) {
      let columns = []
      controlInfos.forEach((control) => {
        if (control.isShow) {
          //展示字段
          let column = {
            label: control.label,
            prop: control.virtualColumn ? 'keyInfoView.' + control.controlName : control.controlName,
          }
          if (control.controlType === 'textarea') column.showOverflowTooltip = true
          //数据渲染
          this.renderColumn(control, column, controlProps);
          columns.push(column)
        }
      })

      // 调用编辑
      if (Object.keys(this.$listeners).includes('editColumns')) {
        this.$listeners.editColumns(columns)
      }
      return columns;
    },

    /**
     * 渲染下拉框
     * @param {*} control
     * @param column
     * @param controlProps
     */
    renderColumn(control, column, controlProps) {
      const controlProp = getControlProp(control, controlProps);
      if (control.controlType === 'select' || control.controlType === '_switch') {
        // form，视图配置的下拉列表，模式，数据绑定方式
        column.formatter = function (row, column, cellValue, index) {

          if (getVarType(cellValue) !== 'undefined') {
            if (getVarType(cellValue) === 'array') {
              return cellValue.map(i => i.label).join(',')
            } else if (getVarType(cellValue) === 'object') {
              return cellValue.label
            } else if (getVarType(cellValue) === 'string') {
              if (controlProp.dataSource && controlProp.dataSource.length > 0) {
                for(let i = 0; i < controlProp.dataSource.length; i++) {
                  if(cellValue === controlProp.dataSource[i].value) {
                    return controlProp.dataSource[i].label
                  }
                }
              }
            }
            return cellValue + ""
          }
          return cellValue
        }
      } else if (control.controlType === "popup") {
        column.formatter = function (row, column, cellValue, index) {
          if (cellValue) {
            if (getVarType(cellValue) === 'array') {
              return <div class="table-tag">{cellValue.map(i => <el-tag size="small">{i.label}</el-tag>)}</div>
            }else if (getVarType(cellValue) === 'object') {
              return <div className="table-tag">{cellValue.label}</div>
            }
            return cellValue.label
          }
        }
      } else if (control.controlType === "checkbox") {
        column.formatter = function (row, column, cellValue, index) {
          if (cellValue && cellValue instanceof Array) {
            return <div class="table-tag">{cellValue.map(i => <el-tag size="small">{i.label}</el-tag>)}</div>
          }
        }
      } else if (control.controlType === "radio") {
        column.formatter = function (row, column, cellValue, index) {
          if (cellValue) {
            return <div class="table-tag">
              <el-tag size="small">{cellValue.label}</el-tag>
            </div>
          }
        }
      } else if (["datePicker"].includes(control.controlType)) {
        column.formatter = function (row, column, cellValue, index) {
          if (cellValue) {
            const {format} = controlProp
            let data = new Date(cellValue)
            return formatDate(data, format)
          }
        }
      } else if (control.controlType === 'cascader') {
        const showAllLevels = getVarType(controlProp.showAllLevels) === 'boolean' && controlProp.showAllLevels === false;
        column.formatter = function (row, column, cellValue, index) {
          if (cellValue) {
            if (getVarType(cellValue) === 'object') {
              if (showAllLevels) {
                const temp = cellValue.label.split("/");
                return temp[temp.length - 1];
              } else return cellValue.label;
            } else if (getVarType(cellValue) === 'array') {
              return cellValue.map(item => {
                if (showAllLevels) {
                  const temp = item.label.split("/");
                  return temp[temp.length - 1];
                } else return item.label;
              }).join(",")
            }
          }
          return cellValue
        }
      } else if (control.controlType === 'upload') {  //控件为上传控件时
        column.formatter = (row, column, cellValue, index) => {
          if (cellValue) {
            if (cellValue && getVarType(cellValue) === 'array') {
              return <FileView list={cellValue}></FileView>
            }
          }
          return cellValue;
        }
      }
    },
  }
}