| | |
| | | <div class="main-content"> |
| | | <div class="filters"> |
| | | <el-form :model="state.querys"> |
| | | <el-form-item label="法律法规名称" style="width: 500px;margin-bottom: 0;margin-right: 20px"> |
| | | <el-form-item label="法律法规名称:" style="width: 500px;margin-bottom: 0;margin-right: 20px"> |
| | | <el-input v-model="state.querys.title" /> |
| | | </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" v-model="state.querys.title" @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><img :src="articlePng"></div> |
| | | <div>{{item.title}}</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" |
| | | :current-page="state.querys.pageNum" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue" |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineExpose, defineEmits} from "vue" |
| | | import { getLaws } from '@/api/home/homePage' |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Search, Refresh } from '@element-plus/icons-vue' |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | import articlePng from "@/assets/images/article.png" |
| | | const emit = defineEmits(['openDetails']) |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | |
| | |
| | | } |
| | | |
| | | 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 = { |
| | | title: '', |
| | | content: '', |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | } |
| | | getData() |
| | | } |
| | | const openDetails = (type,id)=>{ |
| | | emit('openDetails',type,id) |
| | | } |
| | | |
| | | defineExpose({ |
| | |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 170px; |
| | | margin-top: 150px; |
| | | :deep(.el-form .el-form-item__label) { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .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); |
| | |
| | | |
| | | .list{ |
| | | padding: 15px 0; |
| | | height: calc(100vh - 332px); |
| | | overflow-y: auto; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | div:last-of-type{ |
| | | width: 1000px; |
| | | width: 900px; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | |
| | | |
| | | .pag-container{ |
| | | width: 100%; |
| | | height: 80px; |
| | | height: 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |