bak.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!-- <template>
  2. <div>
  3. <BasicTable @register="registerTable">
  4. <template #toolbar>
  5. <a-button type="warning" @click="handleImportTable">导入</a-button>
  6. <a-button type="success" @click="handleGenTable">生成</a-button>
  7. <a-button type="danger" @click="handleDelete">删除</a-button>
  8. </template>
  9. <template #bodyCell="{ column, record }">
  10. <template v-if="column.key == 'action'">
  11. <TableAction
  12. :actions="[
  13. {
  14. tooltip: '预览',
  15. label: '预览',
  16. onClick: handlePreview.bind(null, record),
  17. },
  18. {
  19. tooltip: '编辑',
  20. label: '编辑',
  21. onClick: handleEditTable.bind(null, record),
  22. },
  23. {
  24. tooltip: '删除',
  25. label: '删除',
  26. onClick: handleDelete.bind(null, record),
  27. },
  28. {
  29. tooltip: '同步',
  30. label: '同步',
  31. onClick: handleSynchDb.bind(null, record),
  32. },
  33. {
  34. tooltip: '生成代码',
  35. label: '生成代码',
  36. onClick: handleGenTable.bind(null, record),
  37. },
  38. ]"
  39. />
  40. </template>
  41. </template>
  42. </BasicTable>
  43. <PreviewModal @register="registerModal" @success="handleSuccess" />
  44. <EditModal @register="registerModalEdit" @success="handleSuccess" />
  45. <TableModal @register="registerModalTable" @success="handleSuccess" />
  46. </div>
  47. </template>
  48. <script lang="ts" setup>
  49. import { BasicTable, useTable, TableAction } from '/@/components/Table';
  50. import { columns, searchFormSchema } from './data';
  51. import { genList, genSynchDb, genRemove, genBatchGenCode } from '/@/api/sys/sysGenApi';
  52. import { useModal } from '/@/components/Modal';
  53. import PreviewModal from './PreviewModal.vue';
  54. import EditModal from './EditModal.vue';
  55. import TableModal from './TableModal.vue';
  56. import { downloadByData } from '/@/utils/file/download';
  57. import { useMessage } from '/@/hooks/web/useMessage';
  58. const { createMessage } = useMessage();
  59. const [registerModal, { openModal }] = useModal();
  60. const [registerModalTable, { openModal: openModalTable }] = useModal();
  61. const [registerModalEdit, { openModal: openModalEdit }] = useModal();
  62. const [registerTable, { getSelectRowKeys, getSelectRows, reload }] = useTable({
  63. title: '代码生成列表',
  64. api: genList,
  65. rowKey: 'tableId',
  66. rowSelection: { type: 'checkbox' },
  67. clickToRowSelect: false,
  68. columns,
  69. formConfig: {
  70. labelWidth: 120,
  71. schemas: searchFormSchema,
  72. autoSubmitOnEnter: true,
  73. baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
  74. resetButtonOptions: {
  75. preIcon: 'ant-design:delete-outlined',
  76. },
  77. submitButtonOptions: {
  78. preIcon: 'ant-design:search-outlined',
  79. },
  80. },
  81. showIndexColumn: true,
  82. indexColumnProps: {
  83. fixed: 'left',
  84. },
  85. useSearchForm: true,
  86. showTableSetting: true,
  87. bordered: true,
  88. actionColumn: {
  89. width: 300,
  90. title: '操作',
  91. dataIndex: 'action',
  92. },
  93. });
  94. // 预览按钮事件
  95. function handlePreview(record: Recordable) {
  96. console.log(record);
  97. openModal(true, {
  98. record,
  99. });
  100. }
  101. // 编辑按钮事件
  102. function handleEditTable(record: Recordable) {
  103. console.log(record);
  104. openModalEdit(true, {
  105. record,
  106. });
  107. }
  108. // 删除按钮事件
  109. async function handleDelete(record: Recordable) {
  110. const isGen = getSelectRowKeys().length ? true : false;
  111. if (isGen) {
  112. await genRemove(getSelectRowKeys());
  113. } else {
  114. await genRemove([record.tableId]);
  115. }
  116. await reload();
  117. }
  118. // 同步按钮事件
  119. async function handleSynchDb(record: Recordable) {
  120. console.log(record);
  121. const res = await genSynchDb({ tableName: record.tableName });
  122. createMessage.success('同步成功');
  123. console.log('🚀 ~ file: index.vue ~ line 106 ~ handleSynchDb ~ res', res);
  124. }
  125. // 导入
  126. function handleImportTable(record) {
  127. openModalTable(true, {
  128. record,
  129. });
  130. }
  131. // 生成按钮事件
  132. async function handleGenTable(record: Recordable) {
  133. const isGen = getSelectRows().length ? true : false;
  134. console.log(
  135. '🚀 ~ file: index.vue:123 ~ handleGenTable ~ getSelectRows().length ',
  136. getSelectRows().length,
  137. );
  138. let streamData = '';
  139. let fileName = '';
  140. if (isGen) {
  141. const tables = getSelectRows()
  142. .map(ele => {
  143. return ele.tableName;
  144. })
  145. .join(',');
  146. streamData = await genBatchGenCode(tables);
  147. fileName = tables;
  148. } else {
  149. streamData = await genBatchGenCode(record.tableName);
  150. fileName = record.tableName;
  151. }
  152. console.log('🚀 ~ file: index.vue:139 ~ handleGenTable ~ streamData', streamData);
  153. downloadByData(streamData, `${fileName}.zip`);
  154. console.log(record);
  155. // let url = GenBatchGenCode();
  156. }
  157. // 详情按钮事件
  158. async function handleSuccess(record: Recordable) {
  159. console.log(record);
  160. await reload();
  161. }
  162. </script> -->
  163. <template>
  164. <div />
  165. </template>
  166. <script setup lang="ts"></script>
  167. <style scoped></style>