修改查询

src/views/detail/expert.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>
@@ -134,6 +160,10 @@ let limit = 15
 const total = ref(0)
 // 搜索
 const searchForm = ref({})
+// 查询
+const industry = ref([])
+const field = ref([])
+const city = ref([])
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -146,13 +176,13 @@ const searchOther = async () => {
   // 技术领域
   result = await dictDataStore.query({ code: 'field', is_use: '0' })
   if ($checkRes(result)) typeList.value = result.data
-  typeList.value.unshift({ value: '-1', label: '不限' })
+  typeList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
   result = await regionStore.list({ level: 'city', parent_code: 22 })
   if ($checkRes(result)) cityList.value = result.data
-  cityList.value.unshift({ code: '-1', name: '不限' })
+  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
   result = await sectorStore.query({ is_use: '0' })
   if ($checkRes(result)) plateList.value = result.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
@@ -186,6 +216,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 {
@@ -197,6 +306,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;
@@ -231,6 +386,7 @@ const sizeChange = (limits) => {
         border-left: solid 1px #e5e5e5;
         background-color: #fff;
         .label {
+          margin-right: 3px;
           color: #313131;
           margin-bottom: 10px;
           padding: 8px 10px;
@@ -239,7 +395,7 @@ const sizeChange = (limits) => {
           border: solid 1px transparent;
           cursor: pointer;
         }
-        .label:first-child {
+        .show {
           color: #0a58c2;
           border: solid 1px #006dd2;
         }

src/views/detail/project.vue

@@ -18,10 +18,10 @@
                 <span>行业</span>
               </div>
               <div v-if="!twoShow" class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in plateList.slice(0, 5)" :key="index" v-model="checked1" :label="item.title" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in plateList.slice(0, 5)" :key="index" v-model="checked1" :label="item.title" size="large" />
               </div>
               <div v-else class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in plateList" :key="index" v-model="checked1" :label="item.title" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in plateList" :key="index" v-model="checked1" :label="item.title" size="large" />
               </div>
               <div class="button">
                 <span v-if="!twoShow" @click="twoShow = true">
@@ -37,10 +37,10 @@
                 <span>技术领域</span>
               </div>
               <div v-if="!oneShow" class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in typeList.slice(0, 8)" :key="index" v-model="checked2" :label="item.label" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in typeList.slice(0, 8)" :key="index" v-model="checked2" :label="item.label" size="large" />
               </div>
               <div v-else class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in typeList" :key="index" v-model="checked2" :label="item.label" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in typeList" :key="index" v-model="checked2" :label="item.label" size="large" />
               </div>
               <div class="button">
                 <span v-if="!oneShow" @click="oneShow = true">
@@ -56,7 +56,7 @@
                 <span>所在地</span>
               </div>
               <div class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in cityList" :key="index" v-model="checked3" :label="item.name" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in cityList" :key="index" v-model="checked3" :label="item.name" size="large" />
               </div>
             </div>
             <div class="Seacher">
@@ -64,7 +64,7 @@
                 <span>项目成熟度</span>
               </div>
               <div class="OneRight">
-                <el-checkbox class="label" v-for="(item, index) in maturityList" :key="index" v-model="checked1" :label="item.label" size="large" />
+                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in maturityList" :key="index" v-model="checked4" :label="item.label" size="large" />
               </div>
             </div>
             <div class="one_ipunt">
@@ -122,6 +122,7 @@ const loading = ref(false)
 const checked1 = ref([])
 const checked2 = ref([])
 const checked3 = ref([])
+const checked4 = ref([])
 const typeList = ref([])
 const plateList = ref([])
 // 字典表
@@ -149,17 +150,19 @@ const searchOther = async () => {
   // 成熟度
   result = await dictDataStore.query({ code: 'projectMaturity', is_use: '0' })
   if ($checkRes(result)) maturityList.value = result.data
+  maturityList.value.unshift({ value: '-1', label: '不限' })
   // // 行业分类
   // result = await dictDataStore.query({ code: 'industry', is_use: '0' })
   // if ($checkRes(result)) industryList.value = result.data
   // 技术领域
   result = await dictDataStore.query({ code: 'field', is_use: '0' })
   if ($checkRes(result)) typeList.value = result.data
-  maturityList.value.unshift({ value: '-1', label: '不限' })
-
+  typeList.value.unshift({ value: '-1', label: '不限' })
+  // 地区
   result = await regionStore.list({ level: 'city', parent_code: 22 })
   if ($checkRes(result)) cityList.value = result.data
   cityList.value.unshift({ code: '-1', name: '不限' })
+  // 行业
   result = await sectorStore.query({ is_use: '0' })
   if ($checkRes(result)) plateList.value = result.data
   plateList.value.unshift({ id: '-1', title: '不限' })
@@ -196,6 +199,13 @@ const sizeChange = (limits) => {
   currentPage.value = 1
   search({ skip: 0, limit: limit })
 }
+// 选择
+const oneChange = (value) => {
+  console.log('1', checked1.value)
+  console.log('2', checked2.value)
+  console.log('3', checked3.value)
+  console.log('4', checked4.value)
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -244,9 +254,6 @@ const sizeChange = (limits) => {
             .label {
               cursor: pointer;
             }
-            .label:first-child {
-              color: #0a58c2;
-            }
             .label:hover {
               color: $global-color-107;
             }