时间范围选择使用elementui

guanqb

2024-02-03 d9ef892521354b966d382219b9e18d11144bce2b

时间范围选择使用elementui

 src/views/publicSecurity/ninePlaceManage/archivesManage.vue

@@ -78,7 +78,7 @@
                    prop: "townStreetName",
                    align: 'center',
                    search: true,
                    searchSpan: 4,
                    searchSpan: 3,
                    searchLabelWidth: 46,
                    labelWidth: 120,
                    width: 156
@@ -87,8 +87,8 @@
                    prop: "placeName",
                    align: 'center',
                    search: true,
                    searchSpan: 4,
                    searchLabelWidth: 96,
                    searchSpan: 3,
                    // searchLabelWidth: 96,
                    width: 156
                }, {
                    label: "场所地址",
@@ -106,15 +106,15 @@
                    },
                    type: 'select',
                    search: true,
                    searchSpan: 4,
                    searchLabelWidth: 96
                    searchSpan: 3,
                    // searchLabelWidth: 96
                }, {
                    label: "场所负责人",
                    prop: "principal",
                    align: 'center',
                    search: true,
                    searchSpan: 4,
                    searchLabelWidth: 106,
                    searchLabelWidth: 96,
                    width: 110
                }, {
                    label: "身份证信息",
@@ -134,7 +134,7 @@
                    align: 'center',
                    search: true,
                    searchSpan: 4,
                    searchLabelWidth: 106
                    searchLabelWidth: 96
                }, {
                    label: "责任民警",
                    prop: "policeName",

 src/views/publicSecurity/ninePlaceManage/hiddenDangerStatistics.vue

@@ -1,10 +1,28 @@
<template>
    <basic-container>
        <div class="search-box">
            <div class="date-box">
                <div class="name">检查时间:</div>
                <el-date-picker v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <div class="btn-box">
                <el-button type="primary" icon="el-icon-search" @click="searchChange">搜索</el-button>
                <el-button icon="el-icon-delete" @click="searchReset">清空</el-button>
                <!-- <el-button type="primary" icon="el-icon-download" @click="exportAvue">导出</el-button> -->
            </div>
        </div>

        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
            v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave"
            :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="warning" size="small" plain icon="el-icon-download" @click="exportAvue">导出
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>
@@ -29,7 +47,7 @@
                currentPage: 1,
                total: 0,
            },
            datetime: "",
            dateTime: "",
            selectionList: [],
            option: {
                height: "auto",
@@ -44,7 +62,7 @@
                editBtn: false,
                delBtn: false,
                addBtn: false,
                excelBtn: true,
                excelBtn: false,
                columnBtn: false,
                refreshBtn: false,
                dialogClickModal: false,
@@ -135,19 +153,24 @@
                        prop: "count",
                        align: 'center',
                    },
                    {
                        label: "检查时间",
                        prop: "daterange",
                        type: "daterange",
                        format: 'yyyy-MM-DD',
                        valueFormat: 'yyyy-MM-DD',
                        startPlaceholder: '日期开始范围自定义',
                        endPlaceholder: '日期结束范围自定义',
                        hide: true,
                        search: true,
                        searchSpan: 6,
                        searchRange: true,
                    }],
                    // {
                    //     label: "检查时间",
                    //     prop: "dateTime",
                    //     type: "daterange",
                    //     format: 'yyyy-MM-DD',
                    //     valueFormat: 'yyyy-MM-DD',
                    //     isAdmin: true,//自定义属性
                    //     startPlaceholder: '日期开始范围',
                    //     endPlaceholder: '日期结束范围',
                    //     hide: true,
                    //     addDisplay: false,
                    //     editDisplay: false,
                    //     viewDisplay: false,
                    //     search: true,
                    //     searchSpan: 6,
                    //     searchRange: true,
                    // }
                ],
            },
            data: []
        }
@@ -173,7 +196,15 @@

    },

    created () {
        this.dateTime = this.getLastMouth()
    },

    methods: {
        exportAvue () {
            this.$refs.crud.rowExcel()
        },

        getLastMouth (str = '-') {
            let today = new Date()
            let lastMouth = new Date()
@@ -193,8 +224,7 @@
            if (mDay.length <= 1) mDay = "0" + mDay
            let todayDate = oYear + str + oMoth + str + oDay
            let lastMouthDate = mYear + str + mMoth + str + mDay
            console.log('[todayDate, lastMouthDate]', [todayDate, lastMouthDate])
            return [todayDate, lastMouthDate]
            return [lastMouthDate, todayDate]
        },

        rowSave (row, done, loading) {
@@ -295,19 +325,17 @@

        searchReset () {
            this.query = {}
            this.dateTime = []
            this.onLoad()
        },

        searchChange (params, done) {
            console.log('searchChange', params)

            this.query = params.daterange ? {
                startTime: params.daterange[0],
                endTime: params.daterange[1],
        searchChange (params) {
            this.query = this.dateTime ? {
                startTime: this.dateTime[0],
                endTime: this.dateTime[1],
            } : {}
            this.page.currentPage = 1
            this.onLoad()
            done()
        },

        selectionChange (list) {
@@ -397,6 +425,8 @@
                data.forEach(item => {
                    // 统计总数
                    item.count = 0
                    // 检查时间
                    item.dateTime = ''

                    item.nineTypeStatistics.forEach(element => {
                        item.count += Number(element.number)
@@ -457,4 +487,40 @@
.avue-upload__icon {
    line-height: 6;
}

.search-box {
    display: flex;
    margin-bottom: 20px;

    .date-box {
        display: flex;

        .name {
            margin-right: 10px;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        :deep(.el-input__inner) {
            height: 32px;
        }

        :deep(.el-date-editor .el-range__icon),
        :deep(.el-date-editor .el-range__close-icon) {
            line-height: 26px;
        }
    }


    .btn-box {
        margin-left: 20px;

        :deep(.el-button) {
            width: 76px;
            height: 32px;
            padding: 0;
        }
    }
}
</style>