gr_report_web/src/views/lowdesign/general/components/useRenderVxeColumn.tsx

import { VxeUI } from 'vxe-table'
import { tableInfoOption } from '../../tableDesign/designData';
import { MonacoEditor } from '@/components/MonacoEditor/index'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()

//表单开发校验
const infoTableIsEdit = ({ row, column }, { verifyEdit, noStop }) => {
  let bool = true
  //判断如果是 需要编辑校验并且是系统字段 不可编辑
  if (verifyEdit && tableInfoOption.disabledArr.includes(row.fieldCode) && row.only) bool = false
  //判断是否可以绑定字典
  if (!['select', 'radio', 'checkbox', 'tree', 'cascader', 'dicTableSelect'].includes(row.controlType) && ['dictType', 'dictCode', 'dictTable', 'dictText', 'dictTextFormatter', 'dictTableColumn', 'dictTableSearch'].includes(column.field)) {
    if (!noStop) bool = false
  }
  // if (row.controlType != 'dicTableSelect' && column.field == 'dictTableColumn') bool = false
  //判断如果是 系统字典 不可编辑
  if (row.dictType == 'dict' && ['dictTable', 'dictText', 'dictTableColumn', 'dictTableSearch'].includes(column.field)) bool = false
  //判断如果没有同步数据库 接口查询、外键 不可编辑
  if (row.isDb == 'N' && ['queryIsDb', 'mainTable', 'mainField'].includes(column.field)) bool = false
  //如果是树表pid的接口查询 不可编辑
  if (row.fieldCode == 'pid' && row.only && column.field == 'queryIsDb') bool = false
  //如果是id 接口查询 不可编辑
  if (row.fieldCode == 'id' && row.only && column.field == 'queryIsDb') bool = false
  //如果配置了外键 接口查询 不可编辑
  if (row.mainField && row.mainField && column.field == 'queryIsDb') bool = false
  //如果虚拟字段 处理方式为空 处理配置不能编辑
  if (!row.virtualType && ['virtual_java_str', 'virtual_sql_str', 'virtual_fun_str'].includes(column.field)) bool = false
  return bool
}

const handleLowClickInput = (row, column) => {
  const prop = column.fieldProp || column.field
  let text = row[prop]
  if (text) {
    if (['summarySql', 'virtual_sql_str', 'virtual_java_str'].includes(prop)) {
      const obj = JSON.parse(text)
      text = obj[obj.valueType]
      if (prop == 'summarySql' && obj.valueType == 'group') {
        text = text.replace('#{lideeyunji_summary_table}', '当前表的数据源')
      }
      if (prop == 'virtual_java_str') {
        if (obj.valueType == 'group') {
          text = text.map(item => `${item.type == 'CALCULATE' ? '计算' : '拼接'}：${item.value} `).join(' ')
        } else if (obj.valueType == 'custom') {
          text = `JAVA类名/Sping Key：${text.javaPath}`
        }
      }
    }
  }

  return text
}

watch(() => appStore.isDark, (val) => {
  if (val) VxeUI.setTheme('dark')
  else VxeUI.setTheme('light')
}, { immediate: true })

export const useRenderVxeColumn = (useType = 'table') => {
  if (VxeUI.renderer.get('LowInput') !== null) return
  const stopIcon = <icon style="position: absolute; right: 4px; top: 2px; color: #f56c6c;" size={14} icon="uiw:stop-o" />
  const lowControl = {
    LowInput: {
      default: (renderOpts, { row, column, fieldProp }, isStop) => {
        const prop = fieldProp || column.field
        if (isStop) return (<div> <span>{row[prop]}</span> {stopIcon}  </div>)
        return <span>{row[prop]}</span>
      },
      edit: (renderOpts, { row, column, fieldProp }) => {
        const { placeholder } = renderOpts
        const prop = fieldProp || column.field
        return <el-input class="my-cell" text="text" v-model={row[prop]} placeholder={placeholder ? placeholder : '请输入 ' + column.title} />
      }
    },
    LowNumber: {
      default: (renderOpts, { row, column }, isStop) => {
        if (isStop) return (<div> <span>{row[column.field]}</span> {stopIcon}  </div>)
        return <span>{row[column.field]}</span>
      },
      edit: (renderOpts, { row, column }) => {
        return <div class="w-100% flex"><el-input-number v-model={row[column.field]} controls={false} placeholder={'请输入 ' + column.title} {...(renderOpts.params || {})} /></div>
      }
    },
    LowCheckbox: {
      default: (renderOpts, { row, column }, isStop) => {
        if (isStop) return (<div> <span>{row[column.field] == 'Y' ? '√' : ''}</span> {stopIcon}  </div>)
        return <span>{row[column.field] == 'Y' ? '√' : ''}</span>
      },
      edit: (renderOpts, { row, column }) => {
        return <el-checkbox v-model={row[column.field]} true-value="Y" false-value="N" />
      }
    },
    LowCheckboxSum: {
      default: (renderOpts, { row, column }, isStop) => {
        if (isStop) return (<div> <span>{!!row[column.field] ? '√' : ''}</span> {stopIcon}  </div>)
        return <span>{!!row[column.field]  ? '√' : ''}</span>
      },
      edit: (renderOpts, { row, column }) => {
        return <el-checkbox v-model={row[column.field]} true-value={row.fieldCode+'_s'} false-value="" />
      }
    },
    
    LowSelect: {
      default: (renderOpts, { row, column }, isStop = false) => {
        if (column.field == 'dictType' && !row[column.field] && infoTableIsEdit({ row, column }, renderOpts)) {
          return <div class="c-#ccc text-12px">可配置</div>
        }
        const { typeKey } = renderOpts
        let dicObj = {}
        if (typeKey && row[typeKey]) {
          dicObj = renderOpts[`${row[typeKey]}DicObj`] || {}
          if (row[typeKey] == 'table' && column.field != 'dictTable' && row.dictTable) dicObj = dicObj[row.dictTable] || {}
        } else if (column.field == 'mainField') {
          dicObj = renderOpts.dicObj || {}
          if (row.mainTable) dicObj = dicObj[row.mainTable] || {}
        } else if (!typeKey) dicObj = renderOpts['dicObj'] || {}
        let value = row[column.field]
        if (value === '' || value === undefined || value === null) value = []
        if (typeof value == 'string') value = [value]
        if (value.length && Object.keys(dicObj).length) {
          const text: Array<string> = []
          value.forEach(key => text.push(dicObj[key] || key))
          value = text.join(' | ')
        }
        if (isStop) return (<div> <span>{value}</span> {stopIcon}  </div>)
        return <span>{value}</span>
      },
      edit: (renderOpts, { row, rowIndex, column }) => {
        const { multiple, filterable, allowCreate, typeKey } = renderOpts
        let dicData = [] as any
        if (typeKey && row[typeKey]) {
          dicData = renderOpts[`${row[typeKey]}DicData`]
          if (row[typeKey] == 'table' && column.field != 'dictTable') {
            if (row.dictTable) dicData = dicData[row.dictTable]
            else dicData = [{ label: '请先选择 字典Table', value: '-1', disabled: true }]
          }
        } else if (column.field == 'mainField') {
          dicData = renderOpts.dicData
          if (row.mainTable) dicData = dicData[row.mainTable]
          else dicData = [{ label: '请先选择 外键-主表名', value: '-1', disabled: true }]
        } else if (!typeKey) dicData = renderOpts['dicData']

        //树表
        if (column.field == 'dictTable' && ['tree', 'cascader'].includes(row.controlType) && row.dictType) {
          dicData = renderOpts['treeDicData']
        }

        //设置禁用选择
        if (column.field == 'dictType') {
          dicData = dicData.map(item => {
            if (['tree', 'cascader', 'dicTableSelect'].includes(row.controlType) && item.value == 'dict') item.disabled = true
            else item.disabled = false
            return item
          })
        }
        return (
          <avue-select
            popper-class="vxe-table--ignore-clear"
            v-model={row[column.field]}
            placeholder={'请选择 ' + column.title}
            dic={dicData}
            multiple={multiple}
            filterable={filterable}
            allowCreate={allowCreate}
            onChange={() => renderOpts.events ? renderOpts.events.change(row, column.field, rowIndex) : ''}
          />
        )
      }
    },
    LowSummaryBottomSql: {
      default: (renderOpts, { row, column }, isStop = false) => {
        const { dicObj } = renderOpts
        let value = row.summaryJson.sqlType
        if (value === '' || value === undefined || value === null) return ''
        if (value == 'custom') return <span>自定义SQL：<span style="color:#409EFF">{row.summaryJson.sqlValue}</span></span>
        if (Object.keys(dicObj).length) value = dicObj[value]
        if (isStop) return (<div> <span>{value}</span> {stopIcon}  </div>)
        return <span>{value}</span>
      },
      edit: (renderOpts, { row, column }) => {
        const { dicData } = renderOpts
        const visible = row.summaryJson.sqlType == 'custom'
        return (
          <el-popover popper-class="low-summary-buttom-sql__popover" popper-style={{ width: 'auto', height: 'auto' }} visible={visible} placement='bottom-start' v-slots={{
            reference: () => (
              <avue-select
                popper-class="vxe-table--ignore-clear"
                v-model={row.summaryJson.sqlType}
                placeholder={'请选择 ' + column.title}
                dic={dicData}
              />
            ),
            default: () => (
              <div style={{ width: '400px', height: '200px' }} class="vxe-table--ignore-clear">
                <MonacoEditor v-model={row.summaryJson.sqlValue} language='mysql' editorOption={{ minimap: false }}></MonacoEditor>
              </div>
            ),
          }}>
          </el-popover>
        )
      }
    },
    LowClickInput: {
      default: (renderOpts, { row, column, fieldProp }, isStop) => {
        const text = handleLowClickInput(row, { ...column, fieldProp })
        if (isStop) return (<div> <span>{text}</span> {stopIcon}  </div>)
        return <span>{text}</span>
      },
      edit: (renderOpts, { row, rowIndex, column, fieldProp }) => {
        const prop = fieldProp || column.field
        const text = handleLowClickInput(row, { ...column, fieldProp })
        return <el-input class="my-cell" readonly onClick={() => renderOpts.events.click(row, prop, rowIndex)} text="text" value={text} placeholder={'请输入 ' + column.title} />
      }
    },
    virtualInput: {
      default: (renderOpts, { row, column }, isStop) => {
        if (!row.virtualType) isStop = true
        const option = { row, column, fieldProp: `virtual_${row.virtualType}_str` }
        if (row.virtualType == 'fun') return lowControl.LowInput.default(renderOpts, option, isStop)
        else return lowControl.LowClickInput.default(renderOpts, option, isStop)
      },
      edit: (renderOpts, { row, rowIndex, column }) => {
        const option = { row, column, rowIndex, fieldProp: `virtual_${row.virtualType}_str` }
        if (row.virtualType == 'fun') return lowControl.LowInput.edit(renderOpts, option)
        else return lowControl.LowClickInput.edit(renderOpts, option)
      }
    },
    LowMonacoEditorInput: {
      default: (renderOpts, { row, column, fieldProp }, isStop) => {
        const prop = fieldProp || column.field
        if (isStop) return (<div> <span>{row[prop]}</span> {stopIcon}  </div>)
        return <span>{row[prop]}</span>
      },
      edit: (renderOpts, { row, column, fieldProp }) => {
        const prop = fieldProp || column.field
        return (
          <el-popover popper-style={{ width: 'auto', height: 'auto' }} placement='top' trigger='click' v-slots={{
            reference: () => (
              <el-input class="my-cell" text="text" v-model={row[prop]} clearable placeholder={'请输入 ' + column.title} onClick={() => renderOpts.events.click(row)} />
            ),
            default: () => (
              <div>
                <div style={{ fontSize: '16px' }}>{row.fieldName}（{row.fieldCode}） {column.title}</div>
                <div style={{ width: '600px', height: '200px' }} class="vxe-table--ignore-clear">
                  <MonacoEditor v-model={row[prop]} language='javascript' editorOption={{ minimap: false }}></MonacoEditor>
                </div>
              </div>
            ),
          }}>
          </el-popover>
        )
      }
    }
  }
  for (const key in lowControl) {
    const addObj = { renderDefault: lowControl[key].default, renderCell: lowControl[key].default }
    if (lowControl[key].edit) {
      addObj['renderEdit'] = (renderOpts: any, params) => {
        if (useType == 'table') {
          if (!infoTableIsEdit(params, renderOpts)) return lowControl[key].default(renderOpts, params, true)
        }
        return lowControl[key].edit(renderOpts, params)
      }
    }
    VxeUI.renderer.add(key, addObj)
  }
}