editModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <template>
  2. <a-modal
  3. centered
  4. class="editTireSetting-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="editTireSettingModal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-form-model-item label="客户名称" v-if="form.defaultFlag==0">
  22. {{ form.dealerName||'--' }}
  23. </a-form-model-item>
  24. <div v-if="pageType==='SERVICE_FEE' || pageType==='SHIPPING_FEE'">
  25. <a-form-model-item label="开始时间">
  26. {{ form.ruleStartDate||'--' }}
  27. </a-form-model-item>
  28. <a-form-model-item :label="pageType==='SERVICE_FEE'?'服务费比例':'运费补贴'" prop="ruleValue1">
  29. <a-input-number
  30. id="editTireSettingModal-ruleValue1"
  31. v-model="form.ruleValue1"
  32. :min="0.01"
  33. style="width:90%;"
  34. :max="pageType==='SERVICE_FEE'?100:99999999"
  35. :precision="2"
  36. :placeholder="'请输入'+(pageType==='SERVICE_FEE'?'服务费比例':'运费补贴')"/>
  37. <span style="margin-left:10px;">{{ pageType==='SERVICE_FEE'?'%':'元' }}</span>
  38. </a-form-model-item>
  39. </div>
  40. <div v-else>
  41. <a-form-model-item label="增量补贴(季度)" prop="ruleTarget1">
  42. <div>
  43. 大于等于<a-input-number
  44. v-model="form.ruleTarget1"
  45. :min="1"
  46. style="width:80px;margin:0 6px;"
  47. :max="99999999"
  48. id="addSubsidyModal-ruleTarget1"
  49. :precision="0"
  50. placeholder="请输入"/>条,每条补贴
  51. <a-input-number
  52. v-model="form.ruleValue1"
  53. :min="0.01"
  54. id="addSubsidyModal-ruleValue1"
  55. style="width:80px;margin:0 6px;"
  56. :max="99999999"
  57. :precision="2"
  58. placeholder="请输入"/>元
  59. </div>
  60. <div>
  61. 大于等于<a-input-number
  62. v-model="form.ruleTarget2"
  63. :min="form.ruleTarget1*1+1"
  64. style="width:80px;margin:0 6px;"
  65. :max="99999999"
  66. id="addSubsidyModal-ruleTarget2"
  67. :precision="0"
  68. placeholder="请输入"/>条,每条补贴
  69. <a-input-number
  70. v-model="form.ruleValue2"
  71. :min="form.ruleValue1*1+0.01"
  72. id="addSubsidyModal-ruleValue2"
  73. style="width:80px;margin:0 6px;"
  74. :max="99999999"
  75. :precision="2"
  76. placeholder="请输入"/>元
  77. </div>
  78. <div>
  79. 大于等于<a-input-number
  80. v-model="form.ruleTarget3"
  81. :min="form.ruleTarget2*1+1"
  82. style="width:80px;margin:0 6px;"
  83. :max="99999999"
  84. id="addSubsidyModal-ruleTarget3"
  85. :precision="0"
  86. placeholder="请输入"/>条,每条补贴
  87. <a-input-number
  88. v-model="form.ruleValue3"
  89. :min="form.ruleValue2*1+0.01"
  90. id="addSubsidyModal-ruleValue3"
  91. style="width:80px;margin:0 6px;"
  92. :max="99999999"
  93. :precision="2"
  94. placeholder="请输入"/>元
  95. </div>
  96. </a-form-model-item>
  97. </div>
  98. </a-form-model>
  99. <div class="btn-cont">
  100. <a-button id="editTireSettingModal-cancel" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  101. <a-button type="primary" id="editTireSettingModal-save" @click="handleSave">保存</a-button>
  102. </div>
  103. </a-spin>
  104. </div>
  105. </a-modal>
  106. </template>
  107. <script>
  108. // 接口
  109. import { editSubsidyRule } from '@/api/subsidyRule'
  110. export default {
  111. name: 'EditTireSettingModal',
  112. props: {
  113. openModal: { // 弹框显示状态
  114. type: Boolean,
  115. default: false
  116. },
  117. pageType: { // 页面类型
  118. type: String,
  119. default: ''
  120. }
  121. },
  122. data () {
  123. return {
  124. isShow: this.openModal, // 是否打开弹框
  125. spinning: false, // 页面加载状态
  126. formItemLayout: {// form表单中label设置
  127. labelCol: { span: 5 },
  128. wrapperCol: { span: 17 }
  129. },
  130. // 提交数据
  131. form: {
  132. ruleSn: undefined,
  133. defaultFlag: 0,
  134. dealerName: undefined,
  135. ruleStartDate: undefined,
  136. ruleTarget1: undefined,
  137. ruleValue1: undefined,
  138. ruleTarget2: undefined,
  139. ruleValue2: undefined,
  140. ruleTarget3: undefined,
  141. ruleValue3: undefined
  142. },
  143. // 必填项判断
  144. rules: {
  145. ruleValue1: [{ required: true, message: '请输入服务费比例', trigger: 'blur' }],
  146. ruleTarget1: [{ required: true, message: '增量补贴不能为空', trigger: 'blur' }]
  147. }
  148. }
  149. },
  150. methods: {
  151. // 保存
  152. handleSave () {
  153. const _this = this
  154. this.$refs.ruleForm.validate(valid => {
  155. if (valid) {
  156. // 为空判断
  157. if (_this.pageType === 'SUBSIDY_QUARTER_FEE' || _this.pageType === 'SUBSIDY_YEAR_FEE') {
  158. const newForm = JSON.parse(JSON.stringify(_this.form))
  159. delete newForm.ruleSn
  160. delete newForm.defaultFlag
  161. delete newForm.dealerName
  162. delete newForm.ruleStartDate
  163. const flag = _this.isValid(newForm)
  164. if (!flag) {
  165. _this.$message.error('季度增量补贴【条数】与【补贴】不能为空!')
  166. return
  167. }
  168. }
  169. _this.form.ruleType = _this.pageType
  170. _this.spinning = true
  171. editSubsidyRule(this.form).then(res => {
  172. if (res.status == 200) {
  173. if (!res.data) {
  174. _this.isShow = false
  175. _this.$message.success(res.message)
  176. _this.$emit('ok')
  177. } else {
  178. _this.openTip(res.data)
  179. }
  180. }
  181. _this.spinning = false
  182. })
  183. } else {
  184. console.log('error submit!!')
  185. return false
  186. }
  187. })
  188. },
  189. // 为空判断
  190. isValid (obj) {
  191. // 检查阶梯1是否有值
  192. const hasStep1 = obj.ruleTarget1 && obj.ruleValue1
  193. // 检查阶梯2是否有值
  194. const hasStep2 = obj.ruleTarget2 && obj.ruleValue2
  195. // 检查阶梯3是否有值
  196. const hasStep3 = obj.ruleTarget3 && obj.ruleValue3
  197. // 情况1: 阶梯1必须有值
  198. if (!hasStep1) {
  199. return false
  200. }
  201. // 情况2: 如果阶梯3有值,阶梯1和阶梯2都不能为空
  202. if (hasStep3 && (!hasStep1 || !hasStep2)) {
  203. return false
  204. }
  205. // 如果以上条件都满足,返回true
  206. return true
  207. },
  208. // 错误提示语
  209. openTip (code) {
  210. const _this = this
  211. this.$info({
  212. title: '提示',
  213. content: '当前规则不可操作,请刷新后重试',
  214. centered: true,
  215. onOk () {
  216. console.log('知道了')
  217. }
  218. })
  219. },
  220. // 重置
  221. resetFormData () {
  222. this.form.defaultFlag = 0
  223. this.form.ruleSn = undefined
  224. this.form.dealerName = undefined
  225. this.form.ruleStartDate = undefined
  226. this.form.ruleTarget1 = undefined
  227. this.form.ruleValue1 = undefined
  228. this.form.ruleTarget2 = undefined
  229. this.form.ruleValue2 = undefined
  230. this.form.ruleTarget3 = undefined
  231. this.form.ruleValue3 = undefined
  232. this.$refs.ruleForm.resetFields()
  233. },
  234. // 获取编辑数据
  235. getFormData (getData) {
  236. this.form = getData
  237. }
  238. },
  239. watch: {
  240. // 父页面传过来的弹框状态
  241. openModal (newValue, oldValue) {
  242. this.isShow = newValue
  243. },
  244. // 重定义的弹框状态
  245. isShow (newValue, oldValue) {
  246. if (!newValue) {
  247. this.$emit('close')
  248. this.resetFormData()
  249. }
  250. }
  251. }
  252. }
  253. </script>
  254. <style lang="less">
  255. .editTireSetting-modal{
  256. .ant-modal-body {
  257. padding: 40px 40px 24px;
  258. }
  259. .btn-cont {
  260. text-align: center;
  261. margin: 35px 0 30px;
  262. }
  263. }
  264. </style>