epenseDetailModal.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <template>
  2. <a-modal
  3. centered
  4. class="epenseDetailModal-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="title"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="60%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div>
  13. <div class="epenseDetailModal-con">
  14. <a-form-model
  15. id="epenseDetailModal-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol">
  21. <a-row>
  22. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  23. <a-form-model-item label="记账类型" prop="accountType">
  24. <v-select
  25. code="EXPENSE_ACCOUNT_TYPE"
  26. id="epenseDetailModal-accountType"
  27. v-model="form.accountType"
  28. allowClear
  29. placeholder="请选择记账类型"
  30. ></v-select>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  34. <a-form-model-item label="记账名称" prop="accountNameSn">
  35. <!-- 部门 -->
  36. <department id="epenseDetailModal-accountName" v-show="form.accountType=='INNER_ACCOUNT'" @change="accountNameSnChange" v-model="form.accountNameSn" placeholder="请选择记账名称(输入名称搜索)"></department>
  37. <!-- 经销商 -->
  38. <custList
  39. id="epenseDetailModal-accountName1"
  40. v-show="form.accountType=='CUSTOMER'"
  41. cooperateFlag="1"
  42. ref="custList"
  43. @change="accountNameSnChange"
  44. placeholder="请选择记账名称(输入名称搜索)"></custList>
  45. <!-- 供应商 -->
  46. <supplier
  47. id="epenseDetailModal-accountName2"
  48. v-show="form.accountType=='OUT_ACCOUNT'"
  49. enableFlag="1"
  50. @change="accountNameSnChange"
  51. v-model="form.accountNameSn"
  52. placeholder="请选择记账名称(输入名称搜索)"></supplier>
  53. <!-- 其它往来 -->
  54. <otherTransactions id="epenseDetailModal-accountName3" v-show="form.accountType=='OTHER_ACCOUNT'" @change="accountNameSnChange" v-model="form.accountNameSn" placeholder="请选择记账名称(输入名称搜索)"></otherTransactions>
  55. <span v-if="!form.accountType">
  56. <a-select style="width: 100%" placeholder="请选择记账名称" id="epenseDetailModal-accountName4">
  57. <a-select-option value="" :disabled="true" id="epenseDetailModal-accountName-kong">
  58. 请先选择记账类型
  59. </a-select-option>
  60. </a-select>
  61. </span>
  62. </a-form-model-item>
  63. </a-col>
  64. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  65. <a-form-model-item label="所属区域">
  66. <subarea
  67. id="epenseDetailModal-subarea"
  68. ref="subareaBox"
  69. defValKey="name"
  70. :onlySubarea="true"
  71. :changeOnSelect="false"
  72. @change="subareaChange"
  73. v-model="subareaList"
  74. placeholder="请选择所属区域"
  75. ></subarea>
  76. </a-form-model-item>
  77. </a-col>
  78. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  79. <a-form-model-item label="所属省份" prop="provinceSn">
  80. <Area id="epenseDetailModal-provinceSn" @change="provinceChange" placeholder="请选择所属省份" v-model="form.provinceSn"></Area>
  81. </a-form-model-item>
  82. </a-col>
  83. </a-row>
  84. <a-row>
  85. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  86. <a-form-model-item label="所属城市" prop="citySn">
  87. <Area
  88. id="epenseDetailModal-citySn"
  89. ref="city"
  90. @change="cityChange"
  91. placeholder="请选择所属城市"
  92. leve="city"
  93. :parentId="form.provinceSn"
  94. v-model="form.citySn"></Area>
  95. </a-form-model-item>
  96. </a-col>
  97. <a-col
  98. :xs="24"
  99. :sm="24"
  100. :md="12"
  101. :lg="12"
  102. :xl="12"
  103. v-if="!isBatch">
  104. <a-form-model-item label="记账费用">
  105. <a-input
  106. style="width: 100%;color: red;font-weight: bold;"
  107. id="epenseDetailModal-expense"
  108. :disabled="true"
  109. :value="Math.abs(form.expense) * -1"
  110. />
  111. </a-form-model-item>
  112. </a-col>
  113. </a-row>
  114. <a-row>
  115. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  116. <a-form-model-item label="备注" prop="remarks" :label-col="{span:2}" :wrapper-col="{span:20}">
  117. <a-textarea id="epenseDetailModal-remarks" placeholder="请输入备注(最多500个字符)" v-model="form.remarks" :rows="4" :maxLength="500"/>
  118. </a-form-model-item>
  119. </a-col>
  120. </a-row>
  121. </a-form-model>
  122. <!-- 费用承担方 -->
  123. <epenseCdfModal v-if="!isBatch" ref="epenseCdf" :list="form.detailSplitList" @fyTotal="getFyTotal"></epenseCdfModal>
  124. </div>
  125. <div class="btn-cont">
  126. <a-button id="epenseDetailModal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  127. <a-button type="primary" id="epenseDetailModal-save" @click="handleSave">确定</a-button>
  128. </div>
  129. </div>
  130. </a-spin>
  131. </a-modal>
  132. </template>
  133. <script>
  134. import { VSelect } from '@/components'
  135. import epenseCdfModal from './epenseCdfModal.vue'
  136. import subarea from '@/views/common/subarea.js'
  137. import Area from '@/views/common/area.js'
  138. import custList from '@/views/common/custList.vue'
  139. import supplier from '@/views/common/supplier.js'
  140. import otherTransactions from '@/views/common/otherTransactions.js'
  141. import department from './department.js'
  142. import { expenseAcctDetailSave, expenseAcctDetailFindBySn } from '@/api/expenseManagement.js'
  143. export default {
  144. name: 'EpenseDetailModal',
  145. components: { VSelect, subarea, Area, epenseCdfModal, custList, supplier, department, otherTransactions },
  146. props: {
  147. openModal: { // 弹框显示状态
  148. type: Boolean,
  149. default: false
  150. },
  151. expenseAccountSn: { // 报销单sn
  152. type: String,
  153. default: ''
  154. },
  155. expenseAccountNo: { // 报销单号
  156. type: String,
  157. default: ''
  158. },
  159. expenseAccountDetailSn: { // 明细sn
  160. type: String,
  161. default: ''
  162. },
  163. isBatch: { // 是否批量修改
  164. type: Boolean,
  165. default: false
  166. }
  167. },
  168. data () {
  169. return {
  170. spinning: false,
  171. isShow: this.openModal, // 是否打开弹框
  172. title: '',
  173. formItemLayout: {
  174. labelCol: { span: 4 },
  175. wrapperCol: { span: 16 }
  176. },
  177. subareaList: [],
  178. form: {
  179. id: undefined,
  180. accountType: undefined, // 记帐类型
  181. accountNameSn: undefined, // 记账名称
  182. subareaArea: {
  183. subareaName: undefined, // 所属区域
  184. subareaAreaName: undefined // 分区
  185. },
  186. provinceSn: undefined, // 省份
  187. provinceName: '',
  188. citySn: undefined, // 市
  189. cityName: '',
  190. remarks: '', // 备注
  191. expense: 0, // 记账费用
  192. expenseAccountSn: '', // 报销单SN
  193. expenseAccountNo: '', // 报销单号
  194. expenseAccountDetailSn: '', // 报销明细sn
  195. detailSplitList: [] // 费用承担方明细
  196. },
  197. rules: {
  198. accountType: [
  199. { required: true, message: '请选择记帐类型', trigger: 'change' }
  200. ],
  201. accountNameSn: [
  202. { required: true, message: '请选择记账名称', trigger: 'change' }
  203. ]
  204. }
  205. }
  206. },
  207. methods: {
  208. // 费用合计
  209. getFyTotal (expense) {
  210. this.form.expense = expense
  211. },
  212. // 记账名称变化时
  213. accountNameSnChange (v, row) {
  214. console.log(v, row)
  215. if (this.form.accountType == 'CUSTOMER') {
  216. if (row) {
  217. this.form.accountNameSn = v.key
  218. this.form.provinceSn = row.provinceSn
  219. this.form.citySn = row.citySn
  220. this.form.provinceName = row.provinceName
  221. this.form.cityName = row.cityName
  222. this.form.subareaArea.subareaName = row.subareaArea ? row.subareaArea.subareaName : ''
  223. this.form.subareaArea.subareaAreaName = row.subareaArea ? row.subareaArea.subareaAreaName : ''
  224. this.subareaList = row.subareaArea ? [row.subareaArea.subareaName, row.subareaArea.subareaAreaName] : []
  225. } else {
  226. this.form.accountNameSn = ''
  227. this.form.provinceSn = ''
  228. this.form.citySn = ''
  229. this.form.provinceName = ''
  230. this.form.cityName = ''
  231. this.form.subareaArea.subareaName = ''
  232. this.form.subareaArea.subareaAreaName = ''
  233. this.$refs.subareaBox.clearData()
  234. this.subareaList = []
  235. }
  236. }
  237. this.$nextTick(() => {
  238. this.$refs.ruleForm.validateField('accountNameSn')
  239. })
  240. },
  241. // 分区
  242. subareaChange (val, row) {
  243. this.form.subareaArea.subareaName = val[0] ? val[0] : ''
  244. this.form.subareaArea.subareaAreaName = val[1] ? val[1] : ''
  245. },
  246. // 省
  247. provinceChange (v, row) {
  248. this.form.provinceName = row ? row.name : ''
  249. this.form.provinceSn = v || ''
  250. this.form.citySn = undefined
  251. this.form.cityName = ''
  252. this.$refs.city.clearData()
  253. },
  254. // 市
  255. cityChange (v, row) {
  256. this.form.cityName = row ? row.name : ''
  257. this.form.citySn = v || ''
  258. },
  259. // 详情
  260. getExpenseAccountDetail () {
  261. this.spinning = true
  262. expenseAcctDetailFindBySn({ detailSn: this.expenseAccountDetailSn }).then(res => {
  263. this.$nextTick(() => {
  264. this.form = Object.assign(this.form, res.data || {})
  265. this.form.provinceSn = this.form.provinceSn ? this.form.provinceSn : undefined
  266. this.form.citySn = this.form.citySn ? this.form.citySn : undefined
  267. setTimeout(() => {
  268. this.form.accountNameSn = res.data.accountNameSn
  269. if (res.data.accountType == 'CUSTOMER') {
  270. this.$refs.custList.setDufaultVal(res.data.accountName)
  271. }
  272. this.form.subareaArea.subareaName = res.data.subareaNames || ''
  273. this.form.subareaArea.subareaAreaName = res.data.subareaAreaName || ''
  274. this.subareaList = res.data.subareaNames ? [res.data.subareaNames, res.data.subareaAreaName] : undefined
  275. }, 200)
  276. this.spinning = false
  277. })
  278. })
  279. },
  280. // 确定
  281. handleSave (e) {
  282. e.preventDefault()
  283. const _this = this
  284. this.$refs.ruleForm.validate(valid => {
  285. if (valid) {
  286. const form = JSON.parse(JSON.stringify(_this.form))
  287. form.provinceName = form.provinceName ? form.provinceName : ''
  288. form.provinceSn = form.provinceSn ? form.provinceSn : ''
  289. form.citySn = form.citySn ? form.citySn : ''
  290. form.cityName = form.cityName ? form.cityName : ''
  291. // 如果是批量修改记账名称
  292. if (this.isBatch) {
  293. _this.spinning = true
  294. _this.$emit('ok', form)
  295. } else {
  296. // 校验明细承担人列表
  297. const cdfList = this.$refs.epenseCdf.getList()
  298. if (cdfList[0] == 1) {
  299. this.$warning({
  300. title: '是否存在以下情况,请按照要求填写',
  301. content: <div><p>1、费用承担方至少有一个</p><p>2、带星号的列为必填项,不能为空</p></div>,
  302. centered: true
  303. })
  304. return
  305. }
  306. if (cdfList[0] == 3) {
  307. this.$warning({
  308. title: '提示',
  309. content: '请检查每行承担人员是否已经选择',
  310. centered: true
  311. })
  312. return
  313. }
  314. if (cdfList[0] == 2) {
  315. this.$warning({
  316. title: '提示',
  317. content: '请检查每行人员平摊费用合计是否等于承担金额',
  318. centered: true
  319. })
  320. return
  321. }
  322. // 获取承担人列表数据
  323. form.detailSplitList = cdfList[1]
  324. form.expense = Math.abs(form.expense) // 费用合计
  325. _this.spinning = true
  326. expenseAcctDetailSave(form).then(res => {
  327. if (res.status == 200) {
  328. _this.$message.success(res.message)
  329. setTimeout(() => {
  330. _this.$emit('ok')
  331. _this.spinning = false
  332. }, 200)
  333. } else {
  334. _this.spinning = false
  335. }
  336. })
  337. }
  338. } else {
  339. return false
  340. }
  341. })
  342. },
  343. // 重置表单
  344. resetForm () {
  345. this.$nextTick(() => {
  346. this.$refs.ruleForm.resetFields()
  347. this.$refs.city.clearData()
  348. this.$refs.subareaBox.clearData()
  349. })
  350. this.form = {
  351. id: undefined,
  352. accountType: undefined, // 记帐类型
  353. accountNameSn: undefined, // 记账名称
  354. subareaArea: {
  355. subareaName: undefined, // 所属区域
  356. subareaAreaName: undefined // 分区
  357. },
  358. provinceSn: undefined, // 省份
  359. provinceName: '',
  360. citySn: undefined, // 市
  361. cityName: '',
  362. remarks: '', // 备注
  363. expense: 0, // 记账费用
  364. expenseAccountSn: '', // 报销单SN
  365. expenseAccountNo: '', // 报销单号
  366. expenseAccountDetailSn: '', // 报销明细sn
  367. detailSplitList: []
  368. }
  369. this.form.provinceSn = undefined
  370. this.form.provinceName = ''
  371. this.form.citySn = undefined
  372. this.form.cityName = ''
  373. this.form.expenseAccountSn = this.expenseAccountSn
  374. this.form.expenseAccountNo = this.expenseAccountNo
  375. this.subareaList = []
  376. }
  377. },
  378. watch: {
  379. 'form.accountType' (newValue, oldValue) {
  380. this.form.accountNameSn = undefined
  381. this.$refs.custList.dealerName = []
  382. },
  383. // 父页面传过来的弹框状态
  384. openModal (newValue, oldValue) {
  385. this.isShow = newValue
  386. },
  387. // 重定义的弹框状态
  388. isShow (newValue, oldValue) {
  389. if (!newValue) {
  390. this.$emit('close')
  391. this.resetForm()
  392. } else {
  393. this.form.expenseAccountSn = this.expenseAccountSn
  394. this.form.expenseAccountNo = this.expenseAccountNo
  395. // 编辑
  396. if (this.expenseAccountDetailSn) {
  397. this.title = '编辑费用明细'
  398. this.form.expenseAccountDetailSn = this.expenseAccountDetailSn || ''
  399. this.getExpenseAccountDetail()
  400. } else {
  401. this.resetForm()
  402. this.title = this.isBatch ? '批量变更记账名称' : '新增费用明细'
  403. }
  404. }
  405. }
  406. }
  407. }
  408. </script>
  409. <style lang="less">
  410. .epenseDetailModal-modal{
  411. .ant-modal-body {
  412. padding: 30px 40px 24px;
  413. }
  414. .btn-cont {
  415. text-align: center;
  416. margin: 35px 0 10px;
  417. }
  418. }
  419. </style>