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

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox">
                <h1 style="font-size: 18px;">报告模板管理</h1>
            </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 style="font-size: 14px;margin: 0 10px;">模板名称</span>
                        <el-input style="width: 260px;" v-model="moduleName" placeholder="请输入模板名称"></el-input>
                    </div>
                    <div class="litBox">
                        <span style="font-size: 14px;margin: 0 10px;">状态</span>
                        <el-select v-model="stateValue" @change="stateChange" class="m-2" placeholder="选择状态" size="default"
                            style="width: 240px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <!-- <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 @click="search"><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 - 260px);"
                        @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 property="state" label="状态" width="auto" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ reState(scope.row.state) }}</span>
                            </template>
                        </el-table-column>
                        <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" @click="downFile(scope.row)">
                                    <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 system from '@/api/system';
import moment from 'moment';
import Addrm from '../modalComp/Addrm.vue'
import Delrm from '../modalComp/Delrm.vue'
import Pagination from './Pagination.vue';
import { ElMessage } from 'element-plus';
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
        let options = ref([
            {
                label: "全部",
                value: '',
            },
            {
                label: "启用",
                value: 1,
            },
            {
                label: "禁用",
                value: 2
            }
        ])
        let stateValue = ref("")
        function searchReport() {//查询所有报告模板
            report.getReport({ pageno: 1, pagesize: 20 }).then(res => {
                if (res.data != null && res.code == 0) {
                    reportList.value = res.data
                    totals.value = res.count
                    stateValue.value = ''//清空选择器
                    moduleName.value = ''//清空名称
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        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 search() {
            report.getReport({
                name: moduleName?.value,
                state: stateValue?.value - 0,
            }).then(res => {
                if (res.code == 0 && res.data != null) {
                    reportList.value = res.data
                } else if (res.code == 0 && res.data == null) {
                    console.log('进入了为查询');
                    ElMessage({
                        message: "未查询到数据",
                        type: "info"
                    })
                } else if (res.code == 1) {
                    console.log("进入了错误");
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        // 下载数据
        function downFile(row) {
            system.downLoad({
                ids: row.doc_id - 0
            }).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        message: "正在下载",
                        type: "success",
                        duration: 1000
                    })
                    const la = window.location.hostname
                    let result = la + ':8080' + res.data
                    console.log(result, 'result');
                }
            })
        }
        function stateChange(e) {
            stateValue.value = e
        }
        function reState(num) {
            if (num == 1) {
                return '已启用'
            } else if (num == 2) {
                return '已禁用'
            }
        }
        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返回模态框状态
            search,//查询列表
            options,//选择
            stateValue,//选择状态value
            stateChange,//选择器change事件
            reState,//表格筛选状态
            downFile,//下载报告模板
        }
    },
    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>