epenseDetailModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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'" @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, !v)
  209. this.form.provinceName = !v ? row.name : undefined
  210. this.form.citySn = undefined
  211. },
  212. // 市
  213. cityChange (v, row) {
  214. this.form.cityName = !v ? row.name : undefined
  215. },
  216. // 详情
  217. getExpenseAccountDetail () {
  218. this.spinning = true
  219. expenseAcctDetailFindBySn({ detailSn: this.expenseAccountDetailSn }).then(res => {
  220. this.$nextTick(() => {
  221. this.form = Object.assign(this.form, res.data || {})
  222. setTimeout(() => {
  223. this.form.accountNameSn = res.data.accountNameSn
  224. if (res.data.accountType == 'CUSTOMER') {
  225. this.$refs.custList.setDufaultVal(res.data.accountName)
  226. }
  227. }, 200)
  228. this.spinning = false
  229. })
  230. })
  231. },
  232. // 确定
  233. handleSave (e) {
  234. e.preventDefault()
  235. const _this = this
  236. this.$refs.ruleForm.validate(valid => {
  237. if (valid) {
  238. const form = JSON.parse(JSON.stringify(_this.form))
  239. const cdfList = this.$refs.epenseCdf.getList()
  240. if (cdfList[0] == 1) {
  241. this.$warning({
  242. title: '是否存在以下情况,请按照要求填写',
  243. content: <div><p>1、费用承担方至少有一个</p><p>2、带星号的列为必填项,不能为空</p></div>
  244. })
  245. return
  246. }
  247. if (cdfList[0] == 3) {
  248. this.$warning({
  249. title: '提示',
  250. content: '请检查每行承担人员是否已经选择'
  251. })
  252. return
  253. }
  254. if (cdfList[0] == 2) {
  255. this.$warning({
  256. title: '提示',
  257. content: '请检查每行人员平摊费用合计是否等于承担金额'
  258. })
  259. return
  260. }
  261. // 获取承担人列表数据
  262. form.detailSplitList = cdfList[1]
  263. console.log(form)
  264. delete form.subareaNames
  265. delete form.subareaSns
  266. _this.spinning = true
  267. expenseAcctDetailSave(form).then(res => {
  268. if (res.status == 200) {
  269. _this.$message.success(res.message)
  270. setTimeout(() => {
  271. _this.$emit('ok')
  272. _this.spinning = false
  273. }, 200)
  274. } else {
  275. _this.spinning = false
  276. }
  277. })
  278. } else {
  279. return false
  280. }
  281. })
  282. },
  283. resetForm () {
  284. this.$nextTick(() => {
  285. this.$refs.ruleForm.resetFields()
  286. })
  287. this.form = {
  288. id: undefined,
  289. accountType: undefined, // 记帐类型
  290. accountNameSn: undefined, // 记账名称
  291. subareaSnList: undefined, // 所属区域
  292. subareaNameList: undefined,
  293. provinceSn: undefined, // 省份
  294. provinceName: '',
  295. citySn: undefined, // 市
  296. cityName: '',
  297. remarks: '', // 备注
  298. expense: 0, // 记账费用
  299. expenseAccountSn: '', // 报销单SN
  300. expenseAccountNo: '', // 报销单号
  301. expenseAccountDetailSn: '', // 报销明细sn
  302. detailSplitList: []
  303. }
  304. this.form.expenseAccountSn = this.expenseAccountSn
  305. this.form.expenseAccountNo = this.expenseAccountNo
  306. }
  307. },
  308. watch: {
  309. 'form.accountType' (newValue, oldValue) {
  310. this.form.accountNameSn = undefined
  311. this.$refs.custList.dealerName = []
  312. },
  313. // 父页面传过来的弹框状态
  314. openModal (newValue, oldValue) {
  315. this.isShow = newValue
  316. },
  317. // 重定义的弹框状态
  318. isShow (newValue, oldValue) {
  319. if (!newValue) {
  320. this.$emit('close')
  321. this.resetForm()
  322. } else {
  323. this.form.expenseAccountSn = this.expenseAccountSn
  324. this.form.expenseAccountNo = this.expenseAccountNo
  325. if (this.expenseAccountDetailSn) {
  326. this.title = '编辑'
  327. this.form.expenseAccountDetailSn = this.expenseAccountDetailSn || ''
  328. this.getExpenseAccountDetail()
  329. } else {
  330. this.resetForm()
  331. this.title = '新增'
  332. }
  333. }
  334. }
  335. }
  336. }
  337. </script>
  338. <style lang="less">
  339. .epenseDetailModal-modal{
  340. .ant-modal-body {
  341. padding: 30px 40px 24px;
  342. }
  343. .btn-cont {
  344. text-align: center;
  345. margin: 35px 0 10px;
  346. }
  347. }
  348. </style>