editTable.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <el-card>
  3. <el-tabs v-model="activeName">
  4. <el-tab-pane label="基本信息" name="basic">
  5. <basic-info-form ref="basicInfo" :info="info" />
  6. </el-tab-pane>
  7. <el-tab-pane label="字段信息" name="columnInfo">
  8. <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
  9. <el-table-column label="序号" type="index" min-width="5%"/>
  10. <el-table-column
  11. label="字段列名"
  12. prop="columnName"
  13. min-width="10%"
  14. :show-overflow-tooltip="true"
  15. />
  16. <el-table-column label="字段描述" min-width="10%">
  17. <template #default="scope">
  18. <el-input v-model="scope.row.columnComment"></el-input>
  19. </template>
  20. </el-table-column>
  21. <el-table-column
  22. label="物理类型"
  23. prop="columnType"
  24. min-width="10%"
  25. :show-overflow-tooltip="true"
  26. />
  27. <el-table-column label="Java类型" min-width="11%">
  28. <template #default="scope">
  29. <el-select v-model="scope.row.javaType">
  30. <el-option label="Long" value="Long" />
  31. <el-option label="String" value="String" />
  32. <el-option label="Integer" value="Integer" />
  33. <el-option label="Double" value="Double" />
  34. <el-option label="BigDecimal" value="BigDecimal" />
  35. <el-option label="Date" value="Date" />
  36. <el-option label="Boolean" value="Boolean" />
  37. </el-select>
  38. </template>
  39. </el-table-column>
  40. <el-table-column label="java属性" min-width="10%">
  41. <template #default="scope">
  42. <el-input v-model="scope.row.javaField"></el-input>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="插入" min-width="5%">
  46. <template #default="scope">
  47. <el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="编辑" min-width="5%">
  51. <template #default="scope">
  52. <el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
  53. </template>
  54. </el-table-column>
  55. <el-table-column label="列表" min-width="5%">
  56. <template #default="scope">
  57. <el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="查询" min-width="5%">
  61. <template #default="scope">
  62. <el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="查询方式" min-width="10%">
  66. <template #default="scope">
  67. <el-select v-model="scope.row.queryType">
  68. <el-option label="=" value="EQ" />
  69. <el-option label="!=" value="NE" />
  70. <el-option label=">" value="GT" />
  71. <el-option label=">=" value="GTE" />
  72. <el-option label="<" value="LT" />
  73. <el-option label="<=" value="LTE" />
  74. <el-option label="LIKE" value="LIKE" />
  75. <el-option label="BETWEEN" value="BETWEEN" />
  76. </el-select>
  77. </template>
  78. </el-table-column>
  79. <el-table-column label="必填" min-width="5%">
  80. <template #default="scope">
  81. <el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="显示类型" min-width="12%">
  85. <template #default="scope">
  86. <el-select v-model="scope.row.htmlType">
  87. <el-option label="文本框" value="input" />
  88. <el-option label="文本域" value="textarea" />
  89. <el-option label="下拉框" value="select" />
  90. <el-option label="单选框" value="radio" />
  91. <el-option label="复选框" value="checkbox" />
  92. <el-option label="日期控件" value="datetime" />
  93. <el-option label="图片上传" value="imageUpload" />
  94. <el-option label="文件上传" value="fileUpload" />
  95. <el-option label="富文本控件" value="editor" />
  96. </el-select>
  97. </template>
  98. </el-table-column>
  99. <el-table-column label="字典类型" min-width="12%">
  100. <template #default="scope">
  101. <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
  102. <el-option
  103. v-for="dict in dictOptions"
  104. :key="dict.dictType"
  105. :label="dict.dictName"
  106. :value="dict.dictType">
  107. <span style="float: left">{{ dict.dictName }}</span>
  108. <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
  109. </el-option>
  110. </el-select>
  111. </template>
  112. </el-table-column>
  113. </el-table>
  114. </el-tab-pane>
  115. <el-tab-pane label="生成信息" name="genInfo">
  116. <gen-info-form ref="genInfo" :info="info" :tables="tables" />
  117. </el-tab-pane>
  118. </el-tabs>
  119. <el-form label-width="100px">
  120. <div style="text-align: center;margin-left:-100px;margin-top:10px;">
  121. <el-button type="primary" @click="submitForm()">提交</el-button>
  122. <el-button @click="close()">返回</el-button>
  123. </div>
  124. </el-form>
  125. </el-card>
  126. </template>
  127. <script setup name="GenEdit">
  128. import { getGenTable, updateGenTable } from "@/api/tool/gen";
  129. import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
  130. import basicInfoForm from "./basicInfoForm";
  131. import genInfoForm from "./genInfoForm";
  132. const route = useRoute();
  133. const { proxy } = getCurrentInstance();
  134. const activeName = ref("columnInfo");
  135. const tableHeight = ref(document.documentElement.scrollHeight - 245 + "px");
  136. const tables = ref([]);
  137. const columns = ref([]);
  138. const dictOptions = ref([]);
  139. const info = ref({});
  140. /** 提交按钮 */
  141. function submitForm() {
  142. const basicForm = proxy.$refs.basicInfo.$refs.basicInfoForm;
  143. const genForm = proxy.$refs.genInfo.$refs.genInfoForm;
  144. Promise.all([basicForm, genForm].map(getFormPromise)).then(res => {
  145. const validateResult = res.every(item => !!item);
  146. if (validateResult) {
  147. const genTable = Object.assign({}, info.value);
  148. genTable.columns = columns.value;
  149. genTable.params = {
  150. treeCode: info.value.treeCode,
  151. treeName: info.value.treeName,
  152. treeParentCode: info.value.treeParentCode,
  153. parentMenuId: info.value.parentMenuId
  154. };
  155. updateGenTable(genTable).then(res => {
  156. proxy.$modal.msgSuccess(res.msg);
  157. if (res.code === 200) {
  158. close();
  159. }
  160. });
  161. } else {
  162. proxy.$modal.msgError("表单校验未通过,请重新检查提交内容");
  163. }
  164. });
  165. }
  166. function getFormPromise(form) {
  167. return new Promise(resolve => {
  168. form.validate(res => {
  169. resolve(res);
  170. });
  171. });
  172. }
  173. function close() {
  174. const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
  175. proxy.$tab.closeOpenPage(obj);
  176. }
  177. (() => {
  178. const tableId = route.params && route.params.tableId;
  179. if (tableId) {
  180. // 获取表详细信息
  181. getGenTable(tableId).then(res => {
  182. columns.value = res.data.rows;
  183. info.value = res.data.info;
  184. tables.value = res.data.tables;
  185. });
  186. /** 查询字典下拉列表 */
  187. getDictOptionselect().then(response => {
  188. dictOptions.value = response.data;
  189. });
  190. }
  191. })();
  192. </script>