easydo-ops/src/views/dataMock/carwash/mono/index.vue

<template>
    <el-dialog v-model="visible" title="任务详情" 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> -->
        <scTable :maxHeight="600" :options="options">
            <template #expand_content="{ row }">
                <table-expand :rowData="row.monos"></table-expand>
            </template>
            <template #progress_content="{ row }">
                <el-progress text-inside :stroke-width="16" :status="row.status == '已完成' ? 'success' : row.status == '执行失败' ? 'exception' : ''" :percentage="row.progress" />
            </template>
        </scTable>
    </el-dialog>
</template>

<script setup>
import XEUtils from "xe-utils";
import TOOL from "@/utils/tool";
import { defaultGroups } from "../../main";

import tableExpand from "./tableExpand";

const visible = ref(false);
const open = data => {
    visible.value = true;
    options.data = data ? [XEUtils.first(XEUtils.get(defaultGroups, "groups.000.monos"))] : XEUtils.get(defaultGroups, "groups.000.monos")
}

const options = reactive({
    minHeight: 108,
    data: [],
    formConfig: { enabled: false },
    pagerConfig: { enabled: false },
    columns: [
        { type: "expand", fixed: "left", width: 50, align: "center", slots: { content: "expand_content" } },
        { field: "option", title: "任务类型", minWidth: 100 },
        { field: "createTime", title: "触发时间", minWidth: 160, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue) },
        { field: "status", title: "任务状态", minWidth: 100 },
        { field: "executeTimes", title: "执行次数", minWidth: 80 },
        { field: "progress", title: "执行进度", minWidth: 250, slots: { default: 'progress_content' } },
        { field: "reason", title: "失败原因", minWidth: 160 }
    ]
})

defineExpose({
    open
})
</script>