添加时间筛选

zhanghua

10 天以前 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/components/Table/index.vue

@@ -1,25 +1,55 @@
<template>
    <div class="Table">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%"
            :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
            :row-class-name="tableRowClassName">
            <el-table-column type="selection" :min-width="5">
            </el-table-column>
            <el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label" :prop="item.prop"
            :min-width="item['min-width'] ? item['item.min-width']:'10'">
                <template slot-scope="scope">
                    <div v-if="item.type === 'text'">
                        {{scope.row[item.prop]}}
                    </div>
                    <div v-else class="operationBox">
                        <div class="divider" v-for="(child,index) in item.children" :key="child.operationName">
                            <span @click="backMykey(scope.$index,child.mykey)">{{child.operationName}}</span>
                            <el-divider direction="vertical" v-if="index !== item.children.length-1"></el-divider>
        <div class="datatable">
            <el-table
                border
                stripe
                ref="multipleTable" :data="tableData" style="width: 100%"
                :header-cell-style="{'background':'#F5F5F5','font-size':'14px','font-weight':'650','line-height':'45px'}"
                :row-class-name="tableRowClassName">
                
                <el-table-column type="selection" min-width="5"> </el-table-column>
                <el-table-column v-for="item in option.group" :key="item.prop" :label="item.label"
                    :prop="item.prop" :min-width="item['min-width'] ? item['item.min-width']:'10'">
                    <template slot-scope="scope">
                        <div v-if="item.type === 'text'">
                            {{scope.row[item.prop]}}
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
                        <slot v-else-if="item.type === 'operation'" name="operation" :info="scope">

                        </slot>
                        <slot name="status" v-else-if="item.type === 'status'" :info="scope">
                        </slot>
                        <slot name='time' v-else-if="item.type === 'time'" :timeobj="scope">

                        </slot>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- tools -->
        <div class="tools" v-if="pageShow">
            <div class="funs">
                <div class="funsItem sp-item">
                    <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                </div>
                <div class="funsItem sp-item">
                    <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
                </div>
                <div class="funsItem">
                    <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="pagination">
                <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="myTotalNum"
                    :page-size="pageSize" @current-change="changeCurrentPage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
@@ -27,22 +57,67 @@
export default {
    data() {
        return {

            myTotalNum: null,
            pageSize: 2,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: null,
            options: [
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    props: {
      getTableList: {
        type: Function,
        default: () => {}
      },
        // 表格数据
        tableData: {
            type: Array,
            dafault: () => [],
        },
        // 表头、prop、类型
        tableOption: {
            type: Object,
            default: () => { }
        },
        openDialog:{
            type:Function,
            default:()=>{()=>{console.log(1)}}
        // 弹窗
        openDialog: {
            type: Function,
            default: () => { }
        },
        // 获取当前页
        getCurrentPage: {
            type: Function,
            default: () => { }
        },
        // 分页总数
        totalNum: {
            type: Number,
            default: 1
        },
        // 是否展示分页
        pageShow:{
            type: Boolean,
            default: false,
        }
    },
    created() {
        this.myTotalNum = JSON.parse(JSON.stringify(this.totalNum));
    },
    computed: {
        option() {
@@ -52,38 +127,115 @@
    methods: {
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
            if ((rowIndex + 1) % 2 === 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
        // 获取点击的关键字
        backMykey(index,value){
            this.$emit('openDialog',{index,mykey:value})
        }
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.$emit('getCurrentPage', page);
        },
        // 全选
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 分页下拉框批量操作
        async selectChange(list) {
            console.log(this.tempList);
            if (this.tempList.length !== 0) {
                if (list === 3) {
                    await this.handleDelete(this.tempList);
                } else if (list === 2) {
                    await this.mulUpdateStatus(this.tempList, 0);
                } else {
                    await this.mulUpdateStatus(this.tempList, 1);
                }
                this.myIdx = null;
            } else {
                this.myIdx = null;
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.Table {
    width: 100%;
    .el-table{
        color: #4b9bb7;
    }
    &::v-deep .warning-row {
        background-color: #06122c;

    .el-table {
        // color: #4b9bb7;
    }

    &::v-deep .success-row {
        background-color: #071f39;
    .tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .funs {
            display: flex;

            .sp-item {
                // border: 1px solid #17324c;
            }

            .funsItem {
                line-height: 28px;
                display: flex;
                align-items: center;
                border-radius: 4px;
                font-size: 12px;
                margin-left: 10px;

                .el-checkbox {
                    width: 80px;
                    padding: 0 10px;
                }

                .el-select {
                    width: 120px;
                }

                &::v-deep .el-input__inner {
                    border: none;
                    // background-color: #09152f;
                }

                &:hover .el-checkbox {
                    color: #4b9bb7;
                }
            }

        }

        .pagination {
            margin-top: 50px;
            display: flex;
            line-height: 50px;
            justify-content: center;
        }
    }
    .operationBox{


    .operationBox {
        display: flex;
    }
    .el-divider{

    .el-divider {
        background-color: #4b9bb7;
    }
}
</style>
</style>