feat: 带筛选

罗广辉

2026-01-14 b7c8eeabe7f6b703a5f4468e64dfe36736222df5

 applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue

@@ -26,22 +26,28 @@
                     <el-form-item label="防区面积" prop="zoneArea">{{ formatZoneArea(formData.zoneArea) }}</el-form-item>
                  </el-col>
                  <el-col :span="24">
                     <el-form-item label="关联场景" prop="defenseSceneIds">
                        <el-table
                           ref="sceneTableRef"
                           :data="sceneList"
                           row-key="id"
                           @selection-change="handleSceneSelectionChange"
                        >
                           <el-table-column type="selection" width="55" />
                           <el-table-column prop="sceneName" label="场景名称" />
                           <el-table-column prop="sceneType" label="场景类型">
                              <template v-slot="{ row }">
                                 {{ getDictLabel(row.sceneType, dictObj.sceneType) }}
                              </template>
                           </el-table-column>
                        </el-table>
                     </el-form-item>
                     <div>
                        <div>
                           关联场景
                           <el-input v-model="searchName" placeholder="请输入" clearable></el-input>
                        </div>
                        <el-form-item label="关联场景" prop="defenseSceneIds" label-width="0">
                           <el-table
                              ref="sceneTableRef"
                              :data="sceneList.filter(item => item.sceneName.includes(searchName))"
                              row-key="id"
                              @selection-change="handleSceneSelectionChange"
                           >
                              <el-table-column type="selection" width="55" :reserve-selection="true" />
                              <el-table-column prop="sceneName" label="场景名称" />
                              <el-table-column prop="sceneType" label="场景类型">
                                 <template v-slot="{ row }">
                                    {{ getDictLabel(row.sceneType, dictObj.sceneType) }}
                                 </template>
                              </el-table-column>
                           </el-table>
                        </el-form-item>
                     </div>
                  </el-col>
               </el-row>
            </el-form>
@@ -85,6 +91,7 @@
const readonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })
const sceneTableRef = ref(null)
const searchName = ref('')
const sceneList = ref([]) // 关联场景列表
const selectedSceneRows = ref([]) // 选中场景
const dictObj = inject('dictObj')
@@ -139,14 +146,14 @@
   sceneList.value = res?.data?.data ?? []
   if (readonly.value) {
      const ids = getSceneIdList()
      sceneList.value = sceneList.value.filter(item => ids.includes(String(item.id)))
      sceneList.value = sceneList.value.filter(item => ids.includes(item.id))
   }
}

// 获取场景ID列表
function getSceneIdList() {
   if (!formData.value.defenseSceneIds) return []
   return formData.value.defenseSceneIds.split(',').filter(Boolean)
   return formData.value.defenseSceneIds.split(',')
}

// 关联场景变更
@@ -162,7 +169,7 @@
   const ids = getSceneIdList()
   const rows = []
   sceneList.value.forEach(row => {
      if (ids.includes(String(row.id))) {
      if (ids.includes(row.id)) {
         sceneTableRef.value.toggleRowSelection(row, true)
         rows.push(row)
      }