epenseDetailModal.vue 13 KB

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