add.vue 17 KB

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