|
@@ -2,8 +2,52 @@
|
|
|
<div id="index">
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
- <el-col :span="24" class="idemand">
|
|
|
+ <el-col :span="24" class="demand">
|
|
|
<el-image class="image" :src="demand" fit="fill" />
|
|
|
+ <div class="select">
|
|
|
+ <el-row class="select_1">
|
|
|
+ <el-col class="over" :span="6" v-if="oneList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">技术领域:</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in oneList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'one')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="6" v-if="twoList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">合作方式:</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in twoList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'two')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="6" v-if="thrList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">需求地区:</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in thrList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'thr')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="6" v-if="fourList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">需求状态:</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in fourList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'four')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="one">
|
|
@@ -16,6 +60,8 @@
|
|
|
:key="index"
|
|
|
type="link"
|
|
|
size="samll"
|
|
|
+ @click="toSelect(val, item)"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
</a-button>
|
|
@@ -95,6 +141,11 @@ let limit = inject('limit')
|
|
|
const total = ref(0)
|
|
|
// 字典表
|
|
|
const fieldList = ref([])
|
|
|
+const selectList = ref([])
|
|
|
+const oneList = ref([])
|
|
|
+const twoList = ref([])
|
|
|
+const thrList = ref([])
|
|
|
+const fourList = ref([])
|
|
|
const searchList = ref([
|
|
|
{
|
|
|
title: '技术领域',
|
|
@@ -121,10 +172,10 @@ const searchList = ref([
|
|
|
{ value: '2', label: '技术咨询' },
|
|
|
{ value: '3', label: '技术服务' },
|
|
|
{ value: '4', label: '许可转让' },
|
|
|
- { value: '4', label: '完全转让' },
|
|
|
- { value: '4', label: '技术入股' },
|
|
|
- { value: '4', label: '合作开发' },
|
|
|
- { value: '4', label: '其他' }
|
|
|
+ { value: '5', label: '完全转让' },
|
|
|
+ { value: '6', label: '技术入股' },
|
|
|
+ { value: '7', label: '合作开发' },
|
|
|
+ { value: '8', label: '其他' }
|
|
|
]
|
|
|
},
|
|
|
{
|
|
@@ -142,18 +193,18 @@ const searchList = ref([
|
|
|
{ value: '9', label: '浙江省' },
|
|
|
{ value: '10', label: '安徽省' },
|
|
|
{ value: '11', label: '福建省' },
|
|
|
- { value: '0', label: '江西省' },
|
|
|
- { value: '1', label: '山东省' },
|
|
|
- { value: '2', label: '河南省' },
|
|
|
- { value: '3', label: '湖北省' },
|
|
|
- { value: '4', label: '湖南省' },
|
|
|
- { value: '5', label: '广东省' },
|
|
|
- { value: '6', label: '广西壮族自治区' },
|
|
|
- { value: '7', label: '海南省' },
|
|
|
- { value: '8', label: '重庆市' },
|
|
|
- { value: '9', label: '四川省' },
|
|
|
- { value: '10', label: '贵州省' },
|
|
|
- { value: '11', label: '云南省' }
|
|
|
+ { value: '12', label: '江西省' },
|
|
|
+ { value: '13', label: '山东省' },
|
|
|
+ { value: '14', label: '河南省' },
|
|
|
+ { value: '15', label: '湖北省' },
|
|
|
+ { value: '16', label: '湖南省' },
|
|
|
+ { value: '17', label: '广东省' },
|
|
|
+ { value: '18', label: '广西壮族自治区' },
|
|
|
+ { value: '19', label: '海南省' },
|
|
|
+ { value: '20', label: '重庆市' },
|
|
|
+ { value: '21', label: '四川省' },
|
|
|
+ { value: '22', label: '贵州省' },
|
|
|
+ { value: '23', label: '云南省' }
|
|
|
]
|
|
|
},
|
|
|
{
|
|
@@ -206,6 +257,83 @@ const getDict = (data, model) => {
|
|
|
const getArea = (data) => {
|
|
|
if (data) return data.join(',')
|
|
|
}
|
|
|
+// 选择查询
|
|
|
+const toSelect = (data, item) => {
|
|
|
+ for (const val of searchList.value) {
|
|
|
+ if (val.title == data.title) {
|
|
|
+ for (const i of data.list) {
|
|
|
+ if (i.value == item.value) {
|
|
|
+ i.is_active = !i.is_active
|
|
|
+ if (i.is_active == true) selectList.value.push({ ...i, ...{ title: val.title } })
|
|
|
+ else selectList.value = selectList.value.filter((f) => f.label != i.label)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (const val of selectList.value) {
|
|
|
+ if (val.title == '技术领域') {
|
|
|
+ const one = oneList.value.find((f) => f.value == val.value)
|
|
|
+ if (!one) oneList.value.push(val)
|
|
|
+ else oneList.value = oneList.value.filter((f) => f.value == val.value)
|
|
|
+ }
|
|
|
+ if (val.title == '合作方式') {
|
|
|
+ const two = twoList.value.find((f) => f.value == val.value)
|
|
|
+ if (!two) twoList.value.push(val)
|
|
|
+ else twoList.value = twoList.value.filter((f) => f.value == val.value)
|
|
|
+ }
|
|
|
+ if (val.title == '需求地区') {
|
|
|
+ const thr = thrList.value.find((f) => f.value == val.value)
|
|
|
+ if (!thr) thrList.value.push(val)
|
|
|
+ else thrList.value = thrList.value.filter((f) => f.value == val.value)
|
|
|
+ }
|
|
|
+ if (val.title == '需求状态') {
|
|
|
+ const four = fourList.value.find((f) => f.value == val.value)
|
|
|
+ if (!four) fourList.value.push(val)
|
|
|
+ else fourList.value = fourList.value.filter((f) => f.value == val.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 删除标签
|
|
|
+const toDel = (item, type) => {
|
|
|
+ if (type == 'one') {
|
|
|
+ const one = oneList.value.filter((f) => f.value != item.value)
|
|
|
+ oneList.value = one
|
|
|
+ if (item.title == searchList.value[0].title) {
|
|
|
+ for (const i of searchList.value[0].list) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'two') {
|
|
|
+ const two = twoList.value.filter((f) => f.value != item.value)
|
|
|
+ twoList.value = two
|
|
|
+ if (item.title == searchList.value[1].title) {
|
|
|
+ for (const i of searchList.value[1].list) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'thr') {
|
|
|
+ const thr = thrList.value.filter((f) => f.value != item.value)
|
|
|
+ thrList.value = thr
|
|
|
+ if (item.title == searchList.value[2].title) {
|
|
|
+ for (const i of searchList.value[2].list) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'four') {
|
|
|
+ const four = fourList.value.filter((f) => f.value != item.value)
|
|
|
+ fourList.value = four
|
|
|
+ if (item.title == searchList.value[3].title) {
|
|
|
+ for (const i of searchList.value[3].list) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const select = selectList.value.filter((f) => f.label != item.label)
|
|
|
+ selectList.value = select
|
|
|
+}
|
|
|
const currentPage = ref(1)
|
|
|
// 分页
|
|
|
const changePage = (page = currentPage.value) => {
|
|
@@ -221,11 +349,52 @@ const sizeChange = (limits) => {
|
|
|
.main {
|
|
|
background: rgb(248, 248, 248);
|
|
|
|
|
|
- .idemand {
|
|
|
+ .demand {
|
|
|
+ position: relative;
|
|
|
.image {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
}
|
|
|
+ .select {
|
|
|
+ width: 1200px;
|
|
|
+ position: absolute;
|
|
|
+ left: 20%;
|
|
|
+ bottom: 10%;
|
|
|
+ .select_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .over {
|
|
|
+ max-height: 106px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .list {
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ .left {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 3px;
|
|
|
+ padding: 5px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .over::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.one {
|
|
@@ -253,6 +422,9 @@ const sizeChange = (limits) => {
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
+ .show {
|
|
|
+ color: #2374ff !important;
|
|
|
+ }
|
|
|
.title {
|
|
|
color: #666;
|
|
|
font-size: 14px;
|