bottomTable.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div>
  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. @selection-change="selectionChange"
  14. @sortable-change="onSortChange"
  15. @search-change="searchChange"
  16. @search-reset="resetChange"
  17. @size-change="dataList"
  18. @current-change="dataList"
  19. >
  20. <!-- <template #filePath-form="scope">
  21. <single-upload v-model="form.filePath" />
  22. <FilesUpload v-model:src="form.filePath" v-model:src-list="form.filePath" />
  23. </template> -->
  24. <!-- <template #filePath="{ row }">
  25. <el-button link type="primary" @click.stop="imgUrlClick(row)">{{
  26. row.filePath
  27. }}</el-button>
  28. </template> -->
  29. </avue-crud>
  30. <CommonTable
  31. ref="commonTableRef"
  32. :tableTitle="tableTitle"
  33. :tableType="commonTableType"
  34. @selected-sure="onSelectedFinish"
  35. />
  36. <el-dialog v-model="dialogVisible">
  37. <img w-full :src="previewImgUrl" alt="Preview Image" />
  38. </el-dialog>
  39. </div>
  40. </template>
  41. <script setup>
  42. import { ref, getCurrentInstance } from "vue";
  43. import { useCrud } from "@/hooks/userCrud";
  44. import { getTableConfig } from "./configs";
  45. import {
  46. saveCompoents,
  47. getBomVersion,
  48. getRouteMaxVersion,
  49. } from "@/api/craft/process/index";
  50. import SingleUpload from "@/components/Upload/SingleUpload.vue";
  51. const props = defineProps({
  52. tableTitle: {
  53. default: "",
  54. type: String,
  55. },
  56. tableType: {
  57. default: "",
  58. type: String,
  59. },
  60. });
  61. const route = useRoute();
  62. const tableConfig = getTableConfig(route.params.id);
  63. // 传入一个url,后面不带/
  64. const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  65. useCrud({
  66. src: tableConfig[props.tableType].url,
  67. });
  68. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  69. Methords; //增删改查
  70. const { selectionChange, multipleUpdate } = Methords; //选中和批量删除事件
  71. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  72. const bomVersion = ref(null);
  73. const startCreat = () => {
  74. if (props.tableType === "wuliaocaiji") {
  75. if (data.value && data.value.length > 0) {
  76. bomVersion.value = data.value[0].recordVersion;
  77. }
  78. if (!route.query.prodtCode) {
  79. ElMessage.error("物料编号读取错误");
  80. return;
  81. }
  82. //根据物料编码和版本号获取对应的物料BOM
  83. let bomParam = {
  84. materialCode: route.query.prodtCode,
  85. };
  86. getBomVersion(bomParam).then((res) => {
  87. let resListMap = [];
  88. //说明时物料采集的添加框 进行物料采集的下拉框数据获取
  89. res?.data.forEach((versions) => {
  90. resListMap.push({
  91. label: versions.bomVersion,
  92. value: versions.bomVersion,
  93. });
  94. });
  95. //查询参数
  96. let configParam = {};
  97. configParam.materialCode = route.query.prodtCode;
  98. if (bomVersion.value) {
  99. configParam.bomVersion = bomVersion.value;
  100. }
  101. //根据物料编码和版本号获取对应的物料BOM
  102. commonTableType.value = "MARTERIAL_BOM";
  103. nextTick(() => {
  104. commonTableRef.value?.startSelect(configParam);
  105. commonTableRef.value?.refreshDictData(
  106. "bomVersion",
  107. resListMap,
  108. "value"
  109. );
  110. commonTableRef.value?.mergeOption({
  111. searchShow: bomVersion.value ? false : true,
  112. });
  113. });
  114. });
  115. } else if (props.tableType === "dianjian") {
  116. commonTableType.value = "OP_CHECK";
  117. nextTick(() => {
  118. commonTableRef.value?.startSelect();
  119. });
  120. } else if (props.tableType === "ESOP") {
  121. commonTableType.value = "ESOP";
  122. nextTick(() => {
  123. commonTableRef.value?.startSelect({
  124. materialCode: route.query.prodtCode,
  125. enable: 1,
  126. });
  127. });
  128. } else {
  129. crudRef.value && crudRef.value.rowAdd();
  130. }
  131. };
  132. const saveSortData = async () => {
  133. multipleUpdate();
  134. };
  135. defineExpose({ startCreat, saveSortData });
  136. const onSortChange = () => {
  137. data.value.forEach((item) => {
  138. console.log(item.id);
  139. });
  140. };
  141. // ============公共弹窗table选择相关,物料采集等使用===============
  142. const commonTableRef = ref({});
  143. const commonTableType = ref("MARTERIAL_BOM");
  144. const onSelectedFinish = (itemValue) => {
  145. crudRef.value && crudRef.value.rowAdd();
  146. if (props.tableType === "wuliaocaiji") {
  147. form.value.itemName = itemValue.bomMaterialName;
  148. form.value.itemCode = itemValue.bomMaterialCode;
  149. form.value.itemModel = itemValue.bomMaterialAttribute;
  150. form.value.recordVersion = itemValue.bomVersion;
  151. form.value.num = itemValue.bomMaterialNumber;
  152. form.value.traceType = "S";
  153. form.value.unit = itemValue.unit;
  154. } else if (props.tableType === "dianjian") {
  155. form.value.checkName = itemValue.checkName;
  156. form.value.checkCode = itemValue.checkCode;
  157. form.value.content = itemValue.content;
  158. form.value.standard = itemValue.standard;
  159. form.value.upper = itemValue.upper;
  160. form.value.lower = itemValue.lower;
  161. form.value.content = itemValue.content;
  162. } else if (props.tableType === "ESOP") {
  163. form.value.filePath = itemValue.drawingPath;
  164. form.value.drawingCode = itemValue.drawingCode;
  165. form.value.recordVersion = itemValue.drawingVersion;
  166. form.value.sortNum = itemValue.sort;
  167. form.value.title = itemValue.drawingTitle;
  168. }
  169. };
  170. const previewImgUrl = ref("");
  171. const dialogVisible = ref(false);
  172. const imgUrlClick = (itemValue) => {
  173. previewImgUrl.value = itemValue.imgUrl;
  174. dialogVisible.value = true;
  175. };
  176. onMounted(() => {
  177. search.value.operationId = route.params.id;
  178. url.value = tableConfig[props.tableType].url;
  179. option.value = Object.assign(option.value, {
  180. addBtn: false,
  181. searchShow: false,
  182. header: false,
  183. sortable: true,
  184. column: tableConfig[props.tableType].column,
  185. });
  186. dataList();
  187. getRouteMaxVersion(route.query.routeId).then(({ data }) => {
  188. if (data) {
  189. bomVersion.value = data;
  190. }
  191. });
  192. });
  193. watch(
  194. () => props.tableType,
  195. () => {
  196. console.log("faslegb");
  197. url.value = tableConfig[props.tableType].url;
  198. option.value = Object.assign(option.value, {
  199. addBtn: false,
  200. searchShow: false,
  201. header: false,
  202. sortable: true,
  203. column: tableConfig[props.tableType].column,
  204. });
  205. dataList();
  206. getRouteMaxVersion(route.query.routeId).then(({ data }) => {
  207. if (data) {
  208. bomVersion.value = data;
  209. }
  210. });
  211. }
  212. );
  213. </script>