quoted-detail.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. <template>
  2. <div>
  3. <div class="my-title">详情</div>
  4. <div style="margin-left: 20px; margin-right: 20px">
  5. <!-- 工作流 -->
  6. <div v-show="dataForm.workFlowBusinessExt">
  7. <el-steps
  8. :active="
  9. dataForm.workFlowBusinessExt &&
  10. dataForm.workFlowBusinessExt.workFlowProcessStepList
  11. ? dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2
  12. : 0
  13. "
  14. align-center
  15. style="margin-bottom: 20px"
  16. >
  17. <template v-for="(item, i) in stepList">
  18. <el-step
  19. :icon="item.icon"
  20. :title="item.title"
  21. :description="item.description"
  22. ></el-step>
  23. </template>
  24. </el-steps>
  25. <el-collapse style="margin-bottom: 20px">
  26. <el-collapse-item>
  27. <template slot="title">
  28. <span style="color: red">审批日志(展开查看更多):</span>
  29. </template>
  30. <template v-for="(item, i) in logList">
  31. <div>
  32. {{ ++i }}:{{ item.approverName }} {{ item.createTime }}
  33. {{ item.approvalValue }}
  34. </div>
  35. </template>
  36. </el-collapse-item>
  37. </el-collapse>
  38. </div>
  39. <div v-if="isFlow">
  40. <approve-component ref="approve" @approveFinished="approveFinished" />
  41. </div>
  42. <e-desc title="基本信息" column="3">
  43. <e-desc-item label="项目名称">{{ dataForm.projectName }}</e-desc-item>
  44. <e-desc-item label="项目类别">{{ dataForm.typeName }}</e-desc-item>
  45. <e-desc-item label="备注" span="3">{{ dataForm.remark }}</e-desc-item>
  46. <e-desc-item label="关联BOM物料清单" span="3">{{
  47. dataForm.productName
  48. }}</e-desc-item>
  49. <e-desc-item v-if="dataForm.attachList" label="附件" span="3">
  50. <div v-for="(item, index) in dataForm.attachList" style="display: inline">
  51. <span v-if="index > 0">,</span>
  52. <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
  53. </div>
  54. </e-desc-item>
  55. </e-desc>
  56. <div class="desc">
  57. <h1 class="desc-title">BOM物料明细报价</h1>
  58. <el-row>
  59. <el-table
  60. :data="dataForm.quotedPriceProductList"
  61. border
  62. style="width: 100%"
  63. >
  64. <el-table-column
  65. label="序号"
  66. type="index"
  67. width="50"
  68. align="center"
  69. >
  70. </el-table-column>
  71. <el-table-column
  72. prop="productName"
  73. header-align="center"
  74. align="center"
  75. :show-tooltip-when-overflow="true"
  76. label="物料名称"
  77. >
  78. </el-table-column>
  79. <el-table-column
  80. prop="productSpec"
  81. header-align="center"
  82. align="center"
  83. :show-tooltip-when-overflow="true"
  84. label="物料规格"
  85. >
  86. </el-table-column>
  87. <el-table-column
  88. prop="mapNumber"
  89. header-align="center"
  90. align="center"
  91. :show-tooltip-when-overflow="true"
  92. label="主图号"
  93. >
  94. </el-table-column>
  95. <el-table-column
  96. prop="materials"
  97. header-align="center"
  98. align="center"
  99. :show-tooltip-when-overflow="true"
  100. label="材料"
  101. >
  102. </el-table-column>
  103. <el-table-column
  104. prop="cnt"
  105. header-align="center"
  106. align="center"
  107. :show-tooltip-when-overflow="true"
  108. label="单套数量"
  109. >
  110. </el-table-column>
  111. <el-table-column
  112. prop="unit"
  113. header-align="center"
  114. align="center"
  115. :show-tooltip-when-overflow="true"
  116. label="单位"
  117. >
  118. </el-table-column>
  119. <el-table-column
  120. prop="size"
  121. header-align="center"
  122. align="center"
  123. :show-tooltip-when-overflow="true"
  124. label="物料尺寸"
  125. >
  126. </el-table-column>
  127. <el-table-column
  128. prop="developedSize"
  129. header-align="center"
  130. align="center"
  131. :show-tooltip-when-overflow="true"
  132. label="展开尺寸"
  133. >
  134. </el-table-column>
  135. <el-table-column
  136. prop="surfaceTreatment"
  137. header-align="center"
  138. align="center"
  139. :show-tooltip-when-overflow="true"
  140. label="表面处理"
  141. >
  142. </el-table-column>
  143. <el-table-column
  144. prop="notes"
  145. header-align="center"
  146. align="center"
  147. :show-tooltip-when-overflow="true"
  148. label="备注"
  149. >
  150. </el-table-column>
  151. <!-- 初次报价 -->
  152. <div>
  153. <el-table-column
  154. prop="materialPrice"
  155. header-align="center"
  156. align="center"
  157. min-width="160px"
  158. label="原材料费"
  159. >
  160. </el-table-column>
  161. <el-table-column
  162. prop="processPrice"
  163. header-align="center"
  164. align="center"
  165. min-width="160px"
  166. label="生产加工费"
  167. >
  168. </el-table-column>
  169. <el-table-column
  170. prop="handlePrice"
  171. header-align="center"
  172. align="center"
  173. min-width="160px"
  174. label="热表处理费"
  175. >
  176. </el-table-column>
  177. </div>
  178. <!-- 精准报价 -->
  179. <div>
  180. <el-table-column
  181. prop="precisionMaterialPrice"
  182. header-align="center"
  183. align="center"
  184. min-width="160px"
  185. label="精准原材料费"
  186. >
  187. </el-table-column>
  188. <el-table-column
  189. prop="precisionProcessPrice"
  190. header-align="center"
  191. align="center"
  192. min-width="160px"
  193. label="精准生产加工费"
  194. >
  195. </el-table-column>
  196. <el-table-column
  197. prop="precisionHandlePrice"
  198. header-align="center"
  199. align="center"
  200. min-width="160px"
  201. label="精准热表处理费"
  202. >
  203. </el-table-column>
  204. </div>
  205. </el-table>
  206. </el-row>
  207. </div>
  208. <div class="desc">
  209. <h1 class="desc-title">任务工单派发</h1>
  210. <el-row>
  211. <el-table :data="dataForm.workInfoList" border style="width: 100%">
  212. <el-table-column
  213. label="序号"
  214. type="index"
  215. width="50"
  216. align="center"
  217. >
  218. </el-table-column>
  219. <el-table-column
  220. prop="taskType"
  221. header-align="center"
  222. align="center"
  223. min-width="100"
  224. width="120"
  225. label="工单类型"
  226. >
  227. <template slot-scope="scope">
  228. <span>{{
  229. taskTypeOption.findIndex(
  230. (t) => t.value == scope.row.taskType
  231. ) > -1
  232. ? taskTypeOption.find((t) => t.value == scope.row.taskType)
  233. .label
  234. : ""
  235. }}</span>
  236. </template>
  237. </el-table-column>
  238. <el-table-column
  239. prop="taskName"
  240. header-align="center"
  241. align="center"
  242. :show-tooltip-when-overflow="true"
  243. label="工单名称"
  244. >
  245. </el-table-column>
  246. <el-table-column
  247. prop="ranks"
  248. header-align="center"
  249. align="center"
  250. width="120"
  251. label="级别"
  252. >
  253. <template slot-scope="scope">
  254. <span>{{
  255. rankTypeOption.findIndex((t) => t.value == scope.row.ranks) >
  256. -1
  257. ? rankTypeOption.find((t) => t.value == scope.row.ranks)
  258. .label
  259. : ""
  260. }}</span>
  261. </template>
  262. </el-table-column>
  263. <el-table-column
  264. prop="content"
  265. header-align="center"
  266. align="center"
  267. min-width="100"
  268. label="工单内容"
  269. :show-tooltip-when-overflow="true"
  270. >
  271. </el-table-column>
  272. <el-table-column
  273. prop="receiver"
  274. header-align="center"
  275. align="center"
  276. width="150"
  277. label="任务接收人"
  278. >
  279. <template slot-scope="scope">
  280. <span>{{ scope.row.receiverName }}</span>
  281. </template>
  282. </el-table-column>
  283. <el-table-column
  284. prop="attachListVo"
  285. header-align="center"
  286. align="center"
  287. width="150"
  288. label="任务附件"
  289. >
  290. <template slot-scope="scope">
  291. <el-button
  292. :disabled="
  293. !scope.row.attachListVo || scope.row.attachListVo.length === 0
  294. "
  295. type="text"
  296. size="small"
  297. @click="attachDetails(scope.row.attachListVo)"
  298. >查看</el-button
  299. >
  300. </template>
  301. </el-table-column>
  302. <el-table-column
  303. prop="notes"
  304. header-align="center"
  305. align="center"
  306. :show-tooltip-when-overflow="true"
  307. label="备注"
  308. >
  309. </el-table-column>
  310. </el-table>
  311. </el-row>
  312. </div>
  313. </div>
  314. <span slot="footer" class="dialog-footer">
  315. <el-button @click="onChose">返回</el-button>
  316. </span>
  317. <attach-detail-dialog ref="attachDetail" @onChose="onChose" />
  318. <!-- 文件预览 -->
  319. <preview-component v-if="previewVisible" ref="preview"/>
  320. </div>
  321. </template>
  322. <script>
  323. import EDesc from '../common/e-desc'
  324. import EDescItem from '../common/e-desc-item'
  325. import UploadComponent from '../common/upload-component-v2'
  326. import AttachDetailDialog from '../common/attach-detail-dialog'
  327. import ApproveComponent from '../common/approve-component'
  328. import { dealStepData, dealStepLogs } from '@/api/util'
  329. import { getDetail } from '@/api/quoted'
  330. import { getCoCode } from '@/api/cus'
  331. import { getProductList, getProductAllDetail } from '@/api/product'
  332. import {
  333. productTypeOption,
  334. taskTypeOption,
  335. rankTypeOption
  336. } from '@/utils/enums'
  337. import PreviewComponent from '@/views/modules/common/preview-component'
  338. export default {
  339. name: 'cus-quoted-detail',
  340. components: { PreviewComponent, EDesc, EDescItem, UploadComponent, AttachDetailDialog, ApproveComponent },
  341. props: {},
  342. data () {
  343. return {
  344. isFlow: false,
  345. previewVisible: false,
  346. id: 0,
  347. productTypeOption: productTypeOption,
  348. taskTypeOption: taskTypeOption,
  349. rankTypeOption: rankTypeOption,
  350. coOption: [],
  351. productIdOption: [],
  352. dataForm: {
  353. materialCost: 0,
  354. materialCostSecond: 0,
  355. totalPrice: 0,
  356. totalPriceSecond: 0,
  357. quotedPriceProductList: [], // 报价物料清单
  358. workInfoList: []
  359. },
  360. productList: [],
  361. stepList: [],
  362. logList: []
  363. }
  364. },
  365. watch: {},
  366. computed: {},
  367. created () {},
  368. mounted () {},
  369. activated () {},
  370. methods: {
  371. onChose () {
  372. this.$emit('onChose')
  373. },
  374. async init (id, businessType) {
  375. this.id = id || 0
  376. this.isFlow = !!(businessType && businessType !== '')
  377. this.dataForm = {
  378. workFlowBusinessExt: null
  379. }
  380. this.stepList = []
  381. this.logList = []
  382. await this.getCoCode()
  383. await this.getProductList()
  384. this.getDetail(id, businessType)
  385. },
  386. async getCoCode () {
  387. await getCoCode().then(({ data }) => {
  388. if (data && data.code === '200') {
  389. this.coOption = data.data
  390. }
  391. })
  392. },
  393. async getProductList (productName) {
  394. let params = {
  395. current: 1,
  396. size: 20,
  397. productName: productName
  398. }
  399. await getProductList(params).then(({ data }) => {
  400. if (data && data.code === '200') {
  401. this.productIdOption = []
  402. data.data.records.forEach((item) => {
  403. this.productIdOption.push({
  404. label: item.productName,
  405. value: item.productId
  406. })
  407. })
  408. }
  409. })
  410. },
  411. getDetail (id, businessType) {
  412. getDetail(id).then(({ data }) => {
  413. if (data && data.code === '200') {
  414. this.dataForm = data.data
  415. let find1 = this.coOption.find(
  416. (t) => t.coId === this.dataForm.coId
  417. )
  418. if (find1) {
  419. this.dataForm.coCode = find1.coCode
  420. }
  421. let find2 = this.productTypeOption.find(
  422. (t) => t.value === this.dataForm.type
  423. )
  424. if (find2) {
  425. this.dataForm.typeName = find2.label
  426. }
  427. let find3 = this.productIdOption.find(
  428. (t) => t.value === this.dataForm.productId
  429. )
  430. if (find3) {
  431. this.dataForm.productName = find3.label
  432. }
  433. this.productIdChangeHandle(this.dataForm.productId)
  434. // 流程图展示
  435. dealStepData(
  436. data.data.workFlowBusinessExt.workFlowProcessStepList,
  437. this.stepList
  438. )
  439. dealStepLogs(
  440. data.data.workFlowBusinessExt.processLogList,
  441. this.logList
  442. )
  443. // 初始化审批Form
  444. this.showApproveForm(businessType, id)
  445. }
  446. })
  447. },
  448. attachDetails (attachList) {
  449. this.$refs.attachDetail.init(attachList)
  450. },
  451. productIdChangeHandle (val) {
  452. if (val) {
  453. getProductAllDetail(val).then(({ data }) => {
  454. if (data && data.code === '200') {
  455. this.productList = data.data
  456. if (
  457. this.dataForm.quotedPriceProductList == null ||
  458. this.dataForm.quotedPriceProductList.length === 0
  459. ) {
  460. this.productList.forEach((item) => {
  461. this.dataForm.quotedPriceProductList.push({
  462. productId: item.productId
  463. })
  464. item.id = this.dataForm.quotedPriceProductList.find(
  465. (t) => t.productId === item.productId
  466. ).id
  467. })
  468. } else {
  469. this.dataForm.quotedPriceProductList.forEach((item) => {
  470. let tempItem = this.productList.find(
  471. (t) => t.productId === item.productId
  472. )
  473. console.log(tempItem, '111111111111')
  474. if (tempItem) {
  475. item.productName = tempItem.productName
  476. item.productSpec = tempItem.productSpec
  477. item.mapNumber = tempItem.mapNumber
  478. item.materials = tempItem.materials
  479. item.cnt = tempItem.cnt
  480. item.unit = tempItem.unit
  481. item.size = tempItem.size
  482. item.developedSize = tempItem.developedSize
  483. item.surfaceTreatment = tempItem.surfaceTreatment
  484. item.notes = tempItem.notes
  485. }
  486. })
  487. }
  488. }
  489. })
  490. } else {
  491. this.productList = []
  492. }
  493. },
  494. // 初始化审批Form
  495. showApproveForm (businessType, businessId) {
  496. console.log('businessType = ' + businessType + ', businessId = ' + businessId)
  497. if (this.isFlow) {
  498. this.$nextTick(() => {
  499. this.$refs.approve.init(businessType, businessId)
  500. })
  501. }
  502. },
  503. // 审批完成
  504. approveFinished () {
  505. this.onChose()
  506. this.$emit('approveFinished')
  507. },
  508. // 预览
  509. previewFile (fileName, url) {
  510. this.previewVisible = true
  511. this.$nextTick(() => {
  512. this.$refs.preview.init(fileName, url)
  513. })
  514. }
  515. }
  516. }
  517. </script>
  518. <style scoped>
  519. .desc .desc-title {
  520. margin-bottom: 10px;
  521. color: #333;
  522. font-weight: 700;
  523. font-size: 16px;
  524. line-height: 1.5715;
  525. }
  526. </style>