修改查询

src/layout/index.vue

@@ -23,9 +23,11 @@
                   <template #title>
                     <span @click="selectMenu(item.href)">{{ item.title }}</span>
                   </template>
-                  <el-menu-item v-for="tag in item.children" :key="tag._id" :index="tag.href">{{
-                    tag.title
-                  }}</el-menu-item>
+                  <el-menu-item v-for="tag in item.children" :key="tag._id" :index="tag.href">
+                    <template v-slot:default>
+                      {{ tag.title }}
+                    </template>
+                  </el-menu-item>
                 </el-sub-menu>
               </template>
               <template v-else-if="item.type === '1'">

src/views/demand/index.vue

@@ -51,16 +51,64 @@
         </el-col>
         <div class="w_1200">
           <el-col :span="24" class="one">
-            <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
-              <el-col :span="3" class="left">{{ val.title }}</el-col>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">技术领域</el-col>
               <el-col :span="21" class="right">
                 <a-button
                   class="title"
-                  v-for="(item, index) in val.list"
+                  v-for="(item, index) in fieldList"
                   :key="index"
                   type="link"
                   size="samll"
-                  @click="toSelect(val, item)"
+                  @click="toSelect(item, 'one')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">合作方式</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in methodList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'two')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">需求地区</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in cityList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'thr')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">需求状态</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in statusList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'four')"
                   :class="[item.is_active ? 'show' : '']"
                 >
                   {{ item.label }}
@@ -120,6 +168,8 @@
 </template>
 
 <script setup>
+// API 引用
+import { getCity } from '@/utils/city'
 const $checkRes = inject('$checkRes')
 import { get } from 'lodash-es'
 // 接口
@@ -141,81 +191,14 @@ let limit = inject('limit')
 const total = ref(0)
 // 字典表
 const fieldList = ref([])
-const selectList = ref([])
+const methodList = ref([])
+const cityList = ref([])
+const statusList = ref([])
+// 查询
 const oneList = ref([])
 const twoList = ref([])
 const thrList = ref([])
 const fourList = ref([])
-const searchList = ref([
-  {
-    title: '技术领域',
-    list: [
-      { value: '0', label: '全部' },
-      { value: '1', label: '先进制造' },
-      { value: '2', label: '地球、空间与海洋' },
-      { value: '3', label: '新材料' },
-      { value: '4', label: '新能源与节能' },
-      { value: '5', label: '核应用技术' },
-      { value: '6', label: '环境保护' },
-      { value: '7', label: '现代交通' },
-      { value: '8', label: '现代农业' },
-      { value: '9', label: '生物医药与医疗器械' },
-      { value: '10', label: '电子信息' },
-      { value: '11', label: '航空航天' }
-    ]
-  },
-  {
-    title: '合作方式',
-    list: [
-      { value: '0', label: '全部' },
-      { value: '1', label: '技术开发' },
-      { value: '2', label: '技术咨询' },
-      { value: '3', label: '技术服务' },
-      { value: '4', label: '许可转让' },
-      { value: '5', label: '完全转让' },
-      { value: '6', label: '技术入股' },
-      { value: '7', label: '合作开发' },
-      { value: '8', label: '其他' }
-    ]
-  },
-  {
-    title: '需求地区',
-    list: [
-      { value: '0', label: '北京市' },
-      { value: '1', label: '天津市' },
-      { value: '2', label: '河北省' },
-      { value: '3', label: '山西省' },
-      { value: '4', label: '内蒙古自治区' },
-      { value: '5', label: '辽宁省' },
-      { value: '6', label: '吉林省' },
-      { value: '7', label: '上海市' },
-      { value: '8', label: '江苏省' },
-      { value: '9', label: '浙江省' },
-      { value: '10', label: '安徽省' },
-      { value: '11', label: '福建省' },
-      { value: '12', label: '江西省' },
-      { value: '13', label: '山东省' },
-      { value: '14', label: '河南省' },
-      { value: '15', label: '湖北省' },
-      { value: '16', label: '湖南省' },
-      { value: '17', label: '广东省' },
-      { value: '18', label: '广西壮族自治区' },
-      { value: '19', label: '海南省' },
-      { value: '20', label: '重庆市' },
-      { value: '21', label: '四川省' },
-      { value: '22', label: '贵州省' },
-      { value: '23', label: '云南省' }
-    ]
-  },
-  {
-    title: '需求状态',
-    list: [
-      { value: '0', label: '全部' },
-      { value: '1', label: '洽谈中' },
-      { value: '2', label: '已结束' }
-    ]
-  }
-])
 // 查看
 const toView = (item) => {
   router.push({ path: '/demand/detail', query: { id: item.id || item._id } })
@@ -232,6 +215,14 @@ const searchOther = async () => {
   // 技术领域
   result = await dictDataStore.query({ code: 'field', is_use: '0' })
   if ($checkRes(result)) fieldList.value = result.data
+  // 合作方式
+  result = await dictDataStore.query({ code: 'method', is_use: '0' })
+  if ($checkRes(result)) methodList.value = result.data
+  // 需求状态
+  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
+  // 城市
+  getCity().then((response) => (cityList.value = response.address))
 }
 const search = async (query = { skip: 0, limit }) => {
   const info = {
@@ -259,39 +250,38 @@ const getArea = (data) => {
   else return '暂无地区'
 }
 // 选择查询
-const toSelect = (data, item) => {
-  for (const val of searchList.value) {
-    if (val.title == data.title) {
-      for (const i of data.list) {
-        if (i.value == item.value) {
-          i.is_active = true
-          const select = selectList.value.find((f) => f.label == i.label)
-          if (!select) selectList.value.push({ ...i, ...{ title: val.title } })
-        }
-      }
+const toSelect = (item, num) => {
+  if (num == 'one') {
+    for (const val of fieldList.value) {
+      if (val.value == item.value) val.is_active = true
     }
+    const one = oneList.value.find((f) => f.value == item.value)
+    if (!one) oneList.value.push(item)
+    else oneList.value = oneList.value.filter((f) => f.value == item.value)
   }
-  for (const val of selectList.value) {
-    if (val.title == '技术领域') {
-      const one = oneList.value.find((f) => f.value == val.value)
-      if (!one) oneList.value.push(val)
-      else oneList.value = oneList.value.filter((f) => f.value == val.value)
-    }
-    if (val.title == '合作方式') {
-      const two = twoList.value.find((f) => f.value == val.value)
-      if (!two) twoList.value.push(val)
-      else twoList.value = twoList.value.filter((f) => f.value == val.value)
+  if (num == 'two') {
+    for (const val of methodList.value) {
+      if (val.value == item.value) val.is_active = true
     }
-    if (val.title == '需求地区') {
-      const thr = thrList.value.find((f) => f.value == val.value)
-      if (!thr) thrList.value.push(val)
-      else thrList.value = thrList.value.filter((f) => f.value == val.value)
+    const two = twoList.value.find((f) => f.value == item.value)
+    if (!two) twoList.value.push(item)
+    else twoList.value = twoList.value.filter((f) => f.value == item.value)
+  }
+  if (num == 'thr') {
+    for (const val of cityList.value) {
+      if (val.value == item.value) val.is_active = true
     }
-    if (val.title == '需求状态') {
-      const four = fourList.value.find((f) => f.value == val.value)
-      if (!four) fourList.value.push(val)
-      else fourList.value = fourList.value.filter((f) => f.value == val.value)
+    const thr = thrList.value.find((f) => f.value == item.value)
+    if (!thr) thrList.value.push(item)
+    else thrList.value = thrList.value.filter((f) => f.value == item.value)
+  }
+  if (num == 'four') {
+    for (const val of statusList.value) {
+      if (val.value == item.value) val.is_active = true
     }
+    const four = fourList.value.find((f) => f.value == item.value)
+    if (!four) fourList.value.push(item)
+    else fourList.value = fourList.value.filter((f) => f.value == item.value)
   }
 }
 // 删除标签
@@ -299,41 +289,31 @@ const toDel = (item, type) => {
   if (type == 'one') {
     const one = oneList.value.filter((f) => f.value != item.value)
     oneList.value = one
-    if (item.title == searchList.value[0].title) {
-      for (const i of searchList.value[0].list) {
-        if (i.value == item.value) i.is_active = !i.is_active
-      }
+    for (const i of fieldList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
     }
   }
   if (type == 'two') {
     const two = twoList.value.filter((f) => f.value != item.value)
     twoList.value = two
-    if (item.title == searchList.value[1].title) {
-      for (const i of searchList.value[1].list) {
-        if (i.value == item.value) i.is_active = !i.is_active
-      }
+    for (const i of methodList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
     }
   }
   if (type == 'thr') {
     const thr = thrList.value.filter((f) => f.value != item.value)
     thrList.value = thr
-    if (item.title == searchList.value[2].title) {
-      for (const i of searchList.value[2].list) {
-        if (i.value == item.value) i.is_active = !i.is_active
-      }
+    for (const i of cityList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
     }
   }
   if (type == 'four') {
     const four = fourList.value.filter((f) => f.value != item.value)
     fourList.value = four
-    if (item.title == searchList.value[3].title) {
-      for (const i of searchList.value[3].list) {
-        if (i.value == item.value) i.is_active = !i.is_active
-      }
+    for (const i of statusList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
     }
   }
-  const select = selectList.value.filter((f) => f.label != item.label)
-  selectList.value = select
 }
 const currentPage = ref(1)
 // 分页

src/views/expert/index.vue

@@ -4,18 +4,112 @@
       <el-col :span="24" class="main animate__animated animate__backInRight">
         <el-col :span="24" class="idemand">
           <el-image class="image" :src="demand" fit="fill" />
+          <div class="select">
+            <el-row class="select_1">
+              <el-col class="over" :span="6" v-if="oneList.length > 0">
+                <div class="list">
+                  <div class="left">技术领域：</div>
+                  <div class="right">
+                    <div class="label" v-for="(item, index) in oneList" :key="index">
+                      {{ item.label }}<el-icon @click="toDel(item, 'one')"><Close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col class="over" :span="6" v-if="twoList.length > 0">
+                <div class="list">
+                  <div class="left">职称：</div>
+                  <div class="right">
+                    <div class="label" v-for="(item, index) in twoList" :key="index">
+                      {{ item.label }}<el-icon @click="toDel(item, 'two')"><Close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col class="over" :span="6" v-if="thrList.length > 0">
+                <div class="list">
+                  <div class="left">所在地区：</div>
+                  <div class="right">
+                    <div class="label" v-for="(item, index) in thrList" :key="index">
+                      {{ item.label }}<el-icon @click="toDel(item, 'thr')"><Close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col class="over" :span="6" v-if="fourList.length > 0">
+                <div class="list">
+                  <div class="left">学历：</div>
+                  <div class="right">
+                    <div class="label" v-for="(item, index) in fourList" :key="index">
+                      {{ item.label }}<el-icon @click="toDel(item, 'four')"><Close /></el-icon>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
         </el-col>
         <div class="w_1200">
           <el-col :span="24" class="one">
-            <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
-              <el-col :span="3" class="left">{{ val.title }}</el-col>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">技术领域</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in fieldList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'one')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">职称</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in titleList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'two')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">所在地区</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in cityList"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  @click="toSelect(item, 'thr')"
+                  :class="[item.is_active ? 'show' : '']"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="3" class="left">学历</el-col>
               <el-col :span="21" class="right">
                 <a-button
                   class="title"
-                  v-for="(item, index) in val.list"
+                  v-for="(item, index) in educationList"
                   :key="index"
                   type="link"
                   size="samll"
+                  @click="toSelect(item, 'four')"
+                  :class="[item.is_active ? 'show' : '']"
                 >
                   {{ item.label }}
                 </a-button>
@@ -84,6 +178,7 @@
 </template>
 
 <script setup>
+import { getCity } from '@/utils/city'
 const $checkRes = inject('$checkRes')
 import { get } from 'lodash-es'
 // 接口
@@ -107,74 +202,12 @@ const total = ref(0)
 const educationList = ref([])
 const fieldList = ref([])
 const titleList = ref([])
-const searchList = ref([
-  {
-    title: '技术领域',
-    list: [
-      { value: '0', label: '全部' },
-      { value: '1', label: '先进制造' },
-      { value: '2', label: '地球、空间与海洋' },
-      { value: '3', label: '新材料' },
-      { value: '4', label: '新能源与节能' },
-      { value: '5', label: '核应用技术' },
-      { value: '6', label: '环境保护' },
-      { value: '7', label: '现代交通' },
-      { value: '8', label: '现代农业' },
-      { value: '9', label: '生物医药与医疗器械' },
-      { value: '10', label: '电子信息' },
-      { value: '11', label: '航空航天' }
-    ]
-  },
-  {
-    title: '职称',
-    list: [
-      { value: '0', label: '高级工程师' },
-      { value: '1', label: '副教授' },
-      { value: '2', label: '教授' },
-      { value: '3', label: '副研究员' },
-      { value: '4', label: '研究员' },
-      { value: '5', label: '讲师' }
-    ]
-  },
-  {
-    title: '所在区域',
-    list: [
-      { value: '0', label: '北京市' },
-      { value: '1', label: '天津市' },
-      { value: '2', label: '河北省' },
-      { value: '3', label: '山西省' },
-      { value: '4', label: '内蒙古自治区' },
-      { value: '5', label: '辽宁省' },
-      { value: '6', label: '吉林省' },
-      { value: '7', label: '上海市' },
-      { value: '8', label: '江苏省' },
-      { value: '9', label: '浙江省' },
-      { value: '10', label: '安徽省' },
-      { value: '11', label: '福建省' },
-      { value: '0', label: '江西省' },
-      { value: '1', label: '山东省' },
-      { value: '2', label: '河南省' },
-      { value: '3', label: '湖北省' },
-      { value: '4', label: '湖南省' },
-      { value: '5', label: '广东省' },
-      { value: '6', label: '广西壮族自治区' },
-      { value: '7', label: '海南省' },
-      { value: '8', label: '重庆市' },
-      { value: '9', label: '四川省' },
-      { value: '10', label: '贵州省' },
-      { value: '11', label: '云南省' }
-    ]
-  },
-  {
-    title: '学历',
-    list: [
-      { value: '0', label: '本科' },
-      { value: '1', label: '博士' },
-      { value: '2', label: '硕士' },
-      { value: '3', label: '研究生' }
-    ]
-  }
-])
+const cityList = ref([])
+// 查询
+const oneList = ref([])
+const twoList = ref([])
+const thrList = ref([])
+const fourList = ref([])
 // 查看
 const toView = (item) => {
   router.push({ path: '/expert/detail', query: { id: item.id || item._id } })
@@ -197,6 +230,8 @@ const searchOther = async () => {
   // 职称
   result = await dictDataStore.query({ code: 'title', is_use: '0' })
   if ($checkRes(result)) titleList.value = result.data
+  // 城市
+  getCity().then((response) => (cityList.value = response.address))
 }
 const search = async (query = { skip: 0, limit }) => {
   const info = {
@@ -229,6 +264,72 @@ const getArea = (data) => {
 const toChat = (item) => {
   router.push({ path: '/chat', query: { id: item.user } })
 }
+// 选择查询
+const toSelect = (item, num) => {
+  if (num == 'one') {
+    for (const val of fieldList.value) {
+      if (val.value == item.value) val.is_active = true
+    }
+    const one = oneList.value.find((f) => f.value == item.value)
+    if (!one) oneList.value.push(item)
+    else oneList.value = oneList.value.filter((f) => f.value == item.value)
+  }
+  if (num == 'two') {
+    for (const val of titleList.value) {
+      if (val.value == item.value) val.is_active = true
+    }
+    const two = twoList.value.find((f) => f.value == item.value)
+    if (!two) twoList.value.push(item)
+    else twoList.value = twoList.value.filter((f) => f.value == item.value)
+  }
+  if (num == 'thr') {
+    for (const val of cityList.value) {
+      if (val.value == item.value) val.is_active = true
+    }
+    const thr = thrList.value.find((f) => f.value == item.value)
+    if (!thr) thrList.value.push(item)
+    else thrList.value = thrList.value.filter((f) => f.value == item.value)
+  }
+  if (num == 'four') {
+    for (const val of educationList.value) {
+      if (val.value == item.value) val.is_active = true
+    }
+    const four = fourList.value.find((f) => f.value == item.value)
+    if (!four) fourList.value.push(item)
+    else fourList.value = fourList.value.filter((f) => f.value == item.value)
+  }
+}
+// 删除标签
+const toDel = (item, type) => {
+  if (type == 'one') {
+    const one = oneList.value.filter((f) => f.value != item.value)
+    oneList.value = one
+    for (const i of fieldList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
+    }
+  }
+  if (type == 'two') {
+    const two = twoList.value.filter((f) => f.value != item.value)
+    twoList.value = two
+    for (const i of titleList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
+    }
+  }
+  if (type == 'thr') {
+    const thr = thrList.value.filter((f) => f.value != item.value)
+    thrList.value = thr
+    for (const i of cityList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
+    }
+  }
+  if (type == 'four') {
+    const four = fourList.value.filter((f) => f.value != item.value)
+    fourList.value = four
+    for (const i of educationList.value) {
+      if (i.value == item.value) i.is_active = !i.is_active
+    }
+  }
+}
 const currentPage = ref(1)
 // 分页
 const changePage = (page = currentPage.value) => {
@@ -245,10 +346,51 @@ const sizeChange = (limits) => {
   background: rgb(248, 248, 248);
 
   .idemand {
+    position: relative;
     .image {
       width: 100%;
       height: 200px;
     }
+    .select {
+      width: 1200px;
+      position: absolute;
+      left: 20%;
+      bottom: 10%;
+      .select_1 {
+        display: flex;
+        align-items: flex-end;
+        .over {
+          max-height: 106px;
+          overflow-y: auto;
+          .list {
+            border-radius: 5px;
+            margin-right: 10px;
+            background-color: #fff;
+            padding: 5px;
+            font-size: 14px;
+            .left {
+              padding: 10px;
+            }
+            .right {
+              display: flex;
+              flex-wrap: wrap;
+              .label {
+                display: flex;
+                align-items: center;
+                margin: 3px;
+                padding: 5px;
+                background: #f5f5f5;
+                border: 1px solid #f0f0f0;
+                border-radius: 2px;
+              }
+            }
+          }
+        }
+        .over::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
   }
 
   .one {