sl-sfy-safety/src/views/cameras/overview/components/ConditionQuery.vue

<template>
  <div class="flex items-center query-head">
    <el-space alignment="center" :size="50">
      <div>
        <el-select v-model="queryType" placeholder="选择类型" class="type-select">
          <el-option
            v-for="item in queryTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          :style="{ width: '180px' }"
          v-model="queryTypeContent"
          clearable
          placeholder="请输入查找内容"
        />
      </div>
      <div>
        <span>协议类型：</span>
        <el-select v-model="queryCameraType" placeholder="请选择协议类型" class="protocal-select">
          <el-option
            v-for="item in protocalTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <span>场景：</span>
        <el-tree-select
          v-model="queryWorkSpace"
          :data="scenesTree"
          :render-after-expand="false"
          :default-expand-all="true"
          check-strictly
          placeholder="请选择场景"
          class="protocal-select"
        />
      </div>
    </el-space>
    <div class="flex-1 flex justify-end">
      <el-button type="primary" @click="getCameraItems"> 查询 </el-button>
      <el-button @click="resetSearch"> 重置 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { queryTypeSelect, protocalTypeSelect } from '../constant';
  import useCameraOverview from '../stores/useCameraOverview';
  import useSceneInfos from '@/hooks/useSceneInfos';
  import { storeToRefs } from 'pinia';

  const sceneInfos = useSceneInfos();
  const { scenesTree, getScenesTree } = sceneInfos;

  const cameraOverview = useCameraOverview();
  const { queryType, queryTypeContent, queryCameraType, queryWorkSpace } =
    storeToRefs(cameraOverview);
  const { getCameraItems } = cameraOverview;

  // 重置查询条件
  const resetSearch = () => {
    queryType.value = '';
    queryTypeContent.value = '';
    queryCameraType.value = '';
    queryWorkSpace.value = '';
  };

  onMounted(() => {
    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name' });
  });
</script>

<style scoped>
  .type-select {
    width: 100px;
  }

  .protocal-select {
    width: 160px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }
</style>