baseModal.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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. <a-input :maxLength="100" placeholder="请输入收款事由(最多100个字符)" v-model="form.bookReason"></a-input>
  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 type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
  59. <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</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 { financeBookSave, financeBookFindBySn, queryLastFinishDingUser } from '@/api/financeBook.js'
  71. export default {
  72. name: 'FcBaseModal',
  73. mixins: [commonMixin],
  74. components: { VSelect, Upload, employee, dealerSubareaScopeList },
  75. props: {
  76. show: [Boolean],
  77. bookSn: {
  78. type: String,
  79. default: ''
  80. }
  81. },
  82. data () {
  83. return {
  84. opened: this.show,
  85. spinning: false,
  86. disabled: false,
  87. title: '新增财务收款单',
  88. confirmLoading: false,
  89. formItemLayout: {
  90. labelCol: { span: 4 },
  91. wrapperCol: { span: 18 }
  92. },
  93. attachList: [],
  94. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  95. form: {
  96. applyPersonSn: undefined,
  97. bookReason: '',
  98. payerType: 'DEALER',
  99. dealerSn: undefined,
  100. payerName: undefined,
  101. remarks: '',
  102. attachmentList: ''
  103. },
  104. rules: {
  105. applyPersonSn: [ { required: true, message: '请选择申请人', trigger: ['change', 'blur'] } ],
  106. bookReason: [ { required: true, message: '请输入收款事由', trigger: ['change', 'blur'] } ],
  107. payerType: [ { required: true, message: '请选择付款方类型', trigger: ['change', 'blur'] } ],
  108. dealerSn: [ { required: true, message: '请选择付款方', trigger: ['change', 'blur'] } ],
  109. payerName: [ { required: true, message: '请输入付款方名称', trigger: ['change', 'blur'] } ]
  110. }
  111. }
  112. },
  113. methods: {
  114. // 申请人员
  115. employeeChange (v, r) {
  116. this.$nextTick(() => {
  117. this.$refs.ruleForm.validateField(['applyPersonSn'])
  118. })
  119. },
  120. payerTypeChange (v) {
  121. this.$refs.ruleForm.clearValidate()
  122. // 重置数据
  123. this.form.dealerSn = ''
  124. this.form.payerName = ''
  125. },
  126. // 客户
  127. custChange (v) {
  128. console.log(v)
  129. if (v && v.key) {
  130. this.form.dealerSn = v.key
  131. this.form.payerName = v.row ? v.row.dealerName : ''
  132. } else {
  133. this.form.dealerSn = ''
  134. this.form.payerName = ''
  135. }
  136. },
  137. // 附件上传
  138. changeAttach (file) {
  139. this.attachList = JSON.parse(file)
  140. this.attachList.map(item => {
  141. item.fileType = item.extName
  142. })
  143. },
  144. // 保存
  145. handleSubmit (e) {
  146. e.preventDefault()
  147. const _this = this
  148. this.$refs.ruleForm.validate(valid => {
  149. if (valid) {
  150. _this.salesSaveFun()
  151. } else {
  152. return false
  153. }
  154. })
  155. },
  156. // 新建或编辑销售单
  157. salesSaveFun () {
  158. const _this = this
  159. const form = JSON.parse(JSON.stringify(_this.form))
  160. form.attachmentList = this.attachList
  161. _this.spinning = true
  162. financeBookSave(form).then(res => {
  163. if (res.status == 200) {
  164. _this.$message.success(res.message)
  165. if (this.bookSn) {
  166. _this.$emit('refashData')
  167. } else {
  168. _this.$router.push({ name: 'financialCollectionEdit', params: { sn: res.data.bookSn } })
  169. }
  170. _this.cancel()
  171. _this.spinning = false
  172. } else {
  173. _this.spinning = false
  174. }
  175. })
  176. },
  177. // 详情
  178. getDetail () {
  179. this.title = '编辑财务收款单'
  180. this.spinning = true
  181. this.confirmLoading = true
  182. financeBookFindBySn({ bookSn: this.bookSn }).then(res => {
  183. if (res.status == 200) {
  184. const data = res.data
  185. this.form = Object.assign(this.form, data)
  186. // 获取附件列表
  187. this.form.attachmentList = ''
  188. this.attachList = res.data.attachmentList
  189. this.$refs.attachList.setFileList(this.attachList)
  190. // 回显客户
  191. if (this.form.dealerSn && this.form.payerType == 'DEALER') {
  192. this.$nextTick(() => {
  193. this.$refs.settleClientName.getDetail(this.form.dealerSn)
  194. })
  195. }
  196. } else {
  197. this.$refs.ruleForm.resetFields()
  198. }
  199. this.spinning = false
  200. this.confirmLoading = false
  201. })
  202. },
  203. cancel () {
  204. this.opened = false
  205. this.$emit('cancel')
  206. this.$refs.ruleForm.resetFields()
  207. },
  208. async pageInit () {
  209. this.$nextTick(() => {
  210. this.attachList = []
  211. this.$refs.attachList.setFileList('')
  212. this.$refs.ruleForm.resetFields()
  213. if (this.$refs.settleClientName) {
  214. this.$refs.settleClientName.resetForm()
  215. }
  216. })
  217. this.form = {
  218. applyPersonSn: undefined,
  219. bookReason: '',
  220. payerType: 'DEALER',
  221. dealerSn: undefined,
  222. payerName: undefined,
  223. remarks: '',
  224. attachmentList: ''
  225. }
  226. if (this.bookSn) { // 编辑页
  227. this.getDetail()
  228. }else{
  229. // 最近一次审核人
  230. const lastAuditInfo = await queryLastFinishDingUser().then(res => res.data)
  231. this.form.applyPersonSn = lastAuditInfo ? lastAuditInfo.applyPersonSn : undefined
  232. }
  233. }
  234. },
  235. watch: {
  236. show (newValue, oldValue) {
  237. this.opened = newValue
  238. if (newValue) {
  239. this.pageInit()
  240. }
  241. }
  242. }
  243. }
  244. </script>