scd_tools_ui/src/pages/mission/components/HistoryMis.vue

<template>
    <div style="margin-left: 20px;position: relative;">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
            <div style="margin-right: 20px;">
                <span>名称：</span>
                <el-input v-model="names" style="width: 200px;" placeholder="请输入名称"></el-input>
            </div>
            <div style="margin-right: 20px;">
                <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>
                <el-button @click="searchMis" type="primary">查询</el-button>
                <el-button @click="reload">重置</el-button>
            </div>
        </div>
        <div>
            <el-table :data="tableData" style="width: 98%" stripe>
                <el-table-column fixed label="序号" width="150">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="任务名称" width="200" />
                <el-table-column label="状态" width="120">
                    <template #default="scoped">
                        {{ filterState(scoped.row.state) }}
                    </template>
                </el-table-column>
                <el-table-column prop="ct" label="创建时间" width="200" />
                <el-table-column prop="scd_name" label="SCD名称" width="auto" />
                <el-table-column prop="station_name" label="变电站" width="120" />
                <el-table-column prop="username" label="创建人" width="120" />
                <el-table-column prop="voltage_name" label="电压等级" width="120" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scoped">
                        <el-popconfirm title="你确定删除吗？" @confirm="sureDelMis">
                            <template #reference>
                                <el-button link type="primary" size="small" @click="delMis(scoped.row)">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <PageNation :totals="totals" :pageNum="pageNum" :pageSize="pageSize" @pageBack="pageBack"
                style="position: absolute;top: 750px;right: 50px;"></PageNation>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch, toRefs } from 'vue';
import moment from 'moment';
import PageNation from './PageNation.vue';
import task from '@/api/task';
import { ElMessage } from 'element-plus';
export default {
    setup() {
        let tableData = ref([])//表格内容
        let pageNum = ref(1)//页码
        let pageSize = ref(10)//页数
        let totals = ref(0)//总数
        let getTime = ref('')//时间选择器
        let startTime = ref("")//开始时间
        let endTime = ref("")//结束时间
        let names = ref('')//根据名称
        let delId = ref(0)//需要删除的id
        function reload() {
            task.getTask({ pageno: 1, pagesize: 20 }).then(res => {
                tableData.value = res.data
                totals.value = res.count
            })
        }
        function filterState(num) {
            if (num == 0) {
                return "未检测"
            } else if (num == 1) {
                return "检测中"
            } else if (num == 2) {
                return "检测结束"
            } else if (num == 3) {
                return "检测中断"
            }
        }
        function searchMis() {
            task.getTask({
                pageno: 1,
                pagesize: 20,
                name: names.value,
                start_time: startTime.value,
                end_time: endTime.value
            }).then(res => {
                tableData.value = res.data
            })
        }
        function timeChange(e) {
            if (e == null) {
                return
            } else {
                let a = moment(e[0]).format("YYYY-MM-DD")//开始时间
                let b = moment(e[1]).format("YYYY-MM-DD")//结束时间
                startTime.value = a
                endTime.value = b
            }
        }
        function delMis(e) {
            delId.value = e.id
        }
        function sureDelMis() {
            task.delTask({
                id: delId.value - 0
            }).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    })
                    reload()
                }
            })
        }
        function pageBack(data) {
            tableData.value = data
        }
        onMounted(() => {
            reload()
        })
        return {
            reload,//初始化组件
            tableData,//表格数据
            filterState,//筛选状态
            totals,
            pageNum,
            pageSize,
            pageBack,//分页组件返回数据
            getTime,
            names,
            searchMis,//查询按钮
            timeChange,//时间选择器change事件
            startTime,//开始时间
            endTime,//结束时间
            delMis,//删除任务
            sureDelMis,//确认删除
        }
    },
    components: {
        PageNation,
    }
}
</script>

<style lang="scss" scoped></style>