refactor: codegen

yudao-ui-admin-vue3/src/views/infra/codegen/components/CloumInfoForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ElTable, ElTableColumn, ElInput, ElSelect, ElOption, ElCheckbox } from 'element-plus'
 import { onMounted, PropType, ref } from 'vue'
+import { ElInput, ElSelect, ElOption } from 'element-plus'
 import { CodegenColumnVO } from '@/api/infra/codegen/types'
 import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
 import { DictTypeVO } from '@/api/system/dict/types'
@@ -16,7 +16,6 @@ const getDictOptions = async () => {
   const res = await listSimpleDictTypeApi()
   dictOptions.value = res
 }
-const tableHeight = document.documentElement.scrollHeight - 245 + 'px'
 onMounted(async () => {
   await getDictOptions()
 })
@@ -25,25 +24,15 @@ defineExpose({
 })
 </script>
 <template>
-  <el-table ref="dragTable" :data="info" row-key="columnId" :max-height="tableHeight">
-    <el-table-column
-      label="字段列名"
-      prop="columnName"
-      min-width="10%"
-      :show-overflow-tooltip="true"
-    />
-    <el-table-column label="字段描述" min-width="10%" prop="columnComment">
+  <vxe-table ref="dragTable" :data="info" stripe :column-config="{ resizable: true }">
+    <vxe-column title="字段列名" field="columnName" width="10%" />
+    <vxe-column title="字段描述" field="columnComment">
       <template #default="{ row }">
         <el-input v-model="row.columnComment" />
       </template>
-    </el-table-column>
-    <el-table-column
-      label="物理类型"
-      prop="dataType"
-      min-width="10%"
-      :show-overflow-tooltip="true"
-    />
-    <el-table-column label="Java类型" min-width="11%" prop="javaType">
+    </vxe-column>
+    <vxe-column title="物理类型" field="dataType" width="10%" />
+    <vxe-column title="Java类型" width="10%" field="javaType">
       <template #default="{ row }">
         <el-select v-model="row.javaType">
           <el-option label="Long" value="Long" />
@@ -55,33 +44,33 @@ defineExpose({
           <el-option label="Boolean" value="Boolean" />
         </el-select>
       </template>
-    </el-table-column>
-    <el-table-column label="java属性" min-width="10%" prop="javaField">
+    </vxe-column>
+    <vxe-column title="java属性" width="10%" field="javaField">
       <template #default="{ row }">
         <el-input v-model="row.javaField" />
       </template>
-    </el-table-column>
-    <el-table-column label="插入" min-width="4%" prop="createOperation">
+    </vxe-column>
+    <vxe-column title="插入" width="4%" field="createOperation">
       <template #default="{ row }">
-        <el-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
+        <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
       </template>
-    </el-table-column>
-    <el-table-column label="编辑" min-width="4%" prop="updateOperation">
+    </vxe-column>
+    <vxe-column title="编辑" width="4%" field="updateOperation">
       <template #default="{ row }">
-        <el-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
+        <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
       </template>
-    </el-table-column>
-    <el-table-column label="列表" min-width="4%" prop="listOperationResult">
+    </vxe-column>
+    <vxe-column title="列表" width="4%" field="listOperationResult">
       <template #default="{ row }">
-        <el-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
+        <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
       </template>
-    </el-table-column>
-    <el-table-column label="查询" min-width="4%" prop="listOperation">
+    </vxe-column>
+    <vxe-column title="查询" width="4%" field="listOperation">
       <template #default="{ row }">
-        <el-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
+        <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
       </template>
-    </el-table-column>
-    <el-table-column label="查询方式" min-width="10%" prop="listOperationCondition">
+    </vxe-column>
+    <vxe-column title="查询方式" width="8%" field="listOperationCondition">
       <template #default="{ row }">
         <el-select v-model="row.listOperationCondition">
           <el-option label="=" value="=" />
@@ -94,13 +83,13 @@ defineExpose({
           <el-option label="BETWEEN" value="BETWEEN" />
         </el-select>
       </template>
-    </el-table-column>
-    <el-table-column label="允许空" min-width="5%" prop="nullable">
+    </vxe-column>
+    <vxe-column title="允许空" width="4%" field="nullable">
       <template #default="{ row }">
-        <el-checkbox true-label="true" false-label="false" v-model="row.nullable" />
+        <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
       </template>
-    </el-table-column>
-    <el-table-column label="显示类型" min-width="12%" prop="htmlType">
+    </vxe-column>
+    <vxe-column title="显示类型" width="10%" field="htmlType">
       <template #default="{ row }">
         <el-select v-model="row.htmlType">
           <el-option label="文本框" value="input" />
@@ -114,8 +103,8 @@ defineExpose({
           <el-option label="富文本控件" value="editor" />
         </el-select>
       </template>
-    </el-table-column>
-    <el-table-column label="字典类型" min-width="12%" prop="dictType">
+    </vxe-column>
+    <vxe-column title="字典类型" width="10%" field="dictType">
       <template #default="{ row }">
         <el-select v-model="row.dictType" clearable filterable placeholder="请选择">
           <el-option
@@ -126,11 +115,11 @@ defineExpose({
           />
         </el-select>
       </template>
-    </el-table-column>
-    <el-table-column label="示例" min-width="10%" prop="example">
+    </vxe-column>
+    <vxe-column title="示例" field="example">
       <template #default="{ row }">
         <el-input v-model="row.example" />
       </template>
-    </el-table-column>
-  </el-table>
+    </vxe-column>
+  </vxe-table>
 </template>