From c4e77695c11681a159da35a94a1b66cf9d145c67 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期三, 13 十二月 2023 16:37:44 +0800
Subject: [PATCH] 专家库筛选问题
---
src/views/components/publish.vue | 161 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 135 insertions(+), 26 deletions(-)
diff --git a/src/views/components/publish.vue b/src/views/components/publish.vue
index 3ed921c..495982a 100644
--- a/src/views/components/publish.vue
+++ b/src/views/components/publish.vue
@@ -3,41 +3,50 @@
<div class="main-content">
<div class="filters">
<el-form :model="state.querys" style="display:flex;">
- <el-form-item label="机构名称" style="width: 300px;margin-bottom: 0;margin-right: 20px">
- <el-input v-model="state.querys.name" />
+ <el-form-item label="机构名称:" class="nameInput" style="width: 300px;margin-bottom: 0;margin-right: 20px;">
+ <el-input v-model="state.querys.name" placeholder="请选择机构名称" />
</el-form-item>
- <el-form-item label="所在地市" style="margin-bottom: 0;margin-right: 20px">
- <el-select v-model="state.querys.area">
- <el-option label="Zone one" value="shanghai" />
- <el-option label="Zone two" value="beijing" />
- </el-select>
+ <el-form-item label="所在地市:" style="margin-bottom: 0;margin-right: 20px">
+ <el-cascader
+ ref="myCascader"
+ v-model="state.querys.area"
+ :options="state.areaList"
+ :props="props"
+ @change="handleChange"
+ style="width: 100%"
+ size="large"
+ />
</el-form-item>
- <el-form-item label="业务范围" style="margin-bottom: 0;margin-right: 20px">
- <el-select v-model="state.querys.business">
- <el-option label="Zone one" value="shanghai" />
- <el-option label="Zone two" value="beijing" />
- </el-select>
+ <el-form-item label="业务范围:" style="margin-bottom: 0;margin-right: 20px">
+ <el-select v-model="state.querys.business" placeholder="请选择业务范围" multiple size="large" style="width: 100%">
+ <el-option
+ v-for="item in state.busList"
+ :key="item.id"
+ :label="item.label"
+ :value="item.id"
+ />
+ </el-select>
</el-form-item>
</el-form>
- <el-button type="primary" :icon="Search" class="searchBtn">搜索</el-button>
- <el-button type="primary" :icon="Refresh" class="resetBtn">重置</el-button>
+ <el-button type="primary" :icon="Search" class="searchBtn" @click="search">搜索</el-button>
+ <el-button type="primary" :icon="Refresh" class="resetBtn" @click="reset">重置</el-button>
</div>
<div class="list">
- <div v-for="item in state.dataList">
+ <div v-for="item in state.dataList" @click="openDetails('机构公示',item.id)">
<div>
<div><img src="src/assets/images/article.png"></div>
- <div>{{item.title}}</div>
+ <div>{{item.name}}</div>
</div>
<span>
- {{item.updateTime}}
+ {{(item.updateTime?item.updateTime:item.createTime).substring(0,16)}}
</span>
</div>
</div>
- <div class="pag-container">
+ <div class="pag-container" v-if="state.total&&state.total>0">
<el-pagination
v-model:current-page="state.querys.pageNum"
v-model:page-size="state.querys.pageSize"
- :page-sizes="[10,15,20,25]"
+ :page-sizes="[10,15,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="state.total"
@size-change="handleSizeChange"
@@ -49,30 +58,46 @@
</template>
<script setup>
-import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue"
+import {onMounted, ref, reactive, watch, onUnmounted, defineExpose, defineEmits} from "vue"
import { getPublish } from '@/api/home/homePage'
import { Search, Refresh } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
-
+import {getRegionTree} from "@/api/area";
+import {getDict} from "@/api/login";
+const emit = defineEmits(['openDetails'])
const route = useRoute()
const router = useRouter()
+const myCascader = ref();
const state = reactive({
dataList: [],
querys:{
name: '',
- area: '',
- bussiness: '',
+ area: [],
+ business: '',
+ province:'',
+ city:'',
+ district:'',
pageNum: 1,
pageSize: 10
},
- total: null
+ total: null,
+ busList: [],
+ areaList: [],
+ attribute: 0
})
+const props = {
+ expandTrigger: 'hover',
+ value: 'name',
+ label: 'name'
+}
const redirect = ref(undefined);
onMounted(()=>{
getData()
+ getArea()
+ getBusiness()
})
onUnmounted(()=>{
@@ -84,7 +109,16 @@
}, { immediate: true });
const getData = async ()=>{
- const res = await getPublish(state.querys)
+ const param = {
+ name: state.querys.name,
+ business: state.querys.business ? state.querys.business.join(','):'',
+ province: state.querys.province,
+ city: state.querys.city,
+ district: state.querys.district,
+ pageNum: state.querys.pageNum,
+ pageSize: state.querys.pageSize
+ }
+ const res = await getPublish(param)
if(res.code == 200){
state.dataList = res.data.list
state.total = res.data.total
@@ -93,13 +127,75 @@
}
}
+const getArea = async ()=>{
+ const res = await getRegionTree({name: '',parentId: null,regionType: state.attribute})
+ if(res.code == 200){
+ state.areaList = res.data
+ state.areaList.unshift(
+ {
+ id: '',
+ name: '全部'
+ }
+ )
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+
+
+const getBusiness = async ()=>{
+ const res = await getDict({dictType: 'sys_business_scope'})
+ if(res.code == 200){
+ state.busList = res.data
+ }else{
+ ElMessage.warning(res.message)
+ }
+}
+const handleChange = (value) => {
+ if(value && value[0] === '全部'){
+ state.querys.province = ''
+ state.querys.city = ''
+ state.querys.district = ''
+ }else if(value && state.attribute == 0){
+ state.querys.province = '新疆维吾尔自治区'
+ state.querys.city = value[0]?value[0]:''
+ state.querys.district = value[1]?value[1]:''
+ }
+ // else{
+ // state.querys.province = value[0]?value[0]:''
+ // state.querys.city = value[1]?value[1]:''
+ // state.querys.district = value[2]?value[2]:''
+ // }
+}
const handleSizeChange = (val) => {
+ state.querys.pageNum = 1;
state.querys.pageSize = val
getData()
}
const handleCurrentChange = (val) => {
state.querys.pageNum = val
getData()
+}
+const search = () => {
+ state.querys.pageNum = 1;
+ getData()
+}
+const reset = () => {
+ state.querys = {
+ name: '',
+ area: [],
+ province:'',
+ city:'',
+ district:'',
+ bussiness: '',
+ pageNum: 1,
+ pageSize: 10
+ }
+ getData()
+}
+
+const openDetails = (type,id)=>{
+ emit('openDetails',type,id)
}
defineExpose({
@@ -114,6 +210,17 @@
display: flex;
justify-content: center;
margin-top: 170px;
+ :deep(.el-form .el-form-item__label) {
+ font-size: 16px;
+ }
+ :deep(.el-form-item){
+ align-items: center;
+ }
+ .nameInput{
+ :deep(.el-input__inner){
+ --el-input-inner-height: 38px;
+ }
+ }
.main-content{
width: 1200px;
@@ -154,6 +261,8 @@
.list{
padding: 15px 0;
+ max-height: calc(100vh - 402px);
+ overflow-y: auto;
&>div{
display: flex;
@@ -183,7 +292,7 @@
}
}
div:last-of-type{
- width: 1000px;
+ width: 900px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
--
Gitblit v1.9.2