priceLevelModal.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseType-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑价格级别"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="500px">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 表单 -->
  13. <a-form-model
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="价格级别" prop="priceLevel">
  21. <v-select
  22. code="PRICE_LEVEL"
  23. :notIn="notArr"
  24. id="priceLevel-modal-level"
  25. v-model="form.priceLevel"
  26. allowClear
  27. placeholder="请选择价格级别"></v-select>
  28. </a-form-model-item>
  29. <div class="fontRed">注意:价格变更后,该商户的差价设置将同步清空</div>
  30. </a-form-model>
  31. <div class="btn-cont">
  32. <a-button id="priceLevel-modal-back" @click="isShow = false" >取消</a-button>
  33. <a-button type="primary" style="margin-left: 15px;" id="priceLevel-modal-save" @click="handleSave">确定</a-button>
  34. </div>
  35. </a-spin>
  36. </a-modal>
  37. </template>
  38. <script>
  39. // 组件
  40. import { VSelect } from '@/components'
  41. export default {
  42. name: 'PriceLevelModal',
  43. components: { VSelect },
  44. props: {
  45. openModal: { // 弹框显示状态
  46. type: Boolean,
  47. default: false
  48. },
  49. priceLevelVal: { // 弹框显示状态
  50. type: String,
  51. default: ''
  52. }
  53. },
  54. data () {
  55. return {
  56. spinning: false,
  57. isShow: this.openModal, // 是否打开弹框
  58. // form 表单布局
  59. formItemLayout: {
  60. labelCol: { span: 4 },
  61. wrapperCol: { span: 18 }
  62. },
  63. notArr: [], // 价格级别禁选数据
  64. form: {
  65. priceLevel: undefined // 价格级别
  66. },
  67. // 表单验证规则
  68. rules: {
  69. priceLevel: [
  70. { required: true, message: '请选择价格等级', trigger: 'change' }
  71. ]
  72. }
  73. }
  74. },
  75. methods: {
  76. // 保存
  77. handleSave () {
  78. const _this = this
  79. _this.$refs.ruleForm.validate(valid => {
  80. if (valid) {
  81. _this.$emit('ok', this.form.priceLevel)
  82. _this.isShow = false
  83. } else {
  84. return false
  85. }
  86. })
  87. }
  88. },
  89. watch: {
  90. // 父页面传过来的弹框状态
  91. openModal (newValue, oldValue) {
  92. this.isShow = newValue
  93. },
  94. // 重定义的弹框状态
  95. isShow (newValue, oldValue) {
  96. if (!newValue) {
  97. this.$refs.ruleForm.resetFields()
  98. this.$emit('close')
  99. } else {
  100. // 特约经销商 价格级别不能修改 省、市经销商时,不能选择特约价
  101. if (this.$route.params.dealerLevel === 'SPECIAL') {
  102. this.form.priceLevel = 'SPECIAL'
  103. } else {
  104. this.notArr = ['SPECIAL']
  105. }
  106. this.form.priceLevel = this.priceLevelVal ? this.priceLevelVal : undefined
  107. }
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="less" scoped>
  113. .chooseType-modal{
  114. .fontRed{
  115. margin:15px 0 0 4%;
  116. color:#ed1c24;
  117. }
  118. .ant-modal-body {
  119. padding: 40px 40px 24px;
  120. }
  121. .btn-cont {
  122. text-align: center;
  123. margin: 35px 0 10px;
  124. }
  125. }
  126. </style>