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