修改查询

src/views/nine/index.vue

@@ -4,18 +4,68 @@
       <el-image class="image" :src="chengguo" fit="fill" />
     </el-col>
     <div class="w_1300">
+      <div class="active">
+        <div class="active_1" v-show="industry && industry.length > 0">
+          <div class="active_left">行业：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in industry" :key="index">
+              {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="field && field.length > 0">
+          <div class="active_left">技术领域：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in field" :key="index">
+              {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="mature && mature.length > 0">
+          <div class="active_left">成熟度：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in mature" :key="index">
+              {{ item.label }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="sell && sell.length > 0">
+          <div class="active_left">出让方式：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in sell" :key="index">
+              {{ item.label }}<el-icon @click="toDel(item, '4')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="money && money.length > 0">
+          <div class="active_left">价格：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in money" :key="index">
+              {{ item.label }}<el-icon @click="toDel(item, '5')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="city && city.length > 0">
+          <div class="active_left">所在地：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in city" :key="index">
+              {{ item.name }}<el-icon @click="toDel(item, '6')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="two">
         <div class="twoSeacher">
           <div class="twoLeft">
             <span>行业</span>
           </div>
           <div v-if="!oneShow" class="twoRight">
-            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
               {{ item.title }}
             </div>
           </div>
           <div v-else class="twoRight">
-            <div class="label" v-for="(item, index) in plateList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
               {{ item.title }}
             </div>
           </div>
@@ -33,12 +83,12 @@
             <span>技术领域</span>
           </div>
           <div v-if="!twoShow" class="twoRight">
-            <div class="label" v-for="(item, index) in typeList.slice(0, 10)" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
               {{ item.label }}
             </div>
           </div>
           <div v-else class="twoRight">
-            <div class="label" v-for="(item, index) in typeList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
               {{ item.label }}
             </div>
           </div>
@@ -56,7 +106,7 @@
             <span>成熟度</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in matureList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in matureList" :key="index" @click="toSelect(item, '3')">
               {{ item.label }}
             </div>
           </div>
@@ -66,7 +116,7 @@
             <span>出让方式</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in sellList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in sellList" :key="index" @click="toSelect(item, '4')">
               {{ item.label }}
             </div>
           </div>
@@ -76,7 +126,7 @@
             <span>价格</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in moneyList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in moneyList" :key="index" @click="toSelect(item, '5')">
               {{ item.label }}
             </div>
           </div>
@@ -86,7 +136,7 @@
             <span>所在地</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in cityList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '6')">
               {{ item.name }}
             </div>
           </div>
@@ -181,6 +231,13 @@ const typeList = ref([])
 const plateList = ref([])
 // 搜索
 const searchForm = ref({})
+// 查询
+const industry = ref([])
+const field = ref([])
+const mature = ref([])
+const sell = ref([])
+const money = ref([])
+const city = ref([])
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -219,15 +276,19 @@ const searchOther = async () => {
   // 价格
   result = await dictDataStore.query({ code: 'money', is_use: '0' })
   if ($checkRes(result)) moneyList.value = result.data
-  matureList.value.unshift({ value: '-1', label: '不限' })
-  sellList.value.unshift({ value: '-1', label: '不限' })
-  typeList.value.unshift({ value: '-1', label: '不限' })
+  // 处理数据
+  for (const val of moneyList.value) {
+    if (val.value == '0') val.is_active = true
+  }
+  matureList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
+  sellList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
+  typeList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
   result = await regionStore.list({ level: 'city', parent_code: 22 })
   if (result.errcode == '0') cityList.value = result.data
-  cityList.value.unshift({ code: '-1', name: '不限' })
+  cityList.value.unshift({ id: '-1', is_active: true, code: '-1', name: '不限' })
   result = await sectorStore.query({ is_use: '0' })
   if (result.errcode == '0') plateList.value = result.data
-  plateList.value.unshift({ id: '-1', title: '不限' })
+  plateList.value.unshift({ id: '-1', is_active: true, title: '不限' })
 }
 // 搜索
 const toSearchInfo = async () => {
@@ -248,6 +309,154 @@ const sizeChange = (limits) => {
   currentPage.value = 1
   search({ skip: 0, limit: limit })
 }
+const toSelect = (data, type) => {
+  if (data.id != '-1') {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = industry.value.find((i) => i.id == data.id)
+      if (!res) industry.value.push(data)
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = field.value.find((i) => i.id == data.id)
+      if (!res) field.value.push(data)
+    } else if (type == '3') {
+      for (const val of matureList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = mature.value.find((i) => i.id == data.id)
+      if (!res) mature.value.push(data)
+    } else if (type == '4') {
+      for (const val of sellList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = sell.value.find((i) => i.id == data.id)
+      if (!res) sell.value.push(data)
+    } else if (type == '5') {
+      for (const val of moneyList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.value == '0') val.is_active = false
+      }
+      const res = money.value.find((i) => i.id == data.id)
+      if (!res) money.value.push(data)
+    } else {
+      for (const val of cityList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = city.value.find((i) => i.id == data.id)
+      if (!res) city.value.push(data)
+    }
+  } else {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      industry.value = []
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      field.value = []
+    } else if (type == '3') {
+      for (const val of matureList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      mature.value = []
+    } else if (type == '4') {
+      for (const val of sellList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      sell.value = []
+    } else if (type == '5') {
+      for (const val of moneyList.value) {
+        if (val.value == '0') val.is_active = true
+        else val.is_active = false
+      }
+      money.value = []
+    } else {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      city.value = []
+    }
+  }
+}
+const toDel = (data, type) => {
+  if (type == '1') {
+    for (const val of plateList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    industry.value = industry.value.filter((f) => f.id != data.id)
+    if (industry.value.length == 0) {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '2') {
+    for (const val of typeList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    field.value = field.value.filter((f) => f.id != data.id)
+    if (field.value.length == 0) {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '3') {
+    for (const val of matureList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    mature.value = mature.value.filter((f) => f.id != data.id)
+    if (mature.value.length == 0) {
+      for (const val of matureList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '4') {
+    for (const val of sellList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    sell.value = sell.value.filter((f) => f.id != data.id)
+    if (sell.value.length == 0) {
+      for (const val of sellList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '5') {
+    for (const val of moneyList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    money.value = money.value.filter((f) => f.id != data.id)
+    if (money.value.length == 0) {
+      for (const val of moneyList.value) {
+        if (val.value == '0') val.is_active = true
+      }
+    }
+  } else {
+    for (const val of cityList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    city.value = city.value.filter((f) => f.id != data.id)
+    if (city.value.length == 0) {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -257,6 +466,52 @@ const sizeChange = (limits) => {
       height: 350px;
     }
   }
+  .active {
+    .active_1 {
+      display: inline-flex;
+      background: #f5f7f9;
+      border-radius: 2px;
+      min-height: 28px;
+      line-height: 28px;
+      margin: 0 10px 0 0;
+      position: relative;
+      background-color: #fff;
+      padding: 0 10px;
+      .active_left {
+        flex: 0 0 auto;
+        font-family: PingFangSC-Regular;
+        color: #525a68;
+        line-height: 36px;
+      }
+      .active_right {
+        font-family: PingFangSC-Regular;
+        color: rgba(0, 0, 0, 0.85);
+        line-height: 28px;
+        padding-right: 4px;
+        display: flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+        .active_label {
+          overflow: hidden;
+          display: inline-block;
+          margin-right: 10px;
+          margin-top: 3px;
+          margin-bottom: 3px;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          flex: none;
+          box-sizing: border-box;
+          max-width: 100%;
+          height: 30px;
+          background: #f5f5f5;
+          border: 1px solid #f0f0f0;
+          border-radius: 2px;
+          cursor: default;
+        }
+      }
+    }
+  }
   .two {
     margin: 10px 0;
     background-color: $global-color-fff;
@@ -291,6 +546,7 @@ const sizeChange = (limits) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -299,7 +555,7 @@ const sizeChange = (limits) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
+        .show {
           color: #0a58c2;
           border: solid 1px #006dd2;
         }

src/views/seven/index.vue

@@ -4,18 +4,44 @@
       <el-image class="image" :src="lists" fit="fill" />
     </el-col>
     <div class="w_1300">
+      <div class="active">
+        <div class="active_1" v-show="industry && industry.length > 0">
+          <div class="active_left">行业：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in industry" :key="index">
+              {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="field && field.length > 0">
+          <div class="active_left">技术领域：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in field" :key="index">
+              {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="active_1" v-show="city && city.length > 0">
+          <div class="active_left">所在地：</div>
+          <div class="active_right">
+            <div class="active_label" v-for="(item, index) in city" :key="index">
+              {{ item.name }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="two">
         <div class="twoSeacher">
           <div class="twoLeft">
             <span>行业</span>
           </div>
           <div v-if="!oneShow" class="twoRight">
-            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
               {{ item.title }}
             </div>
           </div>
           <div v-else class="twoRight">
-            <div class="label" v-for="(item, index) in plateList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
               {{ item.title }}
             </div>
           </div>
@@ -33,12 +59,12 @@
             <span>技术领域</span>
           </div>
           <div v-if="!twoShow" class="twoRight">
-            <div class="label" v-for="(item, index) in typeList.slice(0, 10)" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
               {{ item.label }}
             </div>
           </div>
           <div v-else class="twoRight">
-            <div class="label" v-for="(item, index) in typeList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
               {{ item.label }}
             </div>
           </div>
@@ -56,7 +82,7 @@
             <span>所在地</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in cityList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
               {{ item.name }}
             </div>
           </div>
@@ -128,6 +154,10 @@ const list = ref([])
 let skip = 0
 let limit = 8
 const total = ref(0)
+// 查询
+const industry = ref([])
+const field = ref([])
+const city = ref([])
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -139,14 +169,14 @@ const searchOther = async () => {
   let res
   res = await regionStore.list({ level: 'city', parent_code: 22 })
   if (res.errcode == '0') cityList.value = res.data
-  cityList.value.unshift({ code: '-1', name: '不限' })
+  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
   res = await sectorStore.query({ is_use: '0' })
   if (res.errcode == '0') plateList.value = res.data
-  plateList.value.unshift({ id: '-1', title: '不限' })
+  plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
   // 技术领域
   res = await dictDataStore.query({ code: 'field', is_use: '0' })
   if (res.errcode == '0') typeList.value = res.data
-  typeList.value.unshift({ value: '-1', label: '不限' })
+  typeList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
 }
 const search = async (query = { skip, limit }) => {
   skip = query.skip
@@ -176,6 +206,85 @@ const sizeChange = (limits) => {
   currentPage.value = 1
   search({ skip: 0, limit: limit })
 }
+const toSelect = (data, type) => {
+  if (data.id != '-1') {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = industry.value.find((i) => i.id == data.id)
+      if (!res) industry.value.push(data)
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = field.value.find((i) => i.id == data.id)
+      if (!res) field.value.push(data)
+    } else {
+      for (const val of cityList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = city.value.find((i) => i.id == data.id)
+      if (!res) city.value.push(data)
+    }
+  } else {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      industry.value = []
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      field.value = []
+    } else {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      city.value = []
+    }
+  }
+}
+const toDel = (data, type) => {
+  if (type == '1') {
+    for (const val of plateList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    industry.value = industry.value.filter((f) => f.id != data.id)
+    if (industry.value.length == 0) {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '2') {
+    for (const val of typeList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    field.value = field.value.filter((f) => f.id != data.id)
+    if (field.value.length == 0) {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else {
+    for (const val of cityList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    city.value = city.value.filter((f) => f.id != data.id)
+    if (city.value.length == 0) {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -187,6 +296,52 @@ const sizeChange = (limits) => {
       height: 350px;
     }
   }
+  .active {
+    .active_1 {
+      display: inline-flex;
+      background: #f5f7f9;
+      border-radius: 2px;
+      min-height: 28px;
+      line-height: 28px;
+      margin: 10px 10px 0 0;
+      position: relative;
+      background-color: #fff;
+      padding: 10px;
+      .active_left {
+        flex: 0 0 auto;
+        font-family: PingFangSC-Regular;
+        color: #525a68;
+        line-height: 36px;
+      }
+      .active_right {
+        font-family: PingFangSC-Regular;
+        color: rgba(0, 0, 0, 0.85);
+        line-height: 28px;
+        padding-right: 4px;
+        display: flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+        .active_label {
+          overflow: hidden;
+          display: inline-block;
+          margin-right: 10px;
+          margin-top: 3px;
+          margin-bottom: 3px;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          flex: none;
+          box-sizing: border-box;
+          max-width: 100%;
+          height: 30px;
+          background: #f5f5f5;
+          border: 1px solid #f0f0f0;
+          border-radius: 2px;
+          cursor: default;
+        }
+      }
+    }
+  }
   .two {
     margin: 10px 0;
     background-color: $global-color-fff;
@@ -221,6 +376,7 @@ const sizeChange = (limits) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -229,7 +385,7 @@ const sizeChange = (limits) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
+        .show {
           color: #0a58c2;
           border: solid 1px #006dd2;
         }

src/views/six/index.vue

@@ -5,17 +5,35 @@
     </el-col>
     <div class="two">
       <div class="w_1300">
+        <div class="active">
+          <div class="active_1" v-show="industry && industry.length > 0">
+            <div class="active_left">行业：</div>
+            <div class="active_right">
+              <div class="active_label" v-for="(item, index) in industry" :key="index">
+                {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
+              </div>
+            </div>
+          </div>
+          <div class="active_1" v-show="city && city.length > 0">
+            <div class="active_left">所在地：</div>
+            <div class="active_right">
+              <div class="active_label" v-for="(item, index) in city" :key="index">
+                {{ item.name }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="twoSeacher">
           <div class="twoLeft">
             <span>行业</span>
           </div>
           <div v-if="!oneShow" class="twoRight">
-            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
               {{ item.title }}
             </div>
           </div>
           <div v-else class="twoRight">
-            <div class="label" v-for="(item, index) in plateList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '2')">
               {{ item.title }}
             </div>
           </div>
@@ -33,7 +51,7 @@
             <span>所在地</span>
           </div>
           <div class="twoRight">
-            <div class="label" v-for="(item, index) in cityList" :key="index">
+            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '2')">
               {{ item.name }}
             </div>
           </div>
@@ -120,6 +138,9 @@ const list = ref([])
 let skip = 0
 let limit = inject('limit')
 const total = ref(6)
+// 查询
+const industry = ref([])
+const city = ref([])
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -131,10 +152,10 @@ const searchOther = async () => {
   let res
   res = await regionStore.list({ level: 'city', parent_code: 22 })
   if (res.errcode == '0') cityList.value = res.data
-  cityList.value.unshift({ code: '-1', name: '不限' })
+  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
   res = await sectorStore.query({ is_use: '0' })
   if (res.errcode == '0') plateList.value = res.data
-  plateList.value.unshift({ id: '-1', title: '不限' })
+  plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
 }
 const search = async (query = { skip, limit }) => {
   skip = query.skip
@@ -167,6 +188,62 @@ const sizeChange = (limits) => {
 const getUrl = (item) => {
   if (item && item.length > 0) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
 }
+const toSelect = (data, type) => {
+  if (data.id != '-1') {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = industry.value.find((i) => i.id == data.id)
+      if (!res) industry.value.push(data)
+    } else {
+      for (const val of cityList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = city.value.find((i) => i.id == data.id)
+      if (!res) city.value.push(data)
+    }
+  } else {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      industry.value = []
+    } else {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      city.value = []
+    }
+  }
+}
+const toDel = (data, type) => {
+  if (type == '1') {
+    for (const val of plateList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    industry.value = industry.value.filter((f) => f.id != data.id)
+    if (industry.value.length == 0) {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else {
+    for (const val of cityList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    city.value = city.value.filter((f) => f.id != data.id)
+    if (city.value.length == 0) {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -176,9 +253,56 @@ const getUrl = (item) => {
       height: 350px;
     }
   }
+
   .two {
     margin: 10px 0;
     background-color: $global-color-fff;
+    .active {
+      margin: 0 0 10px 0;
+      .active_1 {
+        display: inline-flex;
+        background: #f5f7f9;
+        border-radius: 2px;
+        min-height: 28px;
+        line-height: 28px;
+        margin: 0 10px 0 0;
+        position: relative;
+        background-color: #fff;
+        .active_left {
+          flex: 0 0 auto;
+          font-family: PingFangSC-Regular;
+          color: #525a68;
+          line-height: 36px;
+        }
+        .active_right {
+          font-family: PingFangSC-Regular;
+          color: rgba(0, 0, 0, 0.85);
+          line-height: 28px;
+          padding-right: 4px;
+          display: flex;
+          flex-wrap: wrap;
+          overflow: hidden;
+          .active_label {
+            overflow: hidden;
+            display: inline-block;
+            margin-right: 10px;
+            margin-top: 3px;
+            margin-bottom: 3px;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            flex: none;
+            box-sizing: border-box;
+            max-width: 100%;
+            height: 30px;
+            background: #f5f5f5;
+            border: 1px solid #f0f0f0;
+            border-radius: 2px;
+            cursor: default;
+          }
+        }
+      }
+    }
     .twoSeacher {
       display: flex;
       justify-content: center;
@@ -210,6 +334,7 @@ const getUrl = (item) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -218,7 +343,7 @@ const getUrl = (item) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
+        .show {
           color: #0a58c2;
           border: solid 1px #006dd2;
         }

src/views/thr/index.vue

@@ -58,6 +58,10 @@ let skip = 0
 let limit = inject('limit')
 const total = ref(0)
 const searchForm = ref({})
+// 查询
+const industry = ref([])
+const field = ref([])
+const city = ref([])
 // 选择
 const toTab = async (status) => {
   active.value = status
@@ -75,14 +79,14 @@ const searchOther = async () => {
   let res
   res = await regionStore.list({ level: 'city', parent_code: 22 })
   if (res.errcode == '0') cityList.value = res.data
-  cityList.value.unshift({ code: '-1', name: '不限' })
+  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
   res = await sectorStore.query({ is_use: '0' })
   if (res.errcode == '0') plateList.value = res.data
-  plateList.value.unshift({ id: '-1', title: '不限' })
+  plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
   // 技术领域
   res = await dictDataStore.query({ code: 'field', is_use: '0' })
   if (res.errcode == '0') typeList.value = res.data
-  typeList.value.unshift({ value: '-1', label: '不限' })
+  typeList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
 }
 const search = async (query = { skip, limit }) => {
   skip = query.skip
@@ -127,6 +131,10 @@ provide('total', total)
 provide('sizeChange', sizeChange)
 provide('changePage', changePage)
 provide('toSearchInfo', toSearchInfo)
+provide('searchForm', searchForm)
+provide('industry', industry)
+provide('field', field)
+provide('city', city)
 </script>
 <style scoped lang="scss">
 .main {

src/views/thr/parts/demand.vue

@@ -1,4 +1,30 @@
 <template>
+  <div class="active">
+    <div class="active_1" v-show="industry && industry.length > 0">
+      <div class="active_left">行业：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in industry" :key="index">
+          {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="active_1" v-show="field && field.length > 0">
+      <div class="active_left">技术领域：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in field" :key="index">
+          {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="active_1" v-show="city && city.length > 0">
+      <div class="active_left">所在地：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in city" :key="index">
+          {{ item.name }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="demand">
     <div class="demandOne">
       <div class="demandSeacher">
@@ -6,12 +32,12 @@
           <span>行业</span>
         </div>
         <div v-if="!oneShow" class="demandOneRight">
-          <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
             {{ item.title }}
           </div>
         </div>
         <div v-else class="demandOneRight">
-          <div class="label" v-for="(item, index) in plateList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
             {{ item.title }}
           </div>
         </div>
@@ -29,12 +55,12 @@
           <span>技术领域</span>
         </div>
         <div v-if="!twoShow" class="demandOneRight">
-          <div class="label" v-for="(item, index) in typeList.slice(0, 10)" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
             {{ item.label }}
           </div>
         </div>
         <div v-else class="demandOneRight">
-          <div class="label" v-for="(item, index) in typeList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
             {{ item.label }}
           </div>
         </div>
@@ -52,7 +78,7 @@
           <span>所在地</span>
         </div>
         <div class="demandOneRight">
-          <div class="label" v-for="(item, index) in cityList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
             {{ item.name }}
           </div>
         </div>
@@ -98,6 +124,9 @@ const changePage = inject('changePage')
 const plateList = inject('plateList')
 const typeList = inject('typeList')
 const cityList = inject('cityList')
+const industry = inject('industry')
+const field = inject('field')
+const city = inject('city')
 const searchForm = ref({})
 // 是否展开
 const oneShow = ref(false)
@@ -120,8 +149,133 @@ const getArea = (data) => {
   if (data) return data.join('-')
   else return '暂无'
 }
+const toSelect = (data, type) => {
+  if (data.id != '-1') {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = industry.value.find((i) => i.id == data.id)
+      if (!res) industry.value.push(data)
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = field.value.find((i) => i.id == data.id)
+      if (!res) field.value.push(data)
+    } else {
+      for (const val of cityList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = city.value.find((i) => i.id == data.id)
+      if (!res) city.value.push(data)
+    }
+  } else {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      industry.value = []
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      field.value = []
+    } else {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      city.value = []
+    }
+  }
+}
+const toDel = (data, type) => {
+  if (type == '1') {
+    for (const val of plateList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    industry.value = industry.value.filter((f) => f.id != data.id)
+    if (industry.value.length == 0) {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '2') {
+    for (const val of typeList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    field.value = field.value.filter((f) => f.id != data.id)
+    if (field.value.length == 0) {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else {
+    for (const val of cityList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    city.value = city.value.filter((f) => f.id != data.id)
+    if (city.value.length == 0) {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
+.active {
+  .active_1 {
+    display: inline-flex;
+    background: #f5f7f9;
+    border-radius: 2px;
+    min-height: 28px;
+    line-height: 28px;
+    margin: 10px 10px 0 0;
+    position: relative;
+    background-color: #fff;
+    padding: 10px;
+    .active_left {
+      flex: 0 0 auto;
+      font-family: PingFangSC-Regular;
+      color: #525a68;
+      line-height: 36px;
+    }
+    .active_right {
+      font-family: PingFangSC-Regular;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 28px;
+      padding-right: 4px;
+      display: flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      .active_label {
+        overflow: hidden;
+        display: inline-block;
+        margin-right: 10px;
+        margin-top: 3px;
+        margin-bottom: 3px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        flex: none;
+        box-sizing: border-box;
+        max-width: 100%;
+        height: 30px;
+        background: #f5f5f5;
+        border: 1px solid #f0f0f0;
+        border-radius: 2px;
+        cursor: default;
+      }
+    }
+  }
+}
 .demand {
   padding: 10px 0;
   .demandOne {
@@ -157,6 +311,7 @@ const getArea = (data) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -165,13 +320,13 @@ const getArea = (data) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
-          color: #0a58c2;
-          border: solid 1px #006dd2;
-        }
         .label:hover {
           color: $global-color-107;
         }
+        .show {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
       }
       .button {
         display: flex;

src/views/thr/parts/supply.vue

@@ -1,4 +1,30 @@
 <template>
+  <div class="active">
+    <div class="active_1" v-show="industry && industry.length > 0">
+      <div class="active_left">行业：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in industry" :key="index">
+          {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="active_1" v-show="field && field.length > 0">
+      <div class="active_left">技术领域：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in field" :key="index">
+          {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="active_1" v-show="city && city.length > 0">
+      <div class="active_left">所在地：</div>
+      <div class="active_right">
+        <div class="active_label" v-for="(item, index) in city" :key="index">
+          {{ item.name }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="demand">
     <div class="demandOne">
       <div class="demandSeacher">
@@ -6,12 +32,12 @@
           <span>行业</span>
         </div>
         <div v-if="!oneShow" class="demandOneRight">
-          <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
             {{ item.title }}
           </div>
         </div>
         <div v-else class="demandOneRight">
-          <div class="label" v-for="(item, index) in plateList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
             {{ item.title }}
           </div>
         </div>
@@ -29,12 +55,12 @@
           <span>技术领域</span>
         </div>
         <div v-if="!twoShow" class="demandOneRight">
-          <div class="label" v-for="(item, index) in typeList.slice(0, 10)" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
             {{ item.label }}
           </div>
         </div>
         <div v-else class="demandOneRight">
-          <div class="label" v-for="(item, index) in typeList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
             {{ item.label }}
           </div>
         </div>
@@ -52,7 +78,7 @@
           <span>所在地</span>
         </div>
         <div class="demandOneRight">
-          <div class="label" v-for="(item, index) in cityList" :key="index">
+          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
             {{ item.name }}
           </div>
         </div>
@@ -98,6 +124,9 @@ const changePage = inject('changePage')
 const plateList = inject('plateList')
 const typeList = inject('typeList')
 const cityList = inject('cityList')
+const industry = inject('industry')
+const field = inject('field')
+const city = inject('city')
 const searchForm = ref({})
 // 是否展开
 const oneShow = ref(false)
@@ -114,8 +143,133 @@ const column = ref([
 const toView = (item) => {
   router.push({ path: '/supply/detail', query: { id: item.id || item._id } })
 }
+const toSelect = (data, type) => {
+  if (data.id != '-1') {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = industry.value.find((i) => i.id == data.id)
+      if (!res) industry.value.push(data)
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = field.value.find((i) => i.id == data.id)
+      if (!res) field.value.push(data)
+    } else {
+      for (const val of cityList.value) {
+        if (data.id == val.id) val.is_active = true
+        if (val.id == '-1') val.is_active = false
+      }
+      const res = city.value.find((i) => i.id == data.id)
+      if (!res) city.value.push(data)
+    }
+  } else {
+    if (type == '1') {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      industry.value = []
+    } else if (type == '2') {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      field.value = []
+    } else {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+        else val.is_active = false
+      }
+      city.value = []
+    }
+  }
+}
+const toDel = (data, type) => {
+  if (type == '1') {
+    for (const val of plateList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    industry.value = industry.value.filter((f) => f.id != data.id)
+    if (industry.value.length == 0) {
+      for (const val of plateList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else if (type == '2') {
+    for (const val of typeList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    field.value = field.value.filter((f) => f.id != data.id)
+    if (field.value.length == 0) {
+      for (const val of typeList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  } else {
+    for (const val of cityList.value) {
+      if (data.id == val.id) val.is_active = false
+    }
+    city.value = city.value.filter((f) => f.id != data.id)
+    if (city.value.length == 0) {
+      for (const val of cityList.value) {
+        if (val.id == '-1') val.is_active = true
+      }
+    }
+  }
+}
 </script>
 <style scoped lang="scss">
+.active {
+  .active_1 {
+    display: inline-flex;
+    background: #f5f7f9;
+    border-radius: 2px;
+    min-height: 28px;
+    line-height: 28px;
+    margin: 10px 10px 0 0;
+    position: relative;
+    background-color: #fff;
+    padding: 10px;
+    .active_left {
+      flex: 0 0 auto;
+      font-family: PingFangSC-Regular;
+      color: #525a68;
+      line-height: 36px;
+    }
+    .active_right {
+      font-family: PingFangSC-Regular;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 28px;
+      padding-right: 4px;
+      display: flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      .active_label {
+        overflow: hidden;
+        display: inline-block;
+        margin-right: 10px;
+        margin-top: 3px;
+        margin-bottom: 3px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        flex: none;
+        box-sizing: border-box;
+        max-width: 100%;
+        height: 30px;
+        background: #f5f5f5;
+        border: 1px solid #f0f0f0;
+        border-radius: 2px;
+        cursor: default;
+      }
+    }
+  }
+}
 .demand {
   padding: 10px 0;
   .demandOne {
@@ -151,6 +305,7 @@ const toView = (item) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -159,13 +314,13 @@ const toView = (item) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
-          color: #0a58c2;
-          border: solid 1px #006dd2;
-        }
         .label:hover {
           color: $global-color-107;
         }
+        .show {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
       }
       .button {
         display: flex;