<template> <div class="search mb-[15px] flex h-[170px] w-full flex-col items-center justify-around" > <div class="flex gap-10"> <router-link v-for="(v, i) in subMenus" :key="i" :to="v.path"> {{ v.meta.title }} </router-link> </div> <div class="flex items-center justify-center gap-2"> <div class="search-box"> <div class="flex gap-2"> <div class="item border"> <span class="pl-[15px] text-[14px]">选择时间</span> <el-popover trigger="click" placement="bottom-start" popper-class="search-popover" > <div class="flex flex-col items-center"> <div class="tab-box"> <div :class="['tab-item', { active: form.type == 'year' }]" @click="changeTab('year')" > 按年 </div> <div :class="['tab-item', { active: form.type == 'month' }]" @click="changeTab('month')" > 按月 </div> <div :class="['tab-item', { active: form.type == 'date' }]" @click="changeTab('date')" > 按日 </div> </div> <div class="tab-content w-ull"> <date-picker v-show="form.type == 'year'" v-model="form.year" type="year" value-format="yyyy" placeholder="选择年" > </date-picker> <date-picker v-show="form.type == 'month'" v-model="form.month" type="month" value-format="yyyy-MM" placeholder="选择月" > </date-picker> <date-picker v-show="form.type == 'date'" v-model="form.day" type="date" value-format="yyyy-MM-dd" placeholder="选择日" > </date-picker> </div> </div> <el-input size="small" placeholder="暂未选择" :value="dateInputVal" slot="reference" clearable @clear="handleClearDate" ></el-input> </el-popover> </div> <div class="item border" v-if="$route.path == '/enginesearch/queueupdata'" > <span class="pl-[15px] text-[14px]">选择业务</span> <el-popover trigger="click" placement="bottom-start" popper-class="search-popover" @show="handleShowPopper('business')" > <div class="h-auto w-full"> <div class="w-full" v-if="calcBusinessList.length"> <div class="mb-3">推荐业务</div> <div class="flex w-full flex-col gap-3"> <div class="flex cursor-pointer hover:text-primary" v-for="(v, i) in calcBusinessList" :key="i" @click="form.businessName = v" > <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]"> {{ i + 1 }} </div> <div class="flex-1 truncate">{{ v }}</div> </div> </div> </div> <div v-else class="flex h-full w-full items-center justify-center" > <el-empty :image="require('@/assets/img/empty.png')" ></el-empty> </div> </div> <el-input size="small" placeholder="请输入" slot="reference" v-model="form.businessName" clearable @input="handleBusinessNameInput" ></el-input> </el-popover> </div> <div class="item border" v-else> <span class="pl-[15px] text-[14px]">选择评价选项</span> <el-select v-model="form.pjOption" placeholder="请选择评价选项" clearable filterable size="small" > <el-option v-for="(v, i) in pjOption" :key="i" :label="v" :value="v" ></el-option> </el-select> </div> <div class="item border"> <span class="pl-[15px] text-[14px]">选择部门</span> <el-popover trigger="click" placement="bottom-start" popper-class="search-popover" @show="handleShowPopper('deptName')" > <div class="h-auto w-full"> <div class="w-full" v-if="calcDept.length"> <div class="mb-3">推荐部门</div> <div class="flex w-full flex-col gap-3"> <div class="flex cursor-pointer hover:text-primary" v-for="(v, i) in calcDept" :key="i" @click="form.deptName = v" > <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]"> {{ i + 1 }} </div> <div class="flex-1 truncate">{{ v }}</div> </div> </div> </div> <div v-else class="flex h-full w-full items-center justify-center" > <el-empty :image="require('@/assets/img/empty.png')" ></el-empty> </div> </div> <el-input size="small" placeholder="请输入" slot="reference" v-model="form.deptName" clearable @input="handleDeptNameInput" ></el-input> </el-popover> </div> <div class="item"> <span class="pl-[15px] text-[14px]">选择窗口</span> <el-popover trigger="click" placement="bottom-start" popper-class="search-popover" @show="handleShowPopper('window')" > <div class="h-auto w-full"> <div class="w-full" v-if="calcWindow.length"> <div class="mb-3">推荐窗口</div> <div class="flex w-full flex-col gap-3"> <div class="flex cursor-pointer hover:text-primary" v-for="(v, i) in calcWindow" :key="i" @click="form.windowNum = v" > <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]"> {{ i + 1 }} </div> <div class="flex-1 truncate"> {{ v }} </div> </div> </div> </div> <div v-else class="flex h-full w-full items-center justify-center" > <el-empty :image="require('@/assets/img/empty.png')" ></el-empty> </div> </div> <el-input size="small" placeholder="请输入" slot="reference" v-model="form.windowNum" clearable @input="handleWindowInput" ></el-input> </el-popover> </div> </div> <div class="btn" @click="handleSearch">检索</div> </div> <div class="back-btn" @click="$router.push('/engine')">返回</div> </div> </div> </template> <script> import { findBottomSubarrays } from "@/utils"; export default { components: {}, props: { dict: { required: true, default: () => {}, }, }, data() { return { pjOption: [], calcBusiness: [], calcDept: [], calcWindow: [], subMenus: [], businessList: [], sectionList: [], windowList: [], form: { type: "year", businessName: "", deptName: "", windowNum: "", year: "", month: "", day: "", pjOption: "", }, }; }, computed: { activeKey() { return this.$route.path; }, dateInputVal() { if (this.form.type == "year") { return this.form.year; } else if (this.form.type == "month") { return this.form.month; } else { return this.form.day; } }, calcBusinessList: { get() { return this.calcBusiness.slice(0, 10); }, set(val) { this.calcBusiness = val; }, }, calcDeptList: { get() { return this.calcDept.slice(0, 10); }, set(val) { this.calcDept = val; }, }, calcWindowList: { get() { return this.calcWindow.slice(0, 10); }, set(val) { this.calcWindow = val; }, }, }, watch: { dict: { handler(newVal) { this.changeOptions(newVal); }, deep: true, immediate: true, }, }, created() { this.getSubMenus(); }, mounted() {}, methods: { changeRouter(e) { this.$router.push(e.name); }, // 获取当前顶层路由下的所有子路由 getSubMenus() { let path = this.$route?.meta.parentPath ? this.$route.meta.parentPath : this.$route.path; let options = this.$router.options.routes[0].children; let curRouters = options.filter((v) => v.path == path); this.subMenus = findBottomSubarrays(curRouters).filter( (v) => !v.meta.hidden ); }, getTopKeyList(arr) { return arr.map((item) => Object.keys(item)[0]); }, // 获取搜索配置 changeOptions(dict) { if (JSON.stringify(dict) == "{}") return; let { businessList, sectionNameList, windowFromnumList, pjOption } = dict; this.pjOption = pjOption ? pjOption : []; this.calcBusiness = this.businessList = businessList ? this.getTopKeyList(businessList) : []; this.calcDept = this.sectionList = sectionNameList ? this.getTopKeyList(sectionNameList) : []; this.calcWindow = this.windowList = windowFromnumList ? this.getTopKeyList(windowFromnumList) : []; }, changeTab(key) { this.form.year = ""; this.form.month = ""; this.form.day = ""; this.form.type = key; }, handleClearDate() { this.form.year = ""; this.form.month = ""; this.form.day = ""; }, handleBusinessNameInput(name) { if (name != "") { let list = this.businessList.filter((v) => v.includes(name)); this.calcBusinessList = list.slice(0, 10); } else { this.calcBusinessList = this.businessList.slice(0, 10); } }, handleDeptNameInput(name) { if (name != "") { let list = this.deptList.filter((v) => v.includes(name)); this.calcDeptList = list.slice(0, 10); } else { this.calcDeptList = this.sectionList.slice(0, 10); } }, handleWindowInput(value) { if (value != "") { let list = this.windowList.filter((v) => v.includes(value)); this.calcWindowList = list.slice(0, 10); } else { this.calcWindowList = this.windowList.slice(0, 10); } }, handleSearch() { this.$emit("search", this.form); }, handleShowPopper(type) { switch (type) { case "business": this.calcBusinessList = this.businessList.slice(0, 10); break; case "deptName": this.calcDeptList = this.sectionList.slice(0, 10); break; case "window": this.calcWindowList = this.windowList.slice(0, 10); } }, }, }; </script> <style lang="less" scoped> .search { flex-shrink: 0; background: url("@/assets/img/engineSearch_bg.svg") no-repeat center / 100% 100%; a { color: rgba(254, 254, 254, 0.65); } .router-link-active { color: #fff; font-weight: 600; } } .border { border-right: 1px solid #ccc; } .search-box { height: 68px; width: 60%; padding: 0px 15px; background: #fff; border-radius: 34px; display: flex; align-items: center; } .btn, .back-btn { width: 96px; height: 60px; flex-shrink: 0; font-weight: 700; color: #fff; line-height: 60px; text-align: center; background: linear-gradient(90deg, #5ab6ff, #2e9aff); border-radius: 30px; cursor: pointer; } .back-btn { color: var(--primary); background: #fff; } :deep(.el-input) { .el-input__inner { border: none; } } .tab-box { width: 300px; height: 40px; background-color: #ebebeb; border-radius: 20px; display: flex; position: relative; .tab-item { width: 100px; height: 100%; border-radius: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .active { background-color: #fff; border: 2px solid var(--primary); } } .index-1 { color: #ff5948; } .index-2 { color: #ff6f48; } .index-3 { color: #ff8d48; } :deep(.el-picker-panel) { border: none; box-shadow: none; border-radius: 0px; } :global(.search-popover) { width: 348px; min-height: 330px; display: flex; } </style>