add.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  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. @change="ltcChange"
  39. v-model="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 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="link" @click="openSelModal">选择销退单</a-button>
  131. <div>
  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="showXtModal=false"></selectXtModal>
  185. <!-- 选择审核人员 -->
  186. <chooseDepartUserModal :openModal="openDepartUserModal" @close="openDepartUserModal=false" @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: 'totalBackStockQty', 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. ltcChange (v, row) {
  265. if (row) {
  266. this.$refs.logisticsPoint.getList(row.logisticsPointList)
  267. this.form.logisticsPoint = undefined
  268. }
  269. },
  270. // 关联销售退货单
  271. getReturnOrderList () {
  272. pickUpDetailQueryList({ pickUpSn: this.$route.params.sn }).then(res => {
  273. this.chooseData = []
  274. res.data.map(item => {
  275. this.chooseData.push(item.salesReturnBillEntity)
  276. })
  277. })
  278. },
  279. // 详情
  280. getDetail () {
  281. this.spinning = true
  282. this.disabled = true
  283. pickUpDetail({ pickUpSn: this.$route.params.sn }).then(res => {
  284. if (res.status == 200) {
  285. const data = res.data
  286. this.form = Object.assign(this.form, data)
  287. // 获取附件列表
  288. this.form.attachmentList = ''
  289. this.attachList = res.data.attachmentList
  290. this.$refs.attachList.setFileList(this.attachList)
  291. // 发货方
  292. if (this.form.senderSn) {
  293. this.$refs.dealerSubareaScopeList.getDetail(this.form.senderSn)
  294. }
  295. } else {
  296. this.$refs.ruleForm.resetFields()
  297. }
  298. this.spinning = false
  299. this.disabled = false
  300. })
  301. },
  302. // 删除关联单
  303. handleDel (row) {
  304. const i = this.chooseData.findIndex(item => row.salesReturnBillNo == item.salesReturnBillNo)
  305. this.chooseData.splice(i, 1)
  306. },
  307. // 获取关联单sn列表
  308. getRtSnList () {
  309. const ret = []
  310. this.chooseData.map(item => {
  311. ret.push({ salesReturnSn: item.salesReturnBillSn, salesReturnBillNo: item.salesReturnBillNo })
  312. })
  313. return ret
  314. },
  315. // 提交
  316. handleSave (type) {
  317. const _this = this
  318. this.$refs.ruleForm.validate(valid => {
  319. if (valid) {
  320. const form = JSON.parse(JSON.stringify(_this.form))
  321. form.attachmentList = _this.attachList
  322. form.pickUpSalesReturnList = this.getRtSnList()
  323. _this.spinning = true
  324. pickUpSave(form).then(res => {
  325. if (res.status == 200) {
  326. // 保存
  327. if (type == 'save') {
  328. _this.$message.success(res.message)
  329. _this.handleBack()
  330. _this.spinning = false
  331. }
  332. // 提交
  333. if (type == 'submit') {
  334. _this.openDepartUserModal = true
  335. _this.pickUpSn = res.data.pickUpSn
  336. }
  337. } else {
  338. _this.spinning = false
  339. }
  340. })
  341. } else {
  342. return false
  343. }
  344. })
  345. },
  346. // 提交信息
  347. handleSubmit (data) {
  348. this.spinning = true
  349. pickUpSubmit({ pickUpSn: this.$route.params.sn || this.pickUpSn, ...data }).then(res => {
  350. if (res.status == '200') {
  351. this.$message.success(res.message)
  352. this.handleBack()
  353. }
  354. this.spinning = false
  355. })
  356. },
  357. // 返回
  358. handleBack () {
  359. this.$router.push({ name: 'billOfLadingList' })
  360. },
  361. // 附件上传
  362. changeAttach (file) {
  363. this.attachList = JSON.parse(file)
  364. this.attachList.map(item => {
  365. item.fileType = item.extName
  366. })
  367. },
  368. pageInit () {
  369. this.attachList = []
  370. this.form.attachmentList = ''
  371. this.$refs.attachList.setFileList('')
  372. this.$refs.ruleForm.resetFields()
  373. if (this.$route.params.sn) { // 编辑页
  374. this.getDetail()
  375. this.getReturnOrderList()
  376. }
  377. }
  378. },
  379. mounted () {
  380. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  381. this.pageInit()
  382. }
  383. },
  384. activated () {
  385. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  386. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  387. this.pageInit()
  388. }
  389. },
  390. beforeRouteEnter (to, from, next) {
  391. next(vm => {})
  392. }
  393. }
  394. </script>
  395. <style lang="less">
  396. .billOfLadingEdit-wrap{
  397. position: relative;
  398. height: 100%;
  399. padding-bottom: 51px;
  400. box-sizing: border-box;
  401. >.ant-spin-nested-loading{
  402. overflow-y: scroll;
  403. height: 100%;
  404. }
  405. .billOfLadingEdit-cont{
  406. margin-bottom: 10px;
  407. }
  408. .affix{
  409. .ant-affix{
  410. z-index: 101;
  411. }
  412. }
  413. }
  414. </style>