edit.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <div class="expenseManagementEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :back-icon="false" class="expenseManagementEdit-back">
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="expenseManagementEdit-back-btn" href="javascript:;" @click="handleBack">
  8. <a-icon type="left"></a-icon>
  9. 返回列表
  10. </a>
  11. </template>
  12. </a-page-header>
  13. <a-card size="small" :bordered="false" class="expenseManagementEdit-table-page-wrapper">
  14. <a-form-model
  15. id="expenseManagementEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol">
  21. <a-form-model-item label="费用类型" prop="costType">
  22. <a-cascader
  23. @change="changeCostType"
  24. v-model="form.costType"
  25. expand-trigger="hover"
  26. :options="costTypeList"
  27. :fieldNames="{ label: 'name', value: 'costTypeSn', children: 'children' }"
  28. id="productInfoList-costType"
  29. placeholder="请选择费用类型"
  30. allowClear
  31. />
  32. </a-form-model-item>
  33. <a-form-model-item label="费用金额" prop="settleAmount">
  34. <a-input-number
  35. id="expenseManagementEdit-name"
  36. v-model="form.settleAmount"
  37. :precision="2"
  38. :min="0"
  39. :max="999999"
  40. placeholder="请输入费用金额(0~999999)"
  41. allowClear
  42. style="width: 90%;"
  43. />
  44. </a-form-model-item>
  45. <a-form-model-item label="结算方式" prop="settleStyleSn">
  46. <settleStyle
  47. id="expenseManagementEdit-settleStyleSn"
  48. v-model="form.settleStyleSn"
  49. @change="settleStyleChange"
  50. placeholder="请选择结算方式">
  51. </settleStyle>
  52. </a-form-model-item>
  53. <a-form-model-item v-if="enableFundAccount" label="结算账户" prop="settleAccountSn">
  54. <settleAccount
  55. id="expenseManagementEdit-settleAccountSn"
  56. ref="settleAcount"
  57. v-model="form.settleAccountSn"
  58. :settleStyleSn="form.settleStyleSn"
  59. placeholder="请选择结算账户">
  60. </settleAccount>
  61. </a-form-model-item>
  62. <a-form-model-item label="关联单号" prop="bizNo">
  63. <a-input id="expenseManagementEdit-bizNo" :maxLength="30" v-model.trim="form.bizNo" placeholder="请输入关联单号(最多30个字符)" allowClear />
  64. </a-form-model-item>
  65. <a-form-model-item label="备注" prop="remark">
  66. <a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remark" placeholder="请输入备注(最多500个字符)" allowClear />
  67. </a-form-model-item>
  68. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  69. <a-button type="primary" @click="handleSubmit" id="expenseManagementEdit-btn-save" style="margin: 0 30px;">保存</a-button>
  70. </a-form-model-item>
  71. </a-form-model>
  72. </a-card>
  73. </a-spin>
  74. </div>
  75. </template>
  76. <script>
  77. import { commonMixin } from '@/utils/mixin'
  78. import { mapActions } from 'vuex'
  79. import { STable, VSelect } from '@/components'
  80. import { settleExpenseSave, findExpenseDetail } from '@/api/settleExpense'
  81. import { costTypeAllQuery } from '@/api/costType'
  82. import settleStyle from '@/views/common/settleStyle'
  83. import settleAccount from '@/views/common/settleAccount'
  84. export default {
  85. name: 'ExpenseManagementEdit',
  86. components: { STable, VSelect, settleStyle, settleAccount },
  87. mixins: [commonMixin],
  88. data () {
  89. return {
  90. spinning: false,
  91. enableFundAccount: false,
  92. formItemLayout: {
  93. labelCol: { span: 4 },
  94. wrapperCol: { span: 16 }
  95. },
  96. costTypeList: [], // 费用类型
  97. form: {
  98. expensesTypeSn1: '', // 费用类型
  99. expensesTypeSn2: '', // 费用类型1
  100. expensesTypeSn3: '', // 费用类型2
  101. costType: [],
  102. settleAmount: '', // 费用金额
  103. settleStyleSn: undefined, // 结算方式
  104. settleStyleName: '', // 结算方式名称
  105. bizNo: '', // 关联单号
  106. remark: '', // 备注
  107. settleAccountSn: undefined
  108. },
  109. rules: {
  110. costType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
  111. settleAmount: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
  112. settleStyleSn: [{ required: true, message: '请选择结算方式', trigger: 'change' }],
  113. settleAccountSn: [{ required: true, message: '请选择结算账户', trigger: 'change' }]
  114. }
  115. }
  116. },
  117. methods: {
  118. ...mapActions(['GetSettleAccountState']),
  119. // 选择结算方式
  120. settleStyleChange (v, name) {
  121. this.form.settleStyleName = name
  122. },
  123. // 递归函数
  124. recursionFun (data) {
  125. if (data) {
  126. data.map((item, index) => {
  127. if (item.children && item.children.length == 0) {
  128. delete item.children
  129. } else {
  130. this.recursionFun(item.children)
  131. }
  132. })
  133. }
  134. },
  135. // 获取费用类型数据
  136. getCostTypeList () {
  137. costTypeAllQuery({}).then(res => {
  138. // 递归去除空children
  139. this.recursionFun(res.data)
  140. this.costTypeList = res.data
  141. })
  142. },
  143. // 费用类型 change
  144. changeCostType (val, opt) {
  145. this.form.expensesTypeSn1 = val[0] ? val[0] : ''
  146. this.form.expensesTypeSn2 = val[1] ? val[1] : ''
  147. this.form.expensesTypeSn3 = val[2] ? val[2] : ''
  148. this.form.expensesTypeName1 = val[0] ? opt[0].name : ''
  149. this.form.expensesTypeName2 = val[1] ? opt[1].name : ''
  150. this.form.expensesTypeName3 = val[2] ? opt[2].name : ''
  151. },
  152. // 详情
  153. getDetail () {
  154. findExpenseDetail({ id: this.$route.params.id }).then(res => {
  155. if (res.status == 200) {
  156. this.form = Object.assign({}, this.form, res.data)
  157. this.form.costType = [this.form.expensesTypeSn1, this.form.expensesTypeSn2, this.form.expensesTypeSn3]
  158. this.$nextTick(() => {
  159. this.$refs.settleAcount.getList()
  160. })
  161. } else {
  162. this.$refs.ruleForm.resetFields()
  163. }
  164. })
  165. },
  166. // 保存
  167. handleSubmit (e) {
  168. e.preventDefault()
  169. const _this = this
  170. this.$refs.ruleForm.validate(valid => {
  171. if (valid) {
  172. if (this.form.settleAmount <= 0) {
  173. this.$message.warning('费用金额必须大于0!')
  174. return
  175. }
  176. const form = JSON.parse(JSON.stringify(_this.form))
  177. if (this.$route.params.id) {
  178. form.id = this.$route.params.id
  179. }
  180. delete form.costType
  181. _this.spinning = true
  182. settleExpenseSave(form).then(res => {
  183. if (res.status == 200) {
  184. _this.$message.success(res.message)
  185. setTimeout(() => {
  186. _this.handleBack()
  187. _this.spinning = false
  188. }, 1000)
  189. } else {
  190. _this.spinning = false
  191. }
  192. })
  193. } else {
  194. return false
  195. }
  196. })
  197. },
  198. // 返回列表
  199. handleBack () {
  200. this.$router.push({ path: '/financialManagement/expenseManagement/list' })
  201. },
  202. pageInit () {
  203. const vm = this
  204. vm.$refs.ruleForm.resetFields()
  205. if (vm.$route.params.id) {
  206. // 编辑页
  207. vm.getDetail()
  208. }
  209. vm.getCostTypeList()
  210. }
  211. },
  212. mounted () {
  213. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  214. this.pageInit()
  215. }
  216. },
  217. activated () {
  218. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  219. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  220. this.pageInit()
  221. }
  222. // 结算账户状态查询
  223. if(this.$hasPermissions('M_fundAccountList') && this.$hasPermissions('B_fundAccountEnable')){
  224. this.GetSettleAccountState().then(res => {
  225. if (res.status == 200) {
  226. this.enableFundAccount = res.data.functionEnableFlag == 1
  227. }
  228. })
  229. }
  230. },
  231. beforeRouteEnter (to, from, next) {
  232. next(vm => {})
  233. }
  234. }
  235. </script>
  236. <style lang="less">
  237. .expenseManagementEdit-wrap {
  238. height: 100%;
  239. >.ant-spin-nested-loading{
  240. height: 100%;
  241. .ant-spin-container{
  242. height: 90%;
  243. }
  244. }
  245. .expenseManagementEdit-back {
  246. margin-bottom: 10px;
  247. }
  248. .expenseManagementEdit-table-page-wrapper{
  249. height: 100%;
  250. }
  251. }
  252. </style>