工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <el-table ref="dragTable" :data="formData" :max-height="tableHeight" row-key="columnId">
3     <el-table-column
4       :show-overflow-tooltip="true"
5       label="字段列名"
6       min-width="10%"
7       prop="columnName"
8     />
9     <el-table-column label="字段描述" min-width="10%">
10       <template #default="scope">
11         <el-input v-model="scope.row.columnComment" />
12       </template>
13     </el-table-column>
14     <el-table-column
15       :show-overflow-tooltip="true"
16       label="物理类型"
17       min-width="10%"
18       prop="dataType"
19     />
20     <el-table-column label="Java类型" min-width="11%">
21       <template #default="scope">
22         <el-select v-model="scope.row.javaType">
23           <el-option label="Long" value="Long" />
24           <el-option label="String" value="String" />
25           <el-option label="Integer" value="Integer" />
26           <el-option label="Double" value="Double" />
27           <el-option label="BigDecimal" value="BigDecimal" />
28           <el-option label="LocalDateTime" value="LocalDateTime" />
29           <el-option label="Boolean" value="Boolean" />
30         </el-select>
31       </template>
32     </el-table-column>
33     <el-table-column label="java属性" min-width="10%">
34       <template #default="scope">
35         <el-input v-model="scope.row.javaField" />
36       </template>
37     </el-table-column>
38     <el-table-column label="插入" min-width="4%">
39       <template #default="scope">
40         <el-checkbox v-model="scope.row.createOperation" false-label="false" true-label="true" />
41       </template>
42     </el-table-column>
43     <el-table-column label="编辑" min-width="4%">
44       <template #default="scope">
45         <el-checkbox v-model="scope.row.updateOperation" false-label="false" true-label="true" />
46       </template>
47     </el-table-column>
48     <el-table-column label="列表" min-width="4%">
49       <template #default="scope">
50         <el-checkbox
51           v-model="scope.row.listOperationResult"
52           false-label="false"
53           true-label="true"
54         />
55       </template>
56     </el-table-column>
57     <el-table-column label="查询" min-width="4%">
58       <template #default="scope">
59         <el-checkbox v-model="scope.row.listOperation" false-label="false" true-label="true" />
60       </template>
61     </el-table-column>
62     <el-table-column label="查询方式" min-width="10%">
63       <template #default="scope">
64         <el-select v-model="scope.row.listOperationCondition">
65           <el-option label="=" value="=" />
66           <el-option label="!=" value="!=" />
67           <el-option label=">" value=">" />
68           <el-option label=">=" value=">=" />
69           <el-option label="<" value="<>" />
70           <el-option label="<=" value="<=" />
71           <el-option label="LIKE" value="LIKE" />
72           <el-option label="BETWEEN" value="BETWEEN" />
73         </el-select>
74       </template>
75     </el-table-column>
76     <el-table-column label="允许空" min-width="5%">
77       <template #default="scope">
78         <el-checkbox v-model="scope.row.nullable" false-label="false" true-label="true" />
79       </template>
80     </el-table-column>
81     <el-table-column label="显示类型" min-width="12%">
82       <template #default="scope">
83         <el-select v-model="scope.row.htmlType">
84           <el-option label="文本框" value="input" />
85           <el-option label="文本域" value="textarea" />
86           <el-option label="下拉框" value="select" />
87           <el-option label="单选框" value="radio" />
88           <el-option label="复选框" value="checkbox" />
89           <el-option label="日期控件" value="datetime" />
90           <el-option label="图片上传" value="imageUpload" />
91           <el-option label="文件上传" value="fileUpload" />
92           <el-option label="富文本控件" value="editor" />
93         </el-select>
94       </template>
95     </el-table-column>
96     <el-table-column label="字典类型" min-width="12%">
97       <template #default="scope">
98         <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
99           <el-option
100             v-for="dict in dictOptions"
101             :key="dict.id"
102             :label="dict.name"
103             :value="dict.type"
104           />
105         </el-select>
106       </template>
107     </el-table-column>
108     <el-table-column label="示例" min-width="10%">
109       <template #default="scope">
110         <el-input v-model="scope.row.example" />
111       </template>
112     </el-table-column>
113   </el-table>
114 </template>
115 <script lang="ts" setup>
116 import { PropType } from 'vue'
117 import * as CodegenApi from '@/api/infra/codegen'
118 import * as DictDataApi from '@/api/system/dict/dict.type'
119
120 defineOptions({ name: 'InfraCodegenColumInfoForm' })
121
122 const props = defineProps({
123   columns: {
124     type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
125     default: () => null
126   }
127 })
128
129 const formData = ref<CodegenApi.CodegenColumnVO[]>([])
130 const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
131
132 /** 查询字典下拉列表 */
133 const dictOptions = ref<DictDataApi.DictTypeVO[]>()
134 const getDictOptions = async () => {
135   dictOptions.value = await DictDataApi.getSimpleDictTypeList()
136 }
137
138 watch(
139   () => props.columns,
140   (columns) => {
141     if (!columns) return
142     formData.value = columns
143   },
144   {
145     deep: true,
146     immediate: true
147   }
148 )
149
150 onMounted(async () => {
151   await getDictOptions()
152 })
153 </script>