easydo-ops/src/views/passqrcode/device/logDetail.vue

<template>
    <el-dialog v-model="visible" :title="`${formConfig.data.deviceCode} - 上线/离线记录`" width="80%" @closed="$emit('closed')">
        <scTable :apiObj="formConfig.data.deviceCode && $API.passqrcode.online" min-height="108" max-height="600" framework="zeroLite" :formConfig="formConfig" :paramsColums="paramsColums" :columns="columns"></scTable>
    </el-dialog>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import TOOL from "@/utils/tool";
import { deviceRecordStateDic } from "@/utils/basicDic";
import { mapFormItemDatePicker } from "@/components/scTable/helper";

const visible = ref(false);
const open = deviceCode => {
    visible.value = true;
    formConfig.data.deviceCode = deviceCode;
}

const daterangeConfig = reactive({
    span: 9,
    showTitle: false,
    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 formConfig = reactive({
    data: {
        deviceCode: null,
        createTime: [moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), moment().format("YYYY-MM-DD HH:mm:ss")]
    },
    items: [
        mapFormItemDatePicker("createTime", "", daterangeConfig)
    ]
})

const paramsColums = reactive([
    { type: "relation", column: "deviceCode", symbol: "eq" },
    { type: "relation", column: "createTime", symbol: "eqgt", field: "createTime[0]", formatValue: value => moment(value).format("YYYY-MM-DDTHH:mm:ss[Z]") },
    { type: "relation", column: "createTime", symbol: "eqlt", field: "createTime[1]", formatValue: value => moment(value).format("YYYY-MM-DDTHH:mm:ss[Z]") },
    { type: "orderby", column: "createTime", symbol: "desc" }
]);

const columns = reactive([
    { field: "status", title: "上线/离线", minWidth: 100, align: "center", formatter: ({ cellValue }) => XEUtils.get(deviceRecordStateDic, cellValue, cellValue) },
    { field: "createTime", title: "触发时间", minWidth: 160, align: "center", formatter: ({ cellValue }) => TOOL.dateFormat(cellValue) }
])

defineExpose({
    open
})
</script>