order-add-or-update.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <!-- 订单新增或修改 -->
  2. <template>
  3. <div>
  4. <!-- <el-dialog
  5. :title="!id ? '新增': display ? '详情' : '修改'"
  6. width="70%"
  7. :close-on-click-modal="false"
  8. :visible.sync="visible"> -->
  9. <div class="my-title">{{ !id ? '新增': display ? '详情' : '修改' }}</div>
  10. <!-- 工作流 -->
  11. <div v-show="display && dataForm.workFlowBusinessExt">
  12. <el-steps :active="dataForm.workFlowBusinessExt&&dataForm.workFlowBusinessExt.workFlowProcessStepList?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
  13. <template v-for="(item, i) in stepList">
  14. <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
  15. </template>
  16. </el-steps>
  17. <el-collapse style="margin-bottom: 20px">
  18. <el-collapse-item>
  19. <template slot="title">
  20. <span style="color: red">审批日志(展开查看更多):</span>
  21. </template>
  22. <template v-for="(item, i) in logList">
  23. <div>{{++i}}:{{item.approverName}} {{item.createTime}} {{item.approvalValue}}</div>
  24. </template>
  25. </el-collapse-item>
  26. </el-collapse>
  27. </div>
  28. <!-- 表单 -->
  29. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
  30. <el-row class="my-row">
  31. <el-col :span="8">
  32. <el-form-item label="订单编码" prop="orderCode">
  33. <el-input v-model="dataForm.orderCode" :disabled="true" placeholder="系统自动生成"></el-input>
  34. </el-form-item>
  35. </el-col>
  36. <el-col :span="8" style="padding-left: 20px">
  37. <el-form-item label="合同号" prop="contractNumber">
  38. <el-input v-model="dataForm.contractNumber" :disabled="display || addType === 2" placeholder="合同号"></el-input>
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="8" style="padding-left: 20px">
  42. <el-form-item label="客户名称" prop="customerId">
  43. <el-input v-if="display || addType === 2" v-model="dataForm.customerName" disabled></el-input>
  44. <cus-component v-else v-model="dataForm.customerId" :disabled="display || addType === 2" :cus-id="dataForm.customerId"></cus-component>
  45. </el-form-item>
  46. </el-col>
  47. </el-row>
  48. <el-row class="my-row">
  49. <el-col :span="8">
  50. <el-form-item label="业务员" prop="salesmanId">
  51. <el-input v-if="display || addType === 2" v-model="dataForm.salesmanName" disabled></el-input>
  52. <user-component v-else v-model="dataForm.salesmanId" :user-id="dataForm.salesmanId" @userSelected="salesmanChanged"></user-component>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="8" style="padding-left: 20px">
  56. <el-form-item label="合同交期" prop="deliveryDate">
  57. <el-input v-if="display || addType === 2" v-model="dataForm.deliveryDate" disabled></el-input>
  58. <el-date-picker v-else
  59. v-model="dataForm.deliveryDate"
  60. value-format="yyyy-MM-dd"
  61. type="date">
  62. </el-date-picker>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="8">
  66. <el-form-item label="批次号" prop="batchNumber">
  67. <el-input v-model="dataForm.batchNumber" placeholder="批次号" :disabled="display || addType === 2"></el-input>
  68. </el-form-item>
  69. </el-col>
  70. </el-row>
  71. <!-- <el-row class="my-row">-->
  72. <!-- <upload-component :display="display" :title="'合同扫描件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>-->
  73. <!-- </el-row>-->
  74. <el-row class="my-row">
  75. <el-form-item label="备注说明" prop="notes">
  76. <el-input type="textarea" v-model="dataForm.notes" :disabled="display || addType === 2" placeholder="备注说明" ></el-input>
  77. </el-form-item>
  78. </el-row>
  79. <el-row class="my-row">
  80. <div class="title"><span style="color: red">*</span> 订单产品明细</div>
  81. <el-table
  82. :data="productDetails"
  83. border
  84. style="width: 100%;">
  85. <el-table-column
  86. label="序号"
  87. type="index"
  88. width="50"
  89. align="center">
  90. </el-table-column>
  91. <el-table-column
  92. prop="productName"
  93. header-align="center"
  94. align="center"
  95. min-width="120"
  96. :show-tooltip-when-overflow="true"
  97. label="产品名称">
  98. </el-table-column>
  99. <el-table-column
  100. prop="productSpecifications"
  101. header-align="center"
  102. align="center"
  103. min-width="120"
  104. :show-tooltip-when-overflow="true"
  105. label="规格">
  106. </el-table-column>
  107. <el-table-column
  108. prop="cnt"
  109. header-align="center"
  110. align="center"
  111. min-width="100"
  112. label="数量">
  113. </el-table-column>
  114. <el-table-column
  115. prop="productNumber"
  116. header-align="center"
  117. align="center"
  118. min-width="160"
  119. :show-tooltip-when-overflow="true"
  120. label="订单编号">
  121. </el-table-column>
  122. <el-table-column
  123. prop="price"
  124. header-align="center"
  125. align="center"
  126. min-width="100"
  127. label="含税单价">
  128. </el-table-column>
  129. <el-table-column
  130. prop="amount"
  131. header-align="center"
  132. align="center"
  133. min-width="100"
  134. label="含税总价">
  135. <template slot-scope="scope">
  136. <span>{{ (scope.row.cnt*scope.row.price).toFixed(1) }}</span>
  137. </template>
  138. </el-table-column>
  139. <el-table-column
  140. prop="rate"
  141. header-align="center"
  142. align="center"
  143. min-width="100"
  144. label="税率">
  145. <template slot-scope="scope">
  146. {{scope.row.rate}}%
  147. </template>
  148. </el-table-column>
  149. <el-table-column
  150. prop="notes"
  151. header-align="center"
  152. align="center"
  153. width="120"
  154. :show-tooltip-when-overflow="true"
  155. label="备注">
  156. </el-table-column>
  157. <el-table-column
  158. prop="relatedProduct"
  159. header-align="center"
  160. align="center"
  161. width="120"
  162. :show-tooltip-when-overflow="true"
  163. label="产品关联">
  164. </el-table-column>
  165. <el-table-column
  166. fixed="right"
  167. header-align="center"
  168. align="center"
  169. width="100"
  170. label="操作">
  171. <template slot-scope="scope">
  172. <el-button type="text" size="small" @click="updateProductHandle(scope.row)">编辑</el-button>
  173. <el-button style="color: red" type="text" size="small" @click="deleteProductHandle(scope.row.recordId)">删除</el-button>
  174. </template>
  175. </el-table-column>
  176. </el-table>
  177. <el-row style="text-align: center; margin-top: 10px;">
  178. <el-button v-show="!display" type="primary" icon="el-icon-plus" @click="addProduct"></el-button>
  179. </el-row>
  180. </el-row>
  181. </el-form>
  182. <span slot="footer" class="dialog-footer">
  183. <el-button @click="onChose">取消</el-button>
  184. <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
  185. </span>
  186. <!-- </el-dialog> -->
  187. <add-or-update v-if="productListVisible" ref="productList" @addItem="addItem" />
  188. </div>
  189. </template>
  190. <script>
  191. // import templateChose from '../product/template-chose'
  192. import { getOrderDetail } from '@/api/sale'
  193. import UserComponent from '../common/user-component'
  194. // import {toNumber} from '@/utils/common'
  195. import UploadComponent from '../common/upload-component'
  196. import { dealStepData, dealStepLogs } from '@/api/util'
  197. import CusComponent from '../common/cus-component'
  198. import AddOrUpdate from '../product/template-add-or-update'
  199. export default {
  200. name: 'order-add-or-update',
  201. components: {CusComponent, UploadComponent, UserComponent, AddOrUpdate},
  202. computed: {
  203. orgId: {
  204. get () { return this.$store.state.user.orgId }
  205. }
  206. },
  207. data () {
  208. return {
  209. productListVisible: false,
  210. visible: false,
  211. display: false,
  212. addType: 0,
  213. fileList: [],
  214. dataList: [],
  215. id: 0,
  216. productDetails: [],
  217. dataForm: {},
  218. dataRule: {
  219. // contractNumber: [{ required: true, message: '合同号不能为空', trigger: 'blur' }],
  220. customerId: [{ required: true, message: '客户名称不能为空', trigger: 'change' }],
  221. salesmanId: [{ required: true, message: '业务员不能为空', trigger: 'change' }],
  222. deliveryDate: [{ required: true, message: '合同交期不能为空', trigger: 'change' }]
  223. },
  224. stepList: [],
  225. logList: []
  226. }
  227. },
  228. methods: {
  229. onChose () {
  230. this.$emit('onChose')
  231. },
  232. // 初始化:addType 新增类型: 0新增,1修改 2技术确认 (目前只有2才会赋值)
  233. async init (id, display, addType) {
  234. if (addType) {
  235. this.addType = addType
  236. }
  237. this.fileList = []
  238. this.stepList = []
  239. this.logList = []
  240. this.dataForm = {
  241. rateVal: 0
  242. }
  243. this.productDetails = []
  244. this.visible = true
  245. this.id = id || 0
  246. this.display = display
  247. if (!id) return
  248. await getOrderDetail(this.id).then(({data}) => {
  249. if (data && data.code === '200') {
  250. this.dataForm = data.data
  251. // 流程图展示
  252. dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
  253. dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
  254. // 附件
  255. if (data.data.attachList) {
  256. data.data.attachList.forEach((item) => {
  257. this.fileList.push({
  258. name: item.fileName,
  259. url: item.url,
  260. id: item.url
  261. })
  262. })
  263. }
  264. // 订单产品明细
  265. if (data.data.saleROrderProductList) {
  266. data.data.saleROrderProductList.forEach((item) => {
  267. this.addItem(item)
  268. })
  269. }
  270. }
  271. })
  272. },
  273. uploadSuccess (fileList) {
  274. this.fileList = fileList
  275. },
  276. addItem (item) {
  277. if (!item.recordId) {
  278. item.recordId = Math.round(Math.random() * 1000000)
  279. }
  280. if (this.productDetails.findIndex(item1 => item1.recordId === item.recordId) === -1) {
  281. this.productDetails.push({
  282. ...item
  283. })
  284. }
  285. },
  286. validateField (type) {
  287. this.$refs.dataForm.validateField(type)
  288. },
  289. // 表单提交
  290. dataFormSubmit () {
  291. this.$refs['dataForm'].validate((valid) => {
  292. if (valid) {
  293. // 合同扫描件
  294. let fList = this.fileList
  295. if (fList.length > 0) {
  296. this.dataForm.attachList = []
  297. for (let i = 0; i < fList.length; i++) {
  298. this.dataForm.attachList.push({
  299. fileName: fList[i].name,
  300. url: fList[i].url
  301. })
  302. }
  303. }
  304. // 订单产品明细
  305. let pList = this.productDetails
  306. if (pList.length > 0) {
  307. this.dataForm.saleROrderProductParamsList = pList
  308. // // rate百分比转换
  309. // this.dataForm.saleROrderProductParamsList.forEach((item) => {
  310. // item.rate = toNumber(item.rateVal)
  311. // })
  312. } else {
  313. this.$message.error('请添加订单产品明细')
  314. return
  315. }
  316. this.$http({
  317. url: !this.id ? this.$http.adornUrl(`/biz-service/order/save`) : this.$http.adornUrl(`/biz-service/order/update`),
  318. method: 'post',
  319. data: this.$http.adornData({...this.dataForm, orgId: this.orgId})
  320. }).then(({data}) => {
  321. if (data && data.code === '200') {
  322. this.$message({
  323. message: '操作成功',
  324. type: 'success',
  325. duration: 1500,
  326. onClose: () => {
  327. this.onChose()
  328. this.$emit('refreshDataList')
  329. }
  330. })
  331. } else {
  332. this.$message.error(data.msg)
  333. }
  334. })
  335. }
  336. })
  337. },
  338. // 业务员选择变化
  339. salesmanChanged (val) {
  340. this.dataForm.salesmanId = val
  341. },
  342. // 添加订单产品明细
  343. addProduct () {
  344. this.productListVisible = true
  345. this.$nextTick(() => {
  346. this.$refs.productList.init(2)
  347. })
  348. },
  349. // 编辑产品项
  350. updateProductHandle (row) {
  351. this.productListVisible = true
  352. this.$nextTick(() => {
  353. this.$refs.productList.init(2, row, this.addType)
  354. })
  355. },
  356. // 删除产品项
  357. deleteProductHandle (recordId) {
  358. this.productDetails.splice(this.productDetails.findIndex((item) => item.recordId === recordId))
  359. }
  360. }
  361. }
  362. </script>
  363. <style scoped>
  364. </style>