From 137910cf4fc73a3a2787a3a02718f1e1f637c368 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期五, 14 六月 2024 16:01:17 +0800 Subject: [PATCH] bug修改 --- src/views/components/publish.vue | 162 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 133 insertions(+), 29 deletions(-) diff --git a/src/views/components/publish.vue b/src/views/components/publish.vue index 3ed921c..420d203 100644 --- a/src/views/components/publish.vue +++ b/src/views/components/publish.vue @@ -3,41 +3,49 @@ <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-form-item label="机构名称:" class="nameInput" style="width: 300px;margin-bottom: 0;margin-right: 20px;"> <el-input v-model="state.querys.name" /> </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%" + /> </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="请选择业务范围" clearable 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><img :src="articlePng"></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 +57,47 @@ </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"; +import articlePng from "@/assets/images/article.png" +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, + 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({ @@ -113,11 +209,17 @@ width: 100%; display: flex; justify-content: center; - margin-top: 170px; + margin-top: 150px; + :deep(.el-form .el-form-item__label) { + font-size: 16px; + } + :deep(.el-form-item){ + align-items: center; + } .main-content{ width: 1200px; - margin: 20px 0; + margin: 15px 0; background: #fff; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.04); @@ -154,6 +256,8 @@ .list{ padding: 15px 0; + height: calc(100vh - 332px); + overflow-y: auto; &>div{ display: flex; @@ -183,7 +287,7 @@ } } div:last-of-type{ - width: 1000px; + width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -205,7 +309,7 @@ .pag-container{ width: 100%; - height: 80px; + height: 60px; display: flex; align-items: center; justify-content: right; -- Gitblit v1.9.2