Newer
Older
KaiFengPC / src / views / system / tool / index.vue
@鲁yixuan 鲁yixuan on 19 Aug 9 KB updata
  1. <template>
  2. <!-- 代码生成 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="表名称" prop="tableName">
  6. <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
  7. </el-form-item>
  8. <el-form-item label="表描述" prop="tableComment">
  9. <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable style="width: 200px" @keyup.enter="handleQuery" />
  10. </el-form-item>
  11. <el-form-item label="创建时间" style="width: 308px">
  12. <el-date-picker
  13. v-model="dateRange"
  14. value-format="YYYY-MM-DD"
  15. type="daterange"
  16. range-separator="-"
  17. start-placeholder="开始日期"
  18. end-placeholder="结束日期"
  19. ></el-date-picker>
  20. </el-form-item>
  21. <el-form-item>
  22. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  23. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  24. </el-form-item>
  25. </el-form>
  26.  
  27. <el-row :gutter="10" class="mb8">
  28. <el-col :span="1.5">
  29. <el-button type="primary" plain icon="Download" @click="handleGenTable" v-hasPermi="['system:tool:code']">生成</el-button>
  30. </el-col>
  31. <el-col :span="1.5">
  32. <el-button type="info" plain icon="Upload" @click="openImportTable" v-hasPermi="['system:tool:import']">导入</el-button>
  33. </el-col>
  34. <el-col :span="1.5">
  35. <el-button type="success" plain icon="Edit" :disabled="single" @click="handleEditTable" v-hasPermi="['system:tool:edit']"
  36. >修改</el-button
  37. >
  38. </el-col>
  39. <el-col :span="1.5">
  40. <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:tool:remove']"
  41. >删除</el-button
  42. >
  43. </el-col>
  44. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  45. </el-row>
  46.  
  47. <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
  48. <el-table-column type="selection" width="55"></el-table-column>
  49. <el-table-column label="序号" type="index" width="50">
  50. <template #default="scope">
  51. <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="表名称" prop="tableName" show-overflow-tooltip />
  55. <el-table-column label="表描述" prop="tableComment" show-overflow-tooltip />
  56. <el-table-column label="实体" prop="className" show-overflow-tooltip />
  57. <el-table-column label="创建时间" prop="createTime" width="160" />
  58. <el-table-column label="更新时间" prop="updateTime" width="160" />
  59. <el-table-column label="操作" width="330" class-name="small-padding fixed-width">
  60. <template #default="scope">
  61. <el-tooltip content="预览" placement="top">
  62. <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['system:tool:preview']"></el-button>
  63. </el-tooltip>
  64. <el-tooltip content="编辑" placement="top">
  65. <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['system:tool:edit']"></el-button>
  66. </el-tooltip>
  67. <el-tooltip content="删除" placement="top">
  68. <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tool:remove']"></el-button>
  69. </el-tooltip>
  70. <el-tooltip content="同步" placement="top">
  71. <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['system:tool:edit']"></el-button>
  72. </el-tooltip>
  73. <el-tooltip content="生成代码" placement="top">
  74. <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['system:tool:code']"></el-button>
  75. </el-tooltip>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. <pagination
  80. v-show="total > 0"
  81. :total="total"
  82. v-model:page="queryParams.pageNum"
  83. v-model:limit="queryParams.pageSize"
  84. @pagination="getList"
  85. />
  86.  
  87. <!-- 预览界面 -->
  88. <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
  89. <el-tabs v-model="preview.activeName">
  90. <el-tab-pane
  91. v-for="(value, key) in preview.data"
  92. :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
  93. :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
  94. :key="value"
  95. >
  96. <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float: right"
  97. >&nbsp;复制</el-link
  98. >
  99. <pre>{{ value }}</pre>
  100. </el-tab-pane>
  101. </el-tabs>
  102. </el-dialog>
  103. <import-table ref="importRef" @ok="handleQuery" />
  104. <!-- 修改弹窗 -->
  105. <el-dialog title="修改代码生成" v-model="dialogEdit" width="80%" top="5vh" append-to-body>
  106. <EditTable v-if="dialogEdit" :tableIdEdit="tableIdEdit" :pageNumEdit="pageNumEdit" @childClose="childClose"></EditTable>
  107. </el-dialog>
  108. </div>
  109. </template>
  110.  
  111. <script setup name="Gen">
  112. import { listTable, previewTable, delTable, genCode, synchDb } from '@/api/system/tool';
  113. import importTable from './importTable';
  114. import EditTable from './editTable.vue'; //修改
  115.  
  116. const { proxy } = getCurrentInstance();
  117.  
  118. const dialogEdit = ref(false);
  119. const tableIdEdit = ref('');
  120. const pageNumEdit = ref(1);
  121. const tableList = ref([]);
  122. const loading = ref(true);
  123. const showSearch = ref(true);
  124. const ids = ref([]);
  125. const single = ref(true);
  126. const multiple = ref(true);
  127. const total = ref(0);
  128. const tableNames = ref([]);
  129. const dateRange = ref([]);
  130. const selectRow = ref([]);
  131. const data = reactive({
  132. queryParams: {
  133. pageNum: 1,
  134. pageSize: 10,
  135. tableName: undefined,
  136. tableComment: undefined,
  137. },
  138. preview: {
  139. open: false,
  140. title: '代码预览',
  141. data: {},
  142. activeName: 'domain.java',
  143. },
  144. });
  145.  
  146. const { queryParams, preview } = toRefs(data);
  147.  
  148. onActivated(() => {
  149. childClose();
  150. });
  151. // 子组件调用
  152. function childClose() {
  153. dialogEdit.value = false;
  154. queryParams.value.pageNum = queryParams.value.pageNum;
  155. dateRange.value = [];
  156. proxy.resetForm('queryForm');
  157. getList();
  158. }
  159.  
  160. /** 搜索表集合 */
  161. function getList() {
  162. loading.value = true;
  163. listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
  164. tableList.value = response.data;
  165. total.value = response.total;
  166. loading.value = false;
  167. });
  168. }
  169. /** 搜索按钮操作 */
  170. function handleQuery() {
  171. queryParams.value.pageNum = 1;
  172. getList();
  173. }
  174. /** 生成代码操作 */
  175. function handleGenTable(row) {
  176. const tbNames = row.tableName || tableNames.value;
  177. if (tbNames == '') {
  178. proxy.$modal.msgError('请选择要生成的数据');
  179. return;
  180. }
  181. if (row.genType === '1') {
  182. genCode(row.tableName).then(response => {
  183. proxy.$modal.msgSuccess('成功生成到自定义路径:' + row.genPath);
  184. });
  185. } else {
  186. let zipName = tbNames.length > 1 ? `newfiber.zip` : `${selectRow.value[0].functionName}.zip`;
  187. proxy.$download.zip('/code/gen/batchGenCode?tables=' + tbNames, zipName);
  188. }
  189. }
  190. /** 同步数据库操作 */
  191. function handleSynchDb(row) {
  192. const tableName = row.tableName;
  193. proxy.$modal
  194. .confirm('确认要强制同步"' + tableName + '"表结构吗?')
  195. .then(function () {
  196. return synchDb(tableName);
  197. })
  198. .then(() => {
  199. proxy.$modal.msgSuccess('同步成功');
  200. })
  201. .catch(() => {});
  202. }
  203. /** 打开导入表弹窗 */
  204. function openImportTable() {
  205. proxy.$refs['importRef'].show();
  206. }
  207. /** 重置按钮操作 */
  208. function resetQuery() {
  209. dateRange.value = [];
  210. proxy.resetForm('queryRef');
  211. handleQuery();
  212. }
  213. /** 预览按钮 */
  214. function handlePreview(row) {
  215. previewTable(row.tableId).then(response => {
  216. preview.value.data = response.data;
  217. preview.value.open = true;
  218. preview.value.activeName = 'domain.java';
  219. });
  220. }
  221. /** 复制代码成功 */
  222. function copyTextSuccess() {
  223. proxy.$modal.msgSuccess('复制成功');
  224. }
  225. // 多选框选中数据
  226. function handleSelectionChange(selection) {
  227. ids.value = selection.map(item => item.tableId);
  228. tableNames.value = selection.map(item => item.tableName);
  229. single.value = selection.length != 1;
  230. multiple.value = !selection.length;
  231. selectRow.value = selection;
  232. }
  233. /** 修改按钮操作 */
  234. function handleEditTable(row) {
  235. tableIdEdit.value = row.tableId || ids.value[0];
  236. pageNumEdit.value = queryParams.value.pageNum;
  237. dialogEdit.value = true;
  238. }
  239. /** 删除按钮操作 */
  240. function handleDelete(row) {
  241. const tableIds = row.tableId || ids.value;
  242. proxy.$modal
  243. .confirm('是否确认删除表编号为"' + tableIds + '"的数据项?')
  244. .then(function () {
  245. return delTable(tableIds);
  246. })
  247. .then(() => {
  248. getList();
  249. proxy.$modal.msgSuccess('删除成功');
  250. })
  251. .catch(() => {});
  252. }
  253.  
  254. getList();
  255. </script>