修改组件

src/components/custom/custom-search.vue

@@ -1,41 +1,41 @@
 <template>
   <div class="c-search">
     <div class="searchList" v-for="(item, index) in searchFields" :key="index">
-      <div class="twoSeacher" v-if="item.type == 'plate'">
+      <div class="twoSeacher" v-if="item.type == '1'">
         <div class="twoLeft">
           <span>{{ item.title }}</span>
         </div>
-        <div v-if="!item.show" class="twoRight">
-          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in plateList.slice(0, 6)" :key="indexs" @click="toSelect(tags, 'plate')">
+        <div v-if="!oneShow" class="twoRight">
+          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in plateList.slice(0, 6)" :key="indexs" @click="toSelect(tags, item.type)">
             {{ tags.title }}
           </div>
         </div>
         <div v-else class="twoRight">
-          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in plateList" :key="indexs" @click="toSelect(tags, 'plate')">
+          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in plateList" :key="indexs" @click="toSelect(tags, item.type)">
             {{ tags.title }}
           </div>
         </div>
         <div class="button">
-          <span v-if="!item.show" @click="item.show = true">
+          <span v-if="!oneShow" @click="oneShow = true">
             <el-icon><ArrowDown /></el-icon>
           </span>
-          <span v-else @click="item.show = false">
+          <span v-else @click="oneShow = false">
             <el-icon><ArrowUp /></el-icon>
           </span>
         </div>
       </div>
-      <div class="twoSeacher" v-if="item.type == 'field'">
+      <div class="twoSeacher" v-else-if="item.type == '2'">
         <div class="twoLeft">
           <span>{{ item.title }}</span>
         </div>
         <div v-if="!twoShow" class="twoRight">
-          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, 'field')">
-            {{ item.label }}
+          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in typeList.slice(0, 10)" :key="indexs" @click="toSelect(tags, item.type)">
+            {{ tags.label }}
           </div>
         </div>
         <div v-else class="twoRight">
-          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, 'field')">
-            {{ item.label }}
+          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in typeList" :key="indexs" @click="toSelect(tags, item.type)">
+            {{ tags.label }}
           </div>
         </div>
         <div class="button">
@@ -47,18 +47,18 @@
           </span>
         </div>
       </div>
-      <div class="twoSeacher" v-else-if="item.type == 'city'">
+      <div class="twoSeacher" v-else-if="item.type == '3'">
         <div class="twoLeft">
           <span>{{ item.title }}</span>
         </div>
         <div class="twoRight">
-          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in cityList" :key="indexs" @click="toSelect(tags, 'city')">
+          <div class="label" :class="[tags.is_active ? 'show' : '']" v-for="(tags, indexs) in cityList" :key="indexs" @click="toSelect(tags, item.type)">
             {{ tags.name }}
           </div>
         </div>
       </div>
     </div>
-    <div class="twoIpunt">
+    <div class="twoIpunt" v-if="is_search">
       <el-input class="input" v-for="(item, index) in fields" :key="index" clearable size="large" v-model="searchForm[item.model]" :placeholder="getField('placeholder', item)" />
       <el-button class="button" size="large" type="primary" @click="toSearchInfo">检索</el-button>
     </div>
@@ -70,22 +70,144 @@ import { get } from 'lodash-es'
 const props = defineProps({
   searchFields: { type: Array, default: () => [] },
   fields: { type: Array, default: () => [] },
+  is_search: { type: Boolean, default: () => true },
   plateList: { type: Array, default: () => [] },
-  cityList: { type: Array, default: () => [] },
-  typeList: { type: Array, default: () => [] }
+  typeList: { type: Array, default: () => [] },
+  cityList: { type: Array, default: () => [] }
 })
+
+const { plateList } = toRefs(props)
+const { typeList } = toRefs(props)
+const { cityList } = toRefs(props)
+
 const searchForm = ref({})
+// // 是否展开
+const oneShow = ref(false)
+const twoShow = ref(false)
+
+// 查询
+const industry = ref([])
+const field = ref([])
+const city = ref([])
 
 const emits = defineEmits(['toSelect', 'toDel', 'toSearchInfo'])
 
-const toSelect = (data, type) => {
-  emits('toSelect', data, type)
+// 筛选条件
+const toSearchFind = async () => {
+  if (industry.value && industry.value.length > 0) {
+    searchForm.value.industry = industry.value.map((i) => {
+      return i.title
+    })
+  } else delete searchForm.value.industry
+  if (field.value && field.value.length > 0) {
+    searchForm.value.field = field.value.map((i) => {
+      return i.label
+    })
+  } else delete searchForm.value.field
+  if (city.value && city.value.length > 0) {
+    searchForm.value.area = city.value.map((i) => {
+      return i.name
+    })
+  } else delete searchForm.value.area
+
+  await toSearchInfo()
+}
+
+const toSelect = async (data, type) => {
+  if (data.is_active) {
+    toDel(data, type)
+  } else {
+    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 = []
+      }
+    }
+  }
+  await toSearchFind()
+}
+const toDel = async (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
+      }
+    }
+  }
+  await toSearchFind()
 }
-const toDel = (data, type) => {
-  emits('toDel', data, type)
+const removeEmptyValues = (obj) => {
+  Object.keys(obj).forEach((item) => {
+    if (!obj[item]) delete obj[item]
+  })
+  return obj
 }
-const toSearchInfo = () => {
-  emits('toSearchInfo', searchForm.value)
+const toSearchInfo = async () => {
+  const search = await removeEmptyValues(searchForm.value)
+  console.log(search)
+  emits('toSearchInfo', search)
 }
 const getField = (item, data) => {
   let res = get(data, item, null)
@@ -131,7 +253,7 @@ const getField = (item, data) => {
       border-left: solid 1px #e5e5e5;
       background-color: #fff;
       .label {
-        margin-right: 3px;
+        margin: 0 3px 3px 0;
         color: #313131;
         padding: 8px 10px;
         border-radius: 3px;

src/views/detail/company.vue

@@ -236,15 +236,18 @@ const toSearchFind = async () => {
     searchForm.value.industry = industry.value.map((i) => {
       return i.title
     })
-  } else if (pattern.value && pattern.value.length > 0) {
-    searchForm.value.pattern = pattern.value.map((i) => {
+  } else delete searchForm.value.industry
+  if (pattern.value && pattern.value.length > 0) {
+    searchForm.value.field = pattern.value.map((i) => {
       return i.label
     })
-  } else if (city.value && city.value.length > 0) {
+  } else delete searchForm.value.pattern
+  if (city.value && city.value.length > 0) {
     searchForm.value.area = city.value.map((i) => {
       return i.name
     })
-  } else searchForm.value = {}
+  } else delete searchForm.value.area
+
   await search({ skip, limit })
 }
 const toSelect = async (data, type) => {

src/views/detail/expert.vue

@@ -222,15 +222,17 @@ const toSearchFind = async () => {
     searchForm.value.industry = industry.value.map((i) => {
       return i.title
     })
-  } else if (field.value && field.value.length > 0) {
+  } else delete searchForm.value.industry
+  if (field.value && field.value.length > 0) {
     searchForm.value.field = field.value.map((i) => {
       return i.label
     })
-  } else if (city.value && city.value.length > 0) {
+  } else delete searchForm.value.field
+  if (city.value && city.value.length > 0) {
     searchForm.value.area = city.value.map((i) => {
       return i.name
     })
-  } else searchForm.value = {}
+  } else delete searchForm.value.area
   await search({ skip, limit })
 }
 const toSelect = async (data, type) => {

src/views/nine/index.vue

@@ -314,27 +314,38 @@ const toSearchFind = async () => {
     searchForm.value.industry = industry.value.map((i) => {
       return i.title
     })
-  } else if (field.value && field.value.length > 0) {
+  } else delete searchForm.value.industry
+
+  if (field.value && field.value.length > 0) {
     searchForm.value.field = field.value.map((i) => {
       return i.label
     })
-  } else if (mature.value && mature.value.length > 0) {
+  } else delete searchForm.value.field
+
+  if (mature.value && mature.value.length > 0) {
     searchForm.value.mature = mature.value.map((i) => {
       return i.value
     })
-  } else if (sell.value && sell.value.length > 0) {
+  } else delete searchForm.value.mature
+
+  if (sell.value && sell.value.length > 0) {
     searchForm.value.sell = sell.value.map((i) => {
       return i.value
     })
-  } else if (money.value && money.value.length > 0) {
+  } else delete searchForm.value.sell
+
+  if (money.value && money.value.length > 0) {
     searchForm.value.money = money.value.map((i) => {
-      return i.label
+      return i.value
     })
-  } else if (city.value && city.value.length > 0) {
+  } else delete searchForm.value.money
+
+  if (city.value && city.value.length > 0) {
     searchForm.value.area = city.value.map((i) => {
       return i.name
     })
-  } else searchForm.value = {}
+  } else delete searchForm.value.area
+
   await search({ skip, limit })
 }
 const toSelect = async (data, type) => {

src/views/seven/index.vue

@@ -212,15 +212,17 @@ const toSearchFind = async () => {
     searchForm.value.industry = industry.value.map((i) => {
       return i.title
     })
-  } else if (field.value && field.value.length > 0) {
+  } else delete searchForm.value.industry
+  if (field.value && field.value.length > 0) {
     searchForm.value.field = field.value.map((i) => {
       return i.label
     })
-  } else if (city.value && city.value.length > 0) {
+  } else delete searchForm.value.field
+  if (city.value && city.value.length > 0) {
     searchForm.value.area = city.value.map((i) => {
       return i.name
     })
-  } else searchForm.value = {}
+  } else delete searchForm.value.area
   await search({ skip, limit })
 }
 const toSelect = async (data, type) => {

src/views/six/index.vue

@@ -192,11 +192,13 @@ const toSearchFind = async () => {
     searchForm.value.industry = industry.value.map((i) => {
       return i.title
     })
-  } else if (city.value && city.value.length > 0) {
+  } else delete searchForm.value.industry
+
+  if (city.value && city.value.length > 0) {
     searchForm.value.area = city.value.map((i) => {
       return i.name
     })
-  } else searchForm.value = {}
+  } else delete searchForm.value.area
   await search({ skip, limit })
 }
 const toSelect = async (data, type) => {

src/views/thr/index.vue

@@ -81,6 +81,7 @@ const toTab = async (status) => {
     else val.is_active = false
   }
   city.value = []
+  searchForm.value = {}
   await search()
 }
 // 请求
@@ -131,23 +132,6 @@ const toSearchInfo = async (data, type) => {
   searchForm.value = data
   await search({ skip, limit })
 }
-// 筛选条件
-const toSearchFind = async () => {
-  if (industry.value && industry.value.length > 0) {
-    searchForm.value.industry = industry.value.map((i) => {
-      return i.title
-    })
-  } else if (field.value && field.value.length > 0) {
-    searchForm.value.field = field.value.map((i) => {
-      return i.label
-    })
-  } else if (city.value && city.value.length > 0) {
-    searchForm.value.area = city.value.map((i) => {
-      return i.name
-    })
-  } else searchForm.value = {}
-  await search({ skip, limit })
-}
 const currentPage = ref(1)
 // 分页
 const changePage = (page = currentPage.value) => {
@@ -168,7 +152,6 @@ provide('total', total)
 provide('sizeChange', sizeChange)
 provide('changePage', changePage)
 provide('toSearchInfo', toSearchInfo)
-provide('toSearchFind', toSearchFind)
 provide('searchForm', searchForm)
 provide('industry', industry)
 provide('field', field)

src/views/thr/parts/demand.vue

@@ -1,96 +1,6 @@
 <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">
-        <div class="demandOneLeft">
-          <span>行业</span>
-        </div>
-        <div v-if="!oneShow" class="demandOneRight">
-          <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" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
-            {{ item.title }}
-          </div>
-        </div>
-        <div class="button">
-          <span v-if="!oneShow" @click="oneShow = true">
-            <el-icon><ArrowDown /></el-icon>
-          </span>
-          <span v-else @click="oneShow = false">
-            <el-icon><ArrowUp /></el-icon>
-          </span>
-        </div>
-      </div>
-      <div class="demandSeacher">
-        <div class="demandOneLeft">
-          <span>技术领域</span>
-        </div>
-        <div v-if="!twoShow" class="demandOneRight">
-          <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" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
-            {{ item.label }}
-          </div>
-        </div>
-        <div class="button">
-          <span v-if="!twoShow" @click="twoShow = true">
-            <el-icon><ArrowDown /></el-icon>
-          </span>
-          <span v-else @click="twoShow = false">
-            <el-icon><ArrowUp /></el-icon>
-          </span>
-        </div>
-      </div>
-      <div class="demandSeacher">
-        <div class="demandOneLeft">
-          <span>所在地</span>
-        </div>
-        <div class="demandOneRight">
-          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
-            {{ item.name }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="demandIpunt">
-      <a-input class="input" size="large" v-model:value="searchForm.name" placeholder="需求名称" />
-      <a-input class="input" size="large" v-model:value="searchForm.tags" placeholder="标签名称" />
-      <a-input class="input" size="large" v-model:value="searchForm.industry" placeholder="所属产业" />
-      <a-input class="input" size="large" v-model:value="searchForm.company" placeholder="所属企业" />
-      <a-button class="button" size="large" type="primary" @click="toSearchInfo(searchForm, '0')">检索</a-button>
-    </div>
+    <custom-search :cityList="cityList" :typeList="typeList" :plateList="plateList" :fields="fields" :searchFields="searchFields" @toSearchInfo="toSearchInfo($event, '0')"></custom-search>
     <div class="demandTwo">
       <div class="demandTable">
         <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
@@ -119,7 +29,7 @@ import { get } from 'lodash-es'
 const router = useRouter()
 const list = inject('list')
 const total = inject('total')
-const toSearchFind = inject('toSearchFind')
+const toSearchInfo = inject('toSearchInfo')
 const sizeChange = inject('sizeChange')
 const changePage = inject('changePage')
 const plateList = inject('plateList')
@@ -127,13 +37,6 @@ const typeList = inject('typeList')
 const cityList = inject('cityList')
 const statusList = inject('statusList')
 
-const industry = inject('industry')
-const field = inject('field')
-const city = inject('city')
-const searchForm = ref({})
-// 是否展开
-const oneShow = ref(false)
-const twoShow = ref(false)
 const column = ref([
   { name: '序号', style: { width: '100px' }, key: 'num' },
   { name: '需方名称', style: { width: '250px' }, key: 'name' },
@@ -143,6 +46,16 @@ const column = ref([
   { name: '状态', style: { width: '100px' }, key: 'status' },
   { name: '操作', style: { width: '185px' }, key: 'operation' }
 ])
+const fields = ref([
+  { model: 'name', label: '需方名称' },
+  { model: 'tags', label: '标签名称' },
+  { model: 'company', label: '所属企业' }
+])
+const searchFields = ref([
+  { title: '行业', type: '1', list: plateList },
+  { title: '技术领域', type: '2', list: typeList },
+  { title: '所在地', type: '3', list: cityList }
+])
 // 查看详情
 const toView = (item) => {
   router.push({ path: '/demand/detail', query: { id: item.id || item._id } })
@@ -160,210 +73,10 @@ const getDict = (data, model) => {
     return get(res, 'label')
   }
 }
-const toSelect = async (data, type) => {
-  if (data.is_active) {
-    toDel(data, type)
-  } else {
-    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 = []
-      }
-    }
-  }
-  await toSearchFind()
-}
-const toDel = async (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
-      }
-    }
-  }
-  await toSearchFind()
-}
 </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 {
-    background-color: $global-color-fff;
-    .demandSeacher {
-      display: flex;
-      justify-content: center;
-      align-items: stretch;
-      position: relative;
-      border: solid 1px #e5e5e5;
-      border-bottom: 0;
-      font-size: $global-font-size-18;
-      color: #666;
-      min-height: 60px;
-      overflow: hidden;
-      .demandOneLeft {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        width: 110px;
-        text-align: center;
-        color: #000;
-        font-weight: bold;
-        background-color: #fafafa;
-      }
-      .demandOneRight {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 12px;
-        flex: 1;
-        border-left: solid 1px #e5e5e5;
-        background-color: #fff;
-        .label {
-          margin-right: 3px;
-          color: #313131;
-          margin-bottom: 10px;
-          padding: 8px 10px;
-          border-radius: 3px;
-          background-color: #fff;
-          border: solid 1px transparent;
-          cursor: pointer;
-        }
-        .label:hover {
-          color: $global-color-107;
-        }
-        .show {
-          color: #0a58c2;
-          border: solid 1px #006dd2;
-        }
-      }
-      .button {
-        display: flex;
-        align-items: center;
-        margin: 0 5px 0 0;
-      }
-    }
-  }
-  .demandIpunt {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 10px 0;
-    .input {
-      margin: 0 5px 0 0;
-    }
-    .button {
-      margin: 0 0 0 5px;
-    }
-  }
   .demandTwo {
     margin: 10px 0;
     .demandTable {

src/views/thr/parts/supply.vue

@@ -1,96 +1,6 @@
 <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">
-        <div class="demandOneLeft">
-          <span>行业</span>
-        </div>
-        <div v-if="!oneShow" class="demandOneRight">
-          <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" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
-            {{ item.title }}
-          </div>
-        </div>
-        <div class="button">
-          <span v-if="!oneShow" @click="oneShow = true">
-            <el-icon><ArrowDown /></el-icon>
-          </span>
-          <span v-else @click="oneShow = false">
-            <el-icon><ArrowUp /></el-icon>
-          </span>
-        </div>
-      </div>
-      <div class="demandSeacher">
-        <div class="demandOneLeft">
-          <span>技术领域</span>
-        </div>
-        <div v-if="!twoShow" class="demandOneRight">
-          <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" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
-            {{ item.label }}
-          </div>
-        </div>
-        <div class="button">
-          <span v-if="!twoShow" @click="twoShow = true">
-            <el-icon><ArrowDown /></el-icon>
-          </span>
-          <span v-else @click="twoShow = false">
-            <el-icon><ArrowUp /></el-icon>
-          </span>
-        </div>
-      </div>
-      <div class="demandSeacher">
-        <div class="demandOneLeft">
-          <span>所在地</span>
-        </div>
-        <div class="demandOneRight">
-          <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
-            {{ item.name }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="demandIpunt">
-      <a-input class="input" size="large" v-model:value="searchForm.name" placeholder="供应名称" />
-      <a-input class="input" size="large" v-model:value="searchForm.tags" placeholder="标签名称" />
-      <a-input class="input" size="large" v-model:value="searchForm.industry" placeholder="所属产业" />
-      <a-input class="input" size="large" v-model:value="searchForm.source" placeholder="所属来源" />
-      <a-button class="button" size="large" type="primary" @click="toSearchInfo(searchForm, '1')">检索</a-button>
-    </div>
+    <custom-search :cityList="cityList" :typeList="typeList" :plateList="plateList" :fields="fields" :searchFields="searchFields" @toSearchInfo="toSearchInfo($event, '1')"></custom-search>
     <div class="demandTwo">
       <div class="demandTable">
         <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
@@ -118,20 +28,16 @@
 const router = useRouter()
 const list = inject('list')
 const total = inject('total')
-const toSearchFind = inject('toSearchFind')
 const toSearchInfo = inject('toSearchInfo')
 const sizeChange = inject('sizeChange')
 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)
-const twoShow = ref(false)
+// const searchForm = ref({})
+// // 是否展开
+// const oneShow = ref(false)
+// const twoShow = ref(false)
 const column = ref([
   { name: '序号', style: { width: '100px' }, key: 'num' },
   { name: '供方内容', style: { width: '320px' }, key: 'name' },
@@ -140,202 +46,24 @@ const column = ref([
   { name: '来源', style: { width: '200px' }, key: 'source' },
   { name: '操作', style: { width: '200px' }, key: 'operation' }
 ])
+const fields = ref([
+  { model: 'name', label: '供应名称' },
+  { model: 'tags', label: '标签名称' },
+  { model: 'source', label: '所属来源' }
+])
+const searchFields = ref([
+  { title: '行业', type: '1', list: plateList },
+  { title: '技术领域', type: '2', list: typeList },
+  { title: '所在地', type: '3', list: cityList }
+])
 // 查看详情
 const toView = (item) => {
   router.push({ path: '/supply/detail', query: { id: item.id || item._id } })
 }
-const toSelect = async (data, type) => {
-  if (data.is_active) {
-    toDel(data, type)
-  } else {
-    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 = []
-      }
-    }
-  }
-  await toSearchFind()
-}
-const toDel = async (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
-      }
-    }
-  }
-  await toSearchFind()
-}
 </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 {
-    background-color: $global-color-fff;
-    .demandSeacher {
-      display: flex;
-      justify-content: center;
-      align-items: stretch;
-      position: relative;
-      border: solid 1px #e5e5e5;
-      border-bottom: 0;
-      font-size: $global-font-size-18;
-      color: #666;
-      min-height: 60px;
-      overflow: hidden;
-      .demandOneLeft {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        width: 110px;
-        text-align: center;
-        color: #000;
-        font-weight: bold;
-        background-color: #fafafa;
-      }
-      .demandOneRight {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 12px;
-        flex: 1;
-        border-left: solid 1px #e5e5e5;
-        background-color: #fff;
-        .label {
-          margin-right: 3px;
-          color: #313131;
-          margin-bottom: 10px;
-          padding: 8px 10px;
-          border-radius: 3px;
-          background-color: #fff;
-          border: solid 1px transparent;
-          cursor: pointer;
-        }
-        .label:hover {
-          color: $global-color-107;
-        }
-        .show {
-          color: #0a58c2;
-          border: solid 1px #006dd2;
-        }
-      }
-      .button {
-        display: flex;
-        align-items: center;
-        margin: 0 5px 0 0;
-      }
-    }
-  }
   .demandIpunt {
     display: flex;
     align-items: center;