order-detail.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. <!-- 任务单详情 -->
  2. <template>
  3. <div>
  4. <div class="my-title">查看</div>
  5. <div style="margin-left: 20px;margin-right: 20px">
  6. <!-- 工作流 -->
  7. <div v-show="dataForm.workFlowBusinessExt">
  8. <el-steps :active="activeNo" finish-status="success" align-center style="margin-bottom: 20px">
  9. <template v-for="(item, i) in stepList">
  10. <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
  11. </template>
  12. </el-steps>
  13. <el-collapse style="margin-bottom: 20px">
  14. <el-collapse-item>
  15. <template slot="title">
  16. <span style="color: red">审批日志(展开查看更多):</span>
  17. </template>
  18. <template v-for="(item, i) in logList">
  19. <div>{{++i}}:{{item.approverName}} {{item.createTime}} {{item.approvalValue}}</div>
  20. </template>
  21. </el-collapse-item>
  22. </el-collapse>
  23. </div>
  24. <div v-if="isFlow">
  25. <approve-component ref="approve" @approveFinished="approveFinished"/>
  26. </div>
  27. <e-desc title="基本信息" column="3">
  28. <e-desc-item label="公司任务单编码">{{dataForm.orderCode}}</e-desc-item>
  29. <e-desc-item label="合同号">{{dataForm.contractNumber}}</e-desc-item>
  30. <e-desc-item label="客户名称">{{dataForm.customerName}}</e-desc-item>
  31. <e-desc-item label="业务员">{{dataForm.salesmanName}}</e-desc-item>
  32. <e-desc-item label="合同交期">{{dataForm.deliveryDate?dataForm.deliveryDate.substring(0,10):''}}</e-desc-item>
  33. <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
  34. <e-desc-item label="附件" span="3">
  35. <div v-for="(item, index) in dataForm.attachList" style="display: inline">
  36. <span v-if="index > 0">,</span>
  37. <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
  38. </div>
  39. </e-desc-item>
  40. </e-desc>
  41. <e-desc title="物料清单明细">
  42. <el-table
  43. :data="productDetails"
  44. row-key="productId"
  45. border
  46. :indent='20'
  47. lazy
  48. :load="loadingData"
  49. style="width: 100%;">
  50. <el-table-column
  51. label="序号"
  52. type="index"
  53. width="50"
  54. align="center">
  55. </el-table-column>
  56. <el-table-column
  57. prop="mapNumber"
  58. header-align="center"
  59. align="left"
  60. width="160"
  61. :show-tooltip-when-overflow="true"
  62. label="图号">
  63. </el-table-column>
  64. <el-table-column
  65. prop="productName"
  66. header-align="center"
  67. align="left"
  68. width="160"
  69. :show-tooltip-when-overflow="true"
  70. label="物料名称">
  71. </el-table-column>
  72. <el-table-column
  73. prop="relatedProduct"
  74. header-align="center"
  75. align="center"
  76. width="120"
  77. :show-tooltip-when-overflow="true"
  78. label="物料关联">
  79. </el-table-column>
  80. <el-table-column
  81. header-align="center"
  82. align="center"
  83. min-width="100"
  84. :show-tooltip-when-overflow="true"
  85. label="简图">
  86. <template slot-scope="scope">
  87. <el-popover placement="right" title="" trigger="hover">
  88. <img :src="scope.row.simplePic" style="height: 400px;width: 500px">
  89. <img slot="reference" :src="scope.row.simplePic" :alt="scope.row.simplePic" style="max-height: 50px;max-width: 130px">
  90. </el-popover>
  91. </template>
  92. </el-table-column>
  93. <el-table-column
  94. prop="productSpecifications"
  95. header-align="center"
  96. align="center"
  97. width="120"
  98. :show-tooltip-when-overflow="true"
  99. label="规格">
  100. </el-table-column>
  101. <el-table-column
  102. prop="cnt"
  103. header-align="center"
  104. align="center"
  105. width="80"
  106. label="数量">
  107. </el-table-column>
  108. <el-table-column
  109. prop="unit"
  110. header-align="center"
  111. align="center"
  112. width="80"
  113. label="单位">
  114. </el-table-column>
  115. <el-table-column
  116. prop="productNumber"
  117. header-align="center"
  118. align="center"
  119. width="120"
  120. :show-tooltip-when-overflow="true"
  121. label="生产编号">
  122. </el-table-column>
  123. <el-table-column
  124. prop="batchNumber"
  125. header-align="center"
  126. align="center"
  127. width="120"
  128. :show-tooltip-when-overflow="true"
  129. label="批次号">
  130. </el-table-column>
  131. <el-table-column
  132. prop="produceRequire"
  133. header-align="center"
  134. align="center"
  135. width="160"
  136. :show-tooltip-when-overflow="true"
  137. label="生产要求">
  138. </el-table-column>
  139. <el-table-column
  140. prop="price"
  141. header-align="center"
  142. align="center"
  143. width="80"
  144. label="含税单价">
  145. </el-table-column>
  146. <el-table-column
  147. prop="amount"
  148. header-align="center"
  149. align="center"
  150. width="80"
  151. label="含税总价">
  152. <template slot-scope="scope">
  153. <span>{{ (scope.row.cnt*scope.row.price).toFixed(1) }}</span>
  154. </template>
  155. </el-table-column>
  156. <el-table-column
  157. prop="rate"
  158. header-align="center"
  159. align="center"
  160. width="100"
  161. label="税率">
  162. <template slot-scope="scope">
  163. {{scope.row.rate}}%
  164. </template>
  165. </el-table-column>
  166. <el-table-column
  167. prop="mapNumber"
  168. header-align="center"
  169. align="center"
  170. min-width="100"
  171. :show-tooltip-when-overflow="true"
  172. label="主图号">
  173. </el-table-column>
  174. <el-table-column
  175. prop="noticeChangeRecord"
  176. header-align="center"
  177. align="center"
  178. min-width="120"
  179. :show-tooltip-when-overflow="true"
  180. label="产品变更记录">
  181. </el-table-column>
  182. <el-table-column
  183. header-align="center"
  184. align="center"
  185. min-width="100"
  186. :show-tooltip-when-overflow="true"
  187. label="技术文件">
  188. <template slot-scope="scope">
  189. <el-button :disabled="!scope.row.attachList || scope.row.attachList.length === 0" type="text" size="small" @click="attachDetails(scope.row.attachList)">查看</el-button>
  190. </template>
  191. </el-table-column>
  192. <el-table-column
  193. header-align="center"
  194. align="center"
  195. label="对应图纸">
  196. <template slot-scope="scope">
  197. <el-button :disabled="!scope.row.drawingList || scope.row.drawingList.length === 0" type="text" size="small" @click="drawDetails(scope.row)">查看</el-button>
  198. </template>
  199. </el-table-column>
  200. <el-table-column
  201. header-align="center"
  202. align="center"
  203. label="对应工艺">
  204. <template slot-scope="scope">
  205. <el-button :disabled="!scope.row.techId" type="text" size="small" @click="techDetails(scope.row.techId)">查看</el-button>
  206. </template>
  207. </el-table-column>
  208. <el-table-column
  209. header-align="center"
  210. align="center"
  211. label="生产明细">
  212. <template slot-scope="scope">
  213. <el-button :disabled="!scope.row.prodProductionList || scope.row.prodProductionList.length === 0" type="text" size="small" @click="productListHandle(scope.row)">查看</el-button>
  214. </template>
  215. </el-table-column>
  216. <el-table-column
  217. prop="appraisal"
  218. header-align="center"
  219. align="center"
  220. width="120"
  221. :show-tooltip-when-overflow="true"
  222. label="首件鉴定">
  223. <template slot-scope="scope">
  224. <span>{{!scope.row.appraisal?'':(Number(scope.row.appraisal) === 2?'是':'否')}}</span>
  225. </template>
  226. </el-table-column>
  227. <el-table-column
  228. header-align="center"
  229. align="center"
  230. width="120"
  231. :show-tooltip-when-overflow="true"
  232. label="试制前检查">
  233. <template slot-scope="scope">
  234. <span>{{!scope.row.inspect?'':(Number(scope.row.inspect) === 2?'是':'否')}}</span>
  235. </template>
  236. </el-table-column>
  237. <el-table-column
  238. header-align="center"
  239. align="center"
  240. min-width="120"
  241. :show-tooltip-when-overflow="true"
  242. label="试制前准备状态检查报告">
  243. <template slot-scope="scope">
  244. <el-button :disabled="!scope.row.attachListInspection || scope.row.attachListInspection.length === 0" type="text" size="small" @click="attachDetails(scope.row.attachListInspection)">查看</el-button>
  245. </template>
  246. </el-table-column>
  247. <el-table-column
  248. header-align="center"
  249. align="center"
  250. min-width="100"
  251. :show-tooltip-when-overflow="true"
  252. label="试制前准备状态自查表">
  253. <template slot-scope="scope">
  254. <el-button :disabled="!scope.row.attachListExamine || scope.row.attachListExamine.length === 0" type="text" size="small" @click="attachDetails(scope.row.attachListExamine)">查看</el-button>
  255. </template>
  256. </el-table-column>
  257. <el-table-column
  258. prop="notes"
  259. header-align="center"
  260. align="center"
  261. min-width="120"
  262. :show-tooltip-when-overflow="true"
  263. label="备注">
  264. </el-table-column>
  265. <el-table-column
  266. prop="prodState"
  267. header-align="center"
  268. fixed="right"
  269. align="center"
  270. :formatter="formatState"
  271. :show-tooltip-when-overflow="true"
  272. label="状态">
  273. </el-table-column>
  274. </el-table>
  275. </e-desc>
  276. <e-desc title="任务工单派发">
  277. <el-table
  278. :data="workInfoDetails"
  279. border
  280. style="width: 100%;">
  281. <el-table-column
  282. label="序号"
  283. type="index"
  284. width="50"
  285. align="center">
  286. </el-table-column>
  287. <el-table-column
  288. prop="taskType"
  289. header-align="center"
  290. align="center"
  291. min-width="80"
  292. :show-tooltip-when-overflow="true"
  293. label="工单类型">
  294. </el-table-column>
  295. <el-table-column
  296. prop="taskName"
  297. header-align="center"
  298. align="center"
  299. width="120"
  300. :show-tooltip-when-overflow="true"
  301. label="工单名称">
  302. </el-table-column>
  303. <el-table-column
  304. prop="ranks"
  305. header-align="center"
  306. align="center"
  307. min-width="50"
  308. label="级别">
  309. </el-table-column>
  310. <el-table-column
  311. prop="content"
  312. header-align="center"
  313. align="center"
  314. width="160"
  315. :show-tooltip-when-overflow="true"
  316. label="工单内容">
  317. </el-table-column>
  318. <el-table-column
  319. prop="receiverName"
  320. header-align="center"
  321. align="center"
  322. min-width="100"
  323. label="任务接收人">
  324. </el-table-column>
  325. <el-table-column
  326. prop="planCompletionTime"
  327. header-align="center"
  328. align="center"
  329. min-width="80"
  330. label="要求完成时间">
  331. </el-table-column>
  332. <el-table-column
  333. prop="attachList"
  334. header-align="center"
  335. align="center"
  336. label="工单附件">
  337. <template slot-scope="scope">
  338. <div v-for="(item, index) in scope.row.attachList" style="display: inline">
  339. <span v-if="index > 0">,</span>
  340. <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
  341. </div>
  342. </template>
  343. </el-table-column>
  344. <el-table-column
  345. prop="notes"
  346. header-align="center"
  347. align="center"
  348. width="120"
  349. :show-tooltip-when-overflow="true"
  350. label="备注">
  351. </el-table-column>
  352. </el-table>
  353. </e-desc>
  354. </div>
  355. <span slot="footer" class="dialog-footer">
  356. <el-button @click="onChose">返回</el-button>
  357. </span>
  358. <!-- 文件预览 -->
  359. <preview-component v-if="previewVisible" ref="preview"/>
  360. <product-draw-detail-dialog v-if="drawVisible" ref="drawDetail"/>
  361. <attach-detail-dialog v-if="attachVisible" ref="attachDetail"/>
  362. <crafts-detail-dialog v-if="craftsVisible" ref="craftsDetail"/>
  363. <prod-management-details-dialog v-if="prodVisible" ref="prodDetail"/>
  364. </div>
  365. </template>
  366. <script>
  367. import EDesc from '../common/e-desc'
  368. import EDescItem from '../common/e-desc-item'
  369. import { dealStepData, dealStepLogs } from '@/api/util'
  370. import { getOrderDetail } from '@/api/sale'
  371. import { getChildren2 } from '@/api/product'
  372. import uploadComponent from '../common/upload-component'
  373. import ApproveComponent from '../common/approve-component'
  374. import PreviewComponent from '@/views/modules/common/preview-component'
  375. import ProductDrawDetailDialog from '@/views/modules/tech/product-draw-detail-dialog'
  376. import AttachDetailDialog from '@/views/modules/common/attach-detail-dialog'
  377. import { downloadUrl } from '@/api/file'
  378. import CraftsDetailDialog from '@/views/modules/tech/crafts-detail-dialog'
  379. import {optionsMaterialState} from '@/utils/enums'
  380. import ProdManagementDetailsDialog from '@/views/modules/production/prod-list-dialog'
  381. export default {
  382. name: 'order-detail',
  383. components: {
  384. ProdManagementDetailsDialog,
  385. CraftsDetailDialog,
  386. AttachDetailDialog,
  387. ProductDrawDetailDialog,
  388. PreviewComponent,
  389. EDesc,
  390. EDescItem,
  391. uploadComponent,
  392. ApproveComponent
  393. },
  394. data () {
  395. return {
  396. visible: false,
  397. isFlow: false,
  398. previewVisible: false,
  399. id: 0,
  400. dataForm: {},
  401. productDetails: [],
  402. workInfoDetails: [],
  403. activeNo: 0,
  404. stepList: [],
  405. logList: [],
  406. drawVisible: false,
  407. attachVisible: false,
  408. craftsVisible: false,
  409. optionsState: optionsMaterialState,
  410. prodVisible: false
  411. }
  412. },
  413. methods: {
  414. onChose () {
  415. this.$emit('onChose')
  416. },
  417. async init (id, businessType) {
  418. this.visible = true
  419. this.isFlow = !!(businessType && businessType !== '')
  420. this.id = id || 0
  421. this.dataForm = {
  422. workFlowBusinessExt: null
  423. }
  424. this.productDetails = []
  425. this.stepList = []
  426. this.logList = []
  427. this.getDetails(businessType)
  428. },
  429. getDetails (businessType) {
  430. getOrderDetail(this.id).then(({data}) => {
  431. if (data && data.code === '200') {
  432. this.dataForm = data.data
  433. // 流程图展示
  434. if (data.data.workFlowBusinessExt.workFlowProcessStepList) {
  435. dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
  436. }
  437. if (data.data.workFlowBusinessExt.processLogList) {
  438. dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
  439. }
  440. if (data.data.workFlowProcessStepList) {
  441. this.activeNo = Number(data.data.workFlowProcessStepList.activeNo)
  442. }
  443. // 任务单物料明细
  444. if (data.data.saleROrderProductList) {
  445. this.productDetails = data.data.saleROrderProductList
  446. // 简图格式调整
  447. this.productDetails.forEach(item => {
  448. if (item.attachList2 && item.attachList2.length > 0) {
  449. item.simplePic = downloadUrl + item.attachList2[0].url
  450. } else {
  451. item.simplePic = ''
  452. }
  453. })
  454. }
  455. // 任务工单派发
  456. if (data.data.workInfoList) {
  457. this.workInfoDetails = data.data.workInfoList
  458. }
  459. // 初始化审批Form
  460. this.showApproveForm(businessType, this.id)
  461. }
  462. })
  463. },
  464. // 初始化审批Form
  465. showApproveForm (businessType, businessId) {
  466. if (this.isFlow) {
  467. this.$nextTick(() => {
  468. this.$refs.approve.init(businessType, businessId)
  469. })
  470. }
  471. },
  472. // 审批完成
  473. approveFinished () {
  474. this.onChose()
  475. this.$emit('approveFinished')
  476. },
  477. // 对应图纸
  478. drawDetails (row) {
  479. this.drawVisible = true
  480. this.$nextTick(() => {
  481. this.$refs.drawDetail.init(row.drawingList)
  482. })
  483. },
  484. // 预览
  485. previewFile (fileName, url) {
  486. this.previewVisible = true
  487. this.$nextTick(() => {
  488. this.$refs.preview.init(fileName, url)
  489. })
  490. },
  491. loadingData (row, treeNode, resolve) {
  492. getChildren2(row.productId, row.id).then(({data}) => {
  493. // console.log(JSON.stringify(data))
  494. if (data && data.code === '200') {
  495. data.data.forEach(item => {
  496. if (item.attachList2 && item.attachList2.length > 0) {
  497. item.simplePic = downloadUrl + item.attachList2[0].url
  498. } else {
  499. item.simplePic = ''
  500. }
  501. })
  502. resolve(data.data)
  503. } else {
  504. this.$message.error(data.msg)
  505. }
  506. })
  507. },
  508. // 物料技术文件
  509. attachDetails (list) {
  510. this.attachVisible = true
  511. this.$nextTick(() => {
  512. this.$refs.attachDetail.init(list)
  513. })
  514. },
  515. // 对应工艺
  516. techDetails (id) {
  517. this.craftsVisible = true
  518. this.$nextTick(() => {
  519. this.$refs.craftsDetail.init(id)
  520. })
  521. },
  522. // 格式化物料状态
  523. formatState (row) {
  524. if (!row.prodState) return ''
  525. const item1 = this.optionsState.find((item) => item.code === row.prodState.toString())
  526. return item1 ? item1.value : ''
  527. },
  528. // 查看生产明细
  529. productListHandle (row) {
  530. this.prodVisible = true
  531. this.$nextTick(() => {
  532. this.$refs.prodDetail.init(row.prodProductionList)
  533. })
  534. }
  535. }
  536. }
  537. </script>
  538. <style scoped>
  539. .my-line{
  540. border-bottom: 1px solid #c0c4cc;
  541. margin-bottom: 10px;
  542. }
  543. .title{
  544. padding: 10px 0 ;
  545. }
  546. </style>