hooksDemo.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div>{{ form }}</div>
  3. <div>{{ search }}</div>
  4. <el-button @click="test">测试公共弹窗</el-button>
  5. <el-button v-debounce:click="testDebunce">测试防抖截流</el-button>
  6. <div class="mainContentBox">
  7. <avue-crud
  8. ref="crudRef"
  9. v-model:search="search"
  10. v-model="form"
  11. :data="data"
  12. :option="option"
  13. v-model:page="page"
  14. @row-save="createRow"
  15. @row-update="updateRow"
  16. @row-del="deleteRow"
  17. @search-change="searchChange"
  18. @search-reset="resetChange"
  19. @size-change="dataList"
  20. @current-change="dataList"
  21. @selection-change="selectionChange"
  22. >
  23. <template #menu-left="{ size }">
  24. <el-button
  25. :disabled="toDeleteIds.length < 1"
  26. type="danger"
  27. icon="el-icon-delete"
  28. :size="size"
  29. @click="multipleDelete"
  30. >删除</el-button
  31. >
  32. </template>
  33. <template #menu-right="{}">
  34. <el-dropdown split-button
  35. >导入
  36. <template #dropdown>
  37. <el-dropdown-menu>
  38. <el-dropdown-item
  39. @click="downloadTemplate('/api/v1/plan/order/template')"
  40. >
  41. <i-ep-download />下载模板
  42. </el-dropdown-item>
  43. <el-dropdown-item @click="importExcelData">
  44. <i-ep-top />导入数据
  45. </el-dropdown-item>
  46. </el-dropdown-menu>
  47. </template>
  48. </el-dropdown>
  49. <el-button
  50. class="ml-3"
  51. @click="exportData('/api/v1/plan/order/export')"
  52. >
  53. <template #icon> <i-ep-download /> </template>导出
  54. </el-button>
  55. </template>
  56. </avue-crud>
  57. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  58. </div>
  59. </template>
  60. <script setup>
  61. import { ref, getCurrentInstance } from "vue";
  62. import { useCrud } from "@/hooks/userCrud";
  63. import ButtonPermKeys from "@/common/configs/buttonPermission";
  64. import { useCommonStoreHook } from "@/store";
  65. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  66. const test = () => {
  67. isShowTable.value = true;
  68. tableType.value = tableType.value == 1 ? 2 : 1;
  69. };
  70. const testDebunce = () => {
  71. console.log("执行了事件");
  72. };
  73. // 传入一个url,后面不带/
  74. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  75. useCrud({
  76. src: "/api/v1/plan/order",
  77. });
  78. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  79. Methords; //增删改查
  80. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  81. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  82. // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  83. // const permission = reactive({
  84. // delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  85. // addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  86. // editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  87. // menu: true,
  88. // });
  89. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  90. onMounted(() => {
  91. // console.log("crudRef", crudRef)
  92. dataList();
  93. });
  94. /**
  95. * 上传excel相关
  96. */
  97. const uploadRef = ref(null);
  98. const uploadFinished = () => {
  99. // 上传完成后的刷新操作
  100. page.currentPage = 1;
  101. dataList();
  102. };
  103. const importExcelData = () => {
  104. if (uploadRef.value) {
  105. uploadRef.value.show("/api/v1/plan/order/import");
  106. }
  107. };
  108. // 设置表格列或者其他自定义的option
  109. option.value = Object.assign(option.value, {
  110. selection: true,
  111. column: [
  112. {
  113. label: "产品",
  114. prop: "materialCode",
  115. search: true,
  116. },
  117. {
  118. label: "年龄",
  119. prop: "materialModel",
  120. search: true,
  121. },
  122. {
  123. label: "性别",
  124. prop: "orderCode",
  125. search: true,
  126. },
  127. {
  128. label: "身高",
  129. prop: "projectCode",
  130. search: true,
  131. },
  132. ],
  133. });
  134. </script>