printOrder.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <el-card v-loading="loading">
  3. <div style="text-align: center; font-size: 30px; padding: 8px; font-weight: 700">{{ props.rowData.departmentName }}-胜德体育对账单</div>
  4. <div style="text-align: center; font-size: 18px; padding-bottom: 8px; font-weight: 700">( 对账时间: {{ rowData.timePeriod }} )</div>
  5. <div style="height: calc(100vh - 235px - 88px); overflow-y: auto; overflow-x: hidden">
  6. <el-auto-resizer>
  7. <template #default="{ height, width }">
  8. <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed :cache="20" :header-height="35" :row-height="35">
  9. <template #row="props">
  10. <Row v-bind="props" />
  11. </template>
  12. </el-table-v2>
  13. </template>
  14. </el-auto-resizer>
  15. </div>
  16. <div style="padding: 4px; text-align: center">
  17. <el-button type="primary" v-if="judgeOneKeyStatus()" @click="clickOneKeyStatus()" :loading="loadingOneKey" v-preReClick>一键出库</el-button>
  18. <el-button @click="clickCancel">关 闭</el-button>
  19. <el-button type="primary" @click="deriveExcel()" v-preReClick>导 出</el-button>
  20. </div>
  21. </el-card>
  22. </template>
  23. <script setup>
  24. import { ElMessage } from "element-plus";
  25. import { cloneVNode } from "vue";
  26. const { proxy } = getCurrentInstance();
  27. const props = defineProps({
  28. rowData: Object,
  29. tabValues: Object,
  30. });
  31. const loading = ref(false);
  32. const tableData = ref([]);
  33. const getAggregate = (data) => {
  34. let total = 0;
  35. if (data && data.length > 0) {
  36. for (let i = 0; i < data.length; i++) {
  37. if (data[i].total) {
  38. total = Number(Math.round((total + data[i].total) * 100) / 100);
  39. }
  40. }
  41. }
  42. return total;
  43. };
  44. const tabsCard = ref();
  45. watch(
  46. () => props.tabValues,
  47. (val) => {
  48. if (val.activeName === "order" && val.tabsCard != tabsCard.value) {
  49. tabsCard.value = val.tabsCard;
  50. if (props.rowData && props.rowData.id) {
  51. loading.value = true;
  52. proxy.post("/statementOfAccount/getDocumentByOrder", { id: props.rowData.id, orderClassify: props.tabValues.tabsCard }).then(
  53. (res) => {
  54. let total = getAggregate(proxy.deepClone(res));
  55. let list = [];
  56. if (res && res.length > 0) {
  57. for (let i = 0; i < res.length; i++) {
  58. if (res[i].skuSpecList && res[i].skuSpecList.length > 0) {
  59. for (let j = 0; j < res[i].skuSpecList.length; j++) {
  60. if (res[i].skuSpecList[j].bomSpecList && res[i].skuSpecList[j].bomSpecList.length > 0) {
  61. for (let y = 0; y < res[i].skuSpecList[j].bomSpecList.length; y++) {
  62. let indexOne = 0;
  63. if (j === 0 && y === 0) {
  64. for (let z = 0; z < res[i].skuSpecList.length; z++) {
  65. if (res[i].skuSpecList[z].bomSpecList && res[i].skuSpecList[z].bomSpecList.length > 0) {
  66. indexOne = Number(indexOne + res[i].skuSpecList[z].bomSpecList.length);
  67. }
  68. }
  69. }
  70. let indexTwo = 0;
  71. if (y === 0) {
  72. indexTwo = res[i].skuSpecList[j].bomSpecList.length;
  73. }
  74. list.push({
  75. wlnCreateTime: res[i].wlnCreateTime,
  76. code: res[i].code,
  77. wlnCode: res[i].wlnCode,
  78. skuSpecCode: res[i].skuSpecList[j].skuSpecCode,
  79. skuSpecName: res[i].skuSpecList[j].skuSpecName,
  80. quantitySKU: res[i].skuSpecList[j].quantity,
  81. subtotal: res[i].skuSpecList[j].subtotal,
  82. bomSpecCode: res[i].skuSpecList[j].bomSpecList[y].bomSpecCode,
  83. bomSpecName: res[i].skuSpecList[j].bomSpecList[y].bomSpecName,
  84. quantityBOM: res[i].skuSpecList[j].bomSpecList[y].quantity,
  85. unitPriceBOM: res[i].skuSpecList[j].bomSpecList[y].unitPrice,
  86. laserLogoSummary: res[i].skuSpecList[j].bomSpecList[y].laserLogoSummary,
  87. laserMitochondrialSummary: res[i].skuSpecList[j].bomSpecList[y].laserMitochondrialSummary,
  88. lssueFeeSummary: res[i].skuSpecList[j].bomSpecList[y].lssueFeeSummary,
  89. deliveryMaterialsFeeSummary: res[i].skuSpecList[j].bomSpecList[y].deliveryMaterialsFeeSummary,
  90. packingLaborSummary: res[i].skuSpecList[j].bomSpecList[y].packingLaborSummary,
  91. managementFeeSummary: res[i].skuSpecList[j].bomSpecList[y].managementFeeSummary,
  92. proofingFeeSummary: res[i].skuSpecList[j].bomSpecList[y].proofingFeeSummary,
  93. unitPriceSKU: res[i].skuSpecList[j].unitPrice,
  94. checkFee: res[i].skuSpecList[j].checkFee,
  95. total: res[i].total,
  96. indexOne: indexOne,
  97. indexTwo: indexTwo,
  98. });
  99. }
  100. }
  101. }
  102. }
  103. }
  104. }
  105. list.push({
  106. indexOne: 1,
  107. indexTwo: 1,
  108. total: total,
  109. wlnCreateTime: "总计:",
  110. });
  111. tableData.value = Object.freeze(list);
  112. loading.value = false;
  113. },
  114. (err) => {
  115. console.log(err);
  116. loading.value = false;
  117. }
  118. );
  119. }
  120. }
  121. if (val.activeName === "order" && val.tabsCard === 5) {
  122. getOrder();
  123. }
  124. },
  125. {
  126. deep: true,
  127. immediate: true,
  128. }
  129. );
  130. const emit = defineEmits(["clickCancel"]);
  131. const clickCancel = () => {
  132. emit("clickCancel", "");
  133. };
  134. const deriveExcel = () => {
  135. loading.value = true;
  136. proxy.getFile("/statementOfAccount/exportDocumentByOrder", { id: props.rowData.id, orderClassify: props.tabValues.tabsCard }).then(
  137. () => {
  138. emit("clickCancel", true);
  139. loading.value = false;
  140. },
  141. (err) => {
  142. console.log(err);
  143. loading.value = false;
  144. }
  145. );
  146. };
  147. const columns = computed(() => {
  148. return [
  149. {
  150. dataKey: "wlnCreateTime",
  151. key: "column-0",
  152. title: "订单时间",
  153. width: 150,
  154. rowIndex: 1,
  155. },
  156. {
  157. dataKey: "code",
  158. key: "column-1",
  159. title: "订单号",
  160. width: 160,
  161. },
  162. {
  163. dataKey: "wlnCode",
  164. key: "column-2",
  165. title: "E10单号",
  166. width: 140,
  167. },
  168. {
  169. dataKey: "skuSpecCode",
  170. key: "column-3",
  171. title: "SKU品号",
  172. width: 140,
  173. },
  174. {
  175. dataKey: "skuSpecName",
  176. key: "column-4",
  177. title: "SKU品名",
  178. width: 220,
  179. },
  180. {
  181. dataKey: "quantitySKU",
  182. key: "column-5",
  183. title: "SKU数量",
  184. width: 80,
  185. },
  186. {
  187. dataKey: "bomSpecCode",
  188. key: "column-6",
  189. title: "BOM品号",
  190. width: 140,
  191. },
  192. {
  193. dataKey: "bomSpecName",
  194. key: "column-7",
  195. title: "BOM品名",
  196. width: 260,
  197. },
  198. {
  199. dataKey: "quantityBOM",
  200. key: "column-8",
  201. title: "BOM数量",
  202. width: 80,
  203. },
  204. {
  205. dataKey: "unitPriceBOM",
  206. key: "column-9",
  207. title: "单价",
  208. width: 100,
  209. },
  210. {
  211. dataKey: "laserLogoSummary",
  212. key: "column-10",
  213. title: "激光LOGO",
  214. width: 100,
  215. },
  216. {
  217. dataKey: "laserMitochondrialSummary",
  218. key: "column-11",
  219. title: "激光体位线",
  220. width: 100,
  221. },
  222. {
  223. dataKey: "lssueFeeSummary",
  224. key: "column-12",
  225. title: "代发费",
  226. width: 100,
  227. },
  228. {
  229. dataKey: "deliveryMaterialsFeeSummary",
  230. key: "column-13",
  231. title: "快递包材费",
  232. width: 100,
  233. },
  234. {
  235. dataKey: "packingLaborSummary",
  236. key: "column-14",
  237. title: "包装人工费",
  238. width: 100,
  239. },
  240. {
  241. dataKey: "managementFeeSummary",
  242. key: "column-15",
  243. title: "管理费",
  244. width: 100,
  245. },
  246. {
  247. dataKey: "proofingFeeSummary",
  248. key: "column-16",
  249. title: "打样费",
  250. width: 100,
  251. },
  252. {
  253. dataKey: "unitPriceSKU",
  254. key: "column-17",
  255. title: "SKU单价",
  256. width: 100,
  257. },
  258. {
  259. dataKey: "checkFee",
  260. key: "column-18",
  261. title: "质检费",
  262. width: 100,
  263. },
  264. {
  265. dataKey: "subtotal",
  266. key: "column-19",
  267. title: "小计",
  268. width: 120,
  269. },
  270. {
  271. dataKey: "total",
  272. key: "column-20",
  273. title: "合计",
  274. width: 120,
  275. },
  276. ];
  277. });
  278. const mergeColumnOne = [0, 1, 2, 20];
  279. const mergeColumnTwo = [3, 4, 5, 17, 18, 19];
  280. const Row = ({ rowData, cells }) => {
  281. if (rowData.indexOne > 1) {
  282. for (let i = 0; i < mergeColumnOne.length; i++) {
  283. const cell = cells[mergeColumnOne[i]];
  284. const style = {
  285. ...cell.props.style,
  286. backgroundColor: "#fff",
  287. height: `${rowData.indexOne * 35 - 1}px`,
  288. alignSelf: "flex-start",
  289. zIndex: 1,
  290. };
  291. cells[mergeColumnOne[i]] = cloneVNode(cell, { style });
  292. }
  293. }
  294. if (rowData.indexTwo > 1) {
  295. for (let i = 0; i < mergeColumnTwo.length; i++) {
  296. const cell = cells[mergeColumnTwo[i]];
  297. const style = {
  298. ...cell.props.style,
  299. backgroundColor: "#fff",
  300. height: `${rowData.indexTwo * 35 - 1}px`,
  301. alignSelf: "flex-start",
  302. zIndex: 1,
  303. };
  304. cells[mergeColumnTwo[i]] = cloneVNode(cell, { style });
  305. }
  306. }
  307. return cells;
  308. };
  309. const orderList = ref([]);
  310. const loadingOneKey = ref(false);
  311. const judgeOneKeyStatus = () => {
  312. let status = true;
  313. if (proxy.useUserStore().user.userId !== "1") {
  314. status = false;
  315. } else {
  316. if (!(props.tabValues.tabsCard === 5 && orderList.value && orderList.value.length > 0)) {
  317. status = false;
  318. }
  319. }
  320. return status;
  321. };
  322. const getOrder = () => {
  323. proxy.post("/statementOfAccountMerge/getNotSalesOutOfWarehouseOrder", { idGroupConcat: props.rowData.id }).then((res) => {
  324. if (res && res.length > 0) {
  325. orderList.value = res;
  326. } else {
  327. orderList.value = [];
  328. }
  329. });
  330. };
  331. const clickOneKeyStatus = () => {
  332. loadingOneKey.value = true;
  333. proxy.post("/statementOfAccountMerge/salesOutOfWarehouse", orderList.value).then(
  334. () => {
  335. ElMessage({ message: "操作完成", type: "success" });
  336. getOrder();
  337. loadingOneKey.value = false;
  338. },
  339. (err) => {
  340. console.log(err);
  341. loadingOneKey.value = false;
  342. }
  343. );
  344. };
  345. </script>
  346. <style lang="scss" scoped>
  347. ::v-deep(.el-table-v2__header-cell) {
  348. background-color: #eeeeee !important;
  349. }
  350. ::v-deep(.el-card__body) {
  351. padding: 10px !important;
  352. }
  353. </style>