anti-fake-code/src/views/get/get.vue

<template>
    <div class="app-container">
        <div>
            <el-form :inline="true" :model="formSearch" ref="ruleForm" class="demo-form-inline">
                <el-form-item label="时间:">
                    <el-date-picker
                        v-model="formSearch.time"
                        size="mini"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="取码单号:">
                    <el-input v-model="formSearch.number" size="mini" placeholder="请输入取码单号" clearable maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item class="float-right">
                    <el-button type="danger" size="mini" icon="el-icon-circle-plus-outline" @click="addGetDialog()">创建取码单</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%" header-row-class-name="">
            <el-table-column prop="fetchId" label="取码单号"></el-table-column>
            <el-table-column prop="fetchTime" label="日期"></el-table-column>
            <!-- <el-table-column prop="summary" label="摘要"></el-table-column> -->
            <el-table-column prop="fetchCount" label="取码数"></el-table-column>
            <el-table-column prop="status" label="取码单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" class="color-wait">未生成</span>
                    <span v-else-if="scope.row.status == 1" class="color-send">生成中</span>
                    <span v-else-if="scope.row.status == 2" class="color-success">已生成</span>
                </template>
            </el-table-column>
            <el-table-column prop="fileName" label="防伪码">
                <template slot-scope="scope">
                    <el-button type="text" @click="downLoadFile(scope.row.fetchId)">{{scope.row.fileName}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addGetDialog(scope.row.fetchId,scope.row.fetchTime)">编辑</el-button>
                    <el-button type="text" size="small" @click="confirm(scope.row.fetchId)">生成防伪码印刷文件</el-button>
                    <el-button type="text" size="small" @click="showDetail(scope.row.fetchId)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total,  prev, pager, next, sizes, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="发码" :visible.sync="dialogDownloadVisible" width="500px" :close-on-click-modal='false'>
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="手机号：" :label-width="formLabelWidth" prop="telPhone" ref="telPhone">
                    <el-input v-model.number="form.telPhone" maxlength="11" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="短信验证码：" :label-width="formLabelWidth" prop="vCode">
                    <el-input v-model.number="form.vCode" autocomplete="off"  size="small" style="width:110px;margin-right:5px;"></el-input>
                    <el-button type="danger" style="width:100px;" size="small" @click="getSendMessage" :disabled="sendStatus">{{!sendStatus?'获取验证码':timer+'秒'}}</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="submitForm('form')">保存</el-button>
                <el-button type="info" size="mini" @click="resetForm('form')">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getFetchList,generateFetch,sendMessage,getDownloadUrl
} from "@/api/get"
import {validatePhone} from "@/utils/validate"
export default {
    name: "getGet",
    data() {
        const checkPhoneNum = (rule, value, callback) => {
            if (!validatePhone(value)) {
            return callback(new Error('请输入正确的手机号码'));
            } else {
                callback()
            }
        };
        return {
            BASE_URL:config.API_URL,
            formSearch: {//模糊搜索
                time: '',
                number: '',
            },
            form:{
                telPhone:'',
                vCode:''
            },
            rules: {
                telPhone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {validator:checkPhoneNum,trigger:"blur"}
                ],
                vCode: [
                    { required: true, message: '请输入短信验证码', trigger: 'blur' }
                ]
            },
            currentPage: 1,                      //当前页
            pageSize: 10,                        //每页条数
            total: 0,                            //总条数
            tableData: [],                      //表格数据
            formLabelWidth:'120px',
            dialogDownloadVisible:false,
            sendStatus:false,
            timer:60,
            fetchId:'',
            
        };
    },
    mounted() {
        this.initData()
    },
    methods: {
        //搜索查询
        search() {
            this.currentPage = 1
            this.initData()
        },
        //获取用户列表
        initData() {
            
            const params = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
                discardId: this.formSearch.number|| null,
                startTime:this.formSearch.time?this.formSearch.time[0] : null,
                endTime:this.formSearch.time?this.formSearch.time[1] : null
            }
            getFetchList(params).then(res => {
                this.tableData = res.data.list
                this.total = res.data.count
            })
        },
        downLoadFile(id){
            this.dialogDownloadVisible = true
            this.fetchId = id
        },
        getSendMessage(){
            this.$refs['form'].validateField('telPhone',(valid) => {
                if (valid) {
                    console.log('telPhone error');
                    return false;
                } else {
                    sendMessage({phone:this.form.telPhone+''}).then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.timer = 60
                        this.sendStatus = true
                        var flag = setInterval(() =>{
                            if(this.timer == 0)
                            {
                                clearInterval(flag)
                                this.sendStatus = false
                            } else {
                                this.timer--
                            }
                        },1000)
                    })
                }
            });

        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                const param ={
                    fetch_id:this.fetchId,
                    phone:this.form.telPhone+'',
                    verify_code:this.form.vCode+''
                }
                getDownloadUrl(param).then(res => {
                    window.location.href = this.BASE_URL + res.data
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogDownloadVisible = false
        },
        confirm(id){
            this.$confirm('此操作将生成防伪码印刷文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                generateFetch({fetch_id:id}).then(res => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.initData()
                }).catch(err => {
                    this.$message({
                        message: err.msg,
                        type: err.code == 200 ? 'success' : 'error'
                    });
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
        //防伪取码详情
        showDetail(id) {
            this.$router.push({name:'getGetDetail',query:{id:id}})
        },
        //点击创建取码单
        addGetDialog(ids = null,times = null){
            this.$router.push({name:'addGet',query:{ids:ids,times:times}})
        },
        //每页条数变化
        handleSizeChange(val) {
            this.pageSize = val
            this.initData()
        },
        //当前页变化
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        }

    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.input-with-select {
    float: left;
    top: 10px;
}

.el-input {
    width: 230px;
}
</style>