<template>
|
<div class="container">
|
<div class="main-content">
|
<div class="filters">
|
<el-form :model="state.querys" style="display:flex;">
|
<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-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" 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" @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" @click="openDetails('机构公示',item.id)">
|
<div>
|
<div><img src="src/assets/images/article.png"></div>
|
<div>{{item.name}}</div>
|
</div>
|
<span>
|
{{(item.updateTime?item.updateTime:item.createTime).substring(0,16)}}
|
</span>
|
</div>
|
</div>
|
<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]"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="state.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
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: [],
|
business: '',
|
province:'',
|
city:'',
|
district:'',
|
pageNum: 1,
|
pageSize: 10
|
},
|
total: null,
|
busList: [],
|
areaList: [],
|
attribute: 0
|
})
|
|
const props = {
|
expandTrigger: 'hover',
|
value: 'name',
|
label: 'name'
|
}
|
const redirect = ref(undefined);
|
|
onMounted(()=>{
|
getData()
|
getArea()
|
getBusiness()
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
watch(route, (newRoute) => {
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
}, { immediate: true });
|
|
const getData = async ()=>{
|
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
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
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({
|
getData
|
})
|
|
</script>
|
|
<style lang='scss' scoped>
|
.container {
|
width: 100%;
|
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;
|
margin: 20px 0;
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 1px 1px 3px rgba(0,0,0,.04);
|
padding: 0 10px;
|
color: #333;
|
|
.filters{
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
|
.searchBtn{
|
border: none;
|
border-radius: 4px !important;
|
background-image: linear-gradient(90deg,#4064df,#548dfb);
|
|
&:active{
|
border-radius: 99px !important;
|
background-image: linear-gradient(-90deg,#4064df,#548dfb);
|
}
|
}
|
.resetBtn{
|
border: none;
|
border-radius: 4px !important;
|
background-image: linear-gradient(90deg,#fc8e2e,#ffaa59);
|
|
&:active{
|
border-radius: 99px !important;
|
background-image: linear-gradient(-90deg,#fc8e2e,#ffaa59);
|
}
|
}
|
}
|
|
.list{
|
padding: 15px 0;
|
max-height: calc(100vh - 402px);
|
overflow-y: auto;
|
|
&>div{
|
display: flex;
|
padding: 10px;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px dashed #ebeef5;
|
cursor: pointer;
|
border-radius: 4px;
|
font-size: 16px;
|
|
&>div{
|
display: flex;
|
align-items: center;
|
|
div:first-of-type{
|
width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img{
|
width: 28px;
|
height: 28px;
|
}
|
}
|
div:last-of-type{
|
width: 900px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-family: "PingFang SC";
|
}
|
}
|
span{
|
color: #999;
|
}
|
&:hover{
|
background: #f5f5f5;
|
}
|
&:active{
|
background: #425f9f;
|
color: #fff;
|
}
|
}
|
}
|
|
.pag-container{
|
width: 100%;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
}
|
}
|
}
|
</style>
|
