UPDATE: 替换新增比对检测计划时，可选择的标准设备接口；优化选择被检设备组件

2025-09-04 11:12:29 +08:00
parent 74e015bd12
commit 25f3570c18
3 changed files with 84 additions and 69 deletions
--- a/frontend/src/api/device/standardDevice/index.ts
+++ b/frontend/src/api/device/standardDevice/index.ts
@@ -1,4 +1,4 @@
-import type {StandardDevice} from '@/api/device/interface/standardDevice'
+import type { StandardDevice } from '@/api/device/interface/standardDevice'
 import http from '@/api'

 /**
@@ -30,7 +30,6 @@ export const deletePqStandardDev = (params: string[]) => {
    return http.post(`/pqStandardDev/delete`, params)
 }

-
 //导出标准设备
 export const exportPqStandardDev = (params: StandardDevice.ReqPqStandardDeviceParams) => {
    return http.download(`/pqStandardDev/export`, params)
@@ -49,3 +48,8 @@ export const importPqStandardDev = (params: StandardDevice.ReqPqStandardDevicePa
 export const getAllPqStandardDev = () => {
    return http.get(`/pqStandardDev/getAll`)
 }
+
+//获取可以绑定的标准设备
+export const canBindingList = () => {
+    return http.get(`/pqStandardDev/canBindingList`)
+}
--- a/frontend/src/views/plan/planList/components/devSelect.vue
+++ b/frontend/src/views/plan/planList/components/devSelect.vue
@@ -36,68 +36,73 @@
                        </div>
                    </el-col>
                </el-row>
+                <el-scrollbar ref="scrollbarRef" :height="props.height" style="margin-top: 20px">
+                    <el-tree
+                        ref="treeRef"
+                        show-checkbox
+                        accordion
+                        default-expand-all
+                        :data="treeData"
+                        :default-checked-keys="defaultCheckedKeys"
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        :style="{ padding: '0 25px' }"
+                        @check-change="handleCheckChange"
+                    >
+                        <template #empty>
+                            <el-empty :image-size="80" description="暂无可选设备" />
+                        </template>
+                        <template #default="{ node, data }">
+                            <div v-if="data.id.startsWith('manufacturer')" style="display: flex; align-items: center">
+                                <el-icon><OfficeBuilding /></el-icon>
+                                <span style="margin-left: 4px">{{ data.label }}</span>
+                            </div>
+                            <div v-else-if="data.id.startsWith('cityName')" style="display: flex; align-items: center">
+                                <el-icon><Location /></el-icon>
+                                <span style="margin-left: 4px">{{ data.label }}</span>
+                            </div>
+                            <div
+                                v-else
+                                style="flex: 1; display: flex; align-items: center; justify-content: space-between"
+                            >
+                                <span>
+                                    <el-icon><Cpu /></el-icon>
+                                    <span v-if="node.level === 1" style="margin-left: 4px">
+                                        {{ data.cityName + ' - ' + data.manufacturer + ' - ' + data.name }}
+                                    </span>
+                                    <span v-if="node.level === 2" style="margin-left: 4px">
+                                        {{ data.name }}
+                                    </span>
+                                </span>
+                                <el-tooltip effect="light" placement="top">
+                                    <template #content>
+                                        <el-descriptions border size="small" title="被检设备详情">
+                                            <el-descriptions-item label="设备名称">
+                                                {{ data.name }}
+                                            </el-descriptions-item>
+                                            <el-descriptions-item label="设备厂家">
+                                                {{ data.manufacturer }}
+                                            </el-descriptions-item>
+                                            <el-descriptions-item label="所属地市">
+                                                {{ data.cityName }}
+                                            </el-descriptions-item>
+                                            <el-descriptions-item label="所属供电公司">
+                                                {{ data.gdName }}
+                                            </el-descriptions-item>
+                                            <el-descriptions-item label="所属电站">
+                                                {{ data.subName }}
+                                            </el-descriptions-item>
+                                        </el-descriptions>
+                                    </template>
+                                    <el-icon>
+                                        <Warning />
+                                    </el-icon>
+                                </el-tooltip>
+                            </div>
+                        </template>
+                    </el-tree>
+                </el-scrollbar>

-                <el-tree
-                    ref="treeRef"
-                    show-checkbox
-                    accordion
-                    default-expand-all
-                    :data="treeData"
-                    :default-checked-keys="defaultCheckedKeys"
-                    :filter-node-method="filterNode"
-                    node-key="id"
-                    :style="{ marginTop: '20px', height: `${props.height}px` }"
-                    @check-change="handleCheckChange"
-                >
-                    <template #empty>
-                        <el-empty :image-size="80" description="暂无可选设备" />
-                    </template>
-                    <template #default="{ node, data }">
-                        <div v-if="data.id.startsWith('manufacturer')" style="display: flex; align-items: center">
-                            <el-icon><OfficeBuilding /></el-icon>
-                            <span style="margin-left: 4px">{{ data.label }}</span>
-                        </div>
-                        <div v-else-if="data.id.startsWith('cityName')" style="display: flex; align-items: center">
-                            <el-icon><Location /></el-icon>
-                            <span style="margin-left: 4px">{{ data.label }}</span>
-                        </div>
-                        <div v-else style="flex: 1; display: flex; align-items: center; justify-content: space-between">
-                            <span>
-                                <el-icon><Cpu /></el-icon>
-                                <span v-if="node.level === 1" style="margin-left: 4px">
-                                    {{ data.cityName + ' - ' + data.manufacturer + ' - ' + data.name }}
-                                </span>
-                                <span v-if="node.level === 2" style="margin-left: 4px">
-                                    {{ data.name }}
-                                </span>
-                            </span>
-                            <el-tooltip effect="light" placement="top">
-                                <template #content>
-                                    <el-descriptions border size="small" title="被检设备详情">
-                                        <el-descriptions-item label="设备名称">
-                                            {{ data.name }}
-                                        </el-descriptions-item>
-                                        <el-descriptions-item label="设备厂家">
-                                            {{ data.manufacturer }}
-                                        </el-descriptions-item>
-                                        <el-descriptions-item label="所属地市">
-                                            {{ data.cityName }}
-                                        </el-descriptions-item>
-                                        <el-descriptions-item label="所属供电公司">
-                                            {{ data.gdName }}
-                                        </el-descriptions-item>
-                                        <el-descriptions-item label="所属电站">
-                                            {{ data.subName }}
-                                        </el-descriptions-item>
-                                    </el-descriptions>
-                                </template>
-                                <el-icon>
-                                    <Warning />
-                                </el-icon>
-                            </el-tooltip>
-                        </div>
-                    </template>
-                </el-tree>
                <!-- 传递 footer 插槽到 el-card -->
                <template #footer>
                    <slot name="footer"></slot>
@@ -108,7 +113,7 @@
 </template>
 <script lang="ts" name="DevSelect" setup>
 import { ref, watch } from 'vue'
-import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
+import type { FilterNodeMethodFunction, ScrollbarInstance, TreeInstance } from 'element-plus'

 interface Tree {
    [key: string]: any
@@ -146,6 +151,7 @@ const props = defineProps({
    }
 })
 const treeRef = ref<TreeInstance>()
+const scrollbarRef = ref<ScrollbarInstance>()
 const treeData = ref<Tree[]>([])
 const defaultCheckedKeys = ref<string[]>([])
 const filter = ref({
@@ -254,7 +260,11 @@ const convertToTree = (data: any[], groupBy?: string | undefined) => {
 }
 const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
-    return data.label.includes(value)
+    console.log('data', data)
+    if (data.id.toString().includes('_')) {
+        return false
+    }
+    return data.label.includes(value) || data.cityName.includes(value) || data.manufacturer.includes(value)
 }
 const handleCommand = (command: string) => {
    filter.value.groupBy = command
@@ -264,6 +274,7 @@ const handleCommand = (command: string) => {
    if (filter.value.checkAll) {
        setCheckedStatus(true)
    }
+    scrollbarRef.value?.setScrollTop(0)
 }
 const handleCheckChange = () => {
    const checkedKeys = treeRef.value?.getCheckedKeys().filter(item => !item.toString().includes('_')) || []
@@ -289,7 +300,7 @@ const handleCheckChange = () => {
 }

 .card-body {
-    padding: 15px;
+    padding: 20px;
 }

 .card-footer {
--- a/frontend/src/views/plan/planList/components/planPopup.vue
+++ b/frontend/src/views/plan/planList/components/planPopup.vue
@@ -187,7 +187,7 @@
                        title="被检设备列表"
                        filter-placeholder="请输入内容搜索"
                        :data="devData"
-                        :height="250"
+                        :height="230"
                        :disabled="allDisabled"
                    >
                        <template v-if="planType === 0 && !allDisabled" #footer>
@@ -354,7 +354,7 @@ import { type ErrorSystem } from '@/api/device/interface/error'
 import { type Device } from '@/api/device/interface/device'
 import { getPqReportAllName } from '@/api/device/report/index'
 import { useAppSceneStore, useModeStore } from '@/stores/modules/mode'
-import { getAllPqStandardDev } from '@/api/device/standardDevice/index'
+import { canBindingList, getAllPqStandardDev } from '@/api/device/standardDevice/index'
 import { type StandardDevice } from '@/api/device/interface/standardDevice'
 import { type Dict } from '@/api/system/dictionary/interface'
 import { getAllUser } from '@/api/user/user'
@@ -663,7 +663,7 @@ const open = async (sign: string, data: Plan.ReqPlan, currentMode: string, plan:
                getPqErrSysList(),
                getUnboundPqDevList(data),
                getPqReportAllName(),
-                getAllPqStandardDev(),
+                canBindingList(),
                getTestConfig(),
                getRegRes({ type: patternId })
            ])