1.0.226 • Published 5 months ago

backoffice-ui v1.0.226

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

Element Backoffice-ui

安装

npm i --save backoffice-ui

例子

暂无

变更日志

Detailed changes for each release are documented in the release notes.

国际化

组件内部默认使用英文,若希望使用其他语言,则需要进行多语言设置。以中文为例,在 main.js 中:

import Vue from 'vue'
import BackofficeUI from 'backoffice-ui'
import locale from 'backoffice-ui/BoLocale/lang/zh-CN'

Vue.use(BackofficeUI, { locale })

其他設定同 https://element.eleme.io/#/zh-CN/component/i18n
目前内置了以下语言:

  • 简体中文(zh-CN)
  • 英语(en)

快速开始

Import modules and set up settings in main.js:

import Vue from 'vue'
import BackofficeUI from 'backoffice-ui'

Vue.use(BackofficeUI)

Use this package in a page:

<template>
  <div class="app-container">
    <bo-menu :menus="menus">
      <template #diamonds>
        <diamonds />
      </template>
      <template #log>
        <log />
      </template>
    </bo-menu>
  </div>
</template>

<script>
import diamonds from './diamonds.vue'
import log from './log.vue'

export default {
  components: {
    diamonds,
    log
  },
  data() {
    return {
      menus: [
        {
          index: 'diamonds',
          label: 'Diamonds'
        },
        {
          index: 'log',
          label: 'Log'
        }
      ]
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f2f2f2c7;
}
</style>

And the diamond page

<template>
  <bo-page
    :form-options="formOptions"
    :tabs="tabs"
    :loading.sync="loading"
    @search="searchHandle"
    @excel="excelHandle"
  >
    <template v-slot:consumeTotal="{ row }">
      <span :class="{ red_color: parseInt(row.consume_total) !== parseInt(row.chip_exchange) + parseInt(row.avatar_exchange) + parseInt(row.consume_other) }">{{ row.consume_total }}</span>
    </template>
    <template v-slot:sourceTotal="{ row }">
      <span :class="{ red_color: parseInt(row.source_total) !== parseInt(row.in_app_purchase) + parseInt(row.season_award) + parseInt(row.sent_via_backoffice) + parseInt(row.source_other) }">{{ row.source_total }}</span>
    </template>
  </bo-page>
</template>

<script>
import { getDiamondStats } from '@/api/diamonds'

export default {
  data() {
    return {
      loading: false,
      formOptions: {
        forms: [
          { prop: 'date', label: 'Date:', itemType: 'daterange', dayRange: 1 },
          {
            prop: 'region',
            label: 'Country',
            itemType: 'multSelect',
            options: this.$store.getters.platform
          }
        ],
        autoSearch: true
      },
      tabs: [
        {
          label: 'consumption',
          columns: [
            { prop: 'dataType', label: 'Country' },
            { prop: 'consume_total', label: 'Total', slotName: 'consumeTotal' },
            { prop: 'chip_exchange', label: 'Chip Exchange' },
            { prop: 'avatar_exchange', label: 'Avatar Exchange' },
            { prop: 'consume_other', label: 'Other' }
          ],
          tableOptions: {
            data: []
          }
        },
        {
          label: 'source',
          columns: [
            { prop: 'dataType', label: 'Country' },
            { prop: 'source_total', label: 'Total', slotName: 'sourceTotal' },
            { prop: 'in_app_purchase', label: 'In-app Purchase' },
            { prop: 'season_award', label: 'Season Reward' },
            { prop: 'sent_via_backoffice', label: 'Sent Via Backoffice' },
            { prop: 'source_other', label: 'Other' }
          ],
          tableOptions: {
            data: []
          }
        }
      ]
    }
  },
  methods: {
    searchHandle(filter) {
      getDiamondStats(filter)
        .then((res) => {
          this.tabs[0].tableOptions.data = res.data.consumeList
          this.tabs[1].tableOptions.data = res.data.sourceList
        })
        .catch(() => {
          this.loading = false
        })
    },
    excelHandle(filter) {
      const tabActive = filter.tabActive
      delete filter.tabActive

      getDiamondStats(filter).then((res) => {
        import('@/vendor/Export2Excel').then((excel) => {
          const header =
            tabActive === 1
              ? this.tabs[0].columns.map((item) => item.label)
              : this.tabs[1].columns.map((item) => item.label)
          const filterVal =
            tabActive === 1
              ? this.tabs[0].columns.map((item) => item.prop)
              : this.tabs[1].columns.map((item) => item.prop)
          const data =
            tabActive === 1 ? res.data.consumeList : res.data.sourceList
          excel.export_json_to_excel({
            header,
            filterVal,
            data,
            filename: tabActive === 1 ? this.tabs[0].label : this.tabs[1].label
          })
        })
      })
    }
  }
}
</script>

And the log page

<template>
  <bo-page
    :form-options="formOptions"
    :columns="columns"
    :table-options="tableOptions"
    :loading.sync="loading"
    @search="searchHandle"
    @excel="excelHandle"
  />
</template>

<script>
import { getDiamondLog, getUserNameList } from '@/api/diamonds'

export default {
  data() {
    return {
      loading: false,
      formOptions: {
        forms: [
          { prop: 'date', label: 'Date:', itemType: 'daterange', dayRange: 7 },
          { prop: 'userIDs', label: 'Uid:' }
        ]
      },
      columns: [
        { prop: 'userID', label: 'User ID' },
        { prop: 'nickname', label: 'Nickname' },
        { prop: 'type', label: 'Type' },
        { prop: 'amount', label: 'Amount' },
        { prop: 'balance', label: 'Balance' },
        { prop: 'note', label: 'Note' },
        { prop: 'date', label: 'Date' }
      ],
      tableOptions: {
        data: [],
        paginationTotals: 0
      }
    }
  },
  methods: {
    searchHandle(filter) {
      getDiamondLog(filter).then((res) => {
        this.addNickname(res.data.list, (list) => {
          this.tableOptions.data = list
        })
        this.tableOptions.paginationTotals = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    excelHandle(filter) {
      getDiamondLog(filter).then((res) => {
        import('@/vendor/Export2Excel').then((excel) => {
          const header = this.columns.map((item) => item.label)
          const filterVal = this.columns.map((item) => item.prop)
          excel.export_json_to_excel({
            header,
            filterVal,
            data,
            filename: 'log'
          })
        })
      })
    }
  }
}
</script>
1.0.226

5 months ago

1.0.225

8 months ago

1.0.224

9 months ago

1.0.223

10 months ago

1.0.222

11 months ago

1.0.221

11 months ago

1.0.220

12 months ago

1.0.219

12 months ago

1.0.218

12 months ago

1.0.217

12 months ago

1.0.216

12 months ago

1.0.215

12 months ago

1.0.214

1 year ago

1.0.213

1 year ago

1.0.212

1 year ago

1.0.211

1 year ago

1.0.210

1 year ago

1.0.209

1 year ago

1.0.208

1 year ago

1.0.207

2 years ago

1.0.206

2 years ago

1.0.205

2 years ago

1.0.200

2 years ago

1.0.202

2 years ago

1.0.201

2 years ago

1.0.204

2 years ago

1.0.203

2 years ago

1.0.189

2 years ago

1.0.188

2 years ago

1.0.198

2 years ago

1.0.197

2 years ago

1.0.199

2 years ago

1.0.194

2 years ago

1.0.193

2 years ago

1.0.196

2 years ago

1.0.195

2 years ago

1.0.190

2 years ago

1.0.192

2 years ago

1.0.191

2 years ago

1.0.187

2 years ago

1.0.186

2 years ago

1.0.185

2 years ago

1.0.183

2 years ago

1.0.182

2 years ago

1.0.184

2 years ago

1.0.181

2 years ago

1.0.180

2 years ago

1.0.176

2 years ago

1.0.175

2 years ago

1.0.178

2 years ago

1.0.177

2 years ago

1.0.174

2 years ago

1.0.179

2 years ago

1.0.172

2 years ago

1.0.171

2 years ago

1.0.173

2 years ago

1.0.169

2 years ago

1.0.168

2 years ago

1.0.170

2 years ago

1.0.165

2 years ago

1.0.164

2 years ago

1.0.167

2 years ago

1.0.166

2 years ago

1.0.163

2 years ago

1.0.161

3 years ago

1.0.160

3 years ago

1.0.162

2 years ago

1.0.154

3 years ago

1.0.156

3 years ago

1.0.155

3 years ago

1.0.158

3 years ago

1.0.157

3 years ago

1.0.159

3 years ago

1.0.153

3 years ago

1.0.152

3 years ago

1.0.151

3 years ago

1.0.143

3 years ago

1.0.142

3 years ago

1.0.145

3 years ago

1.0.144

3 years ago

1.0.141

3 years ago

1.0.140

3 years ago

1.0.147

3 years ago

1.0.146

3 years ago

1.0.149

3 years ago

1.0.148

3 years ago

1.0.134

3 years ago

1.0.133

3 years ago

1.0.139

3 years ago

1.0.136

3 years ago

1.0.138

3 years ago

1.0.137

3 years ago

1.0.150

3 years ago

1.0.132

3 years ago

1.0.131

3 years ago

1.0.130

3 years ago

1.0.129

3 years ago

1.0.121

3 years ago

1.0.120

3 years ago

1.0.123

3 years ago

1.0.122

3 years ago

1.0.128

3 years ago

1.0.125

3 years ago

1.0.124

3 years ago

1.0.127

3 years ago

1.0.126

3 years ago

1.0.119

3 years ago

1.0.101

4 years ago

1.0.100

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.109

3 years ago

1.0.108

3 years ago

1.0.103

4 years ago

1.0.102

4 years ago

1.0.105

4 years ago

1.0.104

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.89

4 years ago

1.0.110

3 years ago

1.0.112

3 years ago

1.0.111

3 years ago

1.0.118

3 years ago

1.0.117

3 years ago

1.0.114

3 years ago

1.0.113

3 years ago

1.0.116

3 years ago

1.0.115

3 years ago

1.0.91

4 years ago

1.0.90

4 years ago

1.0.95

4 years ago

1.0.94

4 years ago

1.0.93

4 years ago

1.0.92

4 years ago

1.0.99

4 years ago

1.0.98

4 years ago

1.0.97

4 years ago

1.0.96

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.71

4 years ago

1.0.70

4 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.80

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.63

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.49

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.52

4 years ago

1.0.40

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.33

4 years ago

1.0.34

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.19

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago