costAddModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <a-modal
  3. centered
  4. class="costAdd-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="700">
  11. <div>
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="costAddModal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <div class="formList" style="margin-bottom:15px;">
  22. <a-radio-group id="costAddModal-defaultFlag" v-model="form.defaultFlag" @change="defaultChange">
  23. <a-radio :value="0" id="costAddModal-defaultFlag0">
  24. 指定客户
  25. </a-radio>
  26. <a-radio :value="1" id="costAddModal-defaultFlag1">
  27. 默认
  28. </a-radio>
  29. </a-radio-group>
  30. </div>
  31. <a-form-model-item label="客户名称" prop="dealerSn" v-if="form.defaultFlag==0">
  32. <dealerSubareaScopeList style="width:90%;" ref="dealerSubareaScopeList" id="costAddModal-dealerName" @change="custChange" />
  33. </a-form-model-item>
  34. <a-form-model-item :label="pageType==='SERVICE_FEE'?'服务费比例':'运费补贴'" prop="ruleValue1">
  35. <a-input-number
  36. id="costAddModal-ruleValue1"
  37. v-model="form.ruleValue1"
  38. :min="0"
  39. style="width:90%;"
  40. :max="pageType==='SERVICE_FEE'?100:99"
  41. :precision="2"
  42. :placeholder="'请输入'+(pageType==='SERVICE_FEE'?'服务费比例':'运费补贴')"/>
  43. <span style="margin-left:10px;">{{ pageType==='SERVICE_FEE'?'%':'元' }}</span>
  44. </a-form-model-item>
  45. <a-form-model-item label="生效方式" prop="effectType">
  46. <a-radio-group v-model="form.effectType" id="costAddModal-effectType">
  47. <a-radio :value="0" id="costAddModal-effectType0">
  48. 立即生效
  49. </a-radio>
  50. <a-radio :value="1" id="costAddModal-effectType1">
  51. 次月生效
  52. </a-radio>
  53. </a-radio-group>
  54. </a-form-model-item>
  55. <div class="formList formBoxList" v-if="feeDataList&&feeDataList.length>0">
  56. <div v-for="item in feeDataList" :key="item.id">{{ item.effectType==1?'当前':'次月' }}{{ pageType==='SERVICE_FEE'?'服务费比例':'运费补贴' }}:{{ item.ruleValue1 }}{{ pageType==='SERVICE_FEE'?'%':'元' }};</div>
  57. </div>
  58. </a-form-model>
  59. <div class="btn-cont">
  60. <a-button id="costAddModal-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  61. <a-button type="primary" id="costAddModal-save" @click="handleSave">保存</a-button>
  62. </div>
  63. </a-spin>
  64. </div>
  65. </a-modal>
  66. </template>
  67. <script>
  68. // 组件
  69. import { VSelect } from '@/components'
  70. import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
  71. // 接口
  72. import { getSubsidyRuleList, subsidyRuleSave, createSubsidyRule } from '@/api/subsidyRule'
  73. export default {
  74. name: 'CostAddModal',
  75. components: { VSelect, dealerSubareaScopeList },
  76. props: {
  77. openModal: { // 弹框显示状态
  78. type: Boolean,
  79. default: false
  80. },
  81. pageType: { // 页面类型
  82. type: String,
  83. default: ''
  84. }
  85. },
  86. data () {
  87. return {
  88. isShow: this.openModal, // 是否打开弹框
  89. spinning: false, // 页面加载状态
  90. formItemLayout: {// form表单中label设置
  91. labelCol: { span: 4 },
  92. wrapperCol: { span: 17 }
  93. },
  94. // 提交数据
  95. form: {
  96. defaultFlag: 0, // 0指定客户 1默认
  97. dealerSn: undefined, // 客户名称
  98. ruleValue1: undefined, // 服务费比例
  99. ruleType: undefined, // 弹窗类型
  100. effectType: undefined// 生效方式
  101. },
  102. // 必填项判断
  103. rules: {
  104. dealerSn: [{ required: true, message: '请选择客户名称', trigger: 'change' }],
  105. ruleValue1: [{ required: true, message: '请输入服务费比例', trigger: 'blur' }],
  106. effectType: [{ required: true, message: '请选择生效方式', trigger: 'change' }]
  107. },
  108. feeDataList: null // 当月/次月费用数据
  109. }
  110. },
  111. methods: {
  112. // 客户名称 change
  113. custChange (val) {
  114. if (val && val.key) {
  115. this.form.dealerSn = val.key
  116. this.getHistoryData({ dealerSn: val.key, subsidyQueryStatus: 'NOT_FINISH', ruleType: this.pageType })
  117. } else {
  118. this.feeDataList = null
  119. }
  120. },
  121. // 0指定客户 1默认客户 change
  122. defaultChange (e) {
  123. this.form.defaultChange = e.target.value
  124. this.form.dealerSn = undefined
  125. if (e.target.value == '1') {
  126. this.getHistoryData({ defaultFlag: 1, subsidyQueryStatus: 'NOT_FINISH', ruleType: this.pageType })
  127. } else {
  128. this.feeDataList = null
  129. }
  130. },
  131. // 获取当月/次月 历史数据值
  132. getHistoryData (ajaxData) {
  133. this.spinning = true
  134. getSubsidyRuleList(ajaxData).then(res => {
  135. if (res.status == 200) {
  136. this.feeDataList = res.data
  137. } else {
  138. this.feeDataList = null
  139. }
  140. this.spinning = false
  141. })
  142. },
  143. // 保存
  144. handleSave () {
  145. const _this = this
  146. this.$refs.ruleForm.validate(valid => {
  147. if (valid) {
  148. _this.form.ruleType = _this.pageType
  149. _this.spinning = true
  150. subsidyRuleSave(this.form).then(res => {
  151. if (res.status == 200) {
  152. if (!res.data) {
  153. _this.isShow = false
  154. _this.$message.success(res.message)
  155. _this.$emit('ok')
  156. } else {
  157. _this.openTip(res.data)
  158. }
  159. }
  160. _this.spinning = false
  161. }).catch(err => {
  162. _this.spinning = false
  163. })
  164. } else {
  165. console.log('error submit!!')
  166. return false
  167. }
  168. })
  169. },
  170. openTip (code) {
  171. const _this = this
  172. if (code === 'IN_USE') {
  173. this.$confirm({
  174. title: '提示',
  175. content: '将重新生成新的' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例' : '运费补贴') + ',并结束当前' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例。' : '运费补贴。'),
  176. centered: true,
  177. onOk () {
  178. createSubsidyRule(_this.form).then(res => {
  179. if (res.status == 200) {
  180. _this.isShow = false
  181. _this.$message.success(res.message)
  182. _this.$emit('ok')
  183. }
  184. })
  185. }
  186. })
  187. } else {
  188. this.$info({
  189. title: '提示',
  190. content: '已存在【未开始】的' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例' : '运费补贴'),
  191. centered: true,
  192. onOk () {
  193. console.log('知道了')
  194. }
  195. })
  196. }
  197. },
  198. // 重置
  199. resetFormData () {
  200. this.form.defaultFlag = 0
  201. this.form.dealerSn = undefined
  202. this.form.ruleValue1 = undefined
  203. this.form.ruleType = undefined
  204. this.form.effectType = undefined
  205. if (this.form.defaultFlag == 0) {
  206. this.$refs.dealerSubareaScopeList.resetForm()
  207. }
  208. this.feeDataList = null
  209. this.$refs.ruleForm.resetFields()
  210. }
  211. },
  212. watch: {
  213. // 父页面传过来的弹框状态
  214. openModal (newValue, oldValue) {
  215. this.isShow = newValue
  216. },
  217. // 重定义的弹框状态
  218. isShow (newValue, oldValue) {
  219. if (!newValue) {
  220. this.$emit('close')
  221. this.resetFormData()
  222. }
  223. }
  224. }
  225. }
  226. </script>
  227. <style lang="less">
  228. .costAdd-modal{
  229. .formList{
  230. margin-left:42px;
  231. }
  232. .formBoxList{
  233. div{
  234. margin-bottom:5px;
  235. }
  236. }
  237. .ant-modal-body {
  238. padding: 40px 40px 24px;
  239. }
  240. .btn-cont {
  241. text-align: center;
  242. margin: 35px 0 30px;
  243. }
  244. }
  245. </style>