baseModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. :title="title"
  5. centered
  6. :maskClosable="false"
  7. :width="800"
  8. :footer="null"
  9. @cancel="cancel"
  10. >
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="chooseCustom-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="申请人" prop="applyPersonSn">
  20. <employee style="width: 100%;" @change="employeeChange" ref="applyPerson" v-model="form.applyPersonSn"></employee>
  21. </a-form-model-item>
  22. <a-form-model-item label="收款事由" prop="bookReason">
  23. <bookReason ref="bookReason" v-model="bookReasonCode" @change="updateReason"></bookReason>
  24. </a-form-model-item>
  25. <a-form-model-item label="付款方类型" prop="payerType">
  26. <v-select
  27. v-model="form.payerType"
  28. showType="radio"
  29. code="PAYER_TYPE"
  30. :disabled="!!bookSn"
  31. @change="payerTypeChange"
  32. placeholder="请选择付款方类型"
  33. ></v-select>
  34. </a-form-model-item>
  35. <a-form-model-item v-if="form.payerType=='DEALER'" label="付款方" prop="dealerSn">
  36. <dealerSubareaScopeList :disabled="!!bookSn" ref="settleClientName" @change="custChange" />
  37. </a-form-model-item>
  38. <a-form-model-item v-if="form.payerType=='DEPT'" label="付款方" prop="payerName">
  39. <a-input :maxLength="30" :disabled="!!bookSn" placeholder="请输入付款方名称" v-model="form.payerName"></a-input>
  40. </a-form-model-item>
  41. <a-form-model-item label="备注">
  42. <a-textarea :rows="4" :maxLength="500" placeholder="请输入备注(最多500个字符)" v-model="form.remarks"></a-textarea>
  43. </a-form-model-item>
  44. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)">
  45. <Upload
  46. style="height: 100%;"
  47. v-model="form.attachmentList"
  48. ref="attachList"
  49. :fileSize="10"
  50. :maxNums="10"
  51. fileType="*"
  52. uploadType="attach"
  53. :action="attachAction"
  54. @change="changeAttach"
  55. upText="上传附件"></Upload>
  56. </a-form-model-item>
  57. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
  58. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  59. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  60. </a-form-model-item>
  61. </a-form-model>
  62. </a-spin>
  63. </a-modal>
  64. </template>
  65. <script>
  66. import { commonMixin } from '@/utils/mixin'
  67. import { VSelect, Upload } from '@/components'
  68. import employee from '../../expenseManagement/expenseReimbursement/employee.js'
  69. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  70. import bookReason from '@/views/common/bookReason'
  71. import { financeBookSave, financeBookFindBySn, queryLastFinishDingUser } from '@/api/financeBook.js'
  72. export default {
  73. name: 'FcBaseModal',
  74. mixins: [commonMixin],
  75. components: { VSelect, Upload, employee, dealerSubareaScopeList, bookReason },
  76. props: {
  77. show: [Boolean],
  78. bookSn: {
  79. type: String,
  80. default: ''
  81. }
  82. },
  83. data () {
  84. return {
  85. opened: this.show,
  86. spinning: false,
  87. disabled: false,
  88. title: '新增财务收款单',
  89. confirmLoading: false,
  90. formItemLayout: {
  91. labelCol: { span: 4 },
  92. wrapperCol: { span: 18 }
  93. },
  94. attachList: [],
  95. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  96. form: {
  97. applyPersonSn: undefined,
  98. bookReason: undefined,
  99. payerType: 'DEALER',
  100. dealerSn: undefined,
  101. payerName: undefined,
  102. remarks: '',
  103. attachmentList: ''
  104. },
  105. bookReasonCode: undefined,
  106. rules: {
  107. applyPersonSn: [ { required: true, message: '请选择申请人', trigger: ['change', 'blur'] } ],
  108. bookReason: [ { required: true, message: '请选择收款事由', trigger: ['change', 'blur'] } ],
  109. payerType: [ { required: true, message: '请选择付款方类型', trigger: ['change', 'blur'] } ],
  110. dealerSn: [ { required: true, message: '请选择付款方', trigger: ['change', 'blur'] } ],
  111. payerName: [ { required: true, message: '请输入付款方名称', trigger: ['change', 'blur'] } ]
  112. }
  113. }
  114. },
  115. methods: {
  116. // 申请人员
  117. employeeChange (v, r) {
  118. this.$nextTick(() => {
  119. this.$refs.ruleForm.validateField(['applyPersonSn'])
  120. })
  121. },
  122. payerTypeChange (v) {
  123. this.$refs.ruleForm.clearValidate()
  124. // 重置数据
  125. this.form.dealerSn = ''
  126. this.form.payerName = ''
  127. },
  128. updateReason (val, record) {
  129. this.form.bookReason = record.dispName
  130. },
  131. // 客户
  132. custChange (v) {
  133. if (v && v.key) {
  134. this.form.dealerSn = v.key
  135. this.form.payerName = v.row ? v.row.dealerName : ''
  136. } else {
  137. this.form.dealerSn = ''
  138. this.form.payerName = ''
  139. }
  140. },
  141. // 附件上传
  142. changeAttach (file) {
  143. this.attachList = JSON.parse(file)
  144. this.attachList.map(item => {
  145. item.fileType = item.extName
  146. })
  147. },
  148. // 保存
  149. handleSubmit (e) {
  150. e.preventDefault()
  151. const _this = this
  152. this.$refs.ruleForm.validate(valid => {
  153. if (valid) {
  154. _this.salesSaveFun()
  155. } else {
  156. return false
  157. }
  158. })
  159. },
  160. // 新建或编辑销售单
  161. salesSaveFun () {
  162. const _this = this
  163. const form = JSON.parse(JSON.stringify(_this.form))
  164. form.attachmentList = this.attachList
  165. _this.spinning = true
  166. financeBookSave(form).then(res => {
  167. if (res.status == 200) {
  168. _this.$message.success(res.message)
  169. if (this.bookSn) {
  170. _this.$emit('refashData')
  171. } else {
  172. _this.$router.push({ name: 'financialCollectionEdit', params: { sn: res.data.bookSn } })
  173. }
  174. _this.cancel()
  175. _this.spinning = false
  176. } else {
  177. _this.spinning = false
  178. }
  179. })
  180. },
  181. // 详情
  182. getDetail () {
  183. this.title = '编辑财务收款单'
  184. this.spinning = true
  185. this.confirmLoading = true
  186. financeBookFindBySn({ bookSn: this.bookSn }).then(res => {
  187. if (res.status == 200) {
  188. const data = res.data
  189. this.form = Object.assign(this.form, data)
  190. // 获取附件列表
  191. this.form.attachmentList = ''
  192. this.attachList = res.data.attachmentList
  193. this.$refs.attachList.setFileList(this.attachList)
  194. // 回显客户
  195. if (this.form.dealerSn && this.form.payerType == 'DEALER') {
  196. this.$nextTick(() => {
  197. this.$refs.settleClientName.getDetail(this.form.dealerSn)
  198. })
  199. }
  200. // 回显收款事由
  201. this.$nextTick(() => {
  202. this.bookReasonCode = this.$refs.bookReason.getCodeByName(this.form.bookReason)
  203. })
  204. } else {
  205. this.$refs.ruleForm.resetFields()
  206. }
  207. this.spinning = false
  208. this.confirmLoading = false
  209. })
  210. },
  211. cancel () {
  212. this.opened = false
  213. this.$emit('cancel')
  214. this.$refs.ruleForm.resetFields()
  215. },
  216. async pageInit () {
  217. this.$nextTick(() => {
  218. this.attachList = []
  219. this.$refs.attachList.setFileList('')
  220. this.$refs.ruleForm.resetFields()
  221. if (this.$refs.settleClientName) {
  222. this.$refs.settleClientName.resetForm()
  223. }
  224. })
  225. this.bookReasonCode = undefined
  226. this.form = {
  227. applyPersonSn: undefined,
  228. bookReason: undefined,
  229. payerType: 'DEALER',
  230. dealerSn: undefined,
  231. payerName: undefined,
  232. remarks: '',
  233. attachmentList: ''
  234. }
  235. if (this.bookSn) { // 编辑页
  236. this.getDetail()
  237. } else {
  238. // 最近一次审核人
  239. const lastAuditInfo = await queryLastFinishDingUser().then(res => res.data)
  240. this.form.applyPersonSn = lastAuditInfo ? lastAuditInfo.applyPersonSn : undefined
  241. }
  242. }
  243. },
  244. watch: {
  245. show (newValue, oldValue) {
  246. this.opened = newValue
  247. if (newValue) {
  248. this.pageInit()
  249. }
  250. }
  251. }
  252. }
  253. </script>