edit.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div class="expenseManagementEdit-wrap">
  3. <a-page-header :ghost="false" @back="handleBack" class="expenseManagementEdit-back">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="expenseManagementEdit-back-btn" href="javascript:;" @click="handleBack">返回列表</a>
  7. </template>
  8. </a-page-header>
  9. <a-card :bordered="false" class="expenseManagementEdit-table-page-wrapper">
  10. <a-form-model
  11. id="expenseManagementEdit-form"
  12. ref="ruleForm"
  13. :model="form"
  14. :rules="rules"
  15. :label-col="formItemLayout.labelCol"
  16. :wrapper-col="formItemLayout.wrapperCol" >
  17. <a-form-model-item label="费用类型" prop="distributionType">
  18. <v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择费用类型" ></v-select>
  19. </a-form-model-item>
  20. <a-form-model-item label="费用金额" prop="name">
  21. <a-input-number id="expenseManagementEdit-name" v-model="form.name" :precision="0" :min="0" :max="999999" placeholder="请输入费用金额(0~999999)" allowClear style="width: 90%;" /> 元
  22. </a-form-model-item>
  23. <a-form-model-item label="结算方式" prop="distributionType">
  24. <v-select code="DISPATCH_FASHION" id="expenseManagementEdit-distributionType" v-model="form.distributionType" allowClear placeholder="请选择结算方式" ></v-select>
  25. </a-form-model-item>
  26. <a-form-model-item label="关联单号" prop="mobile">
  27. <a-input id="expenseManagementEdit-mobile" :maxLength="30" v-model="form.mobile" placeholder="请输入关联单号(最多30个字符)" allowClear />
  28. </a-form-model-item>
  29. <a-form-model-item label="备注" prop="remarks">
  30. <a-textarea id="expenseManagementEdit-remarks" :maxLength="500" v-model="form.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
  31. </a-form-model-item>
  32. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  33. <a-button type="primary" @click="handleSave" id="expenseManagementEdit-btn-save" style="padding: 0 60px;margin: 0 30px;">保存</a-button>
  34. <a-button type="danger" @click="handleSubmit" id="expenseManagementEdit-btn-submit" style="padding: 0 60px;margin: 0 30px;">提交</a-button>
  35. </a-form-model-item>
  36. </a-form-model>
  37. </a-card>
  38. </div>
  39. </template>
  40. <script>
  41. import { STable, VSelect } from '@/components'
  42. import { custSave, custFindById } from '@/api/customer'
  43. export default {
  44. name: 'expenseManagementEdit',
  45. components: { STable, VSelect },
  46. data() {
  47. return {
  48. formItemLayout: {
  49. labelCol: { span: 4 },
  50. wrapperCol: { span: 16 }
  51. },
  52. form: {
  53. name: '', // 客户名称
  54. mobile: '', // 联系手机
  55. contact: '', // 联系人
  56. provinceId: undefined, // 省
  57. province: '',
  58. cityId: undefined, // 市
  59. city: '',
  60. areaId: undefined, // 区
  61. area: '',
  62. address: '', // 详细地址
  63. fax: '', // 客户传真
  64. distributionType: '', // 配送方式
  65. remarks: '', // 是否卫星仓客户
  66. custType: undefined, // 客户类型
  67. priceType: '', // 价格类型
  68. payType: '', // 支付方式
  69. paymentType: '', // 收款方式
  70. contactTel: '' // 联系电话
  71. },
  72. rules: {
  73. name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  74. mobile: [{ required: true, message: '请输入联系手机', trigger: 'blur' }],
  75. provinceId: [{ required: true, message: '请选择省', trigger: 'change' }],
  76. cityId: [{ required: true, message: '请选择市', trigger: 'change' }],
  77. areaId: [{ required: true, message: '请选择区/县', trigger: 'change' }],
  78. custType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
  79. priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
  80. payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
  81. paymentType: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
  82. },
  83. }
  84. },
  85. methods: {
  86. // 详情
  87. getDetail() {
  88. // custFindById({ id: this.$route.params.id }).then(res => {
  89. // if (res.status == 200) {
  90. // // this.detailsData = res.data
  91. // } else {
  92. // this.$refs.ruleForm.resetFields()
  93. // }
  94. // })
  95. },
  96. // 保存
  97. handleSubmit(e) {
  98. e.preventDefault()
  99. const _this = this
  100. this.$refs.ruleForm.validate(valid => {
  101. if (valid) {
  102. const form = _this.form
  103. form.id = this.$route.params.id ? this.$route.params.id : null
  104. console.log(form,'-----提交信息')
  105. // custSave(form).then(res => {
  106. // if (res.status == 200) {
  107. // _this.$message.success(res.message)
  108. // setTimeout(() => {
  109. // _this.$router.push({ path: '/financialManagement/expenseManagement/list' })
  110. // }, 1000)
  111. // }
  112. // })
  113. } else {
  114. console.log('error submit!!')
  115. return false
  116. }
  117. })
  118. },
  119. // 提交
  120. handleSave(){},
  121. // 返回列表
  122. handleBack() {
  123. this.$router.push({ path: '/financialManagement/expenseManagement/list' })
  124. },
  125. },
  126. beforeRouteEnter(to, from, next) {
  127. next(vm => {
  128. vm.$refs.ruleForm.resetFields()
  129. if (vm.$route.params.id) {
  130. // 编辑页
  131. vm.getDetail()
  132. }
  133. });
  134. }
  135. };
  136. </script>
  137. <style lang="less">
  138. .expenseManagementEdit-wrap {
  139. .expenseManagementEdit-back {
  140. margin-bottom: 15px;
  141. }
  142. }
  143. </style>