scd_tools_ui/src/pages/setting/components/ReportModule.vue

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox">
                <h2>报告模板管理</h2>
            </div>
            <div>
                <div class="moduleBox">
                    <div class="litBox">
                        <el-button type="primary" plain @click="openAdd(0)">
                            <el-icon>
                                <Plus />
                            </el-icon>新建报告模板</el-button>
                    </div>
                    <div class="litBox">
                        <span>模板名称</span>
                        <el-input style="width: 260px;" v-model="moduleName" placeholder="请输入模板名称"></el-input>
                    </div>
                    <div class="litBox">
                        <span>日期范围</span>
                        <el-date-picker v-model="getTime" @change="timeChange" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                            time-format="A hh:mm:ss" />
                    </div>
                    <div class="litBox">
                        <el-button type="primary" plain><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                        <el-button @click="searchReport"><el-icon>
                                <RefreshLeft />
                            </el-icon>重置</el-button>
                    </div>
                </div>
                <div class="tableBox">
                    <el-table ref="multipleTableRef" :data="reportList" style="width: 100%;height: calc(100vh - 240px);"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="编号" width="auto">
                            <template #default="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column property="name" label="模板名称" width="auto" show-overflow-tooltip />
                        <el-table-column property="memo" label="模板描述" width="auto" show-overflow-tooltip />
                        <el-table-column property="ct" label="上传时间" width="auto" show-overflow-tooltip />
                        <el-table-column fixed="right" label="操作" width="180">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="openAdd(1, scope.row)">
                                    <el-icon>
                                        <EditPen />
                                    </el-icon>编辑</el-button>
                                <el-button link type="primary" size="small">
                                    <el-icon>
                                        <Download />
                                    </el-icon>下载</el-button>
                                <el-button style="color: red;" link type="primary" size="small" @click="openDel(scope.row)">
                                    <el-icon style="color: red;">
                                        <Delete />
                                    </el-icon>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="pageBox">
                <Pagination :tLength="totals"></Pagination>
            </div>
            <div class="modalBox">
                <Addrm v-if="addModal" :addModal="addModal" :addOrEdit="addOrEdit" :editRow="editRow" :searchReport="searchReport" @armBack="armBack">
                </Addrm>
                <Delrm v-if="delModal" :delModal="delModal" :delId="delId" :searchReport="searchReport" @delrmBack="delrmBack"></Delrm>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs } from 'vue'
import report from '@/api/report';
import moment from 'moment';
import Addrm from '../modalComp/Addrm.vue'
import Delrm from '../modalComp/Delrm.vue'
import Pagination from './Pagination.vue';
export default {
    setup() {
        let reportList = ref([])//报告模板列表
        let moduleName = ref('')//搜索报告模型
        let getTime = ref("")//选择的时间范围
        let addModal = ref(false)//新增，修改的模态框状态
        let delModal = ref(false)//删除确认模态框状态
        let pages = ref(0)//页数
        let sizes = ref(0)//条数
        let totals = ref(0)//总条数
        let addOrEdit = ref(0)//0为新增，1为修改
        let editRow = ref({})//需要回显的对象
        let delId = ref('')//需要删除的id
        function searchReport() {//查询所有报告模板
            report.getReport({ pageno: 1, pagesize: 20 }).then(res => {
                console.log(res, 'sss');
                reportList.value = res.data
                totals.value = res.count
            })
        }
        function handleSelectionChange(val) {//表格多选事件
            console.log(val, 'val');
        }
        function timeChange(e) {//时间选择器change事件
            let a = moment(e[0]).format("YYYY-MM-DD HH:mm:ss")//开始时间
            let b = moment(e[1]).format("YYYY-MM-DD HH:mm:ss")//结束时间
        }
        function openAdd(num, row) {//打开，新增编辑模态框
            addOrEdit.value = num
            editRow.value = row
            addModal.value = true
        }
        function openDel(row) {
            delModal.value = true
            delId.value = row.id
        }
        function armBack(data) {//新增编辑模态框返回数据
            addModal.value = data
        }
        function delrmBack(data) {
            delModal.value = data
        }
        onMounted(() => {
            searchReport()
        })
        return {
            reportList,//报告模板列表
            searchReport,//查询所有报告模板
            moduleName,//搜索报告模板
            getTime,//时间选择器
            timeChange,//时间选择器change事件
            handleSelectionChange,//表格多选事件
            addModal,//新增，修改的模态框状态
            delModal,//删除确认模态框状态
            pages,
            sizes,
            totals,
            armBack,//新增编辑模态框返回数据
            openAdd,//打开新增编辑模态框
            addOrEdit,//0新增，1修改
            editRow,//需要回显的对象
            openDel,//打开删除模态框
            delId,//需要删除的id
            delrmBack,//delrm.vue返回模态框状态
        }
    },
    components: {
        Addrm,
        Delrm,
        Pagination,
    }
}
</script>

<style scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 15px;
}

.settingBox {
    text-align: center;
}

.moduleBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.litBox {
    margin-right: 5px;
}
</style>