vue-倒计时控件

素颜马尾好姑娘i 2021-09-24 06:18 508阅读 0赞

好久木有来更新了，最近几个月把精力都花费在了加班上~

最近用vue整前端有个倒计时控件的需求，用element-ui满足不了需求，便模仿常见的倒计时效果，写了一个控件，有需要的可以拿走：

<template>
        <div class="main  ml20">
                <el-tabs type="border-card" v-model="editableTabsValue"  @tab-remove="removeTab" >
                <el-tab-pane 
                    v-for="item in editableTabs" 
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                    :closable="item.content =='test'"
                    :class="{bgf0f0f0:item.content=='test'}"
                    >
                    <div v-if="item.content=='test1'" class="mainContent">
                        <div class="mt20">
                            <el-table
                                :data="tableData"
                                style="width: 100%"
                                :header-row-style="{'background':'#FAFAFA'}"
                                :height="height"
                                max-height="500"
                                v-loading="loading"
                                >
                                <el-table-column
                                    label="用户名"
                                    header-align="center"
                                    align="center"
                                    prop="userName">
                                </el-table-column>
                                <el-table-column
                                    label="地址"
                                    header-align="center"
                                    align="center"
                                    prop="address">
                                </el-table-column>
                                <el-table-column
                                    label="状态"
                                    prop="status"
                                    header-align="center"
                                    align="center"
                                    :formatter='convertStatus'>
                                </el-table-column>
                                <el-table-column
                                    label="开始时间"
                                    prop="beginTime"
                                    header-align="center"
                                    align="center"
                                    width="150"
                                    :formatter="formatTime">
                                </el-table-column>
                                <el-table-column
                                    label="结束时间"
                                    prop="endTime"
                                    header-align="center"
                                    align="center"
                                    width="150"
                                    :formatter="formatTime">
                                </el-table-column>
                                <el-table-column label="生成文件" header-align="center" align="center" width="150">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.exportType == 'SENDKEY'&seen">
                                                <el-button
                                                type="text"
                                                @click="sendkey(scope.$index, scope.row)">发送密钥</el-button>
                                            </div>
                                            <div v-else-if="scope.row.exportType == 'SENDKEY'&!seen">
                                                <el-button type="text">{
       {percentage}}s后可重试</el-button>
                                            </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[20, 40, 60, 100]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="pageTotal">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
    
                </el-tab-pane>
            </el-tabs>
        </div>
    </template>
    
    <script>
    export default {
        components:{
            newRequire
        },
        data() {
          return {
            editableTabsValue: '1',
            editableTabs: [{
              title: '测试',
              name: '1',
              content: 'test1'
            }],
            tabIndex: 1,
            taskSelect: "",
            tableData: [],
            multipleSelection: [],
            currentPage: 1,
            pageSize: 20,
            pageTotal: 0,
            seen:true,
            percentage: 60,
            gridData: [],
            loading: false,
            height:utils.tableHeight(240)
          }
        },
        created() {
            this.init();
        },
        methods: {
          init() {
            this.getData();
          },
          sendkey(index, row) {
            this.$axios
                .post("api/getKey ", {
                    "id": row.id,
                })
                .then(res => {
                    if(res.code == 0) {
                        this.isAble = index;
                        this.seen = false;
                        this.decrease();
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
          },
          toggleSelection(rows) {
            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          formatter(row, column) {
            return row.address;
          },
          getData() {
            this.loading = true;
            this.$axios
                .post("api/getData", {
                    pageSize: this.pageSize,
                    pageNum: this.currentPage,
                    "like":{
                        "id": this.id, 
                    }
                })
                .then(res => {
                    this.loading = false;
                    if(res.code == 0) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.totalCount;
                        if (res.data.pageSize > 0) {
                            this.pageSize = res.data.pageSize;
                        }
                        this.currentPage = res.data.pageNum;
                    } else {
                        this.pageSize = 10;
                        this.pageTotal = 0;
                        this.currentPage = 1;
                        this.$message.error(res.message);
                    }
                    
                })
                .catch(function(error) {
                    this.loading = false;
                    console.log(error);
                });
            },
            formatTime(row, column) {
                if (
                    row[column.property] == undefined ||
                    row[column.property] == null ||
                    row[column.property] == ""
                ) {
                    return "";
                }
                const date = new Date(row[column.property]);
                return this.getFormatDate(date);
            },
            getFormatDate(date) {
                    var yy = "";
                if((date.getMonth() + 1) < 10) {
                    yy = "0" + (date.getMonth() + 1);
                } else {
                    yy = date.getMonth() + 1;
                }
                var dd = "";
                if(date.getDate() < 10) {
                    dd = "0" + date.getDate();
                } else {
                    dd = date.getDate();
                }
                var hh = "";
                if(date.getHours() < 10) {
                    hh = "0" + date.getHours();
                } else {
                    hh = date.getHours();
                }
                var mm = "";
                if(date.getMinutes() < 10) {
                    mm = "0" + date.getMinutes();
                } else {
                    mm = date.getMinutes();
                }
                var ss = "";
                if(date.getSeconds() < 10) {
                    ss = "0" + date.getSeconds();
                } else {
                    ss = date.getSeconds();
                }
                return ( 
                    date.getFullYear() +
                    "-" +
                    yy +
                    "-" +
                    dd +
                    " " +
                    hh +
                    ":" +
                    mm +
                    ":" +
                    ss +
                    ""
                );
            },
            decrease() {
                this.percentage = this.percentage - 1;
                if (this.percentage <= 0) {
                this.percentage = 0;
                this.seen = true;
                this.percentage = 60;
                return;
                }
                setTimeout(this.decrease, 1000)
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loading = true;
                this.$axios
                    .post("api/export_task/getTaskExecList", {
                    pageSize: val,
                    pageNum: this.currentPage,
                    "equal": {"status":this.taskSelect},
                    "like":{
                        "userId": this.id, 
                        "taskCode": this.taskCode, 
                        "taskName": this.taskName
                    }
                    })
                    .then(res => {
                        this.loading = false;
                        if(res.code == 0) {
                            this.tableData = res.data.list;
                            this.pageTotal = res.data.totalCount;
                            this.pageSize = res.data.pageSize;
                            if (res.data.pageNum > 0) {
                                this.currentPage = res.data.pageNum;
                            }
                        } else {
                            this.pageSize = 10;
                            this.pageTotal = 0;
                            this.currentPage = 1;
                            this.$message.error(res.message);
                        }
                    })
                    .catch(function(error) {
                        this.loading = false;
                        console.log(error);
                    });
                },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loading = true;
                this.$axios.post("api/export_task/getTaskExecList", {
                    pageSize: this.pageSize,
                    pageNum: val,
                    "equal": {"status":this.taskSelect},
                    "like":{
                        "userId": this.id, 
                        "taskCode": this.taskCode, 
                        "taskName": this.taskName
                    }
                }).then(res => {
                    this.loading = false;
                    if(res.code == 0) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.totalCount;
                        this.pageSize = res.data.pageSize;
                        if (res.data.pageNum > 0) {
                            this.currentPage = res.data.pageNum;
                        }
                    } else {
                        this.pageSize = 10;
                        this.pageTotal = 0;
                        this.currentPage = 1;
                        this.$message.error(res.message);
                    }
                }).catch(function(error) {
                    this.loading = false;
                    console.log(error);
                });
            }
        }
    }
    </script>
    
    <style>
    .tableContent, .queryContent{
        margin-left: 30px;
        margin-right: 30px;
    }
    .tableContent{
        margin-top: 10px;
        height: 900px;
    }
    .block {
      float: right;
      margin-right: 30px;
      margin-top: 10px;
    }
    .browseGridContent {
        width: 600px;
        height: 350px;
    }
    .tds{
        width: 100px;
    }
    .tableContent table th{
        background-color: #FAFAFA;
    }
        .main /deep/ .el-table th, .el-table tr{
            background:none
        }
    </style>