add.vue 18 KB

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