forked from drone/command-center-dashboard

chenyao
2025-04-14 b0ccd2d131b2e3df5d901385e38ed0077b8d0fbc
src/views/Home/SearchBox.vue
@@ -1,22 +1,3 @@
<script setup>
import { ArrowDown, Search } from '@element-plus/icons-vue';
const input3 = ref('');
const select = ref('');
const value = ref('Option1');
const options = [
  {
    value: 'Option1',
    label: '机巢',
  },
  {
    value: 'Optio44n1',
    label: '事件',
  },
];
</script>
<template>
  <div class="searchBox">
    <div class="searchInput">
@@ -33,17 +14,67 @@
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-tree-select
        v-model="treeValue"
        check-strictly
        lazy
        :load="load"
        :props="props"
        style="width: 240px"
        @change="treeChange"
      />
    </div>
  </div>
</template>
<script setup>
import { getRegion } from '@/api/home';
import { useStore } from 'vuex';
const store = useStore();
const input3 = ref('');
const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const value = ref('Option1');
const treeValue = ref(userAreaCode.value);
let first = true;
function treeChange(value) {
  store.commit('setSelectedAreaCode', value);
}
const props = {
  label: 'name',
  value: 'code',
  children: 'children',
};
const load = async (node, resolve) => {
  if (first) {
    first = false;
    const res = await getRegion(userAreaCode.value);
    const { provinceCode, provinceName } = res?.data?.data?.[0] || {};
    resolve([{ code: provinceCode, name: provinceName }]);
    return;
  }
  const code = node?.data?.code || userAreaCode.value;
  if ((node?.data?.regionLevel || 0) > 2) return resolve([]);
  getRegion(code).then(res => {
    resolve(res?.data?.data || []);
  });
};
const options = [
  {
    value: 'Option1',
    label: '机巢',
  },
  {
    value: 'Optio44n1',
    label: '地址',
  },
];
onMounted(() => {});
</script>
<style scoped lang="scss">
.searchBox {
  width: 420px;
@@ -93,6 +124,7 @@
          box-shadow: none;
          height: 100%;
        }
        .el-input__inner {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
@@ -119,7 +151,7 @@
    :deep() {
      .el-select__wrapper {
        width: 100px;
        padding-left: 30px;
        padding-left: 20px;
      }
    }
  }