index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="10" class="mb8">
  4. <el-col :span="1.5">
  5. <el-button type="warning" plain icon="el-icon-plus" size="mini" @click="handleGenTableadd">新增</el-button>
  6. <!-- v-hasPermi="['tool:gen:code']" -->
  7. </el-col>
  8. <el-col :span="1.5">
  9. <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleGenTable" v-hasPermi="['tool:gen:code']">生成</el-button>
  10. </el-col>
  11. <el-col :span="1.5">
  12. <el-button type="info" plain icon="el-icon-upload" size="mini" @click="openImportTable" v-hasPermi="['tool:gen:import']">导入</el-button>
  13. </el-col>
  14. <el-col :span="1.5">
  15. <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleEditTable"
  16. v-hasPermi="['tool:gen:edit']">修改</el-button>
  17. </el-col>
  18. <el-col :span="1.5">
  19. <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
  20. v-hasPermi="['tool:gen:remove']">删除</el-button>
  21. </el-col>
  22. <el-col :span="1.5">
  23. <el-button type="danger" plain icon="el-icon-refresh" size="mini" style="background-color: #FDD6F3;color: #C790B9;border: 1px solid #C790B9;"
  24. @click="handleCxbtn" v-hasPermi="['tool:gen:remove']">重载缓存</el-button>
  25. </el-col>
  26. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  27. </el-row>
  28. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  29. <el-form-item label="表名称" prop="tableName">
  30. <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable size="small" @keyup.enter.native="handleQuery" />
  31. </el-form-item>
  32. <el-form-item label="表描述" prop="tableComment">
  33. <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable size="small" @keyup.enter.native="handleQuery" />
  34. </el-form-item>
  35. <el-form-item label="创建时间">
  36. <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
  37. range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
  38. </el-form-item>
  39. <el-form-item>
  40. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  41. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  42. </el-form-item>
  43. </el-form>
  44. <el-table v-loading="loading" style="max-height: calc(100vh - 288px);overflow-y: auto;" :data="tableList"
  45. @selection-change="handleSelectionChange">
  46. <el-table-column type="selection" align="center" width="55"></el-table-column>
  47. <el-table-column label="序号" type="index" width="50" align="center">
  48. <template slot-scope="scope">
  49. <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
  50. </template>
  51. </el-table-column>
  52. <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" />
  53. <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" />
  54. <el-table-column label="实际数据库表" align="center" prop="realTableName" :show-overflow-tooltip="true" />
  55. <el-table-column label="是否菜单" align="center">
  56. <template slot-scope="scope">
  57. <el-checkbox true-label="Y" false-label="N" v-model="scope.row.isMenu"></el-checkbox>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="菜单权限" align="center" prop="menuRole" />
  61. <!-- <el-table-column label="创建时间" align="center" prop="createTime" />
  62. <el-table-column label="更新时间" align="center" prop="updateTime" /> -->
  63. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  64. <template slot-scope="scope">
  65. <!-- <el-button
  66. type="text"
  67. size="small"
  68. icon="el-icon-view"
  69. @click="handlePreview(scope.row)"
  70. v-hasPermi="['tool:gen:preview']"
  71. >预览</el-button> -->
  72. <el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']">编辑</el-button>
  73. <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">删除</el-button>
  74. <el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']">同步</el-button>
  75. <!-- <el-button
  76. type="text"
  77. size="small"
  78. icon="el-icon-download"
  79. @click="handleGenTable(scope.row)"
  80. v-hasPermi="['tool:gen:code']"
  81. >生成代码</el-button> -->
  82. </template>
  83. </el-table-column>
  84. </el-table>
  85. <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
  86. @pagination="getList" />
  87. <!-- 新增弹框 -->
  88. <el-dialog :close-on-click-modal="false" :title="preview.title" :visible.sync="preview.open" width="65%" top="5vh"
  89. append-to-body>
  90. <!-- <el-tabs v-model="preview.activeName">
  91. <el-tab-pane
  92. v-for="(value, key) in preview.data"
  93. :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
  94. :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
  95. :key="key"
  96. >
  97. <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
  98. </el-tab-pane>
  99. </el-tabs> -->
  100. <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  101. <el-row :gutter="20">
  102. <el-col :span="12">
  103. <el-form-item label="表名称" prop="tableName">
  104. <el-input v-model="form.tableName" placeholder="请输入表名称" />
  105. </el-form-item>
  106. </el-col>
  107. <el-col :span="12">
  108. <el-form-item label="实际数据库表" prop="className">
  109. <el-input v-model="form.className" placeholder="请输入实际数据库表" />
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="24">
  113. <el-form-item label="表描述" prop="tableComment">
  114. <el-input v-model="form.tableComment" placeholder="请输入表描述" />
  115. </el-form-item>
  116. </el-col>
  117. <el-col :span="12">
  118. <el-form-item label="是否菜单">
  119. <el-radio-group v-model="form.isMenu">
  120. <el-radio label="Y">是</el-radio>
  121. <el-radio label="N">否</el-radio>
  122. </el-radio-group>
  123. </el-form-item>
  124. </el-col>
  125. <el-col :span="12">
  126. <el-form-item label="列数" prop="tableColumn">
  127. <el-input type="number" :max="4" v-model="form.tableColumn" placeholder="请输入列数" maxlength="50" />
  128. </el-form-item>
  129. </el-col>
  130. <el-col :span="12">
  131. <el-form-item label="菜单权限" prop="menuRole">
  132. <el-input v-model="form.menuRole" placeholder="请输入菜单权限" />
  133. </el-form-item>
  134. </el-col>
  135. <el-col :span="12">
  136. <el-form-item label="新增程序" prop="triggerCreate">
  137. <el-input v-model="form.triggerCreate" placeholder="请输入新增程序" />
  138. </el-form-item>
  139. </el-col>
  140. <el-col :span="12">
  141. <el-form-item label="检索程序" prop="triggerRetrieve">
  142. <el-input v-model="form.triggerRetrieve" placeholder="请输入检索程序" maxlength="50" />
  143. </el-form-item>
  144. </el-col>
  145. <el-col :span="12">
  146. <el-form-item label="微改程序" prop="triggerUpdate">
  147. <el-input v-model="form.triggerUpdate" placeholder="请输入微改程序" maxlength="50" />
  148. </el-form-item>
  149. </el-col>
  150. <el-col :span="12">
  151. <el-form-item label="删除程序" prop="triggerDelete">
  152. <el-input v-model="form.triggerDelete" placeholder="请输入删除程序" maxlength="50" />
  153. </el-form-item>
  154. </el-col>
  155. <el-col :span="12">
  156. <el-form-item label="提交程序" prop="triggerSubmit">
  157. <el-input v-model="form.triggerSubmit" placeholder="请输入提交程序" maxlength="50" />
  158. </el-form-item>
  159. </el-col>
  160. <el-col :span="12">
  161. <el-form-item label="过滤条件" prop="filterConditions">
  162. <el-input v-model="form.filterConditions" placeholder="请输入过滤条件" maxlength="50" />
  163. </el-form-item>
  164. </el-col>
  165. <el-col :span="12">
  166. <el-form-item label="扩展属性" prop="extendedAttributes">
  167. <el-input v-model="form.extendedAttributes" type="textarea" placeholder="请输入内容"></el-input>
  168. </el-form-item>
  169. </el-col>
  170. <el-col :span="12">
  171. <el-form-item label="备注" prop="remark">
  172. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  173. </el-form-item>
  174. </el-col>
  175. </el-row>
  176. </el-form>
  177. <div slot="footer" class="dialog-footer">
  178. <el-button type="primary" @click="submitForm">确 定</el-button>
  179. <el-button @click="cancel">取 消</el-button>
  180. </div>
  181. </el-dialog>
  182. <import-table ref="import" @ok="handleQuery" />
  183. </div>
  184. </template>
  185. <script>
  186. import {
  187. listTable,
  188. previewTable,
  189. delTable,
  190. genCode,
  191. synchDb,
  192. addMenu,
  193. getLoadTable
  194. } from "@/api/tool/gen";
  195. import importTable from "./importTable";
  196. import {
  197. downLoadZip
  198. } from "@/utils/zipdownload";
  199. import hljs from "highlight.js/lib/highlight";
  200. import "highlight.js/styles/github-gist.css";
  201. hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
  202. hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
  203. hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
  204. hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
  205. hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
  206. hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
  207. export default {
  208. name: "Gen",
  209. components: {
  210. importTable
  211. },
  212. data() {
  213. return {
  214. // 遮罩层
  215. loading: true,
  216. // 唯一标识符
  217. uniqueId: "",
  218. // 选中数组
  219. ids: [],
  220. // 选中表数组
  221. tableNames: [],
  222. // 非单个禁用
  223. single: true,
  224. // 非多个禁用
  225. multiple: true,
  226. // 显示搜索条件
  227. showSearch: true,
  228. // 总条数
  229. total: 0,
  230. // 表数据
  231. tableList: [],
  232. // 日期范围
  233. dateRange: "",
  234. // 查询参数
  235. queryParams: {
  236. pageNum: 1,
  237. pageSize: 10,
  238. tableName: undefined,
  239. tableComment: undefined
  240. },
  241. // 预览参数
  242. preview: {
  243. open: false,
  244. title: "代码预览",
  245. data: {},
  246. activeName: "domain.java"
  247. },
  248. // 表单参数
  249. form: {},
  250. // 表单校验
  251. rules: {
  252. tableName: [{
  253. required: true,
  254. message: "表名称不能为空",
  255. trigger: "blur"
  256. }],
  257. tableComment: [{
  258. required: true,
  259. message: "表描述不能为空",
  260. trigger: "blur"
  261. }],
  262. menuRole: [{
  263. required: true,
  264. message: "菜单权限不能为空",
  265. trigger: "blur"
  266. }],
  267. tableColumn: [{
  268. required: true,
  269. message: "列数不能为空",
  270. trigger: "blur"
  271. }]
  272. }
  273. };
  274. },
  275. created() {
  276. this.getList();
  277. },
  278. activated() {
  279. const time = this.$route.query.t;
  280. if (time != null && time != this.uniqueId) {
  281. this.uniqueId = time;
  282. this.resetQuery();
  283. }
  284. },
  285. methods: {
  286. handleCxbtn() {
  287. getLoadTable().then(res => {
  288. this.msgSuccess('重载缓存成功')
  289. })
  290. },
  291. /** 查询表集合 */
  292. getList() {
  293. this.loading = true;
  294. listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
  295. this.tableList = response.rows;
  296. this.total = response.total;
  297. this.loading = false;
  298. });
  299. },
  300. /** 搜索按钮操作 */
  301. handleQuery() {
  302. this.queryParams.pageNum = 1;
  303. this.getList();
  304. },
  305. /** 生成代码操作 */
  306. handleGenTable(row) {
  307. const tableNames = row.tableName || this.tableNames;
  308. if (tableNames == "") {
  309. this.msgError("请选择要生成的数据");
  310. return;
  311. }
  312. if (row.genType === "1") {
  313. genCode(row.tableName).then(response => {
  314. this.msgSuccess("成功生成到自定义路径:" + row.genPath);
  315. });
  316. } else {
  317. downLoadZip("/code/gen/batchGenCode?tables=" + tableNames, "ruoyi");
  318. }
  319. },
  320. /** 同步数据库操作 */
  321. handleSynchDb(row) {
  322. const tableName = row.tableName;
  323. this.$confirm('确认要强制同步"' + tableName + '"表结构吗?', "警告", {
  324. confirmButtonText: "确定",
  325. cancelButtonText: "取消",
  326. type: "warning"
  327. }).then(function() {
  328. return synchDb(tableName);
  329. }).then(() => {
  330. this.msgSuccess("同步成功");
  331. })
  332. },
  333. /** 打开导入表弹窗 */
  334. openImportTable() {
  335. this.$refs.import.show();
  336. },
  337. // 表单重置
  338. reset() {
  339. this.form = {
  340. };
  341. this.resetForm("form");
  342. },
  343. /** 重置按钮操作 */
  344. resetQuery() {
  345. this.dateRange = [];
  346. this.resetForm("queryForm");
  347. this.handleQuery();
  348. },
  349. /** 预览按钮 */
  350. handlePreview(row) {
  351. previewTable(row.tableId).then(response => {
  352. this.preview.data = response.data;
  353. this.preview.open = true;
  354. });
  355. },
  356. /** 高亮显示 */
  357. highlightedCode(code, key) {
  358. const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
  359. var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
  360. const result = hljs.highlight(language, code || "", true);
  361. return result.value || '&nbsp;';
  362. },
  363. // 多选框选中数据
  364. handleSelectionChange(selection) {
  365. this.ids = selection.map(item => item.id);
  366. this.tableNames = selection.map(item => item.tableName);
  367. this.single = selection.length != 1;
  368. this.multiple = !selection.length;
  369. },
  370. /** 修改按钮操作 */
  371. handleEditTable(row) {
  372. const tableId = row.id || this.ids[0];
  373. this.$router.push("/gen/edit/" + tableId);
  374. },
  375. /** 删除按钮操作 */
  376. handleDelete(row) {
  377. const tableIds = row.id || this.ids;
  378. this.$confirm('是否确认删除表编号为"' + tableIds + '"的数据项?', "警告", {
  379. confirmButtonText: "确定",
  380. cancelButtonText: "取消",
  381. type: "warning"
  382. }).then(function() {
  383. return delTable(tableIds);
  384. }).then(() => {
  385. this.getList();
  386. this.msgSuccess("删除成功");
  387. })
  388. },
  389. // 取消弹框按钮
  390. cancel() {
  391. console.log(123)
  392. this.reset()
  393. this.preview.open = false;
  394. },
  395. //新增
  396. handleGenTableadd() {
  397. this.reset()
  398. this.preview.open = true;
  399. this.preview.title = '新增信息';
  400. },
  401. /** 提交按钮 */
  402. submitForm: function() {
  403. if( this.form.tableColumn > 4 ){
  404. this.msgSuccess("列数不能大于4");
  405. return false
  406. }
  407. this.$refs["form"].validate(valid => {
  408. if (valid) {
  409. if (this.form.id != undefined) {
  410. // updateMenu(this.form).then(response => {
  411. // this.msgSuccess("修改成功");
  412. // this.open = false;
  413. // this.getList();
  414. // });
  415. console.log(23)
  416. } else {
  417. console.log(this.form)
  418. addMenu(this.form).then(response => {
  419. this.msgSuccess("新增成功");
  420. this.preview.open = false;
  421. this.getList();
  422. });
  423. }
  424. }
  425. });
  426. }
  427. }
  428. };
  429. </script>