GCLS_Page_Book_Component_NPC/src/views/discountCodeList.vue

<template>
    <div class="discountCodeList">
        <Header/>
        <div class="contentInner">
            <div class="search-form">
                <el-form
                    :inline="true"
                    ref="form"
                    style="margin-left: 10px"
                >
                    <el-form-item>
                        <el-form-item class="label-input" label="优惠码" style="margin-right:30px;">
                            <el-input placeholder="输入生成激活码数量" v-model="discountNumber" type="number" oninput ="value=value.replace(/[^0-9]/g,'')"></el-input>
                        </el-form-item>
                        <el-button @click="onSubmit" size="medium" type="primary" :loading="loading">生成</el-button>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                    <el-form-item class="label-input" label="导出选项：" style="margin-right:30px;">
                        <el-radio v-model="exportRadio" :label="-1">全部</el-radio>
                        <el-radio v-model="exportRadio" :label="1">已使用</el-radio>
                        <el-radio v-model="exportRadio" :label="0">未使用</el-radio>
                    </el-form-item>
                    <el-button @click="onExport" size="medium" type="primary" :loading="exportLoading">导出 excel</el-button>
                </el-form>
            </div>
            <div class="table-box">
                <el-table :data="tableData" style="width: 100%" v-loading="tableloading">
                    <el-table-column class="table-firstC" label="优惠码" prop="discount_code" width="150"></el-table-column>
                    <el-table-column label="状态" prop="is_used" width="150" :formatter="handleStatus"></el-table-column>
                    <el-table-column label="使用者" prop="consumer_name" width="150"></el-table-column>
                    <el-table-column label="使用时间" prop="use_time" width="200"></el-table-column>
                    <el-table-column label="使用者所属机构" prop="consumer_org_name" width="250"></el-table-column>
                    <el-table-column label="创建时间" prop="create_time" width="200"></el-table-column>
                    <el-table-column fixed="right" label="操作" prop width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-pagination
                :current-page="currentPage"
                :page-size="10"
                :page-sizes="[1, 10, 20, 30, 40, 50]"
                :total="courseTotal"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import Header from "@/components/Header";
import { LearnWebSI } from "@/api/ajax";
import { getToken } from '@/utils/auth'
export default {
    name: "courselist",
    components: {
        Header
    },
    data () {
        return {
            bookId: '',
            discountNumber:null, // 生成数量
            loading:false, 
            tableData: [], // 数据内容
            currentPage: 1, // 当前页码
            page_capacity: 10, // 每页条数
            courseTotal: 0, // 数据总条数
            tableloading:true,
            usedStatus:{
                'true':'已使用',
                'false':'未使用'
            },
            exportRadio:-1,
            exportLoading:false,
        }
    },
    created() {
        const _this = this
        _this.bookId = this.$route.query.bookId
        this.getList();
    },
    methods:{
        // 切换每页条数
        handleSizeChange (val) {
            this.currentPage = 1;
            this.page_capacity = val;
            this.getList();
        },
        // 切换页码
        handleCurrentChange (val) {
            this.currentPage = val;
            this.getList();
        },
        // 生成数量
        onSubmit () {
            if(this.discountNumber){
                this.loading = true;
                let MethodName = 'order-discount_manager-BatchCreateDiscountCodeFoGoods'
                let data = {
                    goods_id:this.bookId,
                    goods_type:101,
                    count:Number(this.discountNumber)
                }
                LearnWebSI(MethodName, data)
                .then((res) => {
                    this.$message.success("操作成功");
                    this.discountNumber = null
                    this.loading = false;
                    this.pageIndex = 1
                    this.getList()
                })
                .catch(() => {
                    this.loading = false;
                });
            }else{
                this.$message(
                    {
                        type: "warning",
                        message: "请输入生成激活码数量!",
                    },
                    2000
                );
                return false;
            }
        },
        // 查询数据列表
        getList () {
            let MethodName = "page_query-PageQueryGoodsDiscountCodeList";
            let data = {
                goods_id: this.bookId,
                goods_type: 101,
                page_capacity: this.page_capacity,
                cur_page: this.currentPage,
                use_status:-1
            };
            LearnWebSI(MethodName, data).then(
                (res) => {
                    let _this = this;
                    _this.tableData = res.discount_code_list;
                    _this.courseTotal = res.total_count;
                    _this.tableloading = false;
                }
            );
        },
        // 处理发布状态
        handleStatus (row) {
            if (row) {
                return this.usedStatus[row.is_used];
            }
        },
        // 删除书籍
        handleDel (row) {
            this.$confirm("确定要删除此优惠码吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let MethodName = "order-discount_manager-DeleteGoodsDiscountCode";
                    let data = {
                        goods_id:this.bookId,
                        goods_type:101,
                        discount_code_id: row.id,
                    };
                    LearnWebSI(MethodName, data).then(
                        (res) => {
                            this.currentPage = 1;
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    ).catch(() => {
                    })
                })
                .catch(() => { });
        },
        // 导出
        onExport(){
            this.exportLoading = true
            let userInfor = getToken();
            let UserCode = '',
                UserType = '',
                SessionID = ''
            if (userInfor) {
                let user = JSON.parse(getToken());
                UserCode = user.user_code;
                UserType = user.user_type;
                SessionID = user.session_id;
            }
            let MethodName = "data_export-ExportGoodsDiscountCodeList"
            let data = {
                goods_id: this.bookId,
                goods_type: 101,
                use_status:this.exportRadio
            }
            window.open(process.env.VUE_APP_BASE_API +
                    `/GCLSLearnWebSI/ServiceInterface?MethodName=${MethodName}&UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&Parameter=${encodeURIComponent(JSON.stringify(data))}`) 
            this.exportLoading = false
        }
    }
}
</script>
<style lang="scss" scoped>
.discountCodeList{
    width: 100%;
    background: #f5f5f5;
    .contentInner{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        height: auto;
        padding:30px 0;
    }
    .search-form{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

</style>