index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
  3. <BasicTable @register="registerTable">
  4. <template #toolbar>
  5. <a-button type="primary" @click="handleEdit({}, false)" v-auth="'00014:add'">
  6. 新增
  7. </a-button>
  8. <ExportTool
  9. v-auth="'00014:export'"
  10. ref="exportToolRef"
  11. type="class"
  12. @click="handelExportClick"
  13. />
  14. </template>
  15. <template #action="{ record }">
  16. <div style="display: flex; justify-content: center">
  17. <TableAction
  18. :actions="[
  19. {
  20. label: '编辑',
  21. auth: '00014:edit',
  22. onClick: handleEdit.bind(null, record, true),
  23. },
  24. {
  25. label: '删除',
  26. color: 'error',
  27. auth: '00014:delete',
  28. onClick: handleDelete.bind(null, record),
  29. },
  30. ]"
  31. />
  32. </div>
  33. </template>
  34. </BasicTable>
  35. <FormEdit @register="registerModal" @success="handleSuccess" />
  36. </PageWrapper>
  37. </template>
  38. <script setup lang="ts">
  39. import { onMounted, ref } from 'vue';
  40. import { PageWrapper } from '/@/components/Page';
  41. import { BasicTable, useTable, TableAction } from '/@/components/Table';
  42. import { tableColumns, searchFormSchema } from './data.config';
  43. import { deleteBaseClass, getBaseClassPage } from '/@/services/apis/BaseClassController';
  44. import { useModal } from '/@/components/Modal';
  45. import { useMessage } from '/@/hooks/web/useMessage';
  46. import FormEdit from './edit.vue';
  47. import ExportTool from '/@/views/export/template/components/tool.vue';
  48. const exportToolRef = ref<ElRef>(null);
  49. const [registerModal, { openModal }] = useModal();
  50. const [registerTable, { reload, getForm, getSelectRowKeys }] = useTable({
  51. api: getBaseClassPage,
  52. title: '班级列表',
  53. rowKey: 'id',
  54. columns: tableColumns,
  55. formConfig: {
  56. labelWidth: 120,
  57. schemas: searchFormSchema,
  58. },
  59. useSearchForm: true,
  60. showTableSetting: true,
  61. bordered: true,
  62. immediate: true,
  63. canResize: true,
  64. actionColumn: {
  65. width: 120,
  66. title: '操作',
  67. dataIndex: 'action',
  68. slots: { customRender: 'action' },
  69. fixed: 'right',
  70. },
  71. rowSelection: {
  72. type: 'checkbox',
  73. },
  74. });
  75. const { createConfirm, createMessage } = useMessage();
  76. const handleDelete = (record: any) => {
  77. createConfirm({
  78. iconType: 'warning',
  79. title: '温馨提醒',
  80. content: '是否删除该记录?',
  81. onOk: async () => {
  82. try {
  83. await deleteBaseClass([record.id]);
  84. createMessage.success('删除成功');
  85. await reload();
  86. } catch (e) {
  87. createMessage.error('删除失败');
  88. }
  89. },
  90. okText: '确认',
  91. cancelText: '取消',
  92. });
  93. };
  94. const handleEdit = (record: any, isUpdate: boolean) => {
  95. openModal(true, {
  96. isUpdate: isUpdate,
  97. baseData: {
  98. ...record,
  99. },
  100. });
  101. };
  102. const handleSuccess = async () => {
  103. await reload();
  104. };
  105. onMounted(async () => {});
  106. const handelExportClick = (type) => {
  107. const data: Recordable = {
  108. conditions: [],
  109. ids: [],
  110. };
  111. if (type === 'all') {
  112. const formData = getForm().getFieldsValue();
  113. for (const key in formData) {
  114. data.conditions.push({ keyName: key, keyValue: formData[key], keyType: '1' });
  115. }
  116. } else {
  117. const selectKeys = getSelectRowKeys();
  118. if (selectKeys.length === 0) {
  119. createMessage.warning('请选择需要导入的数据');
  120. return;
  121. }
  122. data.ids = selectKeys;
  123. }
  124. exportToolRef.value?.open(data);
  125. };
  126. </script>
  127. <style scoped lang="less"></style>