replace-material.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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="{ size, row, index }">
  20. <el-button
  21. type="primary"
  22. link
  23. size="small"
  24. @click="handleEdit(row, index)"
  25. ><i-ep-edit />编辑
  26. </el-button>
  27. </template>
  28. </avue-crud>
  29. </div>
  30. </template>
  31. <script setup>
  32. import { ref, getCurrentInstance } from "vue";
  33. import { useCrud } from "@/hooks/userCrud";
  34. import dictDataUtil from "@/common/configs/dictDataUtil";
  35. import ButtonPermKeys from "@/common/configs/buttonPermission";
  36. import { updateRework } from "@/api/rework";
  37. import {
  38. useCommonStoreHook,
  39. useDictionaryStore,
  40. useDictionaryStoreHook,
  41. } from "@/store";
  42. import { updateItemRecord } from "@/api/process/index";
  43. // 数据字典相关
  44. const { dicts } = useDictionaryStore();
  45. // 传入一个url,后面不带/
  46. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  47. useCrud({
  48. src: "/api/v1/processReplace/getItemRecord",
  49. });
  50. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  51. Methords; //增删改查
  52. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  53. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  54. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  55. const repeatObj = ref({});
  56. // 公共弹窗相关
  57. const ctableRef = ref(null);
  58. const props = defineProps({
  59. replaceId: {
  60. type: String,
  61. default: () => {
  62. return 0;
  63. },
  64. },
  65. dialog: {
  66. type: Object,
  67. default: () => {
  68. return {};
  69. },
  70. },
  71. });
  72. const startCreat = () => {
  73. if (ctableRef.value) {
  74. ctableRef.value.startSelect();
  75. }
  76. };
  77. defineExpose({ startCreat });
  78. /**
  79. * 上传excel相关
  80. */
  81. const uploadRef = ref(null);
  82. const uploadFinished = () => {
  83. // 上传完成后的刷新操作
  84. page.currentPage = 1;
  85. dataList();
  86. };
  87. const importExcelData = () => {
  88. if (uploadRef.value) {
  89. uploadRef.value.show("/api/v1/plan/order/import");
  90. }
  91. };
  92. const handleEdit = (row, index) => {
  93. row.replaceId = props.replaceId;
  94. crudRef.value && crudRef.value.rowEdit(row, index);
  95. };
  96. const onSelectedFinish = (selectedValue) => {
  97. form.value.materialCode = selectedValue.materialCode;
  98. repeatObj.value.showCreate = false;
  99. };
  100. option.value = Object.assign(option.value, {
  101. searchEnter: true,
  102. selection: false,
  103. labelWidth: 110,
  104. searchLabelWidth: 110,
  105. addBtn: false,
  106. delBtn: false,
  107. editBtn: false,
  108. column: [
  109. {
  110. label: "物料编码",
  111. prop: "itemCode",
  112. search: true,
  113. disabled: true,
  114. },
  115. {
  116. label: "物料规格",
  117. prop: "itemModel",
  118. search: true,
  119. disabled: true,
  120. },
  121. {
  122. label: "物料名称",
  123. prop: "itemName",
  124. disabled: true,
  125. },
  126. {
  127. label: "批次号/管号",
  128. prop: "batchNo",
  129. disabled: true,
  130. },
  131. {
  132. label: "替换批次号",
  133. prop: "replaceBatchNo",
  134. },
  135. ],
  136. });
  137. onMounted(() => {
  138. // console.log("crudRef", crudRef)
  139. search.value.replaceId = props.replaceId;
  140. dataList();
  141. });
  142. </script>