sales_detail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <template>
  2. <div class="detail-container">
  3. <el-page-header @back="goBack" :content="!edit ? '详情' : '编辑'"></el-page-header>
  4. <div id="printMe">
  5. <div class="main-title">
  6. <div class="title">出库单信息</div>
  7. </div>
  8. <div class="diy-table-1">
  9. <el-row :gutter="0">
  10. <el-col :span="8" class="item">
  11. <div class="label">出库单号</div>
  12. <div class="value">{{ detailData.id }}</div>
  13. </el-col>
  14. <el-col :span="8" class="item">
  15. <div class="label">单据日期</div>
  16. <div class="value">{{ detailData.orderTime }}</div>
  17. </el-col>
  18. <el-col :span="8" class="item">
  19. <div class="label">单据状态</div>
  20. <div class="value">
  21. {{ detailData.examineStatus | statusFilter }}
  22. </div>
  23. </el-col>
  24. <el-col :span="8" class="item">
  25. <div class="label">发货单号</div>
  26. <div class="value">{{ detailData.orderNo }}</div>
  27. </el-col>
  28. <el-col :span="16" class="item">
  29. <div class="label">经销商</div>
  30. <div class="value">{{ detailData.customerName }}</div>
  31. </el-col>
  32. <el-col :span="8" class="item">
  33. <div class="label">仓库</div>
  34. <div class="value">{{ detailData.correspondName }}</div>
  35. </el-col>
  36. <el-col :span="16" class="item">
  37. <div class="label">备注</div>
  38. <div class="value">
  39. <el-input v-model="detailData.remark" :readonly="!edit" placeholder="请输入备注"></el-input>
  40. </div>
  41. </el-col>
  42. <el-col :span="24" class="item file" style="width: 100%; height: auto">
  43. <div class="label" style="height: 140px">附件</div>
  44. <div class="value" style="height: 140px">
  45. <div class="file-list" v-if="edit">
  46. <ImageUpload :file-list="fileList" multiple />
  47. </div>
  48. <div class="file-list" v-else>
  49. <div class="file-item" v-for="item in detailData.salesOrderPictures">
  50. <el-image
  51. v-if="checkFileType(item.fileUrl) == 'image'"
  52. class="img"
  53. fit="fill"
  54. :src="$imageUrl + item.fileUrl"
  55. :preview-src-list="[$imageUrl + item.fileUrl]"
  56. ></el-image>
  57. <div v-else class="box2" @click="openLink(item.fileUrl)">
  58. <img src="@/assets/common/word.png" v-if="checkFileType(item.fileUrl) == 'word'" />
  59. <img src="@/assets/common/excel.png" v-if="checkFileType(item.fileUrl) == 'excel'" />
  60. <img src="@/assets/common/ppt.png" v-if="checkFileType(item.fileUrl) == 'ppt'" />
  61. <img src="@/assets/common/pdf.png" v-if="checkFileType(item.fileUrl) == 'pdf'" />
  62. <div class="name ellipsis-3">{{ item.fileName }}</div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </el-col>
  68. </el-row>
  69. </div>
  70. <!-- <div class="fileUpload" v-if="edit">
  71. <div class="main-title">
  72. <div class="title">上传附件</div>
  73. </div>
  74. <fileUpload :fileList="fileList" multiple />
  75. </div> -->
  76. <div class="main-title">
  77. <div class="title">货品信息</div>
  78. </div>
  79. <div class="table">
  80. <el-table
  81. :data="detailData.saleOrderData"
  82. element-loading-text="Loading"
  83. border
  84. fit
  85. highlight-current-row
  86. stripe
  87. max-height="400"
  88. show-summary
  89. :summary-method="$getSummaries"
  90. >
  91. <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
  92. <el-table-column align="center" label="销售订单号" prop="mainOrderId" min-width="180" show-overflow-tooltip>
  93. <template slot-scope="scope">
  94. {{
  95. scope.row.orderType === 'TRADE' ||
  96. scope.row.orderType === 'HOME' ||
  97. scope.row.orderType === 'REQUISITION_TRADE' ||
  98. scope.row.orderType === 'REQUISITION_HOME'
  99. ? scope.row.enginOrderNo
  100. : scope.row.mainOrderId
  101. }}
  102. </template>
  103. </el-table-column>
  104. <el-table-column
  105. align="center"
  106. label="物料编码"
  107. prop="materialCode"
  108. min-width="120"
  109. show-overflow-tooltip
  110. ></el-table-column>
  111. <el-table-column
  112. align="center"
  113. label="产品编码"
  114. prop="materialOldNumber"
  115. min-width="120"
  116. show-overflow-tooltip
  117. ></el-table-column>
  118. <el-table-column
  119. align="center"
  120. label="产品名称"
  121. prop="materialName"
  122. min-width="160"
  123. show-overflow-tooltip
  124. ></el-table-column>
  125. <el-table-column
  126. align="center"
  127. label="规格型号"
  128. prop="specification"
  129. min-width="160"
  130. show-overflow-tooltip
  131. ></el-table-column>
  132. <el-table-column
  133. align="center"
  134. label="单位"
  135. prop="unit"
  136. min-width="100"
  137. show-overflow-tooltip
  138. ></el-table-column>
  139. <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip>
  140. <template slot-scope="scope">
  141. <template v-if="edit">
  142. <el-input
  143. size="mini"
  144. class="input"
  145. v-model="scope.row.refundableQty"
  146. placeholder="请输入数量"
  147. ></el-input>
  148. </template>
  149. <template v-else>
  150. {{ scope.row.refundableQty }}
  151. </template>
  152. </template>
  153. </el-table-column>
  154. <!-- <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip>
  155. <template slot-scope="scope">
  156. {{ scope.row.price | numToFixed }}
  157. </template>
  158. </el-table-column>
  159. <el-table-column align="right" label="订单金额" prop="payAmount" min-width="100" show-overflow-tooltip>
  160. <template slot-scope="scope">
  161. {{ scope.row.payAmount | numToFixed }}
  162. </template>
  163. </el-table-column> -->
  164. <el-table-column align="left" label="表头备注" prop="headerRemark" min-width="160" show-overflow-tooltip>
  165. <template slot-scope="scope">
  166. <template v-if="edit">
  167. <el-input
  168. size="mini"
  169. class="input"
  170. v-model="scope.row.headerRemark"
  171. placeholder="请输入表头备注"
  172. ></el-input>
  173. </template>
  174. <template v-else>
  175. {{ scope.row.headerRemark }}
  176. </template>
  177. </template>
  178. </el-table-column>
  179. <!-- <el-table-column align="left" label="发货申请备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column> -->
  180. <el-table-column align="left" label="表体备注" prop="invoiceRemark" min-width="160" show-overflow-tooltip>
  181. <template slot-scope="scope">
  182. <template v-if="edit">
  183. <el-input
  184. size="mini"
  185. class="input"
  186. v-model="scope.row.invoiceRemark"
  187. placeholder="请输表体备注"
  188. ></el-input>
  189. </template>
  190. <template v-else>
  191. {{ scope.row.invoiceRemark }}
  192. </template>
  193. </template>
  194. </el-table-column>
  195. <el-table-column
  196. align="left"
  197. label="表头业务员"
  198. prop="k3ServiceName"
  199. min-width="100"
  200. show-overflow-tooltip
  201. ></el-table-column>
  202. <el-table-column
  203. align="left"
  204. label="表体业务员"
  205. prop="serviceName"
  206. min-width="100"
  207. show-overflow-tooltip
  208. ></el-table-column>
  209. <el-table-column
  210. align="left"
  211. label="打印时间"
  212. prop="printTime"
  213. min-width="100"
  214. show-overflow-tooltip
  215. sortable
  216. ></el-table-column>
  217. <el-table-column
  218. align="left"
  219. label="打印状态"
  220. prop="printStatus"
  221. min-width="100"
  222. show-overflow-tooltip
  223. sortable
  224. >
  225. <template slot-scope="scope">
  226. {{ scope.row.printStatus == 1 ? '已打印' : '未打印' }}
  227. </template>
  228. </el-table-column>
  229. </el-table>
  230. </div>
  231. <div class="main-title">
  232. <div class="title">审批记录</div>
  233. </div>
  234. <div class="diy-table-1">
  235. <el-row :gutter="0">
  236. <el-col :xs="12" :sm="12" :lg="12" class="item">
  237. <div class="label">审批人</div>
  238. <div class="value">{{ detailData.approvalName }}</div>
  239. </el-col>
  240. <el-col :xs="12" :sm="12" :lg="12" class="item">
  241. <div class="label">制单人</div>
  242. <div class="value">{{ detailData.createBy }}</div>
  243. </el-col>
  244. <el-col :xs="12" :sm="12" :lg="12" class="item">
  245. <div class="label">审批结果</div>
  246. <div class="value">
  247. {{ detailData.examineStatus | statusFilter }}
  248. </div>
  249. </el-col>
  250. <el-col :xs="12" :sm="12" :lg="12" class="item">
  251. <div class="label">审批时间</div>
  252. <div class="value">{{ detailData.approvalTime }}</div>
  253. </el-col>
  254. <el-col :xs="24" :sm="24" :lg="24" class="item">
  255. <div class="label">审批说明</div>
  256. <div class="value">{{ detailData.approvalRemark }}</div>
  257. </el-col>
  258. </el-row>
  259. </div>
  260. </div>
  261. <div style="margin: 10px" v-if="edit">
  262. <el-button type="primary" @click="updateNum">保存</el-button>
  263. </div>
  264. </div>
  265. </template>
  266. <script>
  267. import print from 'vue-print-nb'
  268. import { getDetail, updateNum } from '@/api/supply/sales'
  269. import { getFileUrl } from '@/api/common'
  270. import fileUpload from '@/components/Common/file-upload.vue'
  271. import ImageUpload from '@/components/Common/image-upload.vue'
  272. export default {
  273. name: 'SalesDetail',
  274. componentName: 'SalesDetail',
  275. props: ['listItem', 'edit'],
  276. components: {
  277. fileUpload,
  278. ImageUpload
  279. },
  280. directives: {
  281. print
  282. },
  283. filters: {
  284. statusFilter(val) {
  285. const statusList = [
  286. { label: '已保存', value: 'SAVE' },
  287. { label: '待审核', value: 'WAIT' },
  288. { label: '审核通过', value: 'OK' }
  289. // { label: '审核驳回', value: 'FAIL' },,
  290. ]
  291. let obj = statusList.find(o => o.value == val)
  292. return obj ? obj.label : ''
  293. }
  294. },
  295. data() {
  296. return {
  297. printObj: {
  298. id: 'printMe'
  299. },
  300. detailData: {},
  301. srcList: [],
  302. fileList: [],
  303. }
  304. },
  305. created() {
  306. this.getDetail()
  307. },
  308. methods: {
  309. // 返回列表
  310. goBack() {
  311. this.$emit('backListFormDetail')
  312. this.$parent.edit = false
  313. },
  314. updateNum() {
  315. this.detailData.saleOrderData.forEach(item => {
  316. item.remark = item.invoiceRemark
  317. item.invoiceNum = +item.refundableQty
  318. })
  319. const salesOrderPictures = []
  320. if (this.fileList.length) {
  321. this.fileList.forEach(k => {
  322. salesOrderPictures.push({
  323. fileName: k.name,
  324. fileUrl: k.url,
  325. salesId: this.detailData.id
  326. })
  327. })
  328. }
  329. updateNum({
  330. ...this.detailData,
  331. salesOrderPictures:salesOrderPictures
  332. }).then(res => {
  333. this.$successMsg('修改成功')
  334. this.$parent.edit = false
  335. this.goBack()
  336. this.$parent.getList()
  337. })
  338. },
  339. // 打开链接
  340. openLink(url) {
  341. getFileUrl({ key: url }).then(res => {
  342. window.open(res.data)
  343. })
  344. },
  345. // 检查文件类型
  346. checkFileType(url) {
  347. if (!url) return ''
  348. const fileSuffix = url.substring(url.lastIndexOf('.') + 1)
  349. if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
  350. return 'image'
  351. } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
  352. return 'word'
  353. } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
  354. return 'excel'
  355. } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
  356. return 'ppt'
  357. } else if (['pdf'].includes(fileSuffix)) {
  358. return 'pdf'
  359. } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
  360. return 'file'
  361. } else {
  362. return ''
  363. }
  364. },
  365. // 获取详情
  366. getDetail() {
  367. getDetail({ id: this.listItem.id }).then(res => {
  368. if (res.data.saleOrderData) {
  369. res.data.saleOrderData.forEach(item => {
  370. item.sums1 = ['refundableQty']
  371. item.sums2 = ['payAmount', 'price']
  372. })
  373. }
  374. console.log(res.data);
  375. res.data.salesOrderPictures.forEach(k=>{
  376. this.fileList.push({
  377. hover: '',
  378. url:k.fileUrl,
  379. name:k.fileName,
  380. })
  381. this.srcList.push(this.$imageUrl+k.fileUrl)
  382. })
  383. this.detailData = res.data
  384. // this.srcList = [this.$imageUrl + this.detailData.fileUrl]
  385. })
  386. }
  387. }
  388. }
  389. </script>
  390. <style scoped lang="scss">
  391. .detail-container {
  392. width: 100%;
  393. height: 100%;
  394. .input {
  395. ::v-deep .el-input__inner {
  396. text-align: right !important;
  397. }
  398. }
  399. }
  400. .img-box {
  401. height: 150px;
  402. display: flex;
  403. align-items: center;
  404. }
  405. .file {
  406. width: 64px;
  407. height: 64px;
  408. }
  409. .fileUpload{
  410. margin-right: 10px;
  411. }
  412. </style>