index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <fs-page class="borrow-page">
  3. <fs-crud ref="crudRef" v-bind="crudBinding" />
  4. <BorrowTypeSelect v-model:visible="showBorrowTypeDialog" @select="onBorrowTypeSelected" />
  5. <!-- <CommonBorrow v-if="showCommonBorrowDialog" v-model:visible="showCommonBorrowDialog" :modelValue="borrowForm" @submit="handleBorrowSubmit" /> -->
  6. <ClassroomBorrow
  7. v-if="showClassroomBorrowDialog"
  8. v-model:visible="showClassroomBorrowDialog"
  9. :modelValue="borrowForm"
  10. @submit="handleBorrowSubmit"
  11. />
  12. <SpecialBorrow v-if="showSpecialBorrowDialog" v-model:visible="showSpecialBorrowDialog" :modelValue="borrowForm" @submit="handleBorrowSubmit" />
  13. </fs-page>
  14. </template>
  15. <script lang="ts" setup name="borrow">
  16. import { ref, onMounted, onBeforeUnmount,nextTick } from 'vue';
  17. import { useFs } from '@fast-crud/fast-crud';
  18. import { createCrudOptions } from './crud';
  19. // import { GetPermission } from './api';
  20. // import { handleColumnPermission } from '/@/utils/columnPermission';
  21. import BorrowTypeSelect from './component/BorrowTypeSelect/index.vue';
  22. // import CommonBorrow from './component/CommonBorrow/index.vue';
  23. import ClassroomBorrow from './component/ClassroomBorrow/index.vue';
  24. import SpecialBorrow from './component/SpecialBorrow/index.vue';
  25. import * as api from './api';
  26. import { ElMessage } from 'element-plus';
  27. const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
  28. const showBorrowTypeDialog = ref(false);
  29. // const showCommonBorrowDialog = ref(false);
  30. const showClassroomBorrowDialog = ref(false);
  31. const showSpecialBorrowDialog = ref(false);
  32. const borrowForm = ref({});
  33. function onBorrowTypeSelected(type: number, mode: 'view' | 'edit' | 'add',record?: any) {
  34. showBorrowTypeDialog.value = false;
  35. // 初始化表单数据,带上所选借用性质
  36. // borrowForm.value = { borrow_type: type, mode: mode };
  37. nextTick(() => {
  38. borrowForm.value = { ...(record || {}), borrow_type: type, mode };
  39. });
  40. if (type == 0) {
  41. showSpecialBorrowDialog.value = true;
  42. } else if (type == 1) {
  43. showClassroomBorrowDialog.value = true;
  44. } else {
  45. showSpecialBorrowDialog.value = true;
  46. }
  47. }
  48. async function handleBorrowSubmit(formData: any) {
  49. try {
  50. await api.AddObj(formData);
  51. showCommonBorrowDialog.value = false;
  52. // 刷新列表
  53. crudRef.value && crudRef.value.doRefresh && crudRef.value.doRefresh();
  54. ElMessage.success('保存成功');
  55. crudExpose.doRefresh();
  56. } catch (e) {
  57. // 错误处理
  58. console.error('提交失败', e);
  59. }
  60. }
  61. async function handleView(e: CustomEvent) {
  62. const row = e.detail;
  63. onBorrowTypeSelected(row.borrow_type, 'view',row);
  64. }
  65. async function handleEdit(e: CustomEvent) {
  66. const row = e.detail;
  67. onBorrowTypeSelected(row.borrow_type, 'edit',row);
  68. }
  69. async function handleRemove(e: CustomEvent) {
  70. const row = e.detail;
  71. onBorrowTypeSelected(row.borrow_type);
  72. }
  73. let observer: MutationObserver | null = null;
  74. onMounted(() => {
  75. // 设置列权限
  76. // const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  77. //重置crudBinding
  78. // resetCrudOptions(newOptions);
  79. // 刷新
  80. crudExpose.doRefresh();
  81. window.addEventListener('borrow-view', handleView);
  82. window.addEventListener('borrow-edit', handleEdit);
  83. window.addEventListener('borrow-remove', handleRemove);
  84. // 创建借用单按钮
  85. function insertButton() {
  86. const fsActionbar = document.querySelector('.borrow-page .fs-actionbar');
  87. if (fsActionbar && !fsActionbar.querySelector('.my-create-btn')) {
  88. const button = document.createElement('button');
  89. button.className = 'el-button el-button--primary el-button--default my-create-btn';
  90. button.innerHTML = '创建借用单';
  91. button.onclick = () => {
  92. showBorrowTypeDialog.value = true;
  93. };
  94. fsActionbar.append(button);
  95. }
  96. }
  97. // 先尝试插入一次
  98. insertButton();
  99. // 监听 DOM 变化,确保 actionbar 出现时插入按钮
  100. observer = new MutationObserver(() => {
  101. insertButton();
  102. });
  103. observer.observe(document.body, { childList: true, subtree: true });
  104. });
  105. onBeforeUnmount(() => {
  106. if (observer) {
  107. observer.disconnect();
  108. observer = null;
  109. }
  110. window.removeEventListener('borrow-view', handleView);
  111. });
  112. </script>
  113. <style lang="scss" scoped></style>