index.vue.vm 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script lang="ts" setup>
  2. import ${simpleClassName}Modal from './${simpleClassName}Modal.vue'
  3. import { columns, searchFormSchema } from './${classNameVar}.data'
  4. import { useI18n } from '@/hooks/web/useI18n'
  5. import { useMessage } from '@/hooks/web/useMessage'
  6. import { useModal } from '@/components/Modal'
  7. import { useTable } from '@/components/Table'
  8. import { delete${simpleClassName}, export${simpleClassName}, get${simpleClassName}Page } from '@/api/${table.moduleName}/${classNameVar}'
  9. defineOptions({ name: '${table.className}' })
  10. const { t } = useI18n()
  11. const { createConfirm, createMessage } = useMessage()
  12. const [registerModal, { openModal }] = useModal()
  13. const [registerTable, { getForm, reload }] = useTable({
  14. title: '${table.classComment}列表',
  15. api: get${simpleClassName}Page,
  16. columns,
  17. formConfig: { labelWidth: 120, schemas: searchFormSchema },
  18. useSearchForm: true,
  19. showTableSetting: true,
  20. actionColumn: {
  21. width: 140,
  22. title: t('common.action'),
  23. dataIndex: 'action',
  24. fixed: 'right',
  25. },
  26. })
  27. function handleCreate() {
  28. openModal(true, { isUpdate: false })
  29. }
  30. function handleEdit(record: Recordable) {
  31. openModal(true, { record, isUpdate: true })
  32. }
  33. async function handleExport() {
  34. createConfirm({
  35. title: t('common.exportTitle'),
  36. iconType: 'warning',
  37. content: t('common.exportMessage'),
  38. async onOk() {
  39. await export${simpleClassName}(getForm().getFieldsValue())
  40. createMessage.success(t('common.exportSuccessText'))
  41. },
  42. })
  43. }
  44. async function handleDelete(record: Recordable) {
  45. await delete${simpleClassName}(record.id)
  46. createMessage.success(t('common.delSuccessText'))
  47. reload()
  48. }
  49. </script>
  50. <template>
  51. <div>
  52. <BasicTable @register="registerTable">
  53. <template #toolbar>
  54. <a-button type="primary" v-auth="['${permissionPrefix}:create']" :preIcon="IconEnum.ADD" @click="handleCreate">
  55. {{ t('action.create') }}
  56. </a-button>
  57. <a-button v-auth="['${permissionPrefix}:export']" :preIcon="IconEnum.EXPORT" @click="handleExport">
  58. {{ t('action.export') }}
  59. </a-button>
  60. </template>
  61. <template #bodyCell="{ column, record }">
  62. <template v-if="column.key === 'action'">
  63. <TableAction
  64. :actions="[
  65. { icon: IconEnum.EDIT, label: t('action.edit'), auth: '${permissionPrefix}:update', onClick: handleEdit.bind(null, record) },
  66. {
  67. icon: IconEnum.DELETE,
  68. danger: true,
  69. label: t('action.delete'),
  70. auth: '${permissionPrefix}:delete',
  71. popConfirm: {
  72. title: t('common.delMessage'),
  73. placement: 'left',
  74. confirm: handleDelete.bind(null, record),
  75. },
  76. },
  77. ]"
  78. />
  79. </template>
  80. </template>
  81. </BasicTable>
  82. <${simpleClassName}Modal @register="registerModal" @success="reload()" />
  83. </div>
  84. </template>