feat:修改任务管理内容

chenyao

2025-04-14 b0ccd2d131b2e3df5d901385e38ed0077b8d0fbc

 src/views/Home/SearchBox.vue

@@ -1,13 +1,159 @@
<script setup>

</script>

<template>
   <div>
  <div class="searchBox">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

   </div>
      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <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;
  height: 43px;
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;

  .el-select {
    width: 130px;
    height: 100%;

    :deep() {
      .el-select__wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 100%;
        padding-left: 20px;
      }

      .el-select__selected-item {
        font-family: Source Han Sans CN, Source Han Sans CN, serif;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }

  .searchInput {
    width: 243px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg1.png') no-repeat center / 100% 100%;
    display: flex;

    .el-input {
      height: 100%;

      :deep() {
        .el-input__wrapper {
          background: transparent;
          border: none;
          box-shadow: none;
          height: 100%;
        }

        .el-input__inner {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 18px;
        }
      }
    }
  }

  .searchBtn {
    width: 67px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg2.png') no-repeat center / 100% 100%;
    cursor: pointer;
  }

  .region {
    width: 0;
    flex-grow: 1;
    background: url('@/assets/images/home/searchBox/searchBg3.png') no-repeat center / 100% 100%;

    :deep() {
      .el-select__wrapper {
        width: 100px;
        padding-left: 20px;
      }
    }
  }
}
</style>