From 32939a2e9d8b967fde6e71b9b501e221cf9814d1 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期三, 13 十二月 2023 13:05:52 +0800
Subject: [PATCH] 样式调整，bug修复
---
src/views/components/publish.vue | 124 +++++++++++++++++++++++++++++++++++------
1 files changed, 106 insertions(+), 18 deletions(-)
diff --git a/src/views/components/publish.vue b/src/views/components/publish.vue
index becb855..ae64238 100644
--- a/src/views/components/publish.vue
+++ b/src/views/components/publish.vue
@@ -3,20 +3,29 @@
<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" @click="search">搜索</el-button>
@@ -35,6 +44,8 @@
</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"
@@ -51,26 +62,42 @@
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(()=>{
@@ -82,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
@@ -90,7 +126,45 @@
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) => {
+ console.log('myCascader',myCascader.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
@@ -107,7 +181,10 @@
const reset = () => {
state.querys = {
name: '',
- area: '',
+ area: [],
+ province:'',
+ city:'',
+ district:'',
bussiness: '',
pageNum: 1,
pageSize: 10
@@ -131,6 +208,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;
--
Gitblit v1.9.2