design.vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839
  1. <template>
  2. <div>
  3. <el-card class="box-card">
  4. <div style="padding: 8px; text-align: center" v-if="formData.data.code || formData.data.wlnCode">
  5. <span style="font-size: 18px; font-weight: 700">{{ formData.data.code }} </span>
  6. <span style="font-size: 18px; font-weight: 700" v-if="formData.data.wlnCode"> ({{ formData.data.wlnCode }})</span>
  7. </div>
  8. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  9. <template #type>
  10. <div style="width: 100%">
  11. <el-radio-group v-model="formData.data.type">
  12. <el-radio v-for="(itemType, index) in typeList" :key="index" :label="itemType.dictKey">{{ itemType.dictValue }}</el-radio>
  13. </el-radio-group>
  14. </div>
  15. </template>
  16. <template #departmentId>
  17. <div style="width: 100%">
  18. <el-select v-model="formData.data.departmentId" placeholder="请选择事业部" clearable style="width: 100%">
  19. <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
  20. </el-select>
  21. </div>
  22. </template>
  23. <template #orderSkuList>
  24. <div style="width: 100%; padding: 0 20px">
  25. <el-collapse v-model="activeNames">
  26. <div v-for="(item, index) in formData.data.orderSkuList" :key="index" style="margin-bottom: 20px">
  27. <div style="border: 1px solid #edf0f5">
  28. <el-table :data="[item]" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
  29. <el-table-column label="产品" width="300">
  30. <template #default="{ row }">
  31. <div style="width: 100%">
  32. <div style="line-height: 35px">
  33. <span style="color: black; font-weight: 700">商品名称: </span>
  34. <span>{{ item.wlnSkuName }}</span>
  35. </div>
  36. <div style="line-height: 35px">
  37. <span style="color: black; font-weight: 700">品号: </span>
  38. <span>{{ item.code }}</span>
  39. </div>
  40. <div style="line-height: 35px; word-break: break-all">
  41. <span style="color: black; font-weight: 700">品名: </span>
  42. <span>{{ item.name }}</span>
  43. </div>
  44. <div style="line-height: 35px; display: flex">
  45. <span style="width: 37px; color: black; font-weight: 700">数量: </span>
  46. <el-form-item style="width: calc(100% - 37px)">
  47. {{ row.quantity }}
  48. </el-form-item>
  49. </div>
  50. <div style="line-height: 35px">
  51. <span style="color: black; font-weight: 700">加工费: </span>
  52. <span>{{ item.customProcessingFee }}</span>
  53. </div>
  54. <div style="line-height: 35px">
  55. <span style="color: black; font-weight: 700">代发费: </span>
  56. <span>{{ item.lssueFee }}</span>
  57. </div>
  58. <div style="line-height: 35px">
  59. <span style="color: black; font-weight: 700">快递包材费: </span>
  60. <span>{{ item.deliveryMaterialsFee }}</span>
  61. </div>
  62. <div style="line-height: 35px">
  63. <span style="color: black; font-weight: 700">包装人工费: </span>
  64. <span>{{ item.packingLabor }}</span>
  65. </div>
  66. <div style="line-height: 35px">
  67. <span style="color: black; font-weight: 700">管理费: </span>
  68. <span>{{ item.managementFee }}</span>
  69. </div>
  70. <div style="line-height: 35px">
  71. <span style="color: black; font-weight: 700">单价: </span>
  72. <span>{{ item.unitPrice }}</span>
  73. </div>
  74. <div style="line-height: 35px">
  75. <span style="color: black; font-weight: 700">小计: </span>
  76. <span>{{ getSubtotal(item) }}</span>
  77. </div>
  78. <div style="line-height: 35px">
  79. <span style="width: 37px; color: black; font-weight: 700">打印: </span>
  80. <el-form-item
  81. :prop="'orderSkuList.' + index + '.printType'"
  82. :rules="rules.printType"
  83. :inline-message="true"
  84. style="width: calc(100% - 37px)">
  85. {{ dictKeyValue(item.printType, printType) }}
  86. </el-form-item>
  87. </div>
  88. </div>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="产品图稿" width="400">
  92. <template #default="{ row }">
  93. <div style="display: flex; width: 100%">
  94. <div style="width: 80px">设计图:</div>
  95. <div style="width: calc(100% - 80px)">
  96. <el-image
  97. fit="scale-down"
  98. style="width: 148px; height: 148px; margin-right: 10px"
  99. v-if="row.blueprint"
  100. :src="row.blueprint"
  101. @click="openFile(row.blueprint)" />
  102. <div style="display: flex">
  103. <el-button type="primary" @click="clickDrawingFile(index)" text>选择图稿</el-button>
  104. <el-upload
  105. :show-file-list="false"
  106. action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
  107. :data="uploadImgData"
  108. :before-upload="uploadImgFile"
  109. :on-success="
  110. (response, uploadFile) => {
  111. return handleImgSuccess(uploadFile, index);
  112. }
  113. "
  114. style="width: 100%"
  115. accept=".docx,.jpg,.jpeg,.png,.GIF,.JPG,.PNG">
  116. <el-button type="primary" style="margin-left: 12px" text>上传图片</el-button>
  117. </el-upload>
  118. </div>
  119. </div>
  120. </div>
  121. <div style="display: flex; margin-top: 20px; width: 100%">
  122. <div style="width: 80px">图稿文件:</div>
  123. <div style="width: calc(100% - 80px)">
  124. <a
  125. style="color: #16e5c1; cursor: pointer; word-break: break-all; margin-right: 10px"
  126. @click="openFile(row.productionDocument)"
  127. v-if="row.productionDocument">
  128. {{ row.productionDocument }}
  129. </a>
  130. <div style="display: flex">
  131. <el-button type="primary" @click="clickDrawingFile(index)" text>选择图稿</el-button>
  132. <el-upload
  133. :show-file-list="false"
  134. action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
  135. :data="uploadData"
  136. :before-upload="uploadFile"
  137. :on-success="
  138. (response, uploadFile) => {
  139. return handleSuccess(uploadFile, index);
  140. }
  141. "
  142. style="width: 100%">
  143. <el-button type="primary" style="margin-left: 12px" text>上传文件</el-button>
  144. </el-upload>
  145. </div>
  146. </div>
  147. </div>
  148. <div style="display: flex; margin-top: 20px; width: 100%">
  149. <div style="width: 80px">不干胶图片:</div>
  150. <div style="width: calc(100% - 80px)">
  151. <a
  152. style="color: #409eff; cursor: pointer; word-break: break-all; margin-right: 10px"
  153. @click="openFile(row.selfAdhesiveStickerFile.fileUrl)"
  154. v-if="row.selfAdhesiveStickerFile && row.selfAdhesiveStickerFile.fileName">
  155. {{ row.selfAdhesiveStickerFile.fileName }}
  156. </a>
  157. <div style="display: flex" v-if="!(route.query && route.query.detailId)">
  158. <el-upload
  159. :show-file-list="false"
  160. action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
  161. :data="uploadAdhesiveData"
  162. :before-upload="uploadAdhesiveFile"
  163. :on-success="
  164. (response, uploadFile) => {
  165. return handleAdhesiveSuccess(uploadFile, index);
  166. }
  167. "
  168. style="width: 100%">
  169. <el-button type="primary" text>上传文件</el-button>
  170. </el-upload>
  171. </div>
  172. </div>
  173. </div>
  174. </template>
  175. </el-table-column>
  176. <el-table-column label="包材配件/单品" min-width="400">
  177. <template #default="{ row }">
  178. <div style="width: 100%">
  179. <div style="margin-bottom: 10px">
  180. <el-button type="primary" @click="clickPackingFittings(index)">选择包材配件</el-button>
  181. </div>
  182. <el-table :data="row.orderSkuBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
  183. <el-table-column label="单价¥" width="120">
  184. <template #default="props">
  185. <div>
  186. <span>{{ moneyFormat(props.row.unitPrice, 2) }}</span>
  187. </div>
  188. </template>
  189. </el-table-column>
  190. <el-table-column label="数量" width="100">
  191. <template #default="props">
  192. <el-form-item
  193. :prop="'orderSkuList.' + index + '.orderSkuBomList.' + props.$index + '.quantity'"
  194. :rules="rules.quantity"
  195. :inline-message="true"
  196. style="width: 100%">
  197. <el-input-number
  198. onmousewheel="return false;"
  199. v-model="props.row.quantity"
  200. placeholder="数量"
  201. style="width: 100%"
  202. :controls="false"
  203. :min="0" />
  204. </el-form-item>
  205. </template>
  206. </el-table-column>
  207. <el-table-column label="名称" prop="bomSpecName" min-width="150" />
  208. <el-table-column label="总量" width="80">
  209. <template #default="props">
  210. {{ computeQuantity(index, props.$index) }}
  211. </template>
  212. </el-table-column>
  213. <el-table-column label="小计¥" width="100">
  214. <template #default="props">
  215. {{ moneyFormat(computeMoney(index, props.$index), 2) }}
  216. </template>
  217. </el-table-column>
  218. <el-table-column label="操作" align="center" fixed="right" width="60">
  219. <template #default="props">
  220. <el-button type="danger" @click="clickDeletePackingFittings(index, props.$index)" text>删除</el-button>
  221. </template>
  222. </el-table-column>
  223. </el-table>
  224. </div>
  225. </template>
  226. </el-table-column>
  227. </el-table>
  228. <el-collapse-item :name="index">
  229. <template #title>
  230. <span>包装</span>
  231. </template>
  232. <div style="display: flex; padding: 8px 10px 0px">
  233. <div style="flex: 1; padding: 0px 10px">
  234. <div>包装要求:</div>
  235. <div v-html="getStyle(item.packageRemark)"></div>
  236. </div>
  237. </div>
  238. </el-collapse-item>
  239. </div>
  240. </div>
  241. </el-collapse>
  242. </div>
  243. </template>
  244. <template #deliveryTime>
  245. <div style="width: 100%">
  246. {{ formData.data.deliveryTime }}
  247. </div>
  248. </template>
  249. <template #expressDeliveryId>
  250. <div style="width: 100%"></div>
  251. </template>
  252. <template #sourcePlatform>
  253. <div style="width: 100%">
  254. {{ dictKeyValue(formData.data.sourcePlatform, useUserStore().allDict["source_platform"]) }}
  255. </div>
  256. </template>
  257. <template #shopName>
  258. <div style="width: 100%">
  259. {{ dictKeyValue(formData.data.shopName, useUserStore().allDict["shop_name"]) }}
  260. </div>
  261. </template>
  262. <template #totalMonet>
  263. <div style="width: 100%; margin-left: 30px">
  264. <div>
  265. <span style="font-weight: 700; color: #6c88f1">产品总金额: ¥{{ moneyFormat(calculatedAmount("unitPrice"), 2) }}</span>
  266. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">
  267. 定制加工费: ¥{{ moneyFormat(calculatedAmount("customProcessingFee"), 2) }}
  268. </span>
  269. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">代发费: ¥{{ moneyFormat(calculatedAmount("lssueFee"), 2) }}</span>
  270. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">
  271. 快递包材费: ¥{{ moneyFormat(calculatedAmount("deliveryMaterialsFee"), 2) }}
  272. </span>
  273. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包装人工费: ¥{{ moneyFormat(calculatedAmount("packingLabor"), 2) }}</span>
  274. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">包材费: ¥{{ moneyFormat(calculatedPackagingMaterialCost(), 2) }}</span>
  275. <span style="font-weight: 700; color: #6c88f1; margin-left: 40px">管理费: ¥{{ moneyFormat(calculatedAmount("managementFee"), 2) }}</span>
  276. </div>
  277. <div style="padding: 8px 0 0 0">
  278. <span style="font-weight: 700; color: red">订单总金额(含税): ¥{{ moneyFormat(calculatedTotalAmount(), 2) }}</span>
  279. </div>
  280. </div>
  281. </template>
  282. <template #attachments>
  283. <div style="width: 100%">
  284. <el-upload
  285. v-model:fileList="fileList"
  286. action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
  287. :data="uploadFileData"
  288. multiple
  289. :before-upload="beforeUpload"
  290. :on-success="onSuccessFile"
  291. :on-preview="onPreviewFile">
  292. <el-button style="background: #20b2aa; color: #fff; border: 1px solid #20b2aa">上传</el-button>
  293. </el-upload>
  294. </div>
  295. </template>
  296. <template #remark>
  297. <div style="margin: 0 2vw">
  298. <div v-html="getStyle(formData.data.remark)"></div>
  299. </div>
  300. </template>
  301. </byForm>
  302. <div style="text-align: center; margin: 10px">
  303. <el-button @click="clickCancel()" size="large">取 消</el-button>
  304. <el-button type="primary" @click="submitForm('20')" size="large" v-preReClick>提 交</el-button>
  305. </div>
  306. </el-card>
  307. <el-dialog title="选择图稿文件" v-if="openDrawingFile" v-model="openDrawingFile" width="70%">
  308. <SelectPicture @selectPic="selectPic"></SelectPicture>
  309. <template #footer>
  310. <el-button @click="openDrawingFile = false" size="large">关 闭</el-button>
  311. </template>
  312. </el-dialog>
  313. <el-dialog title="选择包材配件" v-if="openPackingFittings" v-model="openPackingFittings" width="90%">
  314. <SelectBOM :selectStatus="true" :bomClassifyIdList="[2, 3]" @selectBOM="selectPackingFittings"></SelectBOM>
  315. <template #footer>
  316. <el-button @click="openPackingFittings = false" size="large">关 闭</el-button>
  317. </template>
  318. </el-dialog>
  319. </div>
  320. </template>
  321. <script setup>
  322. import byForm from "/src/components/byForm/index";
  323. import { ElMessage } from "element-plus";
  324. import { useRouter, useRoute } from "vue-router";
  325. import useTagsViewStore from "/src/store/modules/tagsView";
  326. import SelectPicture from "/src/components/select-picture/index.vue";
  327. import SelectBOM from "/src/views/group/BOM/management/index";
  328. import refreshStore from "/src/store/modules/refresh";
  329. const { proxy } = getCurrentInstance();
  330. const router = useRouter();
  331. const route = useRoute();
  332. const submit = ref(null);
  333. const departmentList = ref([]);
  334. const activeNames = ref([]);
  335. const formOption = reactive({
  336. inline: true,
  337. labelWidth: "120px",
  338. itemWidth: 100,
  339. rules: [],
  340. labelPosition: "right",
  341. });
  342. const formData = reactive({
  343. data: {
  344. remark: "",
  345. type: 1,
  346. orderSkuList: [],
  347. fileList: [],
  348. },
  349. });
  350. const formConfig = computed(() => {
  351. return [
  352. formData.data.source !== 2
  353. ? {
  354. type: "title",
  355. title: "类型",
  356. label: "",
  357. }
  358. : {},
  359. formData.data.source !== 2
  360. ? {
  361. type: "slot",
  362. prop: "type",
  363. slotName: "type",
  364. label: "订单类型",
  365. }
  366. : {},
  367. formData.data.source !== 2
  368. ? {
  369. type: "slot",
  370. prop: "departmentId",
  371. slotName: "departmentId",
  372. label: "事业部",
  373. itemWidth: 25,
  374. }
  375. : {},
  376. {
  377. type: "title",
  378. title: "产品",
  379. label: "",
  380. },
  381. {
  382. type: "slot",
  383. prop: "orderSkuList",
  384. slotName: "orderSkuList",
  385. },
  386. {
  387. type: "title",
  388. title: "贸易",
  389. label: "",
  390. },
  391. {
  392. type: "slot",
  393. slotName: "deliveryTime",
  394. label: "交货时间",
  395. itemWidth: 25,
  396. },
  397. {
  398. type: "slot",
  399. label: "选择快递",
  400. slotName: "expressDeliveryId",
  401. itemWidth: 25,
  402. },
  403. {
  404. type: "slot",
  405. label: "店铺来源",
  406. slotName: "sourcePlatform",
  407. itemWidth: 25,
  408. },
  409. {
  410. type: "slot",
  411. label: "店铺名称",
  412. slotName: "shopName",
  413. itemWidth: 25,
  414. },
  415. {
  416. type: "title",
  417. title: "总计",
  418. label: "",
  419. },
  420. {
  421. type: "slot",
  422. prop: "totalMonet",
  423. slotName: "totalMonet",
  424. },
  425. {
  426. type: "title",
  427. title: "附件",
  428. label: "",
  429. },
  430. {
  431. type: "slot",
  432. slotName: "attachments",
  433. label: "附件",
  434. },
  435. {
  436. type: "title",
  437. title: "订单备注",
  438. label: "",
  439. },
  440. {
  441. type: "slot",
  442. slotName: "remark",
  443. },
  444. ];
  445. });
  446. const rules = ref({
  447. province: [{ required: true, message: "请输入省", trigger: "blur" }],
  448. detailedAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  449. consignee: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  450. consigneeNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  451. deliveryTime: [{ required: true, message: "请选择交货时间", trigger: "change" }],
  452. // expressDeliveryId: [{ required: true, message: "请选择快递", trigger: "change" }],
  453. sourcePlatform: [{ required: true, message: "请选择店铺来源", trigger: "change" }],
  454. shopName: [{ required: true, message: "请选择店铺", trigger: "change" }],
  455. quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  456. type: [{ required: true, message: "请选择订单类型", trigger: "change" }],
  457. departmentId: [{ required: true, message: "请选择事业部", trigger: "change" }],
  458. });
  459. const getDemandData = () => {
  460. proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  461. if (res.rows && res.rows.length > 0) {
  462. departmentList.value = res.rows.map((item) => {
  463. return {
  464. dictKey: item.id,
  465. dictValue: item.name,
  466. };
  467. });
  468. }
  469. });
  470. };
  471. getDemandData();
  472. const drawingFileIndex = ref(0);
  473. const openDrawingFile = ref(false);
  474. const clickDrawingFile = (index) => {
  475. drawingFileIndex.value = index;
  476. openDrawingFile.value = true;
  477. };
  478. const selectPic = (row) => {
  479. formData.data.orderSkuList[drawingFileIndex.value].blueprint = row.imgUrl;
  480. formData.data.orderSkuList[drawingFileIndex.value].productionDocument = row.fileUrl;
  481. ElMessage({ message: "选择完成", type: "success" });
  482. openDrawingFile.value = false;
  483. };
  484. const openFile = (path) => {
  485. window.open(path);
  486. };
  487. const submitForm = (status) => {
  488. submit.value.handleSubmit(() => {
  489. if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
  490. for (let i = 0; i < formData.data.orderSkuList.length; i++) {
  491. if (!formData.data.orderSkuList[i].blueprint) {
  492. return ElMessage("请选择设计图");
  493. }
  494. if (!formData.data.orderSkuList[i].productionDocument) {
  495. return ElMessage("请选择生产文件");
  496. }
  497. let packagingMaterialCost = 0;
  498. if (formData.data.orderSkuList[i].quantity) {
  499. if (formData.data.orderSkuList[i].orderSkuBomList && formData.data.orderSkuList[i].orderSkuBomList.length > 0) {
  500. for (let j = 0; j < formData.data.orderSkuList[i].orderSkuBomList.length; j++) {
  501. if (formData.data.orderSkuList[i].orderSkuBomList[j].quantity && formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) {
  502. packagingMaterialCost = Number(
  503. Math.round(
  504. (packagingMaterialCost +
  505. formData.data.orderSkuList[i].orderSkuBomList[j].quantity * formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) *
  506. 100
  507. ) / 100
  508. );
  509. }
  510. }
  511. }
  512. }
  513. formData.data.orderSkuList[i].packagingMaterialCost = packagingMaterialCost;
  514. }
  515. formData.data.productTotalAmount = calculatedAmount("unitPrice");
  516. formData.data.customProcessingFee = calculatedAmount("customProcessingFee");
  517. formData.data.lssueFee = calculatedAmount("lssueFee");
  518. formData.data.deliveryMaterialsFee = calculatedAmount("deliveryMaterialsFee");
  519. formData.data.packingLabor = calculatedAmount("packingLabor");
  520. formData.data.managementFee = calculatedAmount("managementFee");
  521. formData.data.packagingMaterialCost = calculatedPackagingMaterialCost();
  522. formData.data.totalAmount = calculatedTotalAmount();
  523. if (fileList.value && fileList.value.length > 0) {
  524. formData.data.fileList = fileList.value.map((item) => {
  525. return {
  526. id: item.raw.id,
  527. fileName: item.raw.fileName,
  528. fileUrl: item.raw.fileUrl,
  529. };
  530. });
  531. } else {
  532. formData.data.fileList = [];
  533. }
  534. formData.data.status = status;
  535. let type = "add";
  536. if (formData.data.id) {
  537. type = "edit";
  538. }
  539. proxy.post("/orderInfo/" + type, formData.data).then(() => {
  540. ElMessage({
  541. message: type == "add" ? "添加成功" : "编辑成功",
  542. type: "success",
  543. });
  544. refreshStore().setRefresh("order");
  545. clickCancel();
  546. });
  547. } else {
  548. return ElMessage("请添加产品");
  549. }
  550. });
  551. };
  552. const clickCancel = () => {
  553. const useTagsStore = useTagsViewStore();
  554. useTagsStore.delVisitedView(router.currentRoute.value);
  555. router.replace({
  556. path: "/subsidiary/order/subsidiary-order-management",
  557. });
  558. };
  559. onMounted(() => {
  560. if (route.query && (route.query.id || route.query.detailId)) {
  561. getOrderDetail({ id: route.query.id || route.query.detailId });
  562. }
  563. });
  564. const getOrderDetail = (parameter) => {
  565. proxy.post("/orderInfo/detail", parameter).then((res) => {
  566. formData.data = res;
  567. if (route.query.detailId) {
  568. let allIndex = [];
  569. for (let i = 0; i < formData.data.orderSkuList.length; i++) {
  570. allIndex.push(i);
  571. }
  572. activeNames.value = allIndex;
  573. formOption.disabled = true;
  574. }
  575. let list = [formData.data.id];
  576. if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
  577. list = list.concat(formData.data.orderSkuList.map((item) => item.id));
  578. proxy.post("/fileInfo/getList", { businessIdList: list }).then((fileObj) => {
  579. if (fileObj[formData.data.id] && fileObj[formData.data.id].length > 0) {
  580. let file = fileObj[formData.data.id].filter((item) => item.businessType == "0");
  581. if (file && file.length > 0) {
  582. fileList.value = file.map((item) => {
  583. return {
  584. raw: item,
  585. name: item.fileName,
  586. url: item.fileUrl,
  587. };
  588. });
  589. } else {
  590. fileList.value = [];
  591. }
  592. }
  593. for (let i = 0; i < formData.data.orderSkuList.length; i++) {
  594. if (fileObj[formData.data.orderSkuList[i].id] && fileObj[formData.data.orderSkuList[i].id].length > 0) {
  595. formData.data.orderSkuList[i].selfAdhesiveStickerFile = {
  596. id: fileObj[formData.data.orderSkuList[i].id][0].id,
  597. fileName: fileObj[formData.data.orderSkuList[i].id][0].fileName,
  598. fileUrl: fileObj[formData.data.orderSkuList[i].id][0].fileUrl,
  599. };
  600. }
  601. }
  602. });
  603. }
  604. });
  605. };
  606. const getStyle = (text) => {
  607. if (text) {
  608. return text.replace(/\n|\r\n/g, "<br>");
  609. } else {
  610. return "";
  611. }
  612. };
  613. const printType = ref([
  614. {
  615. dictKey: 1,
  616. dictValue: "单面",
  617. },
  618. {
  619. dictKey: 2,
  620. dictValue: "双面",
  621. },
  622. ]);
  623. const typeList = ref([
  624. {
  625. dictKey: 1,
  626. dictValue: "自主订单",
  627. },
  628. {
  629. dictKey: 2,
  630. dictValue: "委外订单",
  631. },
  632. ]);
  633. const uploadData = ref({});
  634. const uploadFile = async (file) => {
  635. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  636. uploadData.value = res.uploadBody;
  637. file.id = res.id;
  638. file.fileName = res.fileName;
  639. file.fileUrl = res.fileUrl;
  640. return true;
  641. };
  642. const handleSuccess = (UploadFile, index) => {
  643. formData.data.orderSkuList[index].productionDocument = UploadFile.raw.fileUrl;
  644. };
  645. const uploadImgData = ref({});
  646. const uploadImgFile = async (file) => {
  647. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  648. uploadImgData.value = res.uploadBody;
  649. file.id = res.id;
  650. file.fileName = res.fileName;
  651. file.fileUrl = res.fileUrl;
  652. return true;
  653. };
  654. const handleImgSuccess = (UploadFile, index) => {
  655. formData.data.orderSkuList[index].blueprint = UploadFile.raw.fileUrl;
  656. };
  657. const computeQuantity = (index, indexSKU) => {
  658. let quantity = 0;
  659. if (formData.data.orderSkuList[index].quantity && formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity) {
  660. quantity = Number(
  661. Math.round(formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity * formData.data.orderSkuList[index].quantity * 100) / 100
  662. );
  663. }
  664. return quantity;
  665. };
  666. const computeMoney = (index, indexSKU) => {
  667. let money = 0;
  668. if (
  669. formData.data.orderSkuList[index].quantity &&
  670. formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity &&
  671. formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice
  672. ) {
  673. money = Number(
  674. Math.round(
  675. formData.data.orderSkuList[index].orderSkuBomList[indexSKU].quantity *
  676. formData.data.orderSkuList[index].orderSkuBomList[indexSKU].unitPrice *
  677. formData.data.orderSkuList[index].quantity *
  678. 100
  679. ) / 100
  680. );
  681. }
  682. return money;
  683. };
  684. const clickDeletePackingFittings = (index, indexTwo) => {
  685. formData.data.orderSkuList[index].orderSkuBomList.splice(indexTwo, 1);
  686. };
  687. const rowIndex = ref(null);
  688. const openPackingFittings = ref(false);
  689. const clickPackingFittings = (index) => {
  690. rowIndex.value = index;
  691. openPackingFittings.value = true;
  692. };
  693. const selectPackingFittings = (data) => {
  694. if (formData.data.orderSkuList[rowIndex.value].orderSkuBomList && formData.data.orderSkuList[rowIndex.value].orderSkuBomList.length > 0) {
  695. let list = formData.data.orderSkuList[rowIndex.value].orderSkuBomList.filter((item) => item.bomSpecId === data.id);
  696. if (list && list.length > 0) {
  697. return ElMessage("包材配件已添加");
  698. }
  699. formData.data.orderSkuList[rowIndex.value].orderSkuBomList.push({
  700. bomSpecId: data.id,
  701. unitPrice: data.internalSellingPrice,
  702. quantity: undefined,
  703. bomSpecName: data.name,
  704. });
  705. } else {
  706. formData.data.orderSkuList[rowIndex.value].orderSkuBomList = [
  707. {
  708. bomSpecId: data.id,
  709. unitPrice: data.internalSellingPrice,
  710. quantity: undefined,
  711. bomSpecName: data.name,
  712. },
  713. ];
  714. }
  715. ElMessage({ message: "添加成功", type: "success" });
  716. };
  717. const getSubtotal = (item) => {
  718. let money = 0;
  719. if (item.quantity) {
  720. money = Number(
  721. Math.round(
  722. (item.customProcessingFee + item.deliveryMaterialsFee + item.lssueFee + item.packingLabor + item.managementFee + item.unitPrice) * item.quantity * 100
  723. ) / 100
  724. );
  725. }
  726. return money;
  727. };
  728. const calculatedAmount = (label) => {
  729. let money = 0;
  730. if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
  731. for (let i = 0; i < formData.data.orderSkuList.length; i++) {
  732. if (formData.data.orderSkuList[i].quantity && formData.data.orderSkuList[i][label]) {
  733. money = Number(Math.round((money + formData.data.orderSkuList[i][label] * formData.data.orderSkuList[i].quantity) * 100) / 100);
  734. }
  735. }
  736. }
  737. return money;
  738. };
  739. const calculatedPackagingMaterialCost = () => {
  740. let money = 0;
  741. if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
  742. for (let i = 0; i < formData.data.orderSkuList.length; i++) {
  743. if (formData.data.orderSkuList[i].orderSkuBomList && formData.data.orderSkuList[i].orderSkuBomList.length > 0) {
  744. for (let j = 0; j < formData.data.orderSkuList[i].orderSkuBomList.length; j++) {
  745. if (formData.data.orderSkuList[i].orderSkuBomList[j].quantity && formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice) {
  746. money = Number(
  747. Math.round(
  748. (money +
  749. formData.data.orderSkuList[i].orderSkuBomList[j].quantity *
  750. formData.data.orderSkuList[i].orderSkuBomList[j].unitPrice *
  751. formData.data.orderSkuList[i].quantity) *
  752. 100
  753. ) / 100
  754. );
  755. }
  756. }
  757. }
  758. }
  759. }
  760. return money;
  761. };
  762. const calculatedTotalAmount = () => {
  763. let money = 0;
  764. money = Number(
  765. Math.round(
  766. (calculatedAmount("unitPrice") +
  767. calculatedAmount("customProcessingFee") +
  768. calculatedAmount("lssueFee") +
  769. calculatedAmount("deliveryMaterialsFee") +
  770. calculatedAmount("packingLabor") +
  771. calculatedAmount("managementFee") +
  772. calculatedPackagingMaterialCost()) *
  773. 100
  774. ) / 100
  775. );
  776. return money;
  777. };
  778. const fileList = ref([]);
  779. const uploadFileData = ref({});
  780. const beforeUpload = async (file) => {
  781. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  782. uploadFileData.value = res.uploadBody;
  783. file.id = res.id;
  784. file.fileName = res.fileName;
  785. file.fileUrl = res.fileUrl;
  786. file.uploadState = true;
  787. return true;
  788. };
  789. const onSuccessFile = (any, UploadFile) => {
  790. UploadFile.raw.uploadState = false;
  791. };
  792. const onPreviewFile = (file) => {
  793. window.open(file.raw.fileUrl, "_blank");
  794. };
  795. const uploadAdhesiveData = ref({});
  796. const uploadAdhesiveFile = async (file) => {
  797. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  798. uploadAdhesiveData.value = res.uploadBody;
  799. file.id = res.id;
  800. file.fileName = res.fileName;
  801. file.fileUrl = res.fileUrl;
  802. return true;
  803. };
  804. const handleAdhesiveSuccess = (UploadFile, index) => {
  805. formData.data.orderSkuList[index].selfAdhesiveStickerFile = {
  806. id: UploadFile.raw.id,
  807. fileName: UploadFile.raw.fileName,
  808. fileUrl: UploadFile.raw.fileUrl,
  809. };
  810. };
  811. </script>
  812. <style lang="scss" scoped>
  813. ::v-deep(.el-input-number .el-input__inner) {
  814. text-align: left;
  815. }
  816. :deep(.el-dialog) {
  817. margin-top: 10px !important;
  818. margin-bottom: 10px !important;
  819. }
  820. :deep(.ql-editor) {
  821. height: auto;
  822. }
  823. :deep(.el-collapse-item__header) {
  824. justify-content: center;
  825. }
  826. :deep(.el-collapse-item__arrow) {
  827. margin: 0;
  828. }
  829. :deep(.el-table__cell) {
  830. vertical-align: top;
  831. }
  832. </style>