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

<template>
	<el-container class="is-vertical">
        <sc-page-header addText="数据模拟" addIcon="majesticons:data-plus-line" @add="mock_add">
            <template #extra-right>
                <el-button type="danger" @click="data_batch_del">
                    <template #icon><sc-iconify icon="ant-design:delete-outlined"></sc-iconify></template>数据删除
                </el-button>
                <el-button v-if="activeName == 'record' || activeName == 'template'" type="primary" @click="table_add">
                    <template #icon><sc-iconify icon="ant-design:cloud-upload-outlined"></sc-iconify></template>数据录入
                </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="envdev" />
	</el-container>

    <mock-detail v-if="dialog.mock" ref="mockRef" @success="refreshState" @closed="dialog.mock = false"></mock-detail>
    <batch-del-detail v-if="dialog.batchDel" ref="batchDelRef" @success="refreshState" @closed="dialog.batchDel = false"></batch-del-detail>
</template>

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

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

const componentRef = ref();
const mockRef = ref();
const batchDelRef = ref();
const dialog = ref({
    mock: false,
    batchDel: false
});

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

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

const data_batch_del = () => {
    dialog.value.batchDel = true;
    nextTick(() => batchDelRef.value?.open());
}

const refreshState = () => activeName.value == "monos" && componentRef.value.refreshTable();
</script>

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