qimall/addons/ScoreBonus/backend/views/default/user-settle-data.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-export-dialog');
//加载default/component 下的dialog窗口
// ComponentHelper::loadComponentView('component/com-marketing-add', __DIR__);
?>
<style>
    .diy_content_css {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>{{titleText}}</span>
            <div style="float: right; margin: -5px 0;display:flex;">
               
                <com-export-dialog style="float: right;margin-top: -5px" :field_list='export_list' :action_url="export_url" :params="search_data">
                </com-export-dialog>
            </div>
        </div>
        <div class="table-body">
            <!-- <el-form :inline="true" size="small" class="demo-form-inline">
                <el-form-item>
                    <el-input @keyup.enter.native="search" size="small" placeholder="请输入搜索内容" v-model="keyword" clearable @clear="getList">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form> -->
            <div class="input-item">
                <div flex>
                    <div flex="cross:center" class="input-search">
                        <div class="input-item-name">用户id：</div>
                        <div>
                            <el-input placeholder="请输入用户id" v-model="search_data.user_id" size="small"></el-input>
                        </div>
                    </div>
                <div style="margin-left:30px;margin-top: 0px;">
                    <el-button type="primary" size="small" @click="search">搜索</el-button>
                    <el-button type="warning" @click="clereSearch" v-if="search_data.user_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
                </div>
                </div>
            </div>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%" @selection-change="scFormTab" @sort-change="HandleSortChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="用户ID" prop="user_id" align="center" width="100"></el-table-column>
                <el-table-column label="用户" prop="user.nickname" align="center"  ></el-table-column>
                <el-table-column label="结算金额" prop="commission" align="center" sortable="custom"></el-table-column>
                <el-table-column label="个人权重" prop="weight" align="center" sortable="custom"></el-table-column>
                <el-table-column label="结算持有积分" prop="score" align="center" sortable="custom"></el-table-column>
                <el-table-column label="结算周期总积分" prop="total_score" align="center" sortable="custom"></el-table-column>
                <el-table-column label="结算状态" prop="status" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="plain" type="success" v-if="scope.row.status==1">成功</el-tag>
                        <el-tag effect="plain" type="danger" v-if="scope.row.status==0">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="结算周期" prop="bonus_circle" align="center" >
                    <template slot-scope="scope">
                        {{ bonusCircleData[scope.row.bonus_circle] }}
                    </template>
                </el-table-column>
                <el-table-column label="结算时间" width="150" prop="created_at" align="center" sortable="custom">
                    <template slot-scope="scope">
                        {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="状态" prop="status" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="plain" type="success" v-if="scope.row.status==1">启用</el-tag>
                        <el-tag effect="plain" type="danger" v-if="scope.row.status==0">禁用</el-tag>
                        <el-tag effect="plain" type="warning" v-if="scope.row.status==-1">已删除</el-tag>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                        <el-button type="text" @click="handle('delete',scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
    <!-- <create-upload v-if="dialog.createUpload" ref="createUploadDialog" @success="handleSuccess" :apptype="appType"></create-upload> -->
    <exec-log v-if="dialog.execLog" ref="execLogDialog"></exec-log>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                dialog: {
                    execLog: false,
                },
                search_data: {
                    bid: '',
                    user_id: '',
                    orderBy: '',
                    id_arr: '',
                },
                titleText: '测试',
                export_url: 'score-bonus/default/user-settle-data',
                export_list: {},
                datetime: [],
                bonusCircleData:[],
                list: [{
                    title: "测试标题"
                }],
                default_status:{0 : '禁用', 1 : '启用'},
                listLoading: false,
                page: 1,
                pageCount: 0,
                checkedAll: false,
                selFormArr: [],
            };
        },
        computed: {
            // formattedText() {
            //     // 使用正则表达式替换掉\n和\r，并用<br>和<br>标签包裹
            //     return this.open.content.replace(/\n/g, "<br/>").replace(/\r/g, "<br/>");
            // }
        },
        mounted: function() {
            this.getList();
        },
        methods: {
            scFormTab(sel){
                // console.info(sel);
                if(sel.length == this.list.length){
                    this.checkedAll = true;
                }else {
                    this.checkedAll = false;
                }
                this.selFormArr = sel;
                let id_str = '';
                this.selFormArr.forEach(v => {
                    if (this.search_data.id_str === '') {
                        this.search_data.id_str = v.id;
                    } else {
                        this.search_data.id_str = this.search_data.id_str + "," + v.id;
                    }
                })
                // console.log(this.search_data.id_str);
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            // 获取
            getList() {
                let self = this;
                let params = {
                    r: 'score-bonus/default/user-settle-data',
                    page: self.page,
                    bid: getQuery('id'),
                    user_id: self.search_data.user_id,
                    orderBy: self.search_data.orderBy,
                }
                self.listLoading = true;
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        self.search_data.bid = getQuery('id'),
                        self.list = e.data.data.list;
                        self.bonusCircleData = e.data.data.bonus_circle;
                        self.titleText = e.data.data.titleText;
                        self.export_list = e.data.data.export_list;
                        self.pageCount = e.data.data.page_count;
                        // console.log(self.appType);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.listLoading = false;
                });
            },


            seeExecLog(row){
                this.dialog.execLog = true
                this.$nextTick(() => {
                    console.log(this.$refs)
                    this.$refs.execLogDialog.open(row)
                })
            },
            clereSearch() {
                this.search_data.user_id = '';
                // this.search_data.start = '';
                // this.search_data.end = '';
                // this.search_data.operator_name = '';
                // this.search_data.tid = '';
                // this.datetime = [];
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },

            // changeTime(e) {
            //     // console.log(e)
            //     this.search_data.start = e[0]
            //     this.search_data.end = e[1]
            // },

            HandleSortChange({ column, prop, order }){
                console.log(`排序属性: ${prop}, 排序方向: ${order}`);
                let orderBy = '';
                switch (order) {
                    case 'ascending':
                        orderBy = prop + " asc";
                    break;
                
                    case 'descending':
                        orderBy = prop + " desc";
                    break;
                }
                this.search_data.orderBy = orderBy;
                this.getList();
            },
        }
    });
</script>