add.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. <template>
  2. <div class="billOfLadingEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="billOfLadingEdit-cont" >
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="billOfLadingEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. </a-page-header>
  10. <a-form-model
  11. id="billOfLadingEdit-form"
  12. ref="ruleForm"
  13. :model="form"
  14. :rules="rules"
  15. :label-col="formItemLayout.labelCol"
  16. :wrapper-col="formItemLayout.wrapperCol">
  17. <a-card :bordered="false" class="billOfLadingEdit-cont">
  18. <a-row>
  19. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  20. <a-form-model-item label="申请人" prop="applyPersonSn">
  21. <employee style="width: 100%;" id="billOfLading-Employee" @change="employeeChange" v-model="form.applyPersonSn"></employee>
  22. </a-form-model-item>
  23. </a-col>
  24. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  25. <a-form-model-item label="主题" prop="theme">
  26. <a-input
  27. id="billOfLadingEdit-theme"
  28. :maxLength="30"
  29. v-model.trim="form.theme"
  30. placeholder="请输入主题(最多30个字符)"
  31. allowClear />
  32. </a-form-model-item>
  33. </a-col>
  34. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  35. <a-form-model-item label="物流公司">
  36. <logisticsCompany
  37. id="billOfLadingEdit-logisticsCompany"
  38. ref="logisticsCompany"
  39. @change="changeCompany"
  40. v-model.trim="form.logisticsCompany"
  41. />
  42. </a-form-model-item>
  43. </a-col>
  44. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  45. <a-form-model-item label="物流点">
  46. <logisticsPoint
  47. ref="logisticsPoint"
  48. id="billOfLadingEdit-logisticsPoint"
  49. v-model.trim="form.logisticsPoint"
  50. allowClear />
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  54. <a-form-model-item label="发货方">
  55. <dealerSubareaScopeList placeholder="请输入经销商名称搜索" ref="dealerSubareaScopeList" id="billOfLadingEdit-senderName" @change="custChange" />
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  59. <a-form-model-item label="收货人">
  60. <SelectInput
  61. v-model="form.receiverName"
  62. id="billOfLadingEdit-receiverName"
  63. code="CONSIGNEE"
  64. placeholder="请选择或输入收货人(最多30字符)"
  65. @loaded="v=>form.receiverName?'':form.receiverName=v[0]"
  66. allowClear
  67. ></SelectInput>
  68. </a-form-model-item>
  69. </a-col>
  70. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  71. <a-form-model-item label="电话">
  72. <a-input
  73. id="billOfLadingEdit-receiverPhone"
  74. :maxLength="30"
  75. v-model.trim="form.receiverPhone"
  76. placeholder="请输入电话(最多30个字符)"
  77. allowClear />
  78. </a-form-model-item>
  79. </a-col>
  80. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  81. <a-form-model-item label="件数">
  82. <a-input-number
  83. id="billOfLadingEdit-goodsNum"
  84. style="width:100%"
  85. v-model="form.goodsNum"
  86. :precision="0"
  87. :min="1"
  88. :max="99999999"
  89. placeholder="请输入件数"
  90. />
  91. </a-form-model-item>
  92. </a-col>
  93. <a-col :span="24">
  94. <a-form-model-item label="运费" :label-col="{span:2}" :wrapper-col="{span:20}">
  95. <a-input
  96. id="billOfLadingEdit-freight"
  97. :maxLength="100"
  98. v-model.trim="form.freight"
  99. placeholder="请输入运费(最多100个字符)"
  100. allowClear />
  101. </a-form-model-item>
  102. </a-col>
  103. </a-row>
  104. <a-row>
  105. <a-col :spna="24">
  106. <a-form-model-item style="margin-bottom:0" label="备注" :label-col="{span:2}" :wrapper-col="{span:20}">
  107. <a-textarea
  108. v-model.trim="form.remarks"
  109. id="billOfLadingEdit-remarks"
  110. :maxLength="500"
  111. allowClear
  112. placeholder="请输入备注(最多500个字符)" />
  113. </a-form-model-item>
  114. </a-col>
  115. <a-col :spna="24">
  116. <a-form-model-item label="退货仓库" :label-col="{span:2}" :wrapper-col="{span:20}" prop="warehouseSn">
  117. <chooseWarehouse ref="warehouse" @load="loadWarehouseVal" :isDefault="!$route.params.sn" v-model="form.warehouseSn" @change="handleWarehouse"></chooseWarehouse>
  118. </a-form-model-item>
  119. </a-col>
  120. <a-col :spna="24">
  121. <a-form-model-item label="附件" help="说明:支持图片、word、excel、PDF等格式,最多10个附件。" :label-col="{span:2}" :wrapper-col="{span:20}">
  122. <Upload
  123. style="height: 100%;"
  124. id="billOfLadingEdit-attachList"
  125. v-model="form.attachmentList"
  126. ref="attachList"
  127. :fileSize="10"
  128. :maxNums="10"
  129. fileType="*"
  130. uploadType="attach"
  131. :action="attachAction"
  132. @change="changeAttach"
  133. upText="上传附件"></Upload>
  134. </a-form-model-item>
  135. </a-col>
  136. <a-col :spna="24" v-show="form.warehouseSn">
  137. <a-form-model-item label="关联销退单" :label-col="{span:2}" :wrapper-col="{span:20}">
  138. <a-button type="primary" class="button-primary" @click="openSelModal">选择销退单</a-button>
  139. <div style="margin-top:10px;">
  140. <a-table
  141. ref="salesReturnOrderTable"
  142. :columns="columns"
  143. :scroll="{ y: 400 }"
  144. :pagination="false"
  145. :data-source="chooseData"
  146. bordered>
  147. <!-- 编号 -->
  148. <template slot="no" slot-scope="text, record,index">
  149. <span>{{ index+1 }}</span>
  150. </template>
  151. <!-- 单号 -->
  152. <template slot="salesReturnNo" slot-scope="text, record">
  153. <span>{{ record.salesReturnBillNo }}</span>
  154. </template>
  155. <!-- 操作 -->
  156. <template slot="action" slot-scope="text, record">
  157. <a-button
  158. size="small"
  159. type="link"
  160. class="button-error"
  161. @click="handleDel(record)"
  162. >
  163. 删除
  164. </a-button>
  165. </template>
  166. </a-table>
  167. </div>
  168. </a-form-model-item>
  169. </a-col>
  170. </a-row>
  171. </a-card>
  172. </a-form-model>
  173. </a-spin>
  174. <div class="affix-cont">
  175. <a-button
  176. type="primary"
  177. size="large"
  178. class="button-success"
  179. :disabled="spinning"
  180. id="billOfLadingEdit-save-btn"
  181. @click="handleSave('save')"
  182. style="padding: 5px 50px;">保存</a-button>
  183. <a-button
  184. type="primary"
  185. class="button-primary"
  186. size="large"
  187. :disabled="spinning"
  188. id="billOfLadingEdit-submit-btn"
  189. @click="handleSave('submit')"
  190. style="padding: 5px 50px;">提交</a-button>
  191. </div>
  192. <!-- 关联销退单 -->
  193. <selectXtModal
  194. ref="selXtModal"
  195. modalTit="选择销退单"
  196. :chooseData="chooseData"
  197. :openModal="showXtModal"
  198. :warehouseSn="form.warehouseSn"
  199. @cancel="closeModal"></selectXtModal>
  200. <!-- 选择审核人员 -->
  201. <chooseDepartUserModal type="billOfLading" :showDefUser="true" :openModal="openDepartUserModal" @close="closeModal" @submit="handleSubmit"></chooseDepartUserModal>
  202. </div>
  203. </template>
  204. <script>
  205. import { commonMixin } from '@/utils/mixin'
  206. import { STable, VSelect, SelectInput, Upload } from '@/components'
  207. import { pickUpSave, pickUpSubmit, pickUpDetail, pickUpDetailQueryList } from '@/api/pickUp'
  208. import selectXtModal from './selectXtModal.vue'
  209. import employee from '../../expenseManagement/expenseReimbursement/employee.js'
  210. import logisticsCompany from './logisticsCompany.js'
  211. import logisticsPoint from './logisticsPoint'
  212. import chooseDepartUserModal from '../../expenseManagement/expenseReimbursement/chooseDepartUserModal.vue'
  213. import chooseWarehouse from '@/views/common/chooseWarehouse'
  214. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  215. export default {
  216. name: 'ProductInfoEdit',
  217. mixins: [commonMixin],
  218. components: { VSelect, SelectInput, Upload, STable, employee, dealerSubareaScopeList, chooseDepartUserModal, selectXtModal, logisticsCompany, logisticsPoint, chooseWarehouse },
  219. data () {
  220. return {
  221. spinning: false,
  222. showXtModal: false,
  223. openDepartUserModal: false,
  224. pickUpSn: '',
  225. formItemLayout: {
  226. labelCol: { span: 4 },
  227. wrapperCol: { span: 16 }
  228. },
  229. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  230. form: {
  231. applyPersonSn: undefined, // 申请人
  232. applyPersonName: undefined,
  233. theme: '关于提货事宜', // 主题
  234. logisticsCompany: undefined, // 物流公司
  235. logisticsPoint: undefined, // 物流点
  236. senderName: '', // 发货方
  237. senderSn: '',
  238. receiverName: '', // 收货人
  239. receiverPhone: '', // 电话
  240. goodsNum: '', // 件数
  241. freight: '', // 运费
  242. remarks: '',
  243. attachmentList: '', // 附件
  244. warehouseSn: undefined// 退货仓库
  245. },
  246. salerReturnWsn: undefined,
  247. attachList: [],
  248. rules: {
  249. applyPersonSn: [
  250. { required: true, message: '请选择申请人', trigger: 'blur' }
  251. ],
  252. theme: [
  253. { required: true, message: '请输入主题', trigger: 'blur' }
  254. ],
  255. warehouseSn: [
  256. { required: true, message: '请选择退货仓库', trigger: 'change' }
  257. ]
  258. },
  259. chooseData: [],
  260. columns: [
  261. { title: '序号', scopedSlots: { customRender: 'no' }, width: '8%', align: 'center' },
  262. { title: '总部销退单号', scopedSlots: { customRender: 'salesReturnNo' }, width: '15%', align: 'center' },
  263. { title: '客户名称', dataIndex: 'buyerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  264. { title: '申请退货数量', dataIndex: 'totalInitialQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  265. { title: '审核时间', dataIndex: 'auditTime', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  266. { title: '业务状态', dataIndex: 'billStatusDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  267. { title: '操作', scopedSlots: { customRender: 'action' }, width: '12%', align: 'center' }
  268. ]
  269. }
  270. },
  271. methods: {
  272. loadWarehouseVal (con) {
  273. this.$set(this.form, 'warehouseSn', con || undefined)
  274. },
  275. // 选择退货仓库
  276. handleWarehouse (val) {
  277. this.form.warehouseSn = val
  278. this.chooseData = []
  279. if (this.salerReturnWsn && this.salerReturnWsn == val) {
  280. const cd = this.$store.state.app.tempBillOfData
  281. if (cd && this.$route.query.path == 'salerReturn') {
  282. this.chooseData.push(cd)
  283. } else {
  284. this.getReturnOrderList(this.salerReturnWsn)
  285. }
  286. }
  287. },
  288. custChange (val) {
  289. this.form.senderSn = val.key
  290. this.form.senderName = val.name
  291. },
  292. // 申请人员
  293. employeeChange (v, r) {
  294. this.$nextTick(() => {
  295. this.$refs.ruleForm.validateField(['applyPersonSn'])
  296. })
  297. },
  298. openSelModal () {
  299. this.showXtModal = true
  300. },
  301. closeModal () {
  302. this.openDepartUserModal = false
  303. this.showXtModal = false
  304. this.spinning = false
  305. },
  306. // 关联销售退货单
  307. getReturnOrderList (infoSn) {
  308. pickUpDetailQueryList({ pickUpSn: this.$route.params.sn, warehouseSn: infoSn }).then(res => {
  309. this.chooseData = []
  310. res.data.map(item => {
  311. this.chooseData.push(item.salesReturnBillEntity)
  312. })
  313. })
  314. },
  315. // 物流公司变动
  316. changeCompany (val) {
  317. const point = this.$refs.logisticsCompany.getPoint(val)
  318. this.$refs.logisticsPoint.getList(point)
  319. this.form.logisticsPoint = point[0]
  320. },
  321. // 详情
  322. async getDetail () {
  323. this.spinning = true
  324. this.disabled = true
  325. pickUpDetail({ pickUpSn: this.$route.params.sn }).then(res => {
  326. if (res.status == 200) {
  327. const data = res.data
  328. if (!data.receiverName) {
  329. delete data.receiverName
  330. }
  331. this.form = Object.assign(this.form, data)
  332. // 获取附件列表
  333. this.form.attachmentList = ''
  334. this.attachList = res.data.attachmentList
  335. this.$refs.attachList.setFileList(this.attachList)
  336. // 发货方
  337. if (this.form.senderSn) {
  338. this.$refs.dealerSubareaScopeList.getDetail(this.form.senderSn)
  339. }
  340. // 物流点
  341. if (this.form.logisticsPoint) {
  342. const point = this.$refs.logisticsCompany.getPoint(this.form.logisticsCompany)
  343. this.$refs.logisticsPoint.getList(point)
  344. }
  345. } else {
  346. this.$refs.ruleForm.resetFields()
  347. }
  348. this.spinning = false
  349. this.disabled = false
  350. })
  351. },
  352. // 删除关联单
  353. handleDel (row) {
  354. const i = this.chooseData.findIndex(item => row.salesReturnBillNo == item.salesReturnBillNo)
  355. this.chooseData.splice(i, 1)
  356. },
  357. // 获取关联单sn列表
  358. getRtSnList () {
  359. const ret = []
  360. this.chooseData.map(item => {
  361. ret.push({ salesReturnSn: item.salesReturnBillSn, salesReturnNo: item.salesReturnBillNo })
  362. })
  363. return ret
  364. },
  365. // 提交
  366. handleSave (type) {
  367. const _this = this
  368. this.$refs.ruleForm.validate(valid => {
  369. if (valid) {
  370. const form = JSON.parse(JSON.stringify(_this.form))
  371. form.attachmentList = _this.attachList
  372. form.pickUpSalesReturnList = this.getRtSnList()
  373. _this.spinning = true
  374. if (this.$route.params.sn) {
  375. delete form.warehouseName
  376. }
  377. pickUpSave(form).then(res => {
  378. if (res.status == 200) {
  379. // 保存
  380. if (type == 'save') {
  381. _this.$message.success(res.message)
  382. _this.$router.push({ name: 'billOfLadingList' })
  383. _this.spinning = false
  384. }
  385. // 提交
  386. if (type == 'submit') {
  387. pickUpDetail({ pickUpSn: res.data.pickUpSn })
  388. _this.openDepartUserModal = true
  389. _this.pickUpSn = res.data.pickUpSn
  390. }
  391. } else {
  392. _this.spinning = false
  393. }
  394. })
  395. } else {
  396. return false
  397. }
  398. })
  399. },
  400. // 提交信息
  401. handleSubmit (data) {
  402. this.spinning = true
  403. pickUpSubmit({ pickUpSn: this.$route.params.sn || this.pickUpSn, ...data }).then(res => {
  404. if (res.status == '200') {
  405. this.$message.success(res.message)
  406. this.$router.push({ name: 'billOfLadingList' })
  407. }
  408. this.spinning = false
  409. })
  410. },
  411. // 返回
  412. handleBack () {
  413. if (this.$route.query.path == 'salerReturn') {
  414. this.$router.push({ name: 'salesReturnList' })
  415. } else {
  416. this.$router.push({ name: 'billOfLadingList' })
  417. }
  418. },
  419. // 附件上传
  420. changeAttach (file) {
  421. this.attachList = JSON.parse(file)
  422. this.attachList.map(item => {
  423. item.fileType = item.extName
  424. })
  425. },
  426. resetForm () {
  427. this.form = {
  428. applyPersonSn: undefined, // 申请人
  429. applyPersonName: undefined,
  430. theme: '关于提货事宜', // 主题
  431. logisticsCompany: undefined, // 物流公司
  432. logisticsPoint: undefined, // 物流点
  433. senderName: '', // 发货方
  434. senderSn: '',
  435. receiverName: '', // 收货人
  436. receiverPhone: '', // 电话
  437. goodsNum: '', // 件数
  438. freight: '', // 运费
  439. remarks: '',
  440. attachmentList: '' // 附件
  441. }
  442. this.attachList = []
  443. this.$refs.attachList.setFileList('')
  444. this.$refs.ruleForm.resetFields()
  445. },
  446. pageInit () {
  447. this.resetForm()
  448. // 编辑页
  449. if (this.$route.params.sn) {
  450. this.form.theme = ''
  451. this.getDetail()
  452. this.salerReturnWsn = this.$route.params.wSn
  453. this.getReturnOrderList(this.$route.params.wSn)
  454. } else {
  455. this.chooseData = []
  456. // 从销售退货列表过来的数据
  457. const cd = this.$store.state.app.tempBillOfData
  458. if (cd && this.$route.query.path == 'salerReturn') {
  459. this.form.warehouseSn = cd.warehouseSn
  460. this.salerReturnWsn = cd.warehouseSn
  461. this.chooseData.push(cd)
  462. }
  463. }
  464. // 电话
  465. this.form.receiverPhone = this.$store.state.user.info && this.$store.state.user.info.mobile
  466. }
  467. },
  468. watch: {
  469. '$store.state.app.tempBillOfData' (newValue, oldValue) {
  470. this.pageInit()
  471. }
  472. },
  473. mounted () {
  474. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  475. this.pageInit()
  476. }
  477. },
  478. activated () {
  479. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  480. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  481. this.pageInit()
  482. }
  483. },
  484. beforeRouteEnter (to, from, next) {
  485. next(vm => {})
  486. }
  487. }
  488. </script>
  489. <style lang="less">
  490. .billOfLadingEdit-wrap{
  491. position: relative;
  492. height: 100%;
  493. padding-bottom: 52px;
  494. box-sizing: border-box;
  495. >.ant-spin-nested-loading{
  496. overflow-y: scroll;
  497. height: 100%;
  498. }
  499. .billOfLadingEdit-cont{
  500. margin-bottom: 6px;
  501. }
  502. .affix{
  503. .ant-affix{
  504. z-index: 101;
  505. }
  506. }
  507. }
  508. </style>