CloumInfoForm.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <vxe-table
  3. ref="dragTable"
  4. :data="info"
  5. max-height="600"
  6. stripe
  7. class="xtable-scrollbar"
  8. :column-config="{ resizable: true }"
  9. >
  10. <vxe-column title="字段列名" field="columnName" fixed="left" width="80" />
  11. <vxe-column title="字段描述" field="columnComment">
  12. <template #default="{ row }">
  13. <el-input v-model="row.columnComment" />
  14. </template>
  15. </vxe-column>
  16. <vxe-column title="物理类型" field="dataType" width="10%" />
  17. <vxe-column title="Java类型" width="10%" field="javaType">
  18. <template #default="{ row }">
  19. <el-select v-model="row.javaType">
  20. <el-option label="Long" value="Long" />
  21. <el-option label="String" value="String" />
  22. <el-option label="Integer" value="Integer" />
  23. <el-option label="Double" value="Double" />
  24. <el-option label="BigDecimal" value="BigDecimal" />
  25. <el-option label="Date" value="Date" />
  26. <el-option label="Boolean" value="Boolean" />
  27. </el-select>
  28. </template>
  29. </vxe-column>
  30. <vxe-column title="java属性" width="10%" field="javaField">
  31. <template #default="{ row }">
  32. <el-input v-model="row.javaField" />
  33. </template>
  34. </vxe-column>
  35. <vxe-column title="插入" width="4%" field="createOperation">
  36. <template #default="{ row }">
  37. <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
  38. </template>
  39. </vxe-column>
  40. <vxe-column title="编辑" width="4%" field="updateOperation">
  41. <template #default="{ row }">
  42. <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
  43. </template>
  44. </vxe-column>
  45. <vxe-column title="列表" width="4%" field="listOperationResult">
  46. <template #default="{ row }">
  47. <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
  48. </template>
  49. </vxe-column>
  50. <vxe-column title="查询" width="4%" field="listOperation">
  51. <template #default="{ row }">
  52. <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
  53. </template>
  54. </vxe-column>
  55. <vxe-column title="查询方式" width="8%" field="listOperationCondition">
  56. <template #default="{ row }">
  57. <el-select v-model="row.listOperationCondition">
  58. <el-option label="=" value="=" />
  59. <el-option label="!=" value="!=" />
  60. <el-option label=">" value=">" />
  61. <el-option label=">=" value=">=" />
  62. <el-option label="<" value="<>" />
  63. <el-option label="<=" value="<=" />
  64. <el-option label="LIKE" value="LIKE" />
  65. <el-option label="BETWEEN" value="BETWEEN" />
  66. </el-select>
  67. </template>
  68. </vxe-column>
  69. <vxe-column title="允许空" width="4%" field="nullable">
  70. <template #default="{ row }">
  71. <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
  72. </template>
  73. </vxe-column>
  74. <vxe-column title="显示类型" width="10%" field="htmlType">
  75. <template #default="{ row }">
  76. <el-select v-model="row.htmlType">
  77. <el-option label="文本框" value="input" />
  78. <el-option label="文本域" value="textarea" />
  79. <el-option label="下拉框" value="select" />
  80. <el-option label="单选框" value="radio" />
  81. <el-option label="复选框" value="checkbox" />
  82. <el-option label="日期控件" value="datetime" />
  83. <el-option label="图片上传" value="imageUpload" />
  84. <el-option label="文件上传" value="fileUpload" />
  85. <el-option label="富文本控件" value="editor" />
  86. </el-select>
  87. </template>
  88. </vxe-column>
  89. <vxe-column title="字典类型" width="10%" field="dictType">
  90. <template #default="{ row }">
  91. <el-select v-model="row.dictType" clearable filterable placeholder="请选择">
  92. <el-option
  93. v-for="dict in dictOptions"
  94. :key="dict.id"
  95. :label="dict.name"
  96. :value="dict.type"
  97. />
  98. </el-select>
  99. </template>
  100. </vxe-column>
  101. <vxe-column title="示例" field="example">
  102. <template #default="{ row }">
  103. <el-input v-model="row.example" />
  104. </template>
  105. </vxe-column>
  106. </vxe-table>
  107. </template>
  108. <script setup lang="ts">
  109. import { onMounted, PropType, ref } from 'vue'
  110. import { ElInput, ElSelect, ElOption } from 'element-plus'
  111. import { DictTypeVO } from '@/api/system/dict/types'
  112. import { CodegenColumnVO } from '@/api/infra/codegen/types'
  113. import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
  114. const props = defineProps({
  115. info: {
  116. type: Array as unknown as PropType<CodegenColumnVO[]>,
  117. default: () => null
  118. }
  119. })
  120. /** 查询字典下拉列表 */
  121. const dictOptions = ref<DictTypeVO[]>()
  122. const getDictOptions = async () => {
  123. const res = await listSimpleDictTypeApi()
  124. dictOptions.value = res
  125. }
  126. onMounted(async () => {
  127. await getDictOptions()
  128. })
  129. defineExpose({
  130. info: props.info
  131. })
  132. </script>