index.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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. :lastFormSnapshot="lastFormSnapshot"
  11. @update:lastFormSnapshot="val => lastFormSnapshot = val"
  12. @submit="handleBorrowSubmit"
  13. />
  14. <SpecialBorrow v-if="showSpecialBorrowDialog" v-model:visible="showSpecialBorrowDialog" :modelValue="borrowForm" @submit="handleBorrowSubmit" />
  15. <CollectEquipmentDialog v-model:visible="showCollectDialog" :modelValue="borrowForm" @submit="handleCollectSubmit" />
  16. <SettlementDialog v-model:visible="showSettlementDialog" :modelValue="borrowForm" />
  17. </fs-page>
  18. </template>
  19. <script lang="ts" setup name="borrow">
  20. import { ref, onMounted, onBeforeUnmount,nextTick ,provide } from 'vue';
  21. import { useFs } from '@fast-crud/fast-crud';
  22. import { createCrudOptions } from './crud';
  23. // import { GetPermission } from './api';
  24. // import { handleColumnPermission } from '/@/utils/columnPermission';
  25. import BorrowTypeSelect from './component/BorrowTypeSelect/index.vue';
  26. // import CommonBorrow from './component/CommonBorrow/index.vue';
  27. import ClassroomBorrow from './component/ClassroomBorrow/index.vue';
  28. import SpecialBorrow from './component/SpecialBorrow/index.vue';
  29. import CollectEquipmentDialog from './component/CollectEquipment/index.vue';
  30. import SettlementDialog from './component/CollectEquipment/SettlementDialog.vue';
  31. import * as api from './api';
  32. import { ElMessage } from 'element-plus';
  33. const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
  34. const showBorrowTypeDialog = ref(false);
  35. // const showCommonBorrowDialog = ref(false);
  36. const showClassroomBorrowDialog = ref(false);
  37. const showSpecialBorrowDialog = ref(false);
  38. const showCollectDialog = ref(false);
  39. const borrowForm = ref({});
  40. const showSettlementDialog = ref(false);
  41. const lastFormSnapshot = ref({});
  42. // provide('lastFormSnapshot', lastFormSnapshot);
  43. function onBorrowTypeSelected(type: number, mode: 'view' | 'edit' | 'add' |'collect',record?: any) {
  44. showBorrowTypeDialog.value = false;
  45. nextTick(() => {
  46. borrowForm.value = { ...(record || {}), borrow_type: type, mode };
  47. });
  48. if (type === 1) {
  49. showClassroomBorrowDialog.value = true;
  50. } else if (type === 2) {
  51. showSpecialBorrowDialog.value = true;
  52. } else if (type === 0) {
  53. showCollectDialog.value = true;
  54. }
  55. }
  56. async function handleBorrowSubmit(formData: any) {
  57. try {
  58. if (formData.mode === 'edit') {
  59. await api.UpdateObj(formData);
  60. ElMessage.success('编辑成功');
  61. } else {
  62. await api.AddObj(formData);
  63. ElMessage.success('添加成功');
  64. }
  65. // 刷新列表
  66. crudRef.value && crudRef.value.doRefresh && crudRef.value.doRefresh();
  67. crudExpose.doRefresh();
  68. } catch (e) {
  69. // 错误处理
  70. console.error(formData.mode === 'edit' ? '编辑失败' : '提交失败', e);
  71. ElMessage.error(formData.mode === 'edit' ? '编辑失败' : '提交失败');
  72. }
  73. }
  74. async function handleCollectSubmit(formData: any) {
  75. try {
  76. crudExpose.doRefresh();
  77. } catch (e) {
  78. console.error('提交失败', e);
  79. }
  80. }
  81. async function handleCollect(e: CustomEvent) {
  82. const row = e.detail;
  83. console.log("row:::",row);
  84. showCollectDialog.value = true;
  85. console.log("showCollectDialog:::",showCollectDialog.value);
  86. nextTick(() => {
  87. borrowForm.value = { ...row, mode: 'collect' };
  88. });
  89. }
  90. async function handleReturn(e: CustomEvent) {
  91. const row = e.detail;
  92. console.log("row:::",row);
  93. showCollectDialog.value = true;
  94. nextTick(() => {
  95. borrowForm.value = { ...row, mode: 'return' };
  96. });
  97. console.log("showReturnDialog:::",showCollectDialog.value);
  98. }
  99. async function handleView(e: CustomEvent) {
  100. const row = e.detail;
  101. onBorrowTypeSelected(row.borrow_type, 'view',row);
  102. }
  103. async function handleEdit(e: CustomEvent) {
  104. const row = e.detail;
  105. onBorrowTypeSelected(row.borrow_type, 'edit',row);
  106. }
  107. async function handleRemove(e: CustomEvent) {
  108. const row = e.detail;
  109. onBorrowTypeSelected(row.borrow_type);
  110. }
  111. async function handleSettlement(e: CustomEvent) {
  112. const row = e.detail;
  113. showSettlementDialog.value = true;
  114. nextTick(() => {
  115. borrowForm.value = { ...row, mode: 'settlement' };
  116. });
  117. }
  118. let observer: MutationObserver | null = null;
  119. onMounted(() => {
  120. // 设置列权限
  121. // const newOptions = await handleColumnPermission(GetPermission, crudOptions);
  122. //重置crudBinding
  123. // resetCrudOptions(newOptions);
  124. // 刷新
  125. crudExpose.doRefresh();
  126. window.addEventListener('borrow-view', handleView);
  127. window.addEventListener('borrow-edit', handleEdit);
  128. window.addEventListener('borrow-remove', handleRemove);
  129. window.addEventListener('borrow-collect', handleCollect);
  130. window.addEventListener('borrow-return', handleReturn);
  131. window.addEventListener('borrow-settlement', handleSettlement);
  132. // 创建借用单按钮
  133. function insertButton() {
  134. const fsActionbar = document.querySelector('.borrow-page .fs-actionbar');
  135. if (fsActionbar && !fsActionbar.querySelector('.my-create-btn')) {
  136. const button = document.createElement('button');
  137. button.className = 'el-button el-button--primary el-button--default my-create-btn';
  138. button.innerHTML = '创建借用单';
  139. button.onclick = () => {
  140. showBorrowTypeDialog.value = true;
  141. };
  142. fsActionbar.append(button);
  143. }
  144. }
  145. // 先尝试插入一次
  146. // insertButton();
  147. // 监听 DOM 变化,确保 actionbar 出现时插入按钮
  148. observer = new MutationObserver(() => {
  149. insertButton();
  150. });
  151. observer.observe(document.body, { childList: true, subtree: true });
  152. });
  153. onBeforeUnmount(() => {
  154. if (observer) {
  155. observer.disconnect();
  156. observer = null;
  157. }
  158. window.removeEventListener('borrow-view', handleView);
  159. window.removeEventListener('borrow-collect', handleCollect);
  160. window.removeEventListener('borrow-return', handleReturn);
  161. window.removeEventListener('borrow-settlement', handleSettlement);
  162. });
  163. </script>
  164. <style lang="scss" scoped></style>