qimall/addons/BossAchievement/backend/views/level/index.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-10-20
 * Time: 16:11
 */
?>

<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>股东业绩等级</span>
                <div style="float: right; margin: -5px 10px">
                    <el-button type="primary" @click="$navigate({r: 'boss-achievement/level/condition'})" size="small">升级条件设置</el-button>
                </div>
                <div style="float: right; margin: -5px 0">
                    <el-button type="primary" @click="$navigate({r: 'boss-achievement/level/edit'})" size="small">
                        添加业绩等级
                    </el-button>
                </div>
            </div>
        </div>
        <div class="table-body">
            <div class="input-item">
                <el-input @keyup.enter.native="search" size="small"
                          placeholder="请输入等级名称或等级进行搜索"
                          v-model="keyword"
                          clearable
                          @clear="search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    stripe
                    style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>

                <el-table-column prop="level" label="等级" width="80" align="center">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">等级{{scope.row.level}}</com-ellipsis>
                    </template>
                </el-table-column>

                <el-table-column label="等级名称" align="center">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1">{{scope.row.name}}</com-ellipsis>
                    </template>
                </el-table-column>

                <el-table-column label="达标业绩" align="center">
                    <template slot-scope="scope">
                        ￥{{ scope.row.setting.standard_money || 0 }}
                    </template>
                </el-table-column>

                <el-table-column label="业绩比例" align="center">
                    <template slot-scope="scope">
                        <com-ellipsis :line="1" v-if="scope.row.setting.prize >= 0">{{ scope.row.setting.prize.toString() }}%</com-ellipsis>
                        <template v-else>-</template>
                    </template>
                </el-table-column>

                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="danger">已禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" type="success">启用中</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                        <el-button type="text" @click="handle('destroy',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>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                listLoading: false,
                level: [],
                page: 1,
                pageCount: 0,
                keyword: null,
            };
        },
        mounted: function () {
            this.getList();
        },
        methods: {
            search() {
                this.page = 1;
                this.getList();
            },
            clean() {
                this.page = 1;
                this.keyword = null;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList() {
                let self = this;
                self.listLoading = true;
                let basic_params = {
                    r: 'boss-achievement/level/index',
                    page: self.page,
                    keyword: self.keyword,
                };
                request({
                    params: basic_params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.level = e.data.data.level;
                    self.pageCount = e.data.data.page_count;
                }).catch(e => {
                    console.log(e);
                });
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':// 编辑
                        params = {
                            r: 'boss-achievement/level/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'destroy':
                        params = {id: data.id, status: -1};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.send(params,'boss-achievement/level/handle')})
                        break;
                    case 'change_extra':// 修改额外状态
                        params = {
                            id: data.id,
                            setting: {
                                is_extra: data.setting.is_extra,
                            }
                        };
                        this.send(params,'boss-achievement/level/handle');
                        break;
                }
            },
            send(params,url) {
                let self = this;
                let basic_params = {
                    r: url
                };
                params = Object.assign(basic_params, params);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
        }
    });
</script>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>