From c71dc4c3abb3fcbbafc68b34e2bcb98cf0f8b346 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期三, 13 十二月 2023 17:08:01 +0800
Subject: [PATCH] 图片引入问题
---
src/views/components/publish.vue | 144 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 124 insertions(+), 20 deletions(-)
diff --git a/src/views/components/publish.vue b/src/views/components/publish.vue
index dc9f3f2..ffcea65 100644
--- a/src/views/components/publish.vue
+++ b/src/views/components/publish.vue
@@ -3,29 +3,38 @@
<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" @click="openDetails('机构公示',item.id)">
<div>
- <div><img src="src/assets/images/article.png"></div>
+ <div><img :src="articlePng"></div>
<div>{{item.name}}</div>
</div>
<span>
@@ -37,7 +46,7 @@
<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"
@@ -53,26 +62,43 @@
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 +110,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 +128,71 @@
}
}
+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)=>{
@@ -118,6 +211,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