edit.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. <a-select placeholder="请选择结算方式" v-model="form.settleStyleSn" @change="settleStyleChange">
  47. <a-select-option v-for="item in settleStyleList" :key="item.settleStyleSn" :value="item.settleStyleSn">
  48. {{ item.name }}
  49. </a-select-option>
  50. </a-select>
  51. </a-form-model-item>
  52. <a-form-model-item label="关联单号" prop="bizNo">
  53. <a-input id="expenseManagementEdit-bizNo" :maxLength="30" v-model="form.bizNo" placeholder="请输入关联单号(最多30个字符)" allowClear />
  54. </a-form-model-item>
  55. <a-form-model-item label="备注" prop="remark">
  56. <a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remark" placeholder="请输入备注(最多500个字符)" allowClear />
  57. </a-form-model-item>
  58. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  59. <a-button type="primary" size="large" @click="handleSubmit" id="expenseManagementEdit-btn-save" style="margin: 0 30px;">保存</a-button>
  60. </a-form-model-item>
  61. </a-form-model>
  62. </a-card>
  63. </a-spin>
  64. </div>
  65. </template>
  66. <script>
  67. import { STable, VSelect } from '@/components'
  68. import { settleExpenseSave, findExpenseDetail } from '@/api/settleExpense'
  69. import { costTypeAllQuery } from '@/api/costType'
  70. import { settleStyleQueryAll } from '@/api/settleStyle'
  71. export default {
  72. name: 'ExpenseManagementEdit',
  73. components: { STable, VSelect },
  74. data () {
  75. return {
  76. spinning: false,
  77. formItemLayout: {
  78. labelCol: { span: 4 },
  79. wrapperCol: { span: 16 }
  80. },
  81. costTypeList: [], // 费用类型
  82. settleStyleList: [], // 结算方式
  83. form: {
  84. expensesTypeSn1: '', // 费用类型
  85. expensesTypeSn2: '', // 费用类型1
  86. expensesTypeSn3: '', // 费用类型2
  87. costType: [],
  88. settleAmount: '', // 费用金额
  89. settleStyleSn: undefined, // 结算方式
  90. settleStyleName: '', // 结算方式名称
  91. bizNo: '', // 关联单号
  92. remark: '' // 备注
  93. },
  94. rules: {
  95. costType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
  96. settleAmount: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
  97. settleStyleSn: [{ required: true, message: '请选择结算方式', trigger: 'change' }]
  98. }
  99. }
  100. },
  101. methods: {
  102. // 获取结算方式
  103. getSettleStyle () {
  104. settleStyleQueryAll().then(res => {
  105. if (res.status == 200) {
  106. this.settleStyleList = res.data
  107. }
  108. })
  109. },
  110. // 选择结算方式
  111. settleStyleChange (v) {
  112. this.form.settleStyleName = this.settleStyleList.find(item => item.settleStyleSn == v).name
  113. },
  114. // 递归函数
  115. recursionFun (data) {
  116. if (data) {
  117. data.map((item, index) => {
  118. if (item.children && item.children.length == 0) {
  119. delete item.children
  120. } else {
  121. this.recursionFun(item.children)
  122. }
  123. })
  124. }
  125. },
  126. // 获取费用类型数据
  127. getCostTypeList () {
  128. costTypeAllQuery({}).then(res => {
  129. // 递归去除空children
  130. this.recursionFun(res.data)
  131. this.costTypeList = res.data
  132. })
  133. },
  134. // 费用类型 change
  135. changeCostType (val, opt) {
  136. this.form.expensesTypeSn1 = val[0] ? val[0] : ''
  137. this.form.expensesTypeSn2 = val[1] ? val[1] : ''
  138. this.form.expensesTypeSn3 = val[2] ? val[2] : ''
  139. this.form.expensesTypeName1 = val[0] ? opt[0].name : ''
  140. this.form.expensesTypeName2 = val[1] ? opt[1].name : ''
  141. this.form.expensesTypeName3 = val[2] ? opt[2].name : ''
  142. },
  143. // 详情
  144. getDetail () {
  145. findExpenseDetail({ id: this.$route.params.id }).then(res => {
  146. if (res.status == 200) {
  147. this.form = Object.assign({}, this.form, res.data)
  148. this.form.costType = [this.form.expensesTypeSn1, this.form.expensesTypeSn2, this.form.expensesTypeSn3]
  149. } else {
  150. this.$refs.ruleForm.resetFields()
  151. }
  152. })
  153. },
  154. // 保存
  155. handleSubmit (e) {
  156. e.preventDefault()
  157. const _this = this
  158. this.$refs.ruleForm.validate(valid => {
  159. if (valid) {
  160. if (this.form.settleAmount <= 0) {
  161. this.$message.warning('费用金额必须大于0!')
  162. return
  163. }
  164. const form = JSON.parse(JSON.stringify(_this.form))
  165. if (this.$route.params.id) {
  166. form.id = this.$route.params.id
  167. }
  168. delete form.costType
  169. _this.spinning = true
  170. settleExpenseSave(form).then(res => {
  171. if (res.status == 200) {
  172. _this.$message.success(res.message)
  173. setTimeout(() => {
  174. _this.handleBack()
  175. _this.spinning = false
  176. }, 1000)
  177. }else{
  178. _this.spinning = false
  179. }
  180. })
  181. } else {
  182. return false
  183. }
  184. })
  185. },
  186. // 返回列表
  187. handleBack () {
  188. this.$router.push({ name: 'expenseManagementList' })
  189. }
  190. },
  191. beforeRouteEnter (to, from, next) {
  192. next(vm => {
  193. vm.$refs.ruleForm.resetFields()
  194. if (vm.$route.params.id) {
  195. // 编辑页
  196. vm.getDetail()
  197. }
  198. vm.getCostTypeList()
  199. vm.getSettleStyle()
  200. })
  201. }
  202. }
  203. </script>
  204. <style lang="less">
  205. .expenseManagementEdit-wrap {
  206. .expenseManagementEdit-back {
  207. margin-bottom: 15px;
  208. }
  209. }
  210. </style>