bottomTable.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  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="true"
  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 route = useRoute();
  81. const tableConfig = getTableConfig(route.fullPath.split("/")[4]);
  82. // 传入一个url,后面不带/
  83. const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  84. useCrud({
  85. src: tableConfig[props.tableType].url,
  86. });
  87. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  88. Methords; //增删改查
  89. const { selectionChange, multipleUpdate } = Methords; //选中和批量删除事件
  90. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  91. const bomVersion = ref(null);
  92. const pdfPath = ref(null);
  93. const startCreat = () => {
  94. if (props.tableType === "wuliaocaiji") {
  95. if (data.value && data.value.length > 0) {
  96. bomVersion.value = data.value[0].recordVersion;
  97. }
  98. if (!route.fullPath.split("/")[5]) {
  99. ElMessage.error("物料编号读取错误");
  100. return;
  101. }
  102. //根据物料编码和版本号获取对应的物料BOM
  103. let bomParam = {
  104. materialCode: route.fullPath.split("/")[5],
  105. };
  106. getBomVersion(bomParam).then((res) => {
  107. let resListMap = [];
  108. //说明时物料采集的添加框 进行物料采集的下拉框数据获取
  109. res?.data.forEach((versions) => {
  110. resListMap.push({
  111. label: versions.bomVersion,
  112. value: versions.bomVersion,
  113. });
  114. });
  115. //查询参数
  116. let configParam = {};
  117. configParam.materialCode = route.fullPath.split("/")[5];
  118. if (bomVersion.value) {
  119. configParam.bomVersion = bomVersion.value;
  120. }
  121. //根据物料编码和版本号获取对应的物料BOM
  122. commonTableType.value = "MARTERIAL_BOM";
  123. nextTick(() => {
  124. commonTableRef.value?.startSelect(configParam);
  125. commonTableRef.value?.refreshDictData(
  126. "bomVersion",
  127. resListMap,
  128. "value"
  129. );
  130. commonTableRef.value?.mergeOption({
  131. searchShow: true,
  132. selection: true,
  133. reserveSelection: true,
  134. });
  135. });
  136. });
  137. } else if (props.tableType === "dianjian") {
  138. commonTableType.value = "OP_CHECK";
  139. nextTick(() => {
  140. commonTableRef.value?.startSelect();
  141. commonTableRef.value?.mergeOption({
  142. selection: true,
  143. reserveSelection: true,
  144. });
  145. });
  146. } else if (props.tableType === "ESOP") {
  147. commonTableType.value = "ESOP";
  148. nextTick(() => {
  149. commonTableRef.value?.startSelect({
  150. materialCode: route.fullPath.split("/")[5],
  151. enable: 1,
  152. });
  153. commonTableRef.value?.mergeOption({
  154. selection: true,
  155. reserveSelection: true,
  156. });
  157. });
  158. } else {
  159. crudRef.value && crudRef.value.rowAdd();
  160. }
  161. };
  162. const saveSortData = async () => {
  163. multipleUpdate();
  164. };
  165. defineExpose({ startCreat, saveSortData });
  166. const onSortChange = () => {
  167. data.value.forEach((item) => {
  168. console.log(item.id);
  169. });
  170. };
  171. const routeId = ref("");
  172. // ============公共弹窗table选择相关,物料采集等使用===============
  173. const commonTableRef = ref({});
  174. const commonTableType = ref("MARTERIAL_BOM");
  175. //批量增加物料采集
  176. const itemRecord = ref({});
  177. const itemRecordList = ref([]);
  178. //批量增加ESOP
  179. const esopItem = ref({});
  180. const esopList = ref([]);
  181. //批量增加点检
  182. const checkItem = ref({});
  183. const checkList = ref([]);
  184. const onSelectedFinish = (itemValue) => {
  185. //crudRef.value && crudRef.value.rowAdd();
  186. itemRecordList.value = [];
  187. itemRecord.value.itemRecordList = [];
  188. checkList.value = [];
  189. checkItem.value.checkList = [];
  190. esopItem.value.esopList = [];
  191. esopList.value = [];
  192. if (props.tableType === "wuliaocaiji") {
  193. itemValue?.forEach((item, index) => {
  194. const recordItem = ref({});
  195. recordItem.value.itemName = item.bomMaterialName;
  196. recordItem.value.itemCode = item.bomMaterialCode;
  197. recordItem.value.itemModel = item.bomMaterialAttribute;
  198. recordItem.value.recordVersion = item.bomVersion;
  199. recordItem.value.num = item.bomMaterialNumber;
  200. recordItem.value.traceType = "S";
  201. recordItem.value.operationId = route.params.id;
  202. recordItem.value.unit = item.unit;
  203. recordItem.value.isTrace = 1;
  204. itemRecordList.value.push(recordItem.value);
  205. });
  206. itemRecord.value.operationId = route.params.id;
  207. itemRecord.value.itemRecordList = Array.from(itemRecordList.value);
  208. addBatch(itemRecord.value).then((data) => {
  209. if (data.code == "200") {
  210. dataList();
  211. ElMessage({
  212. message: data.msg,
  213. type: "success",
  214. });
  215. } else {
  216. ElMessage({
  217. message: data.msg,
  218. type: "error",
  219. });
  220. }
  221. });
  222. } else if (props.tableType === "dianjian") {
  223. itemValue?.forEach((item, index) => {
  224. const recordItem = ref({});
  225. recordItem.value.operationId = route.params.id;
  226. recordItem.value.checkName = item.checkName;
  227. recordItem.value.checkCode = item.checkCode;
  228. recordItem.value.content = item.content;
  229. recordItem.value.standard = item.standard;
  230. recordItem.value.upper = item.upper;
  231. recordItem.value.lower = item.lower;
  232. recordItem.value.unit = item.unit;
  233. checkList.value.push(recordItem.value);
  234. });
  235. checkItem.value.operationId = route.params.id;
  236. checkItem.value.checkList = Array.from(checkList.value);
  237. addCheckBatch(checkItem.value).then((data) => {
  238. if (data.code == "200") {
  239. dataList();
  240. commonTableRef.value?.mergeOption({
  241. reserveSelection: false,
  242. });
  243. ElMessage({
  244. message: data.msg,
  245. type: "success",
  246. });
  247. } else {
  248. ElMessage({
  249. message: data.msg,
  250. type: "error",
  251. });
  252. }
  253. });
  254. } else if (props.tableType === "ESOP") {
  255. itemValue?.forEach((item, index) => {
  256. const recordItem = ref({});
  257. recordItem.value.operationId = route.params.id;
  258. recordItem.value.filePath = item.pdfPath;
  259. recordItem.value.showAppointPageNum = 1;
  260. recordItem.value.drawingCode = item.drawingCode;
  261. recordItem.value.recordVersion = item.drawingVersion;
  262. recordItem.value.sortNum = item.sort;
  263. recordItem.value.title = item.drawingTitle;
  264. esopList.value.push(recordItem.value);
  265. });
  266. esopItem.value.operationId = route.params.id;
  267. esopItem.value.esopList = Array.from(esopList.value);
  268. addEsopBatch(esopItem.value).then((data) => {
  269. if (data.code == "200") {
  270. dataList();
  271. ElMessage({
  272. message: data.msg,
  273. type: "success",
  274. });
  275. } else {
  276. ElMessage({
  277. message: data.msg,
  278. type: "error",
  279. });
  280. }
  281. });
  282. }
  283. };
  284. const previewImgUrl = ref("");
  285. const dialogVisible = ref(false);
  286. const imgUrlClick = (itemValue) => {
  287. previewImgUrl.value =
  288. import.meta.env.VITE_APP_UPLOAD_URL + itemValue.filePath;
  289. dialogVisible.value = true;
  290. };
  291. const getSOAPpdf = (itemValue) => {
  292. return import.meta.env.VITE_APP_UPLOAD_URL + itemValue.filePath;
  293. };
  294. onMounted(() => {
  295. routeId.value = route.fullPath.split("/")[6];
  296. search.value.operationId = route.fullPath.split("/")[4];
  297. url.value = tableConfig[props.tableType].url;
  298. option.value = Object.assign(option.value, {
  299. addBtn: false,
  300. searchShow: false,
  301. header: false,
  302. sortable: true,
  303. column: tableConfig[props.tableType].column,
  304. });
  305. dataList();
  306. getRouteMaxVersion(
  307. route.fullPath.split("/")[6] ? route.fullPath.split("/")[6] : routeId.value
  308. ).then(({ data }) => {
  309. if (data) {
  310. bomVersion.value = data;
  311. }
  312. });
  313. });
  314. watch(
  315. () => props.tableType,
  316. () => {
  317. routeId.value = route.fullPath.split("/")[6];
  318. url.value = tableConfig[props.tableType].url;
  319. option.value = Object.assign(option.value, {
  320. addBtn: false,
  321. searchShow: false,
  322. header: false,
  323. sortable: true,
  324. column: tableConfig[props.tableType].column,
  325. });
  326. dataList();
  327. getRouteMaxVersion(
  328. route.fullPath.split("/")[6]
  329. ? route.fullPath.split("/")[6]
  330. : routeId.value
  331. ).then(({ data }) => {
  332. if (data) {
  333. bomVersion.value = data;
  334. }
  335. });
  336. }
  337. );
  338. </script>