Blame view

src/components/scm/CouponRuleDiv.vue 2.62 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
  <template>
    <el-card class="coupon-rule-div">
      <div class="operation-buttons">
        <el-button type="primary" size="small" @click="openAddModal">{{ $t('common.add') }}</el-button>
        <el-button type="warning" size="small" @click="openEditModal">{{ $t('common.edit') }}</el-button>
        <el-button type="danger" size="small" @click="openDeleteModal">{{ $t('common.delete') }}</el-button>
      </div>
  
      <el-divider></el-divider>
  
      <el-tree :data="couponRules" :props="treeProps" node-key="ruleId" highlight-current @node-click="handleNodeClick"
        class="coupon-rule-tree">
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-card>
  </template>
  
  <script>
  import { listCouponRule } from '@/api/scm/couponRuleApi'
  import { getCommunityId } from '@/api/community/communityApi'
  
  export default {
    name: 'CouponRuleDiv',
    data() {
      return {
        couponRules: [],
        currentRule: {},
        treeProps: {
          label: 'ruleName',
          children: 'children'
        }
      }
    },
    created() {
      this.communityId = getCommunityId()
      this.getList()
    },
    methods: {
      async getList() {
        try {
          const params = {
            page: 1,
            row: 100,
            communityId: this.communityId
          }
          const { data } = await listCouponRule(params)
          this.couponRules = data
          if (this.couponRules.length > 0) {
            this.handleNodeClick(this.couponRules[0])
          }
        } catch (error) {
          console.error('Failed to get coupon rules:', error)
        }
      },
      handleNodeClick(data) {
        this.currentRule = data
        this.$emit('switch', data)
      },
      openAddModal() {
        this.$emit('open-add')
      },
      openEditModal() {
        if (!this.currentRule.ruleId) {
          this.$message.warning(this.$t('couponRule.selectRuleFirst'))
          return
        }
        this.$emit('open-edit', this.currentRule)
      },
      openDeleteModal() {
        if (!this.currentRule.ruleId) {
          this.$message.warning(this.$t('couponRule.selectRuleFirst'))
          return
        }
        this.$emit('open-delete', this.currentRule)
      },
      refreshList() {
        this.getList()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .coupon-rule-div {
    height: 100%;
  
    .operation-buttons {
      margin-bottom: 10px;
  
      .el-button {
        margin-right: 10px;
      }
    }
  
    .coupon-rule-tree {
      height: calc(100% - 60px);
      overflow-y: auto;
  
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    }
  }
  </style>