ngds-backend-ele/src/views/finance/recharge.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <div class="filter-box">
                <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
            </div>
            <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
                <!-- <el-table-column fixed type="selection" width="55" v-if="tableHeaders" :selectable="checkSelectable"></el-table-column>-->
                <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
                    <template slot-scope="scope">
                        <template v-if="scope.row[tableHeader.index].other.tag" >
                            <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                        </template>
                        <template v-else>
                            <div v-html="scope.row[tableHeader.index].value"></div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column min-width="150" :label="$t('common.action')"> <!-- 操作 -->
                    <template slot-scope="scope">
                    <el-button type="success" size="small" @click="handleGroupManage(scope.row)" >
                        {{  $t('financial.statusManagement')  }}<!-- 状态管理 -->
                    </el-button>
                </template></el-table-column>
<!--              <el-table-column min-width="150" :label="$t('financial.typeManagement')"> &lt;!&ndash; 操作 &ndash;&gt;-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="success" size="small" @click="handleTypeManagement(scope.row)" >-->
<!--                    {{  $t('financial.typeManagement')  }}&lt;!&ndash; 状态管理 &ndash;&gt;-->
<!--                  </el-button>-->
<!--                </template></el-table-column>-->
                <el-table-column min-width="150" :label="$t('financial.viewVoucher')"><!-- 查看凭证 -->
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="handleInvoiceShow(scope.row)"
                           v-if="scope.row.AUDIT_STATUS!=='0'">{{  $t('financial.viewVoucher')  }}<!-- 查看凭证 -->
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="white-box-footer">
                <el-button type="success" size="small" @click="handleExport"
                     v-show="permission.hasPermission(`finance/recharge-export`)">{{ $t('common.exportExcel') }}
                </el-button>
                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
            </div>
            <el-dialog :title="$t('financial.checkRechargeVoucher')" :visible.sync="dialogInvoiceVisible"> <!-- 查看充值凭证 -->
                <div v-loading="dialogInvoiceLoading">
                    <a :href="invoiceUrl" target="_blank"><img :src="urlimg" alt="" style="max-width: 100%"></a>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogInvoiceVisible = false">{{ $t('common.confirm') }}</el-button> <!-- 确 定 -->
                </div>
            </el-dialog>
          <el-dialog width="30%" :title="$t('financial.typeManagement')" :visible.sync="dialogTypeVisible"> <!-- 查看充值凭证 -->
            <el-form ref="form" :model="form">
              <el-form-item :label="$t('financial.type')" prop="rechargeType">
                <el-select v-model="form.rechargeType" clearable filterable style="width: 100%">
                  <el-option v-for="(item,key) in typeList" :key="key" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="onCancel">{{ $t('table.cancel') }}<!-- 取 消 --></el-button>
              <el-button type="primary" @click.native="handleSave">{{ $t('common.save') }}<!-- 发货 --></el-button>
            </div>
          </el-dialog>
        </div>
    </div>
</template>

<script>
    import tool from '@/utils/tool'
    import FilterUser from '@/components/FilterUser'
    import permission from '@/utils/permission'
    import Pagination from '@/components/Pagination'
    import filterHelper from '@/utils/filterHelper'
    import {rechargeList, rechargeExport, fetchRechargeTypeList, saveRechargeType} from '@/api/finance'

    export default {
        name: 'recharge',
        components: {FilterUser,Pagination},
        mounted () {
            this.getData()
            this.fetchRechargeTypeList()
        },

        data () {
            return {
                tableHeaders: null,
                tableData: null,
                loading: true,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                multipleSelection: [],
                tool: tool,
                permission: permission,
                filterTypes: {},
                filterModel: {},
                value:[],
                selectedIds:'',
                dialogInvoiceVisible: false,
                dialogInvoiceLoading: false,
                dialogTypeVisible: false,
                typeList: [],
                invoiceUrl:'',
                form: {
                  id: null,
                  rechargeType: '',
                },
                urlimg:''
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            handleFilterUser(filterData){
                filterHelper.handleFilterUser(this, filterData)
            },
            handleFilter() {
                this.getData()
            },
            checkSelectable(row) {
                return row.DONT_DEL !== '1'
            },
            getData (page, pageSize) {
                let filterData = this.filterModel
                let vueObj = this
                const paramsData = Object.assign({
                    page: (page === null || page == undefined) ? 1 : page,
                    pageSize: (pageSize === null || pageSize == undefined) ? vueObj.pageSize : pageSize
                }, filterData)
                rechargeList(paramsData).then(response => {
                    vueObj.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
                    vueObj.tableData = response.data.list
                    vueObj.filterTypes = response.data.filterTypes
                    vueObj.currentPage = page
                    vueObj.totalPages = parseInt(response.data.totalPages)
                    vueObj.totalCount = parseInt(response.data.totalCount)
                    vueObj.pageSize = pageSize
                    // vueObj.selectedIds = vueObj.tableData.ID;
                    let settingObj=vueObj.tableData;
                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );
                    this.tableData=settingArr;
                    this.loading = false
                }).catch(err => {
                    this.$message({
                        message: err,
                        type: 'error'
                    })
                    this.loading = false
                })
            },
            handleExport(){
                this.$confirm(this.$t('financial.exportNotice'), this.$t('common.hint'), {
                    confirmButtonText: this.$t('common.confirm'), // 确定
                    cancelButtonText: this.$t('common.cancel'), // 取消
                    type: 'warning'
                }).then(() => {
                    rechargeExport(this.filterModel).then(response => {
                        this.$message({
                                message: response.data,
                                type: 'success'
                        })
                    }).catch(error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        })
                    })
                })
            },
            handleInvoiceShow(row) {
                this.dialogInvoiceLoading = true
                this.uploadId = row.ID
                this.dialogInvoiceVisible = true
                this.dialogInvoiceLoading = false
                this.urlimg = tool.getArImage(row.BANK_PROVE, '/files/');
            },
            fetchRechargeTypeList() {
              fetchRechargeTypeList().then(response => {
                this.typeList = response.data.type
              })
            },
            onCancel() {
              this.dialogTypeVisible = false
              this.$refs['form'].resetFields()
            },
            handleTypeManagement(row) {
              console.log(row)
              this.form.id = row.ID
              this.form.rechargeType = row.TYPE.value
              this.dialogTypeVisible = true
            },
            handleSave() {
              saveRechargeType(this.form).then(response => {
                this.$message({
                  message: response.data,
                  type: 'success'
                })
                this.getData()
              }).finally(() => {
                this.dialogTypeVisible = false
                this.$refs['form'].resetFields()
              })
            },

       /* handlestate(){
            this.$router.push({path: `/finance/recharge-status`})
        },*/

            handleGroupManage(row) {

               /* if (this.multipleSelection.length < 1) {
                    this.$message({
                        message: '请勾选要操作的会员',
                        type: 'warning'
                    })
                    return
                }else{
                    if(this.multipleSelection.length > 1){
                        this.$message({
                            message: '只能选择一个',
                            type: 'warning'
                        })
                        return
                    }
                }*/

                    this.$router.push({
                        path: `/finance/recharge-status`,
                        query: {
                            mallCode: row
                        }
                    })



            },
        },
    }
</script>
<style scoped>
    .table-box .el-form-item__label {
        width: 100px;
        color: #99a9bf;
    }

    .table-box .el-form-item {
        width: 30%;
        margin-right: 0;
        margin-bottom: 0;
    }
    .el-button--small, .el-button--small.is-round {
        padding: 9px 5px;
    }
</style>