pqs-9100_client/frontend/src/views/machine/testScript/components/communication.vue

<template>
    <div>
        <el-table
            :data="tableData"
            :header-cell-style="{
                textAlign: 'center',
                backgroundColor: '#003078',
                color: '#fff'
            }"
            stripe
            height="calc(100vh - 335px)"
            :style="{ overflow: 'hidden' }"
            row-key="id"
            default-expand-all
        >
            <el-table-column prop="name" label="指标" show-overflow-tooltip width="180px" />
            <el-table-column align="center" label="参与误差比较">
                <template #default="{ row }">
                    <el-switch v-model="row.compare" v-if="row.show">
                        <template #active-action>
                            <span>√</span>
                        </template>
                        <template #inactive-action>
                            <span>×</span>
                        </template>
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否启用">
                <template #default="{ row }">
                    <el-switch v-model="row.enable" v-if="row.show">
                        <template #active-action>
                            <span>√</span>
                        </template>
                        <template #inactive-action>
                            <span>×</span>
                        </template>
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { Dict } from '@/api/system/dictionary/interface'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
interface TabOption {
    label: string
    name: string
    children?: TabOption[]
}
const props = defineProps({
    options: {
        type: Array as PropType<TabOption[]>,
        required: true
    }
})
const tableData = ref<any[]>([])
onMounted(async () => {
    let data = await getDictTreeByCode({ code: 'Script_Error' })

    data.data[0].children.forEach((item: any, i: number) => {
        tableData.value.push({
            id: item.id,
            name: item.name,
            show: false,
            children: []
        })
        item.children.forEach((k: any) => {
            tableData.value[i].children.push({
                id: k.id,
                name: k.name,
                show: true,
                compare: false,
                enable: false
            })
        })
    })

    // tableData.value = data.data[0].children || []
})
</script>
<style lang="scss" scoped></style>