index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div>
  3. <BasicTable @register="registerTable" :rowSelection="rowSelection">
  4. <template #tableTitle>
  5. <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
  6. <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>-->
  7. <!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>-->
  8. <a-dropdown v-if="selectedRowKeys.length > 0">
  9. <template #overlay>
  10. <a-menu>
  11. <a-menu-item key="1" @click="batchHandleDelete">
  12. <Icon icon="ant-design:delete-outlined" />
  13. 删除
  14. </a-menu-item>
  15. </a-menu>
  16. </template>
  17. <a-button
  18. >批量操作
  19. <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
  20. </a-button>
  21. </a-dropdown>
  22. </template>
  23. <template #action="{ record }">
  24. <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
  25. </template>
  26. </BasicTable>
  27. <NoticeModal @register="registerModal" @success="reload" />
  28. <DetailModal @register="register" :frameSrc="iframeUrl" />
  29. </div>
  30. </template>
  31. <script lang="ts" name="system-notice" setup>
  32. import { ref } from 'vue';
  33. import { BasicTable, TableAction } from '/@/components/Table';
  34. import { useModal } from '/@/components/Modal';
  35. import NoticeModal from './NoticeModal.vue';
  36. import DetailModal from './DetailModal.vue';
  37. import { useGlobSetting } from '/@/hooks/setting';
  38. import { getToken } from '/@/utils/auth';
  39. import { columns, searchFormSchema } from './notice.data';
  40. import { getList, deleteNotice, batchDeleteNotice, getExportUrl, getImportUrl, doReleaseData, doReovkeData } from './notice.api';
  41. import { useListPage } from '/@/hooks/system/useListPage';
  42. const glob = useGlobSetting();
  43. const [registerModal, { openModal }] = useModal();
  44. const [register, { openModal: openDetail }] = useModal();
  45. const iframeUrl = ref('');
  46. // 列表页面公共参数、方法
  47. const { prefixCls, onExportXls, onImportXls, tableContext, doRequest } = useListPage({
  48. designScope: 'notice-template',
  49. tableProps: {
  50. title: '消息通知',
  51. api: getList,
  52. columns: columns,
  53. formConfig: {
  54. schemas: searchFormSchema,
  55. },
  56. },
  57. exportConfig: {
  58. name: '消息通知列表',
  59. url: getExportUrl,
  60. },
  61. importConfig: {
  62. url: getImportUrl,
  63. },
  64. });
  65. const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
  66. /**
  67. * 新增事件
  68. */
  69. function handleAdd() {
  70. openModal(true, {
  71. isUpdate: false,
  72. });
  73. }
  74. /**
  75. * 编辑事件
  76. */
  77. function handleEdit(record) {
  78. openModal(true, {
  79. record,
  80. isUpdate: true,
  81. });
  82. }
  83. /**
  84. * 删除事件
  85. */
  86. async function handleDelete(record) {
  87. await deleteNotice({ id: record.id }, reload);
  88. }
  89. /**
  90. * 批量删除事件
  91. */
  92. async function batchHandleDelete() {
  93. doRequest(() => batchDeleteNotice({ ids: selectedRowKeys.value }));
  94. }
  95. /**
  96. * 发布
  97. */
  98. async function handleRelease(id) {
  99. await doReleaseData({ id });
  100. reload();
  101. }
  102. /**
  103. * 撤销
  104. */
  105. async function handleReovke(id) {
  106. await doReovkeData({ id });
  107. reload();
  108. }
  109. /**
  110. * 查看
  111. */
  112. function handleDetail(record) {
  113. iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
  114. openDetail(true);
  115. }
  116. /**
  117. * 操作列定义
  118. * @param record
  119. */
  120. function getActions(record) {
  121. return [
  122. {
  123. label: '编辑',
  124. onClick: handleEdit.bind(null, record),
  125. ifShow: record.sendStatus == 0,
  126. },
  127. ];
  128. }
  129. /**
  130. * 下拉操作栏
  131. */
  132. function getDropDownAction(record) {
  133. return [
  134. {
  135. label: '删除',
  136. ifShow: record.sendStatus != 1,
  137. popConfirm: {
  138. title: '是否确认删除',
  139. confirm: handleDelete.bind(null, record),
  140. },
  141. },
  142. {
  143. label: '发布',
  144. ifShow: record.sendStatus == 0,
  145. onClick: handleRelease.bind(null, record.id),
  146. },
  147. {
  148. label: '撤销',
  149. ifShow: record.sendStatus == 1,
  150. popConfirm: {
  151. title: '确定要撤销吗?',
  152. confirm: handleReovke.bind(null, record.id),
  153. },
  154. },
  155. {
  156. label: '查看',
  157. onClick: handleDetail.bind(null, record),
  158. },
  159. ];
  160. }
  161. </script>