|
|
|
@ -4,20 +4,14 @@ |
|
|
|
<div class="search-panel"> |
|
|
|
<el-form :model="searchForm" inline> |
|
|
|
<el-form-item label="时间筛选:"> |
|
|
|
<el-date-picker |
|
|
|
v-model="searchForm.timeRange" |
|
|
|
type="datetimerange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="截止时间" |
|
|
|
class="date-picker" |
|
|
|
format="YYYY-MM-DD HH:mm" |
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
|
|
/> |
|
|
|
<el-date-picker v-model="searchForm.timeRange" type="datetimerange" range-separator="至" |
|
|
|
start-placeholder="开始时间" end-placeholder="截止时间" class="date-picker" format="YYYY-MM-DD HH:mm" |
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="执法单位:"> |
|
|
|
<el-input v-model="searchForm.lawEnforcementAgency" placeholder="请输入关键字" class="search-input" clearable @keyup.enter="handleSearch" /> |
|
|
|
<el-input v-model="searchForm.lawEnforcementAgency" placeholder="请输入关键字" class="search-input" clearable |
|
|
|
@keyup.enter="handleSearch" /> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item> |
|
|
|
@ -28,19 +22,27 @@ |
|
|
|
<el-button @click="handleReset">重置</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-button type="primary" @click="handleAdd">新增</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="action-bar"> |
|
|
|
<div class="action-left"> |
|
|
|
<el-button type="primary" @click="handleAdd">新增</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 数据表格 --> |
|
|
|
<div class="table-container"> |
|
|
|
<el-table v-loading="loading" :data="tableData" border :header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold' }"> |
|
|
|
<el-table v-loading="loading" :data="tableData" border |
|
|
|
:header-cell-style="{ backgroundColor: '#f5f7fa', fontWeight: 'bold' }"> |
|
|
|
<el-table-column prop="lawEnforcementAgency" label="执法单位" min-width="160" show-overflow-tooltip /> |
|
|
|
|
|
|
|
<el-table-column label="法制材料" min-width="200"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<div v-if="row.legalMaterials" class="file-cell"> |
|
|
|
<el-icon class="file-icon"><Paperclip /></el-icon> |
|
|
|
<span class="file-name" :title="extractFileName(row.legalMaterials)">{{ extractFileName(row.legalMaterials) }}</span> |
|
|
|
<el-icon class="file-icon"> |
|
|
|
<Paperclip /> |
|
|
|
</el-icon> |
|
|
|
<span class="file-name" :title="extractFileName(row.legalMaterials)">{{ |
|
|
|
extractFileName(row.legalMaterials) }}</span> |
|
|
|
<el-button size="small" @click="downloadFile(row.legalMaterials)">下载</el-button> |
|
|
|
</div> |
|
|
|
<span v-else>--</span> |
|
|
|
@ -50,8 +52,11 @@ |
|
|
|
<el-table-column label="技术材料" min-width="200"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<div v-if="row.technicalMaterials" class="file-cell"> |
|
|
|
<el-icon class="file-icon"><Paperclip /></el-icon> |
|
|
|
<span class="file-name" :title="extractFileName(row.technicalMaterials)">{{ extractFileName(row.technicalMaterials) }}</span> |
|
|
|
<el-icon class="file-icon"> |
|
|
|
<Paperclip /> |
|
|
|
</el-icon> |
|
|
|
<span class="file-name" :title="extractFileName(row.technicalMaterials)">{{ |
|
|
|
extractFileName(row.technicalMaterials) }}</span> |
|
|
|
<el-button size="small" @click="downloadFile(row.technicalMaterials)">下载</el-button> |
|
|
|
</div> |
|
|
|
<span v-else>--</span> |
|
|
|
@ -75,15 +80,9 @@ |
|
|
|
<!-- 分页 --> |
|
|
|
<div class="pagination-container"> |
|
|
|
<span class="total-text">共 {{ total }} 项数据</span> |
|
|
|
<el-pagination |
|
|
|
v-model:current-page="currentPage" |
|
|
|
v-model:page-size="pageSize" |
|
|
|
:total="total" |
|
|
|
:page-sizes="[10, 20, 50, 100]" |
|
|
|
layout="prev, pager, next, jumper, ->, total, sizes" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
/> |
|
|
|
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" |
|
|
|
:page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, jumper, ->, total, sizes" |
|
|
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -119,6 +118,9 @@ const formatDateTime = (time?: string) => { |
|
|
|
const BASE_API = import.meta.env.VITE_APP_BASE_API || ''; |
|
|
|
const FILE_SERVER_PREFIX = import.meta.env.VITE_APP_FILE_SERVER_PREFIX || ''; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getList(); |
|
|
|
}); |
|
|
|
const isOssId = (val: string) => /^[0-9]+$/.test(val.trim()); |
|
|
|
|
|
|
|
const toRelativeFilePath = (val: string) => { |
|
|
|
@ -247,9 +249,6 @@ const handleCurrentChange = (val: number) => { |
|
|
|
getList(); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getList(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -284,6 +283,21 @@ onMounted(() => { |
|
|
|
.date-picker { |
|
|
|
width: 360px; |
|
|
|
} |
|
|
|
.action-bar { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
background: #fff; |
|
|
|
padding: 12px 20px; |
|
|
|
border-radius: 8px; |
|
|
|
margin-bottom: 16px; |
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.action-left { |
|
|
|
display: flex; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container { |
|
|
|
background: #fff; |
|
|
|
|
