easydo-ops/src/views/dataMock/ugliAi/index.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header addText="数据模拟" @add="mock_add">
            <template #extra-right>
                <el-button v-if="activeName == 'record' || activeName == 'template'" type="primary" @click="table_add">数据录入</el-button>
            </template>
        </sc-page-header>

        <el-tabs v-model="activeName">
            <el-tab-pane v-for="(label, key) in workerStates" :key="key" :label="label" :name="key"></el-tab-pane>
        </el-tabs>

        <component ref="componentRef" :is="allcomp[activeName]" taskType="aihazard" />
	</el-container>

    <mock-detail v-if="dialog" ref="mockRef" @success="refreshState" @closed="dialog = false"></mock-detail>
</template>

<script setup>
import { workerStates } from "./main";
import comp from "./components";
import monos from "@/views/dataMock/tasks/monos";
import mockDetail from "./detail";

const allcomp = { ...comp, monos };
const activeName = ref("record");

const componentRef = ref();
const mockRef = ref();
const dialog = ref(false);

const table_add = () => componentRef.value.table_add();

const mock_add = () => {
    dialog.value = true;
    nextTick(() => mockRef.value?.open());
}

const refreshState = () => {
    if (activeName.value == "monos") setTimeout(() => componentRef.value.refreshTable(), 2000);
    activeName.value = "monos";
}
</script>

<style lang="scss" scoped>
.el-tabs {padding: 0 12px;background: #fff;}
</style>