discountSortModal.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. title="特价规则优先级"
  5. centered
  6. :maskClosable="false"
  7. width="30%"
  8. :footer="null"
  9. @cancel="cancel"
  10. >
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div style="padding: 0 50px;">
  13. <div style="padding:10px 0;text-align:left;color:red">
  14. 注:优先级默认是先直降再打折
  15. </div>
  16. <div style="padding:10px 0;">
  17. <ul style="padding:0;margin:0;">
  18. <li style="display:flex;justify-content: space-between;padding:5px 3px;border-bottom:1px solid #eee;">
  19. <div style="width:50%;">
  20. 活动简称-规则简称
  21. </div>
  22. <div>优先级</div>
  23. <div style="width:100px;text-align:center;">操作</div>
  24. </li>
  25. <li v-for="(item,rowIndex) in activeSortList" :key="item.id" style="display:flex;justify-content: space-between;padding:5px 3px;">
  26. <div style="width:50%;">
  27. {{ item.promotion.description }}-{{ item.promotionRule.description }}
  28. </div>
  29. <div> {{ item.sort }} </div>
  30. <div style="display:flex;width:100px;justify-content:left;">
  31. <span style="width:50px;color:#ed1c24;text-align:center;cursor:pointer;font-size:12px;" title="上移" @click="sortRow(item,rowIndex,1)">{{ rowIndex != 0 ? '⇡上移' : '' }}</span>
  32. <span style="width:50px;color:#108ee9;text-align:center;cursor:pointer;font-size:12px;" title="下移" @click="sortRow(item,rowIndex,0)">{{ rowIndex != activeList.length - 1 ? '⇣下移' : '' }}</span>
  33. </div>
  34. </li>
  35. </ul>
  36. </div>
  37. </div>
  38. <div style="margin-top:36px;text-align:center;">
  39. <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
  40. <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定</a-button>
  41. </div>
  42. </a-spin>
  43. </a-modal>
  44. </template>
  45. <script>
  46. import { commonMixin } from '@/utils/mixin'
  47. import { salesPromoSaveSort } from '@/api/salesNew'
  48. export default {
  49. name: 'NewPromoModal',
  50. mixins: [commonMixin],
  51. props: {
  52. show: [Boolean],
  53. activeList: [Array],
  54. salesBillSn: [String]
  55. },
  56. data () {
  57. return {
  58. opened: this.show,
  59. spinning: false,
  60. confirmLoading: false,
  61. list: []
  62. }
  63. },
  64. computed: {
  65. activeSortList () {
  66. return this.list.sort((a, b) => {
  67. return a.sort - b.sort
  68. })
  69. }
  70. },
  71. methods: {
  72. // 保存
  73. handleSubmit () {
  74. const _this = this
  75. _this.confirmLoading = true
  76. const data = this.activeSortList.map(item => {
  77. return {
  78. id: item.id,
  79. sort: item.sort
  80. }
  81. })
  82. salesPromoSaveSort(data).then(res => {
  83. if (res.status == 200) {
  84. _this.$emit('ok')
  85. }
  86. _this.confirmLoading = false
  87. })
  88. },
  89. // 排序
  90. sortRow (item, rowIndex, type) {
  91. const temp = this.list[type == 1 ? rowIndex - 1 : rowIndex + 1]
  92. const tempSort = temp.sort
  93. temp.sort = item.sort
  94. item.sort = tempSort
  95. this.list.splice()
  96. },
  97. // 取消
  98. cancel () {
  99. this.opened = false
  100. this.$emit('cancel')
  101. this.$emit('ok')
  102. }
  103. },
  104. watch: {
  105. show (newValue, oldValue) {
  106. this.opened = newValue
  107. if (newValue) {
  108. this.list = this.activeList
  109. }
  110. }
  111. }
  112. }
  113. </script>