bottomTable.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  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. <div style="height: 100px; width: 100px; overflow: hidden">
  24. <PDFView
  25. :need-to-show-pdf="true"
  26. content-type="button"
  27. :is-link="true"
  28. :show-pdf-number="form.showAppointPageNum"
  29. :pdf-source="pdfPath"
  30. />
  31. </div>
  32. </template>
  33. <template #filePath="{ row }">
  34. <PDFView
  35. :need-to-show-pdf="true"
  36. content-type="button"
  37. btnText="查看PDF"
  38. :is-link="true"
  39. :pdf-source="getSOAPpdf(row)"
  40. />
  41. </template>
  42. </avue-crud>
  43. <CommonTable
  44. ref="commonTableRef"
  45. :tableTitle="tableTitle"
  46. :tableType="commonTableType"
  47. :multipleRow="multipleRow"
  48. @selected-sure="onSelectedFinish"
  49. />
  50. <el-dialog v-model="dialogVisible">
  51. <VuePdfEmbed :source="previewImgUrl" annotation-layer text-layer />
  52. </el-dialog>
  53. </div>
  54. </template>
  55. <script setup>
  56. import { ref, getCurrentInstance } from "vue";
  57. import { useCrud } from "@/hooks/userCrud";
  58. import { getTableConfig } from "./configs";
  59. import PDFView from "@/components/PDFView/index.vue";
  60. import VuePdfEmbed from "vue-pdf-embed";
  61. import {
  62. saveCompoents,
  63. getBomVersion,
  64. getRouteMaxVersion,
  65. addBatch,
  66. addEsopBatch,
  67. addCheckBatch,
  68. } from "@/api/craft/process/index";
  69. import SingleUpload from "@/components/Upload/SingleUpload.vue";
  70. const props = defineProps({
  71. tableTitle: {
  72. default: "",
  73. type: String,
  74. },
  75. tableType: {
  76. default: "",
  77. type: String,
  78. },
  79. });
  80. const id = inject("id");
  81. const routeId = inject("routeId");
  82. const prodtCode = inject("prodtCode");
  83. const route = useRoute();
  84. const tableConfig = getTableConfig(id);
  85. // 传入一个url,后面不带/
  86. const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  87. useCrud({
  88. src: tableConfig[props.tableType].url,
  89. });
  90. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  91. Methords; //增删改查
  92. const { selectionChange, multipleUpdate } = Methords; //选中和批量删除事件
  93. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  94. const bomVersion = ref(null);
  95. const pdfPath = ref(null);
  96. const multipleRow = ref(true);
  97. const startCreat = () => {
  98. if (props.tableType === "wuliaocaiji") {
  99. if (data.value && data.value.length > 0) {
  100. bomVersion.value = data.value[0].recordVersion;
  101. }
  102. if (!prodtCode) {
  103. ElMessage.error("物料编号读取错误");
  104. return;
  105. }
  106. //根据物料编码和版本号获取对应的物料BOM
  107. let bomParam = {
  108. materialCode: prodtCode,
  109. };
  110. getBomVersion(bomParam).then((res) => {
  111. let resListMap = [];
  112. //说明时物料采集的添加框 进行物料采集的下拉框数据获取
  113. res?.data.forEach((versions) => {
  114. resListMap.push({
  115. label: versions.bomVersion,
  116. value: versions.bomVersion,
  117. });
  118. });
  119. //查询参数
  120. let configParam = {};
  121. configParam.materialCode = prodtCode;
  122. configParam.routeId = routeId;
  123. if (bomVersion.value) {
  124. configParam.bomVersion = bomVersion.value;
  125. }
  126. //根据物料编码和版本号获取对应的物料BOM
  127. commonTableType.value = "MARTERIAL_BOM";
  128. nextTick(() => {
  129. commonTableRef.value?.startSelect(configParam);
  130. commonTableRef.value?.refreshDictData(
  131. "bomVersion",
  132. resListMap,
  133. "value"
  134. );
  135. commonTableRef.value?.mergeOption({
  136. searchShow: bomVersion.value ? false : true,
  137. selection: true,
  138. reserveSelection: true,
  139. });
  140. });
  141. });
  142. } else if (props.tableType === "dianjian") {
  143. commonTableType.value = "OP_CHECK";
  144. nextTick(() => {
  145. commonTableRef.value?.startSelect();
  146. commonTableRef.value?.mergeOption({
  147. selection: true,
  148. reserveSelection: true,
  149. });
  150. });
  151. } else if (props.tableType === "ESOP") {
  152. commonTableType.value = "ESOP";
  153. nextTick(() => {
  154. commonTableRef.value?.startSelect({
  155. materialCode: prodtCode,
  156. enable: 1,
  157. });
  158. commonTableRef.value?.mergeOption({
  159. selection: true,
  160. reserveSelection: true,
  161. });
  162. });
  163. } else {
  164. crudRef.value && crudRef.value.rowAdd();
  165. }
  166. };
  167. const saveSortData = async () => {
  168. multipleUpdate();
  169. };
  170. defineExpose({ startCreat, saveSortData });
  171. const onSortChange = () => {
  172. data.value.forEach((item) => {
  173. console.log(item.id);
  174. });
  175. };
  176. // ============公共弹窗table选择相关,物料采集等使用===============
  177. const commonTableRef = ref({});
  178. const commonTableType = ref("MARTERIAL_BOM");
  179. //批量增加物料采集
  180. const itemRecord = ref({});
  181. const itemRecordList = ref([]);
  182. //批量增加ESOP
  183. const esopItem = ref({});
  184. const esopList = ref([]);
  185. //批量增加点检
  186. const checkItem = ref({});
  187. const checkList = ref([]);
  188. const onSelectedFinish = (itemValue) => {
  189. if (Object.keys(itemValue).length == 0) {
  190. return false;
  191. }
  192. itemRecordList.value = [];
  193. itemRecord.value.itemRecordList = [];
  194. checkList.value = [];
  195. checkItem.value.checkList = [];
  196. esopItem.value.esopList = [];
  197. esopList.value = [];
  198. if (props.tableType === "wuliaocaiji") {
  199. itemValue?.forEach((item, index) => {
  200. const recordItem = ref({});
  201. recordItem.value.itemName = item.bomMaterialName;
  202. recordItem.value.itemCode = item.bomMaterialCode;
  203. recordItem.value.itemModel = item.bomMaterialAttribute;
  204. recordItem.value.recordVersion = item.bomVersion;
  205. recordItem.value.num = item.bomMaterialNumber;
  206. recordItem.value.traceType = "S";
  207. recordItem.value.operationId = id;
  208. recordItem.value.unit = item.unit;
  209. recordItem.value.isTrace = 1;
  210. itemRecordList.value.push(recordItem.value);
  211. });
  212. itemRecord.value.operationId = id;
  213. itemRecord.value.itemRecordList = Array.from(itemRecordList.value);
  214. addBatch(itemRecord.value).then((data) => {
  215. if (data.code == "200") {
  216. dataList();
  217. ElMessage({
  218. message: data.msg,
  219. type: "success",
  220. });
  221. } else {
  222. ElMessage({
  223. message: data.msg,
  224. type: "error",
  225. });
  226. }
  227. });
  228. //form.value.unit = itemValue.unit;
  229. } else if (props.tableType === "dianjian") {
  230. /*form.value.checkName = itemValue.checkName;
  231. form.value.checkCode = itemValue.checkCode;
  232. form.value.content = itemValue.content;
  233. form.value.standard = itemValue.standard;
  234. form.value.upper = itemValue.upper;
  235. form.value.lower = itemValue.lower;
  236. form.value.unit = itemValue.unit;*/
  237. itemValue?.forEach((item, index) => {
  238. const recordItem = ref({});
  239. recordItem.value.operationId = id;
  240. recordItem.value.checkName = item.checkName;
  241. recordItem.value.checkCode = item.checkCode;
  242. recordItem.value.content = item.content;
  243. recordItem.value.standard = item.standard;
  244. recordItem.value.upper = item.upper;
  245. recordItem.value.lower = item.lower;
  246. recordItem.value.unit = item.unit;
  247. checkList.value.push(recordItem.value);
  248. });
  249. checkItem.value.operationId = id;
  250. checkItem.value.checkList = Array.from(checkList.value);
  251. addCheckBatch(checkItem.value).then((data) => {
  252. if (data.code == "200") {
  253. dataList();
  254. commonTableRef.value?.mergeOption({
  255. reserveSelection: false,
  256. });
  257. ElMessage({
  258. message: data.msg,
  259. type: "success",
  260. });
  261. } else {
  262. ElMessage({
  263. message: data.msg,
  264. type: "error",
  265. });
  266. }
  267. });
  268. } else if (props.tableType === "ESOP") {
  269. /*form.value.filePath = itemValue.pdfPath;
  270. pdfPath.value = import.meta.env.VITE_APP_UPLOAD_URL + itemValue.pdfPath;
  271. form.value.drawingCode = itemValue.drawingCode;
  272. form.value.recordVersion = itemValue.drawingVersion;
  273. form.value.sortNum = itemValue.sort;
  274. form.value.title = itemValue.drawingTitle;*/
  275. itemValue?.forEach((item, index) => {
  276. const recordItem = ref({});
  277. recordItem.value.operationId = id;
  278. recordItem.value.filePath = item.pdfPath;
  279. recordItem.value.showAppointPageNum = 1;
  280. recordItem.value.drawingCode = item.drawingCode;
  281. recordItem.value.recordVersion = item.drawingVersion;
  282. recordItem.value.sortNum = item.sort;
  283. recordItem.value.title = item.drawingTitle;
  284. esopList.value.push(recordItem.value);
  285. });
  286. esopItem.value.operationId = id;
  287. esopItem.value.esopList = Array.from(esopList.value);
  288. addEsopBatch(esopItem.value).then((data) => {
  289. if (data.code == "200") {
  290. dataList();
  291. ElMessage({
  292. message: data.msg,
  293. type: "success",
  294. });
  295. } else {
  296. ElMessage({
  297. message: data.msg,
  298. type: "error",
  299. });
  300. }
  301. });
  302. }
  303. };
  304. const previewImgUrl = ref("");
  305. const dialogVisible = ref(false);
  306. const imgUrlClick = (itemValue) => {
  307. previewImgUrl.value =
  308. import.meta.env.VITE_APP_UPLOAD_URL + itemValue.filePath;
  309. dialogVisible.value = true;
  310. };
  311. const getSOAPpdf = (itemValue) => {
  312. return import.meta.env.VITE_APP_UPLOAD_URL + itemValue.filePath;
  313. };
  314. onMounted(() => {
  315. search.value.operationId = id;
  316. url.value = tableConfig[props.tableType].url;
  317. option.value = Object.assign(option.value, {
  318. addBtn: false,
  319. searchShow: false,
  320. header: false,
  321. sortable: true,
  322. column: tableConfig[props.tableType].column,
  323. });
  324. dataList();
  325. getRouteMaxVersion(routeId).then(({ data }) => {
  326. if (data) {
  327. bomVersion.value = data;
  328. }
  329. });
  330. });
  331. watch(
  332. () => props.tableType,
  333. () => {
  334. console.log("faslegb");
  335. url.value = tableConfig[props.tableType].url;
  336. option.value = Object.assign(option.value, {
  337. addBtn: false,
  338. selection: true,
  339. searchShow: false,
  340. header: false,
  341. sortable: true,
  342. column: tableConfig[props.tableType].column,
  343. });
  344. dataList();
  345. getRouteMaxVersion(routeId).then(({ data }) => {
  346. if (data) {
  347. bomVersion.value = data;
  348. }
  349. });
  350. }
  351. );
  352. </script>