edit.vue 8.8 KB

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