costAddModal.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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.01"
  39. style="width:90%;"
  40. :max="pageType==='SERVICE_FEE'?100:99999999"
  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. if (e.target.value == '1') {
  125. this.getHistoryData({ defaultFlag: 1, subsidyQueryStatus: 'NOT_FINISH', ruleType: this.pageType })
  126. } else {
  127. this.feeDataList = null
  128. }
  129. },
  130. // 获取当月/次月 历史数据值
  131. getHistoryData (ajaxData) {
  132. this.spinning = true
  133. getSubsidyRuleList(ajaxData).then(res => {
  134. if (res.status == 200) {
  135. this.feeDataList = res.data
  136. } else {
  137. this.feeDataList = null
  138. }
  139. this.spinning = false
  140. })
  141. },
  142. // 保存
  143. handleSave () {
  144. const _this = this
  145. this.$refs.ruleForm.validate(valid => {
  146. if (valid) {
  147. _this.form.ruleType = _this.pageType
  148. _this.spinning = true
  149. subsidyRuleSave(this.form).then(res => {
  150. if (res.status == 200) {
  151. if (!res.data) {
  152. this.isShow = false
  153. this.$message.success(res.message)
  154. this.$emit('ok')
  155. } else {
  156. _this.openTip(res.data)
  157. }
  158. }
  159. this.spinning = false
  160. })
  161. } else {
  162. console.log('error submit!!')
  163. return false
  164. }
  165. })
  166. },
  167. openTip (code) {
  168. const _this = this
  169. if (code === 'IN_USE') {
  170. this.$confirm({
  171. title: '提示',
  172. content: '将重新生成新的' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例' : '运费补贴') + ',并结束当前' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例。' : '运费补贴。'),
  173. centered: true,
  174. onOk () {
  175. createSubsidyRule(_this.form).then(res => {
  176. if (res.status == 200) {
  177. _this.isShow = false
  178. _this.$message.success(res.message)
  179. _this.$emit('ok')
  180. }
  181. })
  182. }
  183. })
  184. } else {
  185. this.$confirm({
  186. title: '提示',
  187. content: '已存在【未开始】的' + (_this.pageType === 'SERVICE_FEE' ? '服务费比例' : '运费补贴'),
  188. centered: true,
  189. okText: '知道了',
  190. cancelButtonProps: {
  191. style: {
  192. display: 'none' // 通过设置样式隐藏取消按钮
  193. }
  194. },
  195. onOk () {
  196. console.log('知道了')
  197. }
  198. })
  199. }
  200. },
  201. // 重置
  202. resetFormData () {
  203. this.form.defaultFlag = 0
  204. this.form.dealerSn = undefined
  205. this.form.ruleValue1 = undefined
  206. this.form.ruleType = undefined
  207. this.form.effectType = undefined
  208. if (this.form.defaultFlag == 0) {
  209. this.$refs.dealerSubareaScopeList.resetForm()
  210. }
  211. this.feeDataList = null
  212. this.$refs.ruleForm.resetFields()
  213. }
  214. },
  215. watch: {
  216. // 父页面传过来的弹框状态
  217. openModal (newValue, oldValue) {
  218. this.isShow = newValue
  219. },
  220. // 重定义的弹框状态
  221. isShow (newValue, oldValue) {
  222. if (!newValue) {
  223. this.$emit('close')
  224. this.resetFormData()
  225. }
  226. }
  227. }
  228. }
  229. </script>
  230. <style lang="less">
  231. .costAdd-modal{
  232. .formList{
  233. margin-left:42px;
  234. }
  235. .formBoxList{
  236. div:last-child{
  237. margin-top:10px;
  238. }
  239. }
  240. .ant-modal-body {
  241. padding: 40px 40px 24px;
  242. }
  243. .btn-cont {
  244. text-align: center;
  245. margin: 35px 0 30px;
  246. }
  247. }
  248. </style>