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

<template>
    <div>
        <div class="divider-container">
            <el-divider style="width: 260px" content-position="left">检测脚本信息</el-divider>
            <!-- <el-divider style="width: 400px" content-position="left">通讯脚本</el-divider> -->
            <el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
        </div>
        <div class="data-check-content">
            <div class="content-tree">
                <Tree :treeData="treeData" @setTab="setTab" />
            </div>

            <div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
                <el-tabs type="border-card" style="height: 100%" v-model="activeName" @tab-change="tabChange">
                    <el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
                        <div v-if="activeName == tab.value">
                            <div class="dialog-footer">
                                <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
                            </div>
                            <div style="display: flex">
                                <!-- 通信脚本 -->
                                <el-tabs type="border-card" v-model="firstName" style="height: 100%">
                                    <el-tab-pane label="通讯脚本" name="first">
                                        <Commun
                                            :activeName="activeName"
                                            :formContent="props.formContent"
                                            :options="props.options"
                                            style="width: 360px"
                                            :disabled="tab.children.length == 0 ? false : true"
                                            ref="communRef"
                                        />
                                    </el-tab-pane>
                                </el-tabs>
                                <!-- 2级tab -->
                                <el-tabs
                                    type="border-card"
                                    style="flex: 1; margin-left: 10px"
                                    v-model="childActiveName"
                                    @tab-change="inquireTable"
                                >
                                    <el-tab-pane
                                        v-for="subTab in tab.children || []"
                                        :key="subTab.value"
                                        :label="subTab.label"
                                        :name="subTab.value"
                                        style="width: 100%"
                                    >
                                        <el-table
                                            :data="tableData"
                                            :header-cell-style="{
                                                textAlign: 'center',
                                                backgroundColor: '#003078',
                                                color: '#fff'
                                            }"
                                            stripe
                                            :cell-style="{ textAlign: 'center' }"
                                            height="calc(100vh - 480px)"
                                            style="width: 100%"
                                        >
                                            <el-table-column type="index" label="组次" width="60" />
                                            <el-table-column prop="ffreq" label="频率(Hz)" width="90" />
                                            <el-table-column
                                                :label="item.label"
                                                v-for="item in column"
                                                :key="item.label"
                                            >
                                                <template #default="{ row }">
                                                    <table class="tableL">
                                                        <tbody>
                                                            <tr>
                                                                <td class="theFirst">V</td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num].famp == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num]?.famp +
                                                                              (valueCode == 'Absolute' ? 'V' : '%')
                                                                    }}
                                                                </td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num].fphase == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num].fphase +
                                                                              '°'
                                                                    }}
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="theFirst">I</td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num + 1].famp == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num + 1].famp +
                                                                              (valueCode == 'Absolute' ? 'V' : '%')
                                                                    }}
                                                                </td>
                                                                <td>
                                                                    {{
                                                                        row.channelList[item.num + 1].fphase == null
                                                                            ? '/'
                                                                            : '' +
                                                                              row.channelList[item.num + 1].fphase +
                                                                              '°'
                                                                    }}
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="是否启用" width="85">
                                                <template #default="{ row }">
                                                    <el-switch
                                                        v-model="row.enable"
                                                        :active-value="1"
                                                        :inactive-value="0"
                                                        @change="enableRow(row)"
                                                    >
                                                        <template #active-action>
                                                            <span>√</span>
                                                        </template>
                                                        <template #inactive-action>
                                                            <span>×</span>
                                                        </template>
                                                    </el-switch>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" width="165">
                                                <template #default="{ row }">
                                                    <div class="actionButtons">
                                                        <el-button
                                                            type="primary"
                                                            link
                                                            :icon="CopyDocument"
                                                            @click="copyRow(row)"
                                                        >
                                                            复制
                                                        </el-button>
                                                        <el-button type="primary" link :icon="View" @click="view(row)">
                                                            查看
                                                        </el-button>
                                                        <el-button
                                                            type="primary"
                                                            link
                                                            :icon="EditPen"
                                                            @click="openDialog('edit', row)"
                                                        >
                                                            编辑
                                                        </el-button>

                                                        <el-button
                                                            type="primary"
                                                            link
                                                            :icon="Delete"
                                                            @click="deleteRow(row)"
                                                        >
                                                            删除
                                                        </el-button>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <TestProjectPopup
            ref="testProjectPopupRef"
            :options="props.options"
            :activeName="activeName"
            :childActiveName="childActiveName"
            :formContent="props.formContent"
            :communicationList="communicationList"
            @addTab="addTab"
            @getCommunication="getCommunication"
            @close="showDialog = false"
            v-if="showDialog"
        />
        <!-- 查看 -->
        <ViewRow ref="viewRowRef"  
                :activeName="activeName"
                :formContent="props.formContent"
                @close="viewDialog = false"
                v-if="viewDialog"
                />
    </div>
</template>

<script setup lang="ts">
import { type PropType, ref, nextTick } from 'vue'
import Tree from './tree.vue'
import Commun from './communication.vue'
import type { CascaderOption } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
interface TabOption {
    label?: string
    name?: string
    value?: string
    code?: string
    children?: TabOption[]
}
const communRef = ref()
const treeData = ref<CheckData.TreeItem[]>([])
const valueCode = ref('') //Absolute绝对值
const props = defineProps({
    options: {
        type: Array as PropType<TabOption[]>,
        required: true
    },
    formContent: {
        type: Object,
        required: true
    }
})
const showDialog = ref(false)
const viewDialog = ref(false)
const dictStore = useDictStore()
const activeName = ref('')
const childActiveName = ref('')
const firstName = 'first'
const viewRowRef = ref()
const communicationList = ref([])
const testProjectPopupRef = ref()
const tableData: any = ref([])
const tabData: any = ref([])
const column = ref([
    {
        label: 'L1',
        num: 0
    },
    {
        label: 'L2',
        num: 2
    },
    {
        label: 'L3',
        num: 4
    }
])
// 获取树
const getTree = () => {
    getTreeData({
        scriptId: props.formContent.id
    }).then(res => {
        if (res.code === 'A0000') {
            treeData.value = res.data
            // 添加tab子项
            props.options.forEach((k: any, i: number) => {
                tabData.value[i].children = []
                treeData.value.forEach((item: any) => {
                    if (k.value == item.scriptTypeCode) {
                        item.children.forEach((s: any) => {
                            k.children.forEach((P: any) => {
                                if (P.code == s.scriptTypeCode) {
                                    tabData.value[i].children.push({
                                        label: P.label,
                                        value: P.code,
                                        children: []
                                    })
                                } else {
                                    s.children.forEach((j: any) => {
                                        if (j.scriptTypeCode == P.code) {
                                            tabData.value[i].children.push({
                                                label: P.label,
                                                value: P.code,
                                                children: []
                                            })
                                        }
                                    })
                                }
                            })
                        })
                    }
                })
            })
            tabChange()
        }
    })
}
// 设置树点击tab
const setTab = row => {
    activeName.value = row.activeName
    childActiveName.value = row.childActiveName
    getTree()
}
const copyActiveName = ref('')
// 获取通讯脚本点击
const getCommunication = () => {
    communicationList.value = communRef.value[0]?.getData()
}
// 切换大tab控制小tab
const tabChange = () => {
    if (copyActiveName.value != activeName.value) {
        copyActiveName.value == activeName.value

        if (
            tabData.value
                .filter((item: any) => item.value == activeName.value)[0]
                ?.children.filter((item: any) => item.value == childActiveName.value).length == 0
        ) {
            childActiveName.value =
                tabData.value.filter((item: any) => item.value == activeName.value)[0]?.children[0]?.value || ''
        }
    }
    inquireTable()
}
//根据脚本id查询检测脚本详情
const inquireTable = () => {
    const sortOrder = ['Ua', 'Ia', 'Ub', 'Ib', 'Uc', 'Ic']
    dlsDetails({
        scriptId: props.formContent.id,
        scriptType: activeName.value,
        scriptSubType: childActiveName.value
    }).then((res: any) => {
        if (res.code === 'A0000') {
            res.data.forEach((item: any) => {
                item.channelList = item.channelList.sort((a: any, b: any) => {
                    const indexA = sortOrder.indexOf(a.channelType)
                    const indexB = sortOrder.indexOf(b.channelType)
                    return indexA - indexB
                })
            })

            tableData.value = res.data
        }
    })


}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
    showDialog.value = true
    setTimeout(() => {
        testProjectPopupRef.value?.open(titleType, row)
    }, 0)
}
// 复制
const copyRow = async (row: any) => {
    let checkDataList: any = []
    await communRef.value[0]?.getData().forEach((item: any) => {
        item.children.forEach((k: any) => {
            if (k.enable != 0 || k.errorFlag != 0) {
                checkDataList.push({
                    pid: k.pid,
                    valueType: k.id,
                    dataType: k.dataType,
                    enable: k.enable,
                    errorFlag: k.errorFlag
                })
            }
        })
    })
    let { data } = await scriptDtlsCheckDataList({ checkDataList: checkDataList, ...row, retryCompute: true })
    let copyRow = JSON.parse(JSON.stringify(row))
    delete copyRow.index

    await addScriptDtls({ ...copyRow, scriptType: activeName.value, checkDataList: data }).then(res => {
        if (res.code === 'A0000') {
            ElMessage.success({
                message: '复制成功!',
                type: 'success'
            })
            getTree()
        }
    })
}
// 查看
const view = (row: Partial<TestScript.ResTestScript> = {}) => {
   
    getCommunication()
    //当前点击的一级tab
    const parentTabName = communicationList.value.find(t => t.id === activeName.value)?.name || '未找到对应名称';
    //当前点击的二级tab
    const childrenTabName = ref('')
    tabData.value.forEach((item: any) => {
        if (item.value == activeName.value) {
            item.children.forEach((k: any) => {
                if (k.value == childActiveName.value) {
                    childrenTabName.value = k.label
                }
            })
        }
    })
    viewDialog.value = true
    setTimeout(() => {
        viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
    }, 0)
    
}
// 删除
const deleteRow = async (row: any) => {
    await useHandleData(deleteDtls, { enable: row.enable, index: row.index, scriptId: row.scriptId }, `删除`)
    getTree()
}
// 启用
const enableRow = async (row: any) => {
    ElMessageBox.confirm(`是否${row.enable == 0 ? `禁用` : `启用`}?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true
    })
        .then(async () => {
            updateDtls({ enable: row.enable, index: row.index, scriptId: row.scriptId }).then(res => {
                ElMessage({
                    type: 'success',
                    message: `${row.enable == 0 ? `禁用` : `启用`}成功!`
                })
                getTree()
            })
        })
        .catch(() => {
            row.enable = row.enable == 0 ? 1 : 0
        })
}
// 获取左边树数据
// 新增保存
const addTab = (row: any) => {
    getTree()
}
// 保存通信脚本
const saveTheNewsletter = () => {}
onMounted(() => {
    getTree()
    props.options.forEach((item: any) => {
        tabData.value.push({
            label: item.label.replace(/准确度|检测/g, ''),
            value: item.value,
            code: item.code,
            children: []
        })
    })
    activeName.value = tabData.value[0].value
    valueCode.value = dictStore
        .getDictData('Script_Value_Type')
        .filter(item => item.id == props.formContent.valueType)[0].code
})
</script>
<style lang="scss" scoped>
.data-check-content {
    display: flex;
    gap: 10px;
}

.content-tree {
    width: 260px;
    height: calc(100vh - 315px);
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    // margin-right: 10px;
    overflow: auto; /* 同时启用垂直和水平滚动 */
    overflow-x: hidden;
}
.scriptTree {
    height: calc(100vh - 520px);
}

/* 确保 el-tree 内容可以超出容器宽度 */
.el-tree {
    width: fit-content; /* 根据内容自适应宽度 */
}

.content-right-Tabs {
    flex: 1; /* 根据需要调整宽度比例 */
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.divider-container {
    display: flex;
}

.divider-container .el-divider {
    margin-right: 30px; /* 根据需要调整间距 */
}
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
    padding: 3px 11px;
}
:deep(.el-loading-mask) {
    z-index: 3000;
}
.tableL {
    border-collapse: collapse;
    width: 100%;

    td {
        border: 1px solid #ccc;
        padding: 5px;
        width: 45%;
    }
    .theFirst {
        background-color: #003078;
        color: #fff;
        width: 20px !important;
    }
}
.actionButtons {
    .el-button {
        margin-left: 0px;
        margin: 5px 6px;
    }
}
</style>
<style>
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}
.el-divider--horizontal {
    margin: 4px 0 24px 0;
}
.el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>