From b0ccd2d131b2e3df5d901385e38ed0077b8d0fbc Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 14 Apr 2025 12:31:31 +0800
Subject: [PATCH] feat:修改任务管理内容
---
src/views/Home/SearchBox.vue | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 152 insertions(+), 6 deletions(-)
diff --git a/src/views/Home/SearchBox.vue b/src/views/Home/SearchBox.vue
index aca7698..7cceb4b 100644
--- a/src/views/Home/SearchBox.vue
+++ b/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>
--
Gitblit v1.9.3