smart-search-web/src/views/web/home/index.vue

<template>
  <div class="web-home" :style="{
    backgroundImage: `url('${ThemeStore.webBgImg}')`
  }">
    <div class="title">
      <img :src="ThemeStore.titleLogo"/>
    </div>
    <div class="area">
      <div class="selected">
        <div class="label">搜索范围：</div>
        <div class="value" v-if="!noAreaCpt">
          <template v-if="searchAreaCpt.text">
            {{searchAreaCpt.text}}
          </template>
          <template v-else>
            <template v-for="item in searchAreaCpt.arr">
              <div>{{item.treeName}}</div>
            </template>
          </template>
        </div>
      </div>
      <div class="search-input">
        <template v-if="!noAreaCpt">
          <div class="left-select __hover" @click="state.showArea = true">
            搜索范围<SvgIcon name="arrow_1" rotate="90" size="14" color="var(--cus-text-color-3)"/>
          </div>
        </template>
        <template v-else>
          <div class="left-select __disabled">
            暂无范围
          </div>
        </template>
        <el-input v-model="state.searchText" :placeholder="!noAreaCpt ? '请输入关键字进行查询' : '请先配置搜索范围'" @keyup.enter="toList(state.searchText)" :disabled="noAreaCpt"/>
        <div class="right-icon __hover" @click="toList(state.searchText)">
          <SvgIcon name="search_1" color="var(--cus-main-color)" size="40"/>
        </div>
      </div>
    </div>
    <div class="history" v-if="state.historyList?.length > 0">
      <div class="label">搜索记录</div>
      <div class="result">
        <template v-for="(item, index) in state.historyList">
          <span class="__hover" @click="toList(item.keyword, true)">{{index + 1}}.{{item.keyword}}</span>
        </template>
      </div>
    </div>
    <CusDialog
      :show="state.showArea"
      @onClose="$emit('update:show', false)"
      width="1000px"
      height="auto"
      submit-text="关闭"
      :show-close="false"
      @onSubmit="state.showArea = false"
    >
      <CusTab :tabs="state.areaList" type="type1" v-model:param="state.areaTab" label-key="treeName" value-key="treeId"/>
      <div class="index-list">
        <div class="all">
          <div class="__check" :class="{active: indexTabAllCpt}" @click="onIndexTabAll">全选</div>
        </div>
        <div class="list">
          <template v-for="(item, index) in indexListCpt">
            <div class="list-item">
              <div class="__check" :class="{active: item.__select}" @click="item.__select = !item.__select">{{ item.treeName }}</div>
            </div>
          </template>
        </div>
      </div>
    </CusDialog>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, reactive} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import {useAppStore, useThemeStore, useWebStore} from "@/stores";
import {mockGetSearchHistory} from "@/api/modules/mock/mock";
import {searchLogsGetKeyWordByUserId} from "@/api/modules/web/list";

const {proxy} = getCurrentInstance()
const AppStore = useAppStore()
const WebStore = useWebStore()
const ThemeStore = useThemeStore()
const state: any = reactive({
  searchText: '',
  historyList: [],
  areaList: [],
  showArea: false,
  areaTab: ''
})
const indexListCpt = computed(() => {
  return state.areaList.filter(v => v.treeId === state.areaTab)?.[0]?.children || []
})
const indexTabAllCpt = computed(() => {
  return indexListCpt.value.every(v => v.__select)
})
const searchAreaCpt = computed(() => {
  const obj = {
    text: '',
    arr: []
  }
  let i = 0
  state.areaList.forEach(v => {
    v.children.forEach(c => {
      i++
      if (c.__select) {
        obj.arr.push(c)
      }
    })
  })
  if (i === obj.arr.length) {
    obj.arr = []
  }
  if (obj.arr.length === 0) {
    obj.text = '全部'
  }
  return obj
})
const noAreaCpt = computed(() => {
  return !(state.areaList.length > 0)
})
const initHistory = () => {
  searchLogsGetKeyWordByUserId(proxy.$util.formatGetParam({
    userId: AppStore.userInfo?.id,
    size: 10
  })).then(res => {
    state.historyList = res.data
  })
}
const initArea = () => {
  WebStore.getSearchAreaTree().then(({roleTree}: any) => {
    state.areaList = JSON.parse(JSON.stringify(roleTree))
    state.areaTab = state.areaList[0]?.treeId
  })
}
const onIndexTabAll = () => {
  const flag = JSON.parse(JSON.stringify(indexTabAllCpt.value))
  indexListCpt.value.forEach(v => {
    v.__select = !flag
  })
}
const toList = (text, isAll = false) => {
  if (text) {
    const routerUrl = router.resolve({
      name: '4f6dd2ea-7c0a-4923-9a57-932ef42235f6',
      query: {
        text,
        index: isAll ? '' : searchAreaCpt.value.arr.map(v => v.treeId).join(',')
      }
    });
    window.open(routerUrl.href, "_blank");
  } else {
    ElMessage({
      message: '请输入关键字进行查询！',
      grouping: true,
      type: 'warning',
    })
  }
}
onMounted(() => {
  initHistory()
  initArea()
})
</script>

<style lang="scss" scoped>
.web-home {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  .title {
    margin-top: 300px;
    >img {
      width: 100%;
    }
  }
  .area {
    width: 1000px;
    .selected {
      display: flex;
      line-height: 30px;
      font-size: 16px;
      .label {
        font-weight: 500;
        color: var(--cus-main-color);
        padding-left: 16px;
      }
      .value {
        flex: 1;
        color: var(--cus-text-color-2);
        display: flex;
        flex-wrap: wrap;
        column-gap: 20px;
      }
    }
    .search-input {
      margin-top: 10px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 60px;
      background: rgba(255,255,255,0.9);
      box-shadow: 0px 0px 2px 0px rgba(167,220,255,0.5);
      border-radius: 60px;
      border: 1px solid var(--cus-main-color);
      .left-select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 184px;
        gap: 17px;
        color: var(--cus-text-color-4);
        font-size: 18px;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          right: 0;
          height: 40px;
          width: 1px;
          background-color: var(--cus-main-color);
        }
      }
      :deep(.el-input) {
        font-size: 18px;
        color: var(--cus-text-color-2);
        .el-input__wrapper {
          box-shadow: none !important;
          background-color: transparent;
          .el-input__inner {
            &::placeholder {
              color: var(--cus-text-color-4);
            }
          }
        }
      }
      .right-icon {
        margin-right: 20px;
      }
    }
  }
  .history {
    width: 1000px;
    .label {
      font-weight: 500;
      font-size: 16px;
      color: var(--cus-main-color);
      padding-left: 16px;
    }
    .result {
      margin-top: 10px;
      width: 100%;
      padding: 16px;
      background: rgba(255,255,255,0.8);
      box-shadow: 0px 4px 4px 0px rgba(255,255,255,0.15);
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      color: var(--cus-text-color-2);
      display: flex;
      flex-wrap: wrap;
      gap: 10px 32px;
    }
  }
}
.cus-tab {
  padding: 30px 0 22px 28px;
  :deep(.cus-tab-item::after) {
    bottom: -23px !important;
  }
}
.index-list {
  padding: 20px 28px 0;
  .list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
}
</style>