Blame view

src/views/scm/couponRuleList.vue 3.37 KB
71def04c   wuxw   优化优惠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
  <template>
    <div class="coupon-rule-container">
      <el-row class="coupon-rule-wrapper">
        <el-col :span="4" class="left-panel">
          <coupon-rule-div ref="couponRuleDiv" @switch="handleSwitchCouponRule" />
        </el-col>
        <el-col :span="20" class="right-panel">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h5>{{ currentCouponRule.ruleName }}</h5>
              <div class="role-context">{{ currentCouponRule.remark }}</div>
            </div>
            <el-divider></el-divider>
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane :label="$t('couponRule.coupon')" name="couponRuleCpps">
                <coupon-rule-cpps v-if="activeTab === 'couponRuleCpps'" :rule-id="currentCouponRule.ruleId" />
              </el-tab-pane>
              <el-tab-pane :label="$t('couponRule.fee')" name="couponRuleFee">
                <coupon-rule-fees v-if="activeTab === 'couponRuleFee'" :rule-id="currentCouponRule.ruleId" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
  
      <add-coupon-rule ref="addCouponRule" @success="handleSuccess" />
      <edit-coupon-rule ref="editCouponRule" @success="handleSuccess" />
      <delete-coupon-rule ref="deleteCouponRule" @success="handleSuccess" />
    </div>
  </template>
  
  <script>
  import CouponRuleDiv from '@/components/scm/CouponRuleDiv'
  import CouponRuleCpps from '@/components/scm/CouponRuleCpps'
  import CouponRuleFees from '@/components/scm/CouponRuleFees'
  import AddCouponRule from '@/components/scm/AddCouponRule'
  import EditCouponRule from '@/components/scm/EditCouponRule'
  import DeleteCouponRule from '@/components/scm/DeleteCouponRule'
  
  export default {
    name: 'CouponRuleList',
    components: {
      CouponRuleDiv,
      CouponRuleCpps,
      CouponRuleFees,
      AddCouponRule,
      EditCouponRule,
      DeleteCouponRule
    },
    data() {
      return {
        activeTab: 'couponRuleCpps',
        currentCouponRule: {
          ruleId: '',
          ruleName: '',
          remark: ''
        }
      }
    },
    methods: {
      handleSwitchCouponRule(rule) {
        this.currentCouponRule = rule
      },
      handleTabClick(tab) {
        this.activeTab = tab.name
      },
      handleSuccess() {
        this.$refs.couponRuleDiv.refreshList()
      },
      openAddModal() {
        this.$refs.addCouponRule.open()
      },
      openEditModal() {
        if (!this.currentCouponRule.ruleId) {
          this.$message.warning(this.$t('couponRule.selectRuleFirst'))
          return
        }
        this.$refs.editCouponRule.open(this.currentCouponRule)
      },
      openDeleteModal() {
        if (!this.currentCouponRule.ruleId) {
          this.$message.warning(this.$t('couponRule.selectRuleFirst'))
          return
        }
        this.$refs.deleteCouponRule.open(this.currentCouponRule)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .coupon-rule-container {
    padding: 20px;
    height: 100%;
    
    .coupon-rule-wrapper {
      height: 100%;
      
      .left-panel {
        padding-right: 10px;
        height: 100%;
      }
      
      .right-panel {
        height: 100%;
        
        .box-card {
          height: 100%;
          
          .clearfix {
            h5 {
              margin: 0;
              font-size: 16px;
              font-weight: bold;
            }
            
            .role-context {
              margin-top: 5px;
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  </style>