aklast/frontendEle/src/views/finance/recharge.vue

<template>

        <div v-loading="loading">
            <div class="white-box">
                <el-table class="withdraw-table" :data="tableData" stripe style="width: 100%;">

                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            {{tool.formatDate(scope.row.CREATED_AT)}}
                        </template>
                    </el-table-column>

                    <el-table-column label="充值金额" prop="AMOUNT">

                    </el-table-column>

                    <el-table-column label="充值状态名称">
                        <template slot-scope="scope">
                        <el-tag :type="tool.statusType(scope.row.AUDIT_STATUS)">{{scope.row.STATUS_NAME}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="汇款银行" prop="OPEN_BANK_NAME">

                    </el-table-column>

                    <el-table-column label="我的汇款账号" prop="BANK_NO">

                    </el-table-column>

                      <el-table-column label="打印凭证" width="200">
                            <template slot-scope="scope">
                                <el-button type="primary" size="small" @click="handleAddInvoiceShow(scope.row)"
                                           v-if="scope.row.AUDIT_STATUS==='0'" icon="el-icon-upload">上传凭证
                                </el-button>

                                <el-button type="success" size="small" @click="handleInvoiceShow(scope.row)"
                                           v-if="scope.row.AUDIT_STATUS!=='0'" icon="el-icon-view">查看凭证
                                </el-button>
                            </template>
                        </el-table-column>


                </el-table>
                <div class="white-box-footer">
                    <el-button type="primary" size="small" @click="handleAdd">我要充值</el-button>
                    <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
                </div>
                <el-dialog title="上传凭证" :visible.sync="dialogAddInvoiceVisible">
                    <div v-loading="dialogAddInvoiceLoading">
                        <el-alert type="warning" :closable="false">
                            <slot name="title">
                                <pre v-html="message"></pre>
                            </slot>
                        </el-alert>

                        <leo-uploader :requestRoute="'finance/prove-add?id='+auditId" :defaultImageUrl="defaultImageUrl" width="480px" height="320px"
                                      :uploaderSuccessCanChange="false" @on-success="handleSuccess"></leo-uploader>
                    </div>
                </el-dialog>

                <el-dialog title="查看充值凭证" :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">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
</template>

<script>

    import network from '@/utils/network'
    import baseInfo from '@/utils/baseInfo'
    import store from '@/utils/vuexStore'
    import tool from '@/utils/tool'
    import LeoFilter from '@/components/Filter'
    import LeoUploader from '@/components/Uploader'
    import Pagination from '@/components/Pagination'
    export default {
        name: "recharge",
        components: {LeoFilter, LeoUploader,Pagination},
        mounted() {
            this.getData();
        },

        data() {
            return {
                loading: false,
                form:{

                },
                tableData:null,
                list: null,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
                dialogAddInvoiceVisible: false,
                dialogAddInvoiceLoading: false,
                dialogInvoiceVisible: false,
                dialogInvoiceLoading: false,
                defaultImageUrl: null,
                addInvoiceTips: '',
                requestRoute: '',
                uploadId: null,
                invoiceUrl:[],
                auditId: null,
                message:'',
                submitButtonStat: false,
                id:'',
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                file:null,
                urlimg:'',
                postid:''
            }
        },
        methods:{
            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            getData (page, pageSize) {
                network.getPageData(this, '/finance/recharge', page, pageSize, {type: this.type}, function (response) {
                    this.loading = false;
                    this.list = response.list;
                    let settingObj=this.list;
                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );
                    this.tableData=settingArr;

                    console.log(this.tableData)

                });
            },
            handleAdd() {
                this.$router.push({path: `/finance/recharge-add`})
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = tool.getLocaleLink(file.url, '/files/');
                this.dialogVisible = true;
                this.file=file;
                // console.log(file);

            },
            getFile(){
                let data={
                    uploadToken:this.uploadToken,
                    file:this.file,
                    id:this.auditId

                }
                console.log(data)
                if(this.uploadToken){
                    network.postData('finance/prove-add',data)
                        .then(response=>{
                            console.log(response);
                        })
                }
            },
            handleAddInvoiceShow(row) {

                this.dialogAddInvoiceLoading = true
                this.auditId = row.ID
                console.log(this.auditId)
                //this.requestRoute = 'finance/prove-add/' + this.auditId
                this.dialogAddInvoiceVisible = true
                this.loading = false;
                let vueObj = this
                network.getData('finance/prove-add',{id: this.auditId}).then(response => {
                    console.log(response)
                    vueObj.dialogAddInvoiceLoading = false
                    //vueObj.invoiceUrl = response
                    vueObj.uploadToken=response;
                })


            },
            handleSuccess(response, file) {
                this.getData()
                this.$message({
                    message: '上传凭证完成！',
                    type: 'success'
                })
                //this.form.image = imageUrl;
            },
            handleInvoiceShow(row) {
                this.dialogInvoiceLoading = true
                this.uploadId = row.ID
                this.dialogInvoiceVisible = true

                network.getData('finance/recharge', {id: this.uploadId}).then(response => {
                    console.log(response)
                    this.dialogInvoiceLoading = false
                    let invoiceUrl = response.list;
                    console.log(row)
                    this.urlimg=tool.getLocaleLink(row.BANK_PROVE, '/files/');


                })
            },

        }
    }
</script>

<style scoped>

</style>