1.0.226 • Published 6 months ago

backoffice-ui v1.0.226

Weekly downloads
-
License
ISC
Repository
-
Last release
6 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

6 months ago

1.0.225

9 months ago

1.0.224

10 months ago

1.0.223

11 months ago

1.0.222

12 months ago

1.0.221

12 months ago

1.0.220

1 year ago

1.0.219

1 year ago

1.0.218

1 year ago

1.0.217

1 year ago

1.0.216

1 year ago

1.0.215

1 year 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

2 years ago

1.0.208

2 years 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

3 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

4 years ago

1.0.108

4 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

4 years ago

1.0.112

4 years ago

1.0.111

4 years ago

1.0.118

3 years ago

1.0.117

3 years ago

1.0.114

4 years ago

1.0.113

4 years ago

1.0.116

3 years ago

1.0.115

4 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