printOrder.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  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">( 对账时间: {{ props.rowData.dimensionality }} )</div>
  5. <div style="height: calc(100vh - 264px - 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: 8px; text-align: center">
  17. <el-button @click="clickCancel" size="large">关 闭</el-button>
  18. <el-button type="primary" @click="deriveExcel()" size="large" v-preReClick>导 出</el-button>
  19. </div>
  20. </el-card>
  21. </template>
  22. <script setup>
  23. import { cloneVNode } from "vue";
  24. const { proxy } = getCurrentInstance();
  25. const props = defineProps({
  26. rowData: Object,
  27. activeName: String,
  28. });
  29. const loading = ref(false);
  30. const tableData = ref([]);
  31. const getAggregate = (data) => {
  32. let total = 0;
  33. if (data && data.length > 0) {
  34. for (let i = 0; i < data.length; i++) {
  35. if (data[i].total) {
  36. total = Number(Math.round((total + data[i].total) * 100) / 100);
  37. }
  38. }
  39. }
  40. return total;
  41. };
  42. watch(
  43. () => props.activeName,
  44. (val) => {
  45. if (val === "order" && !(tableData.value && tableData.value.length > 0)) {
  46. if (props.rowData && props.rowData.idGroupConcat) {
  47. loading.value = true;
  48. proxy.post("/statementOfAccountMerge/getDocumentByOrder", { idGroupConcat: props.rowData.idGroupConcat }).then(
  49. (res) => {
  50. let total = getAggregate(proxy.deepClone(res));
  51. let list = [];
  52. if (res && res.length > 0) {
  53. for (let i = 0; i < res.length; i++) {
  54. if (res[i].skuSpecList && res[i].skuSpecList.length > 0) {
  55. for (let j = 0; j < res[i].skuSpecList.length; j++) {
  56. if (res[i].skuSpecList[j].bomSpecList && res[i].skuSpecList[j].bomSpecList.length > 0) {
  57. for (let y = 0; y < res[i].skuSpecList[j].bomSpecList.length; y++) {
  58. let indexOne = 0;
  59. if (j === 0 && y === 0) {
  60. for (let z = 0; z < res[i].skuSpecList.length; z++) {
  61. if (res[i].skuSpecList[z].bomSpecList && res[i].skuSpecList[z].bomSpecList.length > 0) {
  62. indexOne = Number(indexOne + res[i].skuSpecList[z].bomSpecList.length);
  63. }
  64. }
  65. }
  66. let indexTwo = 0;
  67. if (y === 0) {
  68. indexTwo = res[i].skuSpecList[j].bomSpecList.length;
  69. }
  70. list.push({
  71. wlnCreateTime: res[i].wlnCreateTime,
  72. code: res[i].code,
  73. wlnCode: res[i].wlnCode,
  74. skuSpecCode: res[i].skuSpecList[j].skuSpecCode,
  75. skuSpecName: res[i].skuSpecList[j].skuSpecName,
  76. quantitySKU: res[i].skuSpecList[j].quantity,
  77. subtotal: res[i].skuSpecList[j].subtotal,
  78. bomSpecCode: res[i].skuSpecList[j].bomSpecList[y].bomSpecCode,
  79. bomSpecName: res[i].skuSpecList[j].bomSpecList[y].bomSpecName,
  80. quantityBOM: res[i].skuSpecList[j].bomSpecList[y].quantity,
  81. unitPriceBOM: res[i].skuSpecList[j].bomSpecList[y].unitPrice,
  82. laserLogoSummary: res[i].skuSpecList[j].bomSpecList[y].laserLogoSummary,
  83. laserMitochondrialSummary: res[i].skuSpecList[j].bomSpecList[y].laserMitochondrialSummary,
  84. lssueFeeSummary: res[i].skuSpecList[j].bomSpecList[y].lssueFeeSummary,
  85. deliveryMaterialsFeeSummary: res[i].skuSpecList[j].bomSpecList[y].deliveryMaterialsFeeSummary,
  86. packingLaborSummary: res[i].skuSpecList[j].bomSpecList[y].packingLaborSummary,
  87. managementFeeSummary: res[i].skuSpecList[j].bomSpecList[y].managementFeeSummary,
  88. unitPriceSKU: res[i].skuSpecList[j].unitPrice,
  89. outerBoxPackingFee: res[i].outerBoxPackingFee,
  90. total: res[i].total,
  91. indexOne: indexOne,
  92. indexTwo: indexTwo,
  93. });
  94. }
  95. }
  96. }
  97. }
  98. }
  99. }
  100. list.push({
  101. indexOne: 1,
  102. indexTwo: 1,
  103. total: total,
  104. wlnCreateTime: "总计:",
  105. });
  106. tableData.value = Object.freeze(list);
  107. loading.value = false;
  108. },
  109. (err) => {
  110. console.log(err);
  111. loading.value = false;
  112. }
  113. );
  114. }
  115. }
  116. },
  117. {
  118. deep: true,
  119. immediate: true,
  120. }
  121. );
  122. const emit = defineEmits(["clickCancel"]);
  123. const clickCancel = () => {
  124. emit("clickCancel", "");
  125. };
  126. const deriveExcel = () => {
  127. loading.value = true;
  128. proxy
  129. .getFile("/statementOfAccountMerge/exportDocumentByOrder", {
  130. idGroupConcat: props.rowData.idGroupConcat,
  131. departmentName: props.rowData.departmentName,
  132. beginDate: props.rowData.dimensionality,
  133. })
  134. .then(
  135. () => {
  136. emit("clickCancel", true);
  137. // proxy.downloadFile(res, "订单对账单.xlsx");
  138. loading.value = false;
  139. },
  140. (err) => {
  141. console.log(err);
  142. loading.value = false;
  143. }
  144. );
  145. };
  146. const columns = computed(() => {
  147. return [
  148. {
  149. dataKey: "wlnCreateTime",
  150. key: "column-0",
  151. title: "订单时间",
  152. width: 150,
  153. rowIndex: 1,
  154. },
  155. {
  156. dataKey: "code",
  157. key: "column-1",
  158. title: "订单号",
  159. width: 160,
  160. },
  161. {
  162. dataKey: "wlnCode",
  163. key: "column-2",
  164. title: "万里牛单号",
  165. width: 140,
  166. },
  167. {
  168. dataKey: "skuSpecCode",
  169. key: "column-3",
  170. title: "SKU品号",
  171. width: 140,
  172. },
  173. {
  174. dataKey: "skuSpecName",
  175. key: "column-4",
  176. title: "SKU品名",
  177. width: 220,
  178. },
  179. {
  180. dataKey: "quantitySKU",
  181. key: "column-5",
  182. title: "SKU数量",
  183. width: 80,
  184. },
  185. {
  186. dataKey: "bomSpecCode",
  187. key: "column-6",
  188. title: "BOM品号",
  189. width: 140,
  190. },
  191. {
  192. dataKey: "bomSpecName",
  193. key: "column-7",
  194. title: "BOM品名",
  195. width: 260,
  196. },
  197. {
  198. dataKey: "quantityBOM",
  199. key: "column-8",
  200. title: "BOM数量",
  201. width: 80,
  202. },
  203. {
  204. dataKey: "unitPriceBOM",
  205. key: "column-9",
  206. title: "单价",
  207. width: 100,
  208. },
  209. {
  210. dataKey: "laserLogoSummary",
  211. key: "column-10",
  212. title: "激光LOGO",
  213. width: 100,
  214. },
  215. {
  216. dataKey: "laserMitochondrialSummary",
  217. key: "column-11",
  218. title: "激光体位线",
  219. width: 100,
  220. },
  221. {
  222. dataKey: "lssueFeeSummary",
  223. key: "column-12",
  224. title: "代发费",
  225. width: 100,
  226. },
  227. {
  228. dataKey: "deliveryMaterialsFeeSummary",
  229. key: "column-13",
  230. title: "快递包材费",
  231. width: 100,
  232. },
  233. {
  234. dataKey: "packingLaborSummary",
  235. key: "column-14",
  236. title: "包装人工费",
  237. width: 100,
  238. },
  239. {
  240. dataKey: "managementFeeSummary",
  241. key: "column-15",
  242. title: "管理费",
  243. width: 100,
  244. },
  245. {
  246. dataKey: "unitPriceSKU",
  247. key: "column-16",
  248. title: "SKU单价",
  249. width: 100,
  250. },
  251. {
  252. dataKey: "subtotal",
  253. key: "column-17",
  254. title: "小计",
  255. width: 120,
  256. },
  257. {
  258. dataKey: "total",
  259. key: "column-18",
  260. title: "合计",
  261. width: 120,
  262. },
  263. ];
  264. });
  265. const mergeColumnOne = [0, 1, 2, 18];
  266. const mergeColumnTwo = [3, 4, 5, 16, 17];
  267. const Row = ({ rowData, cells }) => {
  268. if (rowData.indexOne > 1) {
  269. for (let i = 0; i < mergeColumnOne.length; i++) {
  270. const cell = cells[mergeColumnOne[i]];
  271. const style = {
  272. ...cell.props.style,
  273. backgroundColor: "#fff",
  274. height: `${rowData.indexOne * 35 - 1}px`,
  275. alignSelf: "flex-start",
  276. zIndex: 1,
  277. };
  278. cells[mergeColumnOne[i]] = cloneVNode(cell, { style });
  279. }
  280. }
  281. if (rowData.indexTwo > 1) {
  282. for (let i = 0; i < mergeColumnTwo.length; i++) {
  283. const cell = cells[mergeColumnTwo[i]];
  284. const style = {
  285. ...cell.props.style,
  286. backgroundColor: "#fff",
  287. height: `${rowData.indexTwo * 35 - 1}px`,
  288. alignSelf: "flex-start",
  289. zIndex: 1,
  290. };
  291. cells[mergeColumnTwo[i]] = cloneVNode(cell, { style });
  292. }
  293. }
  294. return cells;
  295. };
  296. </script>
  297. <style lang="scss" scoped>
  298. ::v-deep(.el-table-v2__header-cell) {
  299. background-color: #eeeeee !important;
  300. }
  301. </style>