qimall/addons/Clockin/backend/views/default/apply.php

<style>
    .dialog-pass-buttons .el-radio.is-bordered+.el-radio.is-bordered {
        margin-left: 0px !important;
        margin-bottom: 10px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>打卡列表</span>
        </div>
        <div class="table-body">
            <el-form ref="form" style="margin-bottom: 10px;" :model="search" label-width="96px" size="mini">
                <el-row :gutter="24">
                    <el-col :span="5" style="padding-left: 0;">
                        <el-form-item label="会员ID">
                            <el-input v-model="search.user_id" placeholder="请输入会员ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="padding-left: 0;">
                        <el-form-item label="会员手机号">
                            <el-input v-model="search.mobile" placeholder="请输入会员手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="padding-left: 0;">
                        <el-form-item label="状态">
                            <el-select v-model="search.is_pass" placeholder="请选择">
                                <el-option label="审核中" value="0">审核中</el-option>
                                <el-option label="通过" value="1">通过</el-option>
                                <el-option label="拒绝" value="-1">拒绝</el-option>
                                <el-option label="撤销" value="-2">撤销</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" size="mini" @click="toSearch" >搜索</el-button>
                        <el-button type="danger" size="mini" @click="resetSearch" >清除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-tabs v-model="activeName">
                <el-table :data="list" stripe border v-loading="loading" size="small" style="margin-bottom: 15px;">
                    <el-table-column prop="user_id" label="会员ID" width="100" align="center"></el-table-column>
                    <el-table-column label="会员信息" width="220" align="left">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000;">{{scope.row.user.nickname}}<br />{{scope.row.user.mobile}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="截图" align="left" min-width="300">
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                                <el-image
                                        v-for="img,k in scope.row.pic"
                                        style="height: 50px; margin-right: 8px; cursor:pointer;"
                                        :src="img"
                                        :key="k"
                                        :preview-src-list="scope.row.pic">
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户备注" prop="remark" align="center">
                        <template slot-scope="scope">
                            <el-popover
                                    v-if="scope.row.remark"
                                    placement="top"
                                    title=""
                                    width="400"
                                    trigger="hover"
                                    :content="scope.row.remark.toString()">
                                <el-button slot="reference" size="small">查看</el-button>
                            </el-popover>
                            <span v-if="!scope.row.remark">--</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="奖励积分"  align="center">
                        <template slot-scope="scope">
                            +{{ scope.row.reward }}积分
                        </template>
                    </el-table-column>

                    <el-table-column label="状态"  align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.is_pass == 0">待审核</el-tag>
                            <el-tag v-if="scope.row.is_pass == 1" type="success">已通过</el-tag>

                            <el-popover
                                    v-if="scope.row.is_pass == -1"
                                    placement="top"
                                    title=""
                                    width="400"
                                    trigger="hover"
                                    :content="scope.row.reason.toString()">
                                <el-tag slot="reference" type="danger">被驳回</el-tag>
                            </el-popover>

                            <el-tag v-if="scope.row.is_pass == -2" type="info">已撤销</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="申请时间"  align="center">
                        <template slot-scope="scope">
                            {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" v-if="scope.row.is_pass == 0" @click="handle('opend_dialog', scope.row)">同意</el-button>
                            <el-button type="text" v-if="scope.row.is_pass == 0" @click="handle('reject', scope.row)">驳回</el-button>
<!--                            <el-button type="text"  @click="handle('destroy',scope.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <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>

    <el-dialog title="审核通过" :visible.sync="dialog">
        <el-form style="margin-bottom: 10px;" label-width="96px" size="mini">
            <el-row :gutter="24">
                <el-col class="dialog-pass-buttons" :span="24" style="padding-left: 0;">
                    <el-form-item label="奖励积分">
                        <el-radio v-model="select_score" v-for="(score, key) in default_score" :key="key" :label="score" border>{{ score }}积分</el-radio>
                    </el-form-item>

                    <el-form-item label="奖励">
                        <el-input placeholder="请输入积分" v-model="select_score" style="width:200px;">
                            <template slot="append">积分</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="">
                        <el-button type="primary" :loading="agreeLoading" size="mini" @click="handle('agree_submit')" >提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

    <!-- 驳回 -->
    <el-dialog title="驳回原因" :visible.sync="rejectDialog">
        <el-form style="margin-bottom: 10px;" label-width="96px" size="mini">
            <el-row :gutter="24">
                <el-col :span="22" style="padding-left: 0;">
                    <el-form-item label="驳回原因">
                        <el-input type="textarea" :rows="5" v-model="rejectData.reason" placeholder="请输入驳回原因" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="">
                        <el-button type="primary" :loading="rejectLoading" size="mini" @click="handle('reject_submit')" >提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeName: '-1',
            loading: false,
            rejectLoading: false,
            helpLoading: false,
            dialog: false,
            rejectDialog: false,
            agreeLoading: false,
            agreeData: {},
            select_score: 0,
            rejectData: {},
            page: 1,
            pageCount: 0,
            default_score: [],
            list: [],
            search: {
                user_id: null,
                mobile: null,
                is_pass: null,
            },
            type: 'able',
        },
        mounted() {
            // 查询当前是审核还是正常页面
            if (getQuery('user_id')) {
                this.search.user_id = getQuery('user_id')
                this.search.is_pass = "1"
            }
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'clockin/default/apply',
                    page:this.page,
                };
                console.log(this.search, 'this.search')
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list.list;
                        this.default_score = e.data.data.config.default_score ?? [0]
                        this.select_score = this.default_score[0]
                        this.pageCount = e.data.data.list.page_count;
                        this.page = e.data.data.list.page;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            //搜索
            toSearch() {
                this.page = 1;
                this.loadData();
            },
            //清空搜索
            resetSearch() {
                this.search = {};
                this.loadData();
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'destroy':
                        params = {id: data.id};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {
                            this.send(params,'clockin/default/apply-del',(resp) => {
                                if (resp.code == 0) this.loadData();
                            }, 'post')
                        })
                        break;
                    case 'pass':
                        params = {id: data.id, is_pass: 1};
                        this.send(params,'clockin/default/apply-pass',(resp) => {
                            if (resp.code == 0) {
                                this.dialog = false;
                                this.loadData();
                            }
                        })
                        break;
                    case 'opend_dialog':
                        this.dialog = true;
                        this.agreeData = data;
                        break;
                    case 'agree_submit':
                        this.agreeLoading = true;
                        params = {id: this.agreeData.id, reward: this.select_score};
                        this.send(params,'clockin/default/apply-agree',(resp) => {
                            this.agreeLoading = false;
                            if (resp.code == 0) {
                                this.agreeLoading = false;
                                this.agreeData = {};// 初始化
                                this.dialog = false;
                                this.loadData();
                            }
                        }, 'post')
                        break;
                    case 'reject':
                        this.rejectDialog = true;
                        this.rejectData = data;
                        break;
                    case 'reject_submit':
                        this.rejectLoading = true;
                        params = {id: this.rejectData.id, reason: this.rejectData.reason};
                        this.send(params,'clockin/default/apply-reject',(resp) => {
                            this.rejectLoading = false;
                            if (resp.code == 0) {
                                this.rejectDialog = false;
                                this.rejectData = {};// 初始化
                                this.loadData();
                            }
                        }, 'post')
                        break;
                }
            },
            send(params,url,callback = null, method = 'get') {
                let self = this;
                let basic_params = {
                    r: url
                };
                let data = method === 'get' ? null : params
                params = method === 'get' ? Object.assign(basic_params, params) : basic_params;
                request({
                    params: params,
                    data: data,
                    method: method
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
        }
    });
</script>