easydo-ops/src/views/dataMock/elevator/components/alarm.vue

<template>
    <scTable ref="xGridTable" batchDel :apiObj="$API.elevator.warning" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns">
        <template #action="{ row }">
            <el-button type="primary" link @click="table_del(row)">
                <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>删除
            </el-button>
        </template>
    </scTable>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { mapFormItemSelect, mapFormItemDatePicker } from "@/components/scTable/helper";
import { dataSource, objectToArray } from "@/utils/basicDic";
import { warningTypeDic } from "@/views/dataMock/tower/main";

const proConfig = reactive({
    span: 5,
    storageKey: "PROJECT",
    resetValue: TOOL.data.get("PROJECT_ID"),
    optionProps: { label: "projectName", value: "fpiId" },
    events: {
        change: data => XEUtils.assign(formConfig.data, { ...data, mountedId: null })
    }
})

const mountedConfig = reactive({
    api: {
        key: "elevator.mounted",
        query: {
            projectId: computed(() => formConfig.data.projectId),
            projectIdNot: 1
        }
    },
    slot: {
        style: { float: "right", paddingLeft: "6px", color: "#8492a6" }
    },
    optionProps: { label: "mountedName", value: "id", slot: ({ data }) => XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId === data.projectId), "projectName") },
    events: {
        change: data => XEUtils.assign(formConfig.data, data)
    }
})

const selectConfig = reactive({
    options: objectToArray(XEUtils.omit(warningTypeDic, "WARNING_MANY")),
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

const datetimerangeConfig = reactive({
    span: 7,
    resetValue: () => [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss")],
    props: {
        type: "datetimerange",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        format: "YYYY-MM-DD HH:mm"
    }
})

const toolbarConfig = reactive({
    enabled: true,
    print: false
})

const formConfig = reactive({
    data: {
        orderBy: "ew.createTime_desc",
        projectId: TOOL.data.get("PROJECT_ID"),
        projectIdNot: 1,
        createTime: [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss")]
    },
    items: [
        mapFormItemSelect("projectId", "所属项目", proConfig),
        mapFormItemSelect("mountedId", "设备安装点", mountedConfig),
        mapFormItemDatePicker("createTime", "监测时间", datetimerangeConfig),
        mapFormItemSelect("warningType", "告警类型", selectConfig)
    ]
})

const paramsColums = reactive([
    { column: "orderBy" },
    { column: "projectId" },
    { column: "projectIdNot" },
    { column: "mountedId" },
    { column: "warningType" },
    { column: "er.createTimeBegin", field: "createTime[0]" },
    { column: "er.createTimeEnd", field: "createTime[1]" }
])

const columns = reactive([
    { type: "checkbox", fixed: "left", width: 40 },
    { type: "seq", fixed: "left", width: 60 },
    { type: "html", field: "projectName", title: "项目名称", minWidth: 160, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId == row.projectId), "projectName") },
    { type: "html", field: "groundName", title: "工地场区", minWidth: 160, sortable: true },
    { type: "html", field: "mountedName", title: "设备安装点", minWidth: 160, sortable: true },
    { type: "html", field: "createTime", title: "告警时间", minWidth: 160, sortable: true },
    { type: "html", field: "warningType", title: "告警类型", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(warningTypeDic, cellValue, cellValue) },
    { type: "html", field: "dataSource", title: "数据来源", fixed: "right", minWidth: 100, sortable: true, formatter: ({ cellValue }) => XEUtils.get(dataSource, cellValue, cellValue) },
    { title: "操作", fixed: "right", width: 120, align: "center", slots: { default: "action" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();
const toggleFormEnabled = () => xGridTable.value.toggleFormEnabled();

const refreshTable = () => {
    xGridTable.value.reloadColumn(columns);
    xGridTable.value.searchData();
}

const table_del = ({ id }) => {
    ElMessageBox.confirm("是否确认删除该告警记录?", "删除警告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        API.elevator.warning.del({ id }).then(() => {
            ElMessage.success("操作成功");
            refreshTable();
        });
    });
}
</script>