baseDataModal.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <template>
  2. <a-modal
  3. v-drag
  4. v-model="opened"
  5. :title="title"
  6. centered
  7. :maskClosable="false"
  8. :width="800"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="expenseReimbursementAddform"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol">
  20. <a-row>
  21. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  22. <a-form-model-item label="申请人" prop="applyPersonSn">
  23. <employee style="width: 100%;" @change="employeeChange" id="expenseReimbursementAddform-Employee" v-model="form.applyPersonSn"></employee>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  27. <a-form-model-item label="申请部门" prop="applyDepartmentSn">
  28. <department style="width: 100%;" @change="departementChange" id="expenseReimbursementAddform-Department" v-model="form.applyDepartmentSn"></department>
  29. </a-form-model-item>
  30. </a-col>
  31. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  32. <a-form-model-item label="费用类型" prop="expenseType">
  33. <expenseType
  34. id="expenseReimbursementAddform-expenseType"
  35. v-model="expenseTypes"
  36. @change="expenseChange"
  37. placeholder="请选择费用类型"
  38. ></expenseType>
  39. </a-form-model-item>
  40. </a-col>
  41. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  42. <a-form-model-item label="费用产生月" prop="expenseDate">
  43. <a-month-picker
  44. id="expenseReimbursementAddform-expenseDate"
  45. placeholder="请选择月份"
  46. v-model="form.expenseDate"
  47. locale="zh-cn"
  48. @change="expenseDateChange"
  49. :disabled-date="disabledDate"
  50. style="width: 100%;"/>
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  54. <a-form-model-item
  55. label="费用归属品牌"
  56. prop="productBrandSn"
  57. :required="form.expenseTypeName=='促销费用'"
  58. >
  59. <ProductBrand id="expenseReimbursementAddform-productBrandSn" @change="changeBrand" showAllBrand v-model="form.productBrandSn" placeholder="请选择费用归属品牌(单选)"></ProductBrand>
  60. </a-form-model-item>
  61. </a-col>
  62. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  63. <a-form-model-item
  64. label="费用归属品类"
  65. prop="productTypeSn2"
  66. :required="form.expenseTypeName=='促销费用'"
  67. >
  68. <productTypeAll placeholder="请选择费用归属品类(单选,至少选到二级或三级)" showAllType @change="changeProductType" v-model="productType" id="expenseReimbursementAddform-productType"></productTypeAll>
  69. </a-form-model-item>
  70. </a-col>
  71. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  72. <a-form-model-item label="主题" prop="title" :label-col="{span:3}" :wrapper-col="{span:19}">
  73. <a-textarea
  74. id="expenseReimbursementAddform-title"
  75. :maxLength="100"
  76. :rows="3"
  77. v-model.trim="form.title"
  78. placeholder="请输入费用报销主题(最多100个字符)"
  79. allowClear />
  80. </a-form-model-item>
  81. </a-col>
  82. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  83. <a-form-model-item label="详细说明" prop="content" :label-col="{span:3}" :wrapper-col="{span:19}">
  84. <a-textarea
  85. id="expenseReimbursementAddform-content"
  86. placeholder="请详细描述费用报销内容(最多500个字符)"
  87. v-model.trim="form.content"
  88. :rows="3"
  89. :maxLength="500"
  90. allowClear/>
  91. </a-form-model-item>
  92. </a-col>
  93. </a-row>
  94. <a-row>
  95. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  96. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)" :label-col="{span:3}" :wrapper-col="{span:19}">
  97. <Upload
  98. style="height: 100%;"
  99. id="expenseReimbursementAddform-attachList"
  100. v-model="form.expenseAccountFilesList"
  101. ref="attachList"
  102. :fileSize="10"
  103. :maxNums="10"
  104. fileType="*"
  105. uploadType="attach"
  106. :action="attachAction"
  107. @change="changeAttach"
  108. upText="上传附件"></Upload>
  109. </a-form-model-item>
  110. </a-col>
  111. </a-row>
  112. <div style="text-align: center;margin-top: 20px;">
  113. <a-button @click="cancel" style="margin-right: 15px" id="expenseReimbursementAddform-btn-back">取消</a-button>
  114. <a-button type="primary" :loading="spinning" @click="handleSubmit" id="expenseReimbursementAddform-btn-submit">保存</a-button>
  115. </div>
  116. </a-form-model>
  117. </a-spin>
  118. </a-modal>
  119. </template>
  120. <script>
  121. import { VSelect, Upload, STable } from '@/components'
  122. import moment from 'moment'
  123. import department from './department.js'
  124. import employee from './employee.js'
  125. import expenseType from '@/views/common/expenseType.js'
  126. import ProductBrand from '@/views/common/productBrand.js'
  127. import productTypeAll from '@/views/common/productTypeAll.js'
  128. import { expenseAccountDetail, expenseAccountSave } from '@/api/expenseManagement.js'
  129. export default {
  130. name: 'BaseDataModal',
  131. components: { VSelect, Upload, STable, department, employee, expenseType, ProductBrand, productTypeAll },
  132. props: {
  133. show: [Boolean],
  134. itemSn: {
  135. type: String,
  136. default: ''
  137. }
  138. },
  139. data () {
  140. return {
  141. opened: this.show,
  142. expenseAccountSn: this.itemSn, // 费用报销单sn
  143. spinning: false,
  144. title: '新增费用报销单', // 弹框标题
  145. formItemLayout: {
  146. labelCol: { span: 6 },
  147. wrapperCol: { span: 14 }
  148. },
  149. fromPage: null, // 打开方式,sales:销售单转费用单,salesMearge:合并销售单转,其它手动创建
  150. attachList: [], // 附件列表
  151. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo', // 附件上传地址
  152. expenseTypes: [], // 费用类型值
  153. productType: [],
  154. form: {
  155. applyPersonSn: undefined, // 申请人
  156. applyDepartmentSn: undefined, // 申请部门
  157. expenseType: undefined, // 费用类型1
  158. expenseType2: undefined, // 费用类型2
  159. expenseType3: undefined, // 费用类型3
  160. expenseTypeName: undefined, // 费用类型1
  161. expenseTypeName2: undefined, // 费用类型2
  162. expenseTypeName3: undefined, // 费用类型3
  163. productBrandSn: undefined, // 产品品牌
  164. productTypeSn1: '', // 产品一级分类
  165. productTypeSn2: '', // 产品二级分类
  166. productTypeSn3: '', // 产品三级分类
  167. expenseDate: moment().locale('zh-cn').format('YYYY-MM'), // 费用产生月
  168. title: '', // 主题
  169. content: '' // 费用说明
  170. },
  171. rules: {
  172. applyPersonSn: [
  173. { required: true, message: '请选择申请人', trigger: 'change' }
  174. ],
  175. applyDepartmentSn: [
  176. { required: true, message: '请选择申请部门', trigger: 'change' }
  177. ],
  178. expenseType: [
  179. { required: true, message: '请选择费用类型', trigger: 'change' }
  180. ],
  181. expenseDate: [
  182. { required: true, message: '请选择费用产生月', trigger: 'change' }
  183. ],
  184. title: [
  185. { required: true, message: '请输入主题', trigger: 'blur' }
  186. ],
  187. content: [
  188. { required: true, message: '请输入详细说明', trigger: 'blur' }
  189. ]
  190. }
  191. }
  192. },
  193. methods: {
  194. // 关闭弹框
  195. cancel () {
  196. this.spinning = false
  197. this.$emit('close')
  198. },
  199. // 初始化
  200. pageInit () {
  201. this.$nextTick(() => {
  202. if (this.expenseAccountSn) { // 编辑页
  203. this.getDetail()
  204. this.title = '编辑费用报销单'
  205. } else {
  206. this.title = '新增费用报销单'
  207. }
  208. })
  209. },
  210. // 重置表单
  211. retsetForm () {
  212. this.form = {
  213. applyPersonSn: undefined, // 申请人
  214. applyDepartmentSn: undefined, // 申请部门
  215. expenseType: undefined, // 费用类型1
  216. expenseType2: undefined, // 费用类型2
  217. expenseType3: undefined, // 费用类型3
  218. expenseTypeName: undefined, // 费用类型1
  219. expenseTypeName2: undefined, // 费用类型2
  220. expenseTypeName3: undefined, // 费用类型3
  221. productBrandSn: undefined, // 产品品牌
  222. productTypeSn1: '', // 产品一级分类
  223. productTypeSn2: '', // 产品二级分类
  224. productTypeSn3: '', // 产品三级分类
  225. expenseDate: moment().locale('zh-cn').format('YYYY-MM'), // 费用产生月
  226. title: '', // 主题
  227. content: '' // 费用说明
  228. }
  229. this.productType = []
  230. this.attachList = []
  231. this.form.expenseAccountFilesList = ''
  232. this.$refs.attachList.setFileList('')
  233. this.$refs.ruleForm.resetFields()
  234. this.expenseTypes = []
  235. },
  236. // 产品分类 change
  237. changeProductType (val, id, opt) {
  238. console.log(val, opt, '------------')
  239. this.form.productTypeSn1 = val && val[0] ? val[0] : ''
  240. this.form.productTypeSn2 = val && val[1] ? val[1] : ''
  241. this.form.productTypeSn3 = val && val[2] ? val[2] : ''
  242. // 名称
  243. this.form.productTypeName1 = opt && opt[0] ? opt[0].productTypeName : ''
  244. this.form.productTypeName2 = opt && opt[1] ? opt[1].productTypeName : ''
  245. this.form.productTypeName3 = opt && opt[2] ? opt[2].productTypeName : ''
  246. },
  247. // 品牌
  248. changeBrand (val, id, opt) {
  249. this.form.productBrandName = opt ? opt.brandName : ''
  250. },
  251. // 申请人员
  252. employeeChange (v, r) {
  253. if (r.departmentSn) {
  254. this.form.applyDepartmentSn = r.departmentSn
  255. }
  256. this.$nextTick(() => {
  257. this.$refs.ruleForm.validateField(['applyPersonSn', 'applyDepartmentSn'])
  258. })
  259. },
  260. // 申请部门选择
  261. departementChange () {
  262. this.$nextTick(() => {
  263. this.$refs.ruleForm.validateField('applyDepartmentSn')
  264. })
  265. },
  266. // 费用产生月
  267. expenseDateChange (v, d) {
  268. this.form.expenseDate = d
  269. },
  270. // 费用产生月禁止范围
  271. disabledDate (current) {
  272. return current && current > moment().endOf('day')
  273. },
  274. // 费用类型选择
  275. expenseChange (val, opts) {
  276. this.expenseTypes = val || []
  277. this.form.expenseType = val && val[0] ? val[0] : ''
  278. this.form.expenseType2 = val && val[1] ? val[1] : ''
  279. this.form.expenseType3 = val && val[2] ? val[2] : ''
  280. // 名称
  281. this.form.expenseTypeName = opts && opts[0] ? opts[0].name : ''
  282. this.form.expenseTypeName2 = opts && opts[1] ? opts[1].name : ''
  283. this.form.expenseTypeName3 = opts && opts[2] ? opts[2].name : ''
  284. // 校验规则
  285. this.$refs.ruleForm.clearValidate()
  286. this.setValidBrandType()
  287. },
  288. // 判断是否促销费用类型,必填品牌和分类
  289. setValidBrandType () {
  290. if (this.form.expenseTypeName == '促销费用') {
  291. this.rules.productBrandSn = [{ required: true, message: '请选择归属品牌', trigger: 'change' }]
  292. this.rules.productTypeSn2 = [{ required: true, message: '请选择归属分类(至少选择到2级或3级分类)', trigger: 'change' }]
  293. } else {
  294. this.rules.productBrandSn = []
  295. this.rules.productTypeSn2 = []
  296. }
  297. },
  298. // 附件上传
  299. changeAttach (file) {
  300. this.attachList = JSON.parse(file)
  301. this.attachList.map(item => {
  302. item.fileType = item.extName
  303. })
  304. },
  305. // 编辑时设置数据
  306. setDetail (data, from) {
  307. this.spinning = false
  308. this.disabled = false
  309. this.fromPage = from
  310. this.form = Object.assign(this.form, data)
  311. // 获取附件列表
  312. if (this.$refs.attachList) {
  313. this.form.expenseAccountFilesList = ''
  314. this.attachList = data.expenseAccountFilesList
  315. this.$refs.attachList.setFileList(this.attachList)
  316. }
  317. if (data.productTypeSn1) {
  318. this.productType = [data.productTypeSn1, data.productTypeSn2, data.productTypeSn3]
  319. }
  320. if (!data.productBrandSn) {
  321. this.form.productBrandSn = undefined
  322. }
  323. setTimeout(() => {
  324. this.expenseTypes = data.expenseType ? [this.form.expenseType, this.form.expenseType2, this.form.expenseType3] : []
  325. }, 500)
  326. this.setValidBrandType()
  327. },
  328. // 获取详情
  329. getDetail () {
  330. this.spinning = true
  331. this.disabled = true
  332. expenseAccountDetail({ expenseAccountSn: this.expenseAccountSn }).then(res => {
  333. if (res.status == 200) {
  334. this.setDetail(res.data)
  335. } else {
  336. this.$refs.ruleForm.resetFields()
  337. }
  338. this.spinning = false
  339. this.disabled = false
  340. })
  341. },
  342. // 保存基础信息
  343. handleSubmit (e) {
  344. e.preventDefault()
  345. const _this = this
  346. this.$refs.ruleForm.validate(valid => {
  347. if (valid) {
  348. const form = JSON.parse(JSON.stringify(_this.form))
  349. form.expenseDate = form.expenseDate + '-01'
  350. form.expenseAccountFilesList = this.attachList
  351. // console.log(form)
  352. // 判断费用归属品类 最少要选择到2级或3级分类
  353. if (_this.form.productTypeSn1 && !_this.form.productTypeSn2) {
  354. _this.$message.warning('请选择归属分类(至少选择到2级或3级分类)')
  355. return false
  356. }
  357. _this.spinning = true
  358. // 从销售单转的费用,直接提交
  359. if (_this.fromPage == 'sales') {
  360. _this.$emit('expenseSaveOk', form, this.fromPage)
  361. return false
  362. }
  363. // 从销售单转的费用,合并提交
  364. if (_this.fromPage == 'salesMearge') {
  365. _this.$emit('expenseSaveOk', form, this.fromPage)
  366. return false
  367. }
  368. // 手动建的费用单
  369. expenseAccountSave(form).then(res => {
  370. if (res.status == 200) {
  371. _this.$message.success(res.message)
  372. setTimeout(() => {
  373. if (this.expenseAccountSn) {
  374. _this.$emit('refashData')
  375. } else {
  376. // 跳转到费用明细单页面
  377. _this.$router.push({ name: 'expenseReimbursementEdit', params: { sn: res.data.expenseAccountSn } })
  378. }
  379. _this.spinning = false
  380. _this.cancel()
  381. }, 200)
  382. } else {
  383. _this.spinning = false
  384. }
  385. })
  386. } else {
  387. return false
  388. }
  389. })
  390. }
  391. },
  392. watch: {
  393. show (newValue, oldValue) {
  394. this.opened = newValue
  395. if (newValue) {
  396. this.pageInit()
  397. } else {
  398. this.retsetForm()
  399. }
  400. },
  401. itemSn (a, b) {
  402. this.expenseAccountSn = a
  403. }
  404. }
  405. }
  406. </script>