index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="createRow"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange"
  18. >
  19. <template #menu-left="{ size }">
  20. <el-button
  21. :disabled="toDeleteIds.length < 1"
  22. type="danger"
  23. icon="el-icon-delete"
  24. :size="size"
  25. @click="multipleDelete"
  26. >删除</el-button
  27. >
  28. </template>
  29. </avue-crud>
  30. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  31. </div>
  32. </template>
  33. <script setup>
  34. import { ref, getCurrentInstance } from "vue";
  35. import { useCrud } from "@/hooks/userCrud";
  36. import dictDataUtil from "@/common/configs/dictDataUtil";
  37. import ButtonPermKeys from "@/common/configs/buttonPermission";
  38. import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
  39. // 数据字典相关
  40. const { dicts } = useDictionaryStoreHook();
  41. // 传入一个url,后面不带/
  42. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  43. useCrud({
  44. src: "/api/v1/op/base/check",
  45. });
  46. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  47. Methords; //增删改查
  48. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  49. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  50. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  51. onMounted(() => {
  52. // console.log("crudRef", crudRef)
  53. dataList();
  54. });
  55. /**
  56. * 上传excel相关
  57. */
  58. const uploadRef = ref(null);
  59. const uploadFinished = () => {
  60. // 上传完成后的刷新操作
  61. page.currentPage = 1;
  62. dataList();
  63. };
  64. const importExcelData = () => {
  65. if (uploadRef.value) {
  66. uploadRef.value.show("/api/v1/plan/order/import");
  67. }
  68. };
  69. // 设置表格列或者其他自定义的option
  70. const switchOp = [
  71. {
  72. label: "",
  73. value: 0,
  74. },
  75. {
  76. label: "",
  77. value: 1,
  78. },
  79. ];
  80. option.value = Object.assign(option.value, {
  81. selection: true,
  82. labelWidth: 110,
  83. searchLabelWidth: 110,
  84. column: [
  85. {
  86. label: "点检项名称",
  87. prop: "checkName",
  88. span: 12,
  89. search: true,
  90. editDisabled: true,
  91. rules: [
  92. {
  93. required: true,
  94. message: "点检项名称不能为空",
  95. trigger: "blur",
  96. },
  97. ],
  98. },
  99. {
  100. label: "点检项编码",
  101. prop: "checkCode",
  102. editDisabled: true,
  103. span: 12,
  104. search: true,
  105. rules: [
  106. {
  107. required: true,
  108. message: "点检项编码不能为空",
  109. trigger: "blur",
  110. },
  111. ],
  112. },
  113. {
  114. label: "内容",
  115. prop: "content",
  116. span: 12,
  117. search: false,
  118. },
  119. {
  120. label: "标准值",
  121. prop: "standard",
  122. span: 12,
  123. search: false,
  124. },
  125. {
  126. label: "上限值",
  127. prop: "upper",
  128. span: 12,
  129. search: false,
  130. },
  131. {
  132. label: "下限值",
  133. prop: "lower",
  134. span: 12,
  135. search: false,
  136. },
  137. {
  138. label: "单位",
  139. prop: "unit",
  140. span: 12,
  141. search: false,
  142. },
  143. ],
  144. });
  145. </script>