DigitalHuman-web/src/views/tool/gen/components/columnInfo.vue

<template>
  <ProTable
    ref="proTable"
    :max-height="tableHeight"
    :pagination="false"
    :data="tableData"
    :tool-button="false"
    :columns="columns"
    row-key="columnId"
  />
</template>
<script lang="tsx" name="ColumnInfo" setup>
import { ref, reactive, defineProps } from 'vue'
import ProTable from '@/components/ProTable/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
export interface TableProps {
  tableData: any[] // 表格数据
  dictOptions: any[] // 字典数据
}

const prop = withDefaults(defineProps<TableProps>(), {
  tableData: () => [],
  dictOptions: () => []
})

const tableHeight = document.documentElement.scrollHeight - 300 + 'px'

// ProTable 实例
const proTable = ref<ProTableInstance>()

const columns = reactive<ColumnProps<any>[]>([
  { type: 'index', label: '序号', width: 60, fixed: 'left' },
  { prop: 'columnName', label: '字段列名' },
  {
    prop: 'columnComment',
    label: '字段描述',
    width: 120,
    render: scope => {
      return (
        <div>
          <el-input vModel_trim={scope.row.columnComment} />
        </div>
      )
    }
  },
  { prop: 'columnType', width: 120, label: '物理类型' },
  {
    prop: 'javaType',
    label: 'Java类型',
    width: 120,
    render: scope => {
      return (
        <div>
          <el-input vModel_trim={scope.row.javaType} />
        </div>
      )
    }
  },
  {
    prop: 'javaField',
    label: 'Java属性',
    width: 120,
    render: scope => {
      return (
        <div>
          <el-input vModel_trim={scope.row.javaField} />
        </div>
      )
    }
  },
  {
    prop: 'isInsert',
    label: '插入',
    width: 60,
    render: scope => {
      return (
        <div>
          <el-checkbox vModel_trim={scope.row.isInsert} true-value="1" false-value="0" />
        </div>
      )
    }
  },
  {
    prop: 'isEdit',
    label: '编辑',
    width: 60,
    render: scope => {
      return (
        <div>
          <el-checkbox vModel_trim={scope.row.isEdit} true-value="1" false-value="0" />
        </div>
      )
    }
  },
  {
    prop: 'isList',
    label: '列表',
    width: 60,
    render: scope => {
      return (
        <div>
          <el-checkbox vModel_trim={scope.row.isList} true-value="1" false-value="0" />
        </div>
      )
    }
  },
  {
    prop: 'isQuery',
    label: '查询',
    width: 60,
    render: scope => {
      return (
        <div>
          <el-checkbox vModel_trim={scope.row.isQuery} true-value="1" false-value="0" />
        </div>
      )
    }
  },
  {
    prop: 'queryType',
    label: '查询方式',
    width: 120,
    render: scope => {
      return (
        <div>
          <el-select vModel_trim={scope.row.queryType}>
            <el-option label="=" value="EQ" />
            <el-option label="!=" value="NE" />
            <el-option label=">" value="GT" />
            <el-option label=">=" value="GTE" />
            <el-option label="<" value="LT" />
            <el-option label="<=" value="LTE" />
            <el-option label="LIKE" value="LIKE" />
            <el-option label="BETWEEN" value="BETWEEN" />
          </el-select>
        </div>
      )
    }
  },
  {
    prop: 'isRequired',
    label: '必填',
    width: 60,
    render: scope => {
      return (
        <div>
          <el-checkbox vModel_trim={scope.row.isRequired} true-value="1" false-value="0" />
        </div>
      )
    }
  },
  {
    prop: 'htmlType',
    label: '显示类型',
    width: 120,
    render: scope => {
      return (
        <div>
          <el-select vModel_trim={scope.row.htmlType}>
            <el-option label="文本框" value="input" />
            <el-option label="文本域" value="textarea" />
            <el-option label="下拉框" value="select" />
            <el-option label="单选框" value="radio" />
            <el-option label="复选框" value="checkbox" />
            <el-option label="日期控件" value="datetime" />
            <el-option label="图片上传" value="imageUpload" />
            <el-option label="文件上传" value="fileUpload" />
            <el-option label="富文本控件" value="editor" />
          </el-select>
        </div>
      )
    }
  },
  {
    prop: 'dictType',
    label: '字典类型',
    width: 150,
    render: scope => {
      return (
        <div>
          <el-select vModel_trim={scope.row.dictType}>
            {prop.dictOptions.map((item, index) => (
              <el-option key={index} label={item.dictName} value={item.dictType} />
            ))}
          </el-select>
        </div>
      )
    }
  }
])
</script>