6 changed files with 951 additions and 662 deletions
@ -0,0 +1,532 @@ |
|||||
|
<template> |
||||
|
<div class="warp_body"> |
||||
|
<van-form @failed="onFailed" @submit="submit"> |
||||
|
<van-cell-group class="warning-rule-show"> |
||||
|
<van-popup v-model:show="data.showDatePicker" position="bottom"> |
||||
|
<van-date-picker |
||||
|
title="选择日期" |
||||
|
v-model="data.currentDate" |
||||
|
:min-date="data.minDate" |
||||
|
:max-date="data.maxDate" |
||||
|
:columns-type="data.columnsType" |
||||
|
@confirm="onDateConfirm" |
||||
|
@cancel="cancelSelectDate" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
<van-popup v-model:show="data.showMouthPicker" position="bottom"> |
||||
|
<van-date-picker |
||||
|
title="选择月份" |
||||
|
v-model="data.currentMouth" |
||||
|
:min-date="data.minDate" |
||||
|
:max-date="data.maxDate" |
||||
|
:columns-type="data.mouthColumnsType" |
||||
|
@confirm="onMouthConfirm" |
||||
|
@cancel="cancelSelectDate" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
|
||||
|
<div class="one-label"> |
||||
|
<van-field |
||||
|
label="计划名称" |
||||
|
v-model="submitData.planYear" |
||||
|
is-link |
||||
|
placeholder="请选择年份" |
||||
|
required |
||||
|
readonly |
||||
|
@click="data.showDatePicker = true" |
||||
|
/> |
||||
|
|
||||
|
<div class="flex-div"> |
||||
|
<van-field |
||||
|
label=" " |
||||
|
v-model="data.fieldValue" |
||||
|
placeholder="请选择年/季/月度" |
||||
|
is-link |
||||
|
@click="data.dateShowPicker = true" |
||||
|
required |
||||
|
readonly |
||||
|
/> |
||||
|
<div class="right-txt" v-if="data.showMouth"> |
||||
|
<van-field |
||||
|
v-model="data.mouthText" |
||||
|
placeholder="请选择月度" |
||||
|
is-link |
||||
|
@click="data.showMouthPicker = true" |
||||
|
required |
||||
|
readonly |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="right-txt" v-if="data.showQuarter"> |
||||
|
<van-field |
||||
|
v-model="data.quarterText" |
||||
|
placeholder="请选择季度" |
||||
|
is-link |
||||
|
@click="data.dataQuarterShowPicker = true" |
||||
|
readonly |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<van-field |
||||
|
label=" " |
||||
|
v-model="submitData.planName" |
||||
|
placeholder="行政执法计划" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="warning-rule warning-rule-show"> |
||||
|
<span><van-icon name="warning-o" /></span><span>{{ nameObj.bureauDept + nameObj.planYear + nameObj.quarter + nameObj.mouth + nameObj.planName }}</span> |
||||
|
</div> |
||||
|
<van-popup v-model:show="data.dateShowPicker" round position="bottom"> |
||||
|
<van-picker |
||||
|
:columns="data.dateColumns" |
||||
|
@cancel="data.dateShowPicker = false" |
||||
|
@confirm="dateOnConfirm" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
<!-- 季度选择 --> |
||||
|
<van-popup v-model:show="data.dataQuarterShowPicker" round position="bottom"> |
||||
|
<van-picker |
||||
|
:columns="data.quarterColumns" |
||||
|
@cancel="data.dataQuarterShowPicker = false" |
||||
|
@confirm="dateQuarterOnConfirm" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
<van-field |
||||
|
v-model="submitData.bureauDeptName" |
||||
|
label="执法单位" |
||||
|
placeholder="请选择" |
||||
|
@click="" |
||||
|
required |
||||
|
readonly |
||||
|
:rules="[{ required: true, message: '请选择执法部门'}]" |
||||
|
/> |
||||
|
|
||||
|
<van-field |
||||
|
v-model="submitData.enforcementTime" |
||||
|
label="上传时间" |
||||
|
placeholder="请选择" |
||||
|
clickable |
||||
|
readonly |
||||
|
required |
||||
|
:rules="[{ required: true, message: '请选择上传时间'}]" |
||||
|
|
||||
|
/> |
||||
|
<van-popup v-model:show="data.showPicker" position="bottom"> |
||||
|
<van-date-picker |
||||
|
title="选择日期" |
||||
|
v-model="data.currentDate1" |
||||
|
:min-date="data.minDate" |
||||
|
:max-date="data.maxDate" |
||||
|
:columns-type="data.columnsTypes" |
||||
|
@confirm="onEnforcementTimeConfirm" |
||||
|
@cancel="cancelEnforcementTime" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
<van-field |
||||
|
v-model="submitData.enforcementArea" |
||||
|
label="执法区域" |
||||
|
placeholder="请输入" |
||||
|
required |
||||
|
:rules="[{ required: true, message: '请输入执法区域'}]" |
||||
|
/> |
||||
|
<div class="file-upload"> |
||||
|
<div class="file-upload-center"> |
||||
|
<label>附 件</label> <span>(仅限PDF文档，5MB以下)</span> |
||||
|
<span class="down-mod"><van-icon name="upgrade" /><a @click="downloadFile">模板下载</a></span> |
||||
|
</div> |
||||
|
<van-uploader v-model="data.fileListObj" max-count="1" :max-size="5 * 1024 * 1024" class="file" :after-read="uploadFiles" |
||||
|
multiple @oversize="onOversize" :before-delete="deleteFile" accept=".pdf" :before-read="beforeRead"> |
||||
|
<template #preview-cover="{ file }"> |
||||
|
<div class="preview-cover van-ellipsis">{{ file.name }}</div> |
||||
|
</template> |
||||
|
</van-uploader> |
||||
|
</div> |
||||
|
<div class="warning-rule"> |
||||
|
<span><van-icon name="warning-o" /></span>仅支持上传5MB以下的PDF格式文档 |
||||
|
</div> |
||||
|
</van-cell-group> |
||||
|
<van-button round block type="primary" native-type="submit">发布</van-button> |
||||
|
</van-form> |
||||
|
|
||||
|
<div class="van-overlay" v-show="data.showIsPublish"> |
||||
|
<div class="popcont"> |
||||
|
<div class="poptip">是否公开该行政执法计划？</div> |
||||
|
<van-cell center> |
||||
|
<van-radio-group v-model="submitData.isPublish" shape="square" direction="horizontal"> |
||||
|
<van-radio name="1">公开</van-radio> |
||||
|
<van-radio name="0">不公开</van-radio> |
||||
|
</van-radio-group> |
||||
|
</van-cell> |
||||
|
<div class="popup-btn"> |
||||
|
<a @click="cancelPlan()">取消</a><a @click="addPlan()">确定</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="ProgramCreate"> |
||||
|
import {showToast, showSuccessToast} from 'vant'; |
||||
|
import {reactive, ref, onMounted} from "vue"; |
||||
|
|
||||
|
const nameObj = reactive({ |
||||
|
planName:"", |
||||
|
mouth:"", |
||||
|
quarter:"", |
||||
|
bureauDept:"", |
||||
|
planYear:"" |
||||
|
}) |
||||
|
|
||||
|
const data = reactive({ |
||||
|
searchResult: [], |
||||
|
showPicker: false, |
||||
|
columns: [], |
||||
|
selectTypeValue: ref[0], |
||||
|
showDatePicker: ref(false), |
||||
|
columnsType: ['year'], |
||||
|
columnsTypes: ['year', 'month', 'day'], |
||||
|
currentDate: ref(['2026']), |
||||
|
minDate: new Date(2020, 0, 1), |
||||
|
maxDate: new Date(2125, 5, 1), |
||||
|
currentDate1: [], |
||||
|
fileListObj: [], |
||||
|
dateShowPicker: false, |
||||
|
fieldValue: "", |
||||
|
dateColumns: [ |
||||
|
{ text: '年度', value: 'year' }, |
||||
|
{ text: '季度', value: 'quarter' }, |
||||
|
{ text: '月度', value: 'month' }, |
||||
|
], |
||||
|
quarterColumns: [ |
||||
|
{ text: '第一季度', value: '1' }, |
||||
|
{ text: '第二季度', value: '2' }, |
||||
|
{ text: '第三季度', value: '3' }, |
||||
|
{ text: '第四季度', value: '4' }, |
||||
|
], |
||||
|
showIsPublish:false, |
||||
|
showMouth:false, |
||||
|
showQuarter: false, |
||||
|
showMouthPicker:false, |
||||
|
mouthColumnsType: ['month'], |
||||
|
currentMouth: ref([]), |
||||
|
dataQuarterShowPicker: false, |
||||
|
quarterText: "", |
||||
|
mouthText:"", |
||||
|
planNameText:"", |
||||
|
showPeriodPicker: false, |
||||
|
}); |
||||
|
|
||||
|
const submitData = reactive({ |
||||
|
userId: "", |
||||
|
relId: "", |
||||
|
planYear: "", |
||||
|
planName: "", |
||||
|
enforcementDepartment: "深圳市司法局", |
||||
|
enforcementDepartmentId: "123", |
||||
|
enforcementTime: new Date().toLocaleString('zh-CN', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
day: '2-digit', |
||||
|
hour: '2-digit', |
||||
|
minute: '2-digit', |
||||
|
second: '2-digit', |
||||
|
hour12: false |
||||
|
}).replace(/\//g, '-'), |
||||
|
enforcementArea: "", |
||||
|
isPublish: '1', |
||||
|
fileList: [], |
||||
|
bureauDeptId:"", |
||||
|
bureauDeptName:"深圳市司法局", |
||||
|
timeType: 0, |
||||
|
mouth: 0, |
||||
|
quarter:0, |
||||
|
}) |
||||
|
|
||||
|
const submit = () => { |
||||
|
data.showIsPublish = true; |
||||
|
} |
||||
|
|
||||
|
const addPlan = (val) =>{ |
||||
|
data.showIsPublish = false; |
||||
|
showSuccessToast('发布成功'); |
||||
|
} |
||||
|
|
||||
|
const cancelPlan = (val) =>{ |
||||
|
data.showIsPublish = false; |
||||
|
} |
||||
|
|
||||
|
const currentDate =() => { |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = now.getDate().toString().padStart(2, '0'); |
||||
|
data.currentDate1 = [year, month, day] |
||||
|
} |
||||
|
|
||||
|
const onFailed = (errorInfo) => { |
||||
|
console.log('failed', errorInfo); |
||||
|
}; |
||||
|
|
||||
|
const downloadFile = () => { |
||||
|
showToast('模板下载功能开发中'); |
||||
|
} |
||||
|
|
||||
|
const uploadFiles = (file) => { |
||||
|
file.status = 'uploading'; |
||||
|
file.message = '上传中...'; |
||||
|
setTimeout(() => { |
||||
|
file.status = 'done'; |
||||
|
file.message = ''; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
const deleteFile = (file, index) => { |
||||
|
submitData.fileList.filter((item, indexs) => { |
||||
|
if (index.index == indexs) { |
||||
|
submitData.fileList.splice(indexs, 1); |
||||
|
} |
||||
|
}); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
const beforeRead = (file) => { |
||||
|
if (file.type !== 'application/pdf') { |
||||
|
showToast('仅支持上传PDF格式文档'); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
const onOversize = () => { |
||||
|
showToast('文件大小不能超过 5MB'); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
submitData.planName = "行政执法计划"; |
||||
|
nameObj.planName = '行政执法计划'; |
||||
|
nameObj.bureauDept = '深圳市司法局'; |
||||
|
currentDate(); |
||||
|
}); |
||||
|
|
||||
|
const selectDate = () => { |
||||
|
data.showDatePicker = true; |
||||
|
} |
||||
|
|
||||
|
const onDateConfirm = (value) => { |
||||
|
value.selectedValues.forEach((item, index) => { |
||||
|
submitData.planYear = item; |
||||
|
nameObj.planYear = item + "年" |
||||
|
}); |
||||
|
data.showDatePicker = false; |
||||
|
} |
||||
|
|
||||
|
const onMouthConfirm = (value) => { |
||||
|
value.selectedValues.forEach((item, index) => { |
||||
|
data.mouthText = item; |
||||
|
nameObj.mouth = item + "月"; |
||||
|
submitData.mouth = item; |
||||
|
}); |
||||
|
data.showMouthPicker = false; |
||||
|
data.quarterText = ""; |
||||
|
} |
||||
|
|
||||
|
const cancelSelectDate = () => { |
||||
|
data.showDatePicker = false; |
||||
|
data.showMouthPicker = false; |
||||
|
} |
||||
|
|
||||
|
const cancelEnforcementTime = () => { |
||||
|
data.showPicker = false; |
||||
|
} |
||||
|
|
||||
|
const onEnforcementTimeConfirm = (value) => { |
||||
|
submitData.enforcementTime = ''; |
||||
|
value.selectedValues.forEach((item, index) => { |
||||
|
submitData.enforcementTime += item + (index < value.selectedValues.length - 1 ? '-' : ''); |
||||
|
}); |
||||
|
data.showPicker = false; |
||||
|
} |
||||
|
|
||||
|
const dateOnConfirm = ({ selectedOptions }) => { |
||||
|
const value = selectedOptions[0]; |
||||
|
data.fieldValue = value.text; |
||||
|
data.dateShowPicker = false; |
||||
|
data.showMouth = false; |
||||
|
data.showQuarter = false; |
||||
|
data.mouthText = ""; |
||||
|
data.quarterText = ""; |
||||
|
nameObj.quarter = ""; |
||||
|
nameObj.mouth = ""; |
||||
|
submitData.mouth = 0; |
||||
|
submitData.quarter = 0; |
||||
|
submitData.timeType = data.dateColumns.indexOf(value) + 1; |
||||
|
if (value.value == 'quarter') { |
||||
|
data.showQuarter = true; |
||||
|
} else if (value.value == 'month') { |
||||
|
data.showMouth = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const dateQuarterOnConfirm = ({ selectedOptions }) => { |
||||
|
const value = selectedOptions[0]; |
||||
|
data.quarterText = value.text; |
||||
|
nameObj.quarter = value.text; |
||||
|
submitData.quarter = value.value; |
||||
|
data.dataQuarterShowPicker = false; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.warp_body { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
margin: 10px; |
||||
|
} |
||||
|
|
||||
|
.file-upload { |
||||
|
padding: 16px; |
||||
|
background: #fff; |
||||
|
|
||||
|
.file-upload-center { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
font-size: 14px; |
||||
|
color: #323233; |
||||
|
position: relative; |
||||
|
|
||||
|
label { |
||||
|
font-weight: 500; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: #969799; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.down-mod { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
color: #faad14; |
||||
|
font-size: 12px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.file { |
||||
|
.van-uploader__upload { |
||||
|
width: 100%; |
||||
|
height: 180px; |
||||
|
border: 1px dashed #dcdee0; |
||||
|
border-radius: 8px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.preview-cover { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
padding: 8px; |
||||
|
background: rgba(0, 0, 0, 0.6); |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.warning-rule { |
||||
|
margin: 12px 16px; |
||||
|
background: #fff7e6; |
||||
|
color: #faad14; |
||||
|
font-size: 12px; |
||||
|
margin-bottom: 16px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 6px; |
||||
|
border-radius: 4px; |
||||
|
span { |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
} |
||||
|
.warning-rule-show{ |
||||
|
padding-bottom: 6px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.one-label { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.flex-div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.right-txt { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-field) { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.van-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 1000; |
||||
|
|
||||
|
.popcont { |
||||
|
width: 85%; |
||||
|
background: #fff; |
||||
|
border-radius: 12px; |
||||
|
padding: 24px; |
||||
|
|
||||
|
.poptip { |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #323233; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.popup-btn { |
||||
|
display: flex; |
||||
|
margin-top: 24px; |
||||
|
|
||||
|
a { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
padding: 12px; |
||||
|
border-radius: 8px; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:first-child { |
||||
|
background: #f5f5f5; |
||||
|
color: #666; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
background: #faad14; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,373 @@ |
|||||
|
<template> |
||||
|
<div class="query-container"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<van-search |
||||
|
v-model="querySearchText" |
||||
|
show-action |
||||
|
placeholder="请输入计划名称/执法单位/区域查询" |
||||
|
clearable="true" |
||||
|
clear-icon="clear" |
||||
|
clear-trigger="always" |
||||
|
@clear="onQueryClear" |
||||
|
@search="onQuerySearch"> |
||||
|
<template #action> |
||||
|
<div @click="onQuerySearch">搜索</div> |
||||
|
</template> |
||||
|
</van-search> |
||||
|
|
||||
|
<!-- 日期快捷筛选按钮 --> |
||||
|
<div class="search-button-list"> |
||||
|
<van-button plain hairline :class="queryDateType === null ? 'search-btn active' : 'search-btn'" |
||||
|
@click="querySearchDateType(null)" round type="primary" size="mini">全部</van-button> |
||||
|
<van-button plain hairline :class="queryDateType === 1 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="querySearchDateType(1)" round type="primary" size="mini">本月</van-button> |
||||
|
<van-button plain hairline :class="queryDateType === 2 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="querySearchDateType(2)" round type="primary" size="mini">本季</van-button> |
||||
|
<van-button plain hairline :class="queryDateType === 3 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="querySearchDateType(3)" round type="primary" size="mini">本年</van-button> |
||||
|
<van-button plain hairline :class="queryDateType === 9 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="openQueryDatePicker" round type="primary" size="mini">筛选</van-button> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 日期显示区域 --> |
||||
|
<div class="search-button-date"> |
||||
|
<span class="date-select" v-show="queryDateShow" @click="openQueryDatePicker">{{ queryDateSearch }}</span> |
||||
|
<div class="van-hairline--bottom"></div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 列表区域 --> |
||||
|
<div class="plan-list"> |
||||
|
<van-pull-refresh v-model="queryRefreshing" @refresh="onQueryRefresh"> |
||||
|
<van-list v-model:loading="queryLoading" :finished="queryFinished" finished-text="没有更多了" |
||||
|
@load="onQueryLoad"> |
||||
|
<van-empty v-if="queryFinished && queryList.length === 0" description="暂无数据" /> |
||||
|
|
||||
|
<div class="plan-card" v-for="item in queryList" :key="item.id"> |
||||
|
<van-swipe-cell class="swipe_cell"> |
||||
|
<div class="card_box"> |
||||
|
<div class="card_box_span"> |
||||
|
<p>发布时间：{{ item.publishTime }}</p> |
||||
|
</div> |
||||
|
<div class="van-hairline--bottom"></div> |
||||
|
|
||||
|
<div class="card_box_span card-title"> |
||||
|
<p>{{ item.title }}</p> |
||||
|
</div> |
||||
|
<div class="card_box_span"> |
||||
|
<p><label class="card_box_label">执法单位：</label> <span>{{ item.enforcementUnit }}</span></p> |
||||
|
</div> |
||||
|
<div class="card_box_span"> |
||||
|
<p><label class="card_box_label">执法区域：</label> <span>{{ item.area }}</span></p> |
||||
|
</div> |
||||
|
<div class="card_box_span"> |
||||
|
<p><label class="card_box_label">附 件：</label> <a style="color: #2b75fd;">{{ item.fileName }}</a></p> |
||||
|
</div> |
||||
|
<div class="btn-list"> |
||||
|
<a v-if="item.isPublish == 0" @click.stop="updatePublish(item.id, 1)"><van-icon name="passed" />公开</a> |
||||
|
<a v-if="item.isPublish == 1" @click.stop="updatePublish(item.id, 0)"><van-icon name="close" />取消公开</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</van-swipe-cell> |
||||
|
</div> |
||||
|
</van-list> |
||||
|
</van-pull-refresh> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 日期筛选弹窗 --> |
||||
|
<van-popup v-model:show="queryShowDatePicker" position="bottom"> |
||||
|
<van-date-picker title="选择月度" v-model="queryCurrentDate" :columns-type="['year', 'month']" |
||||
|
@confirm="onQueryDateConfirm" @cancel="queryShowDatePicker = false" /> |
||||
|
</van-popup> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="ProgramQuery"> |
||||
|
import {showToast, showSuccessToast, showFailToast} from 'vant'; |
||||
|
import {ref, onMounted} from "vue"; |
||||
|
|
||||
|
const querySearchText = ref(''); |
||||
|
const queryDateType = ref(null); |
||||
|
const queryRefreshing = ref(false); |
||||
|
const queryLoading = ref(false); |
||||
|
const queryFinished = ref(false); |
||||
|
const queryList = ref([]); |
||||
|
const queryShowDatePicker = ref(false); |
||||
|
const queryCurrentDate = ref(['2026', '05']); |
||||
|
const queryDateShow = ref(false); |
||||
|
const queryDateSearch = ref(''); |
||||
|
|
||||
|
const fetchQueryList = () => { |
||||
|
queryLoading.value = true; |
||||
|
setTimeout(() => { |
||||
|
const mockData = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '2026年行政执法计划', |
||||
|
publishTime: '2026-05-20 10:30:00', |
||||
|
enforcementUnit: '深圳市司法局', |
||||
|
area: '深圳市', |
||||
|
fileName: '2026年度执法计划.pdf', |
||||
|
isPublish: 1 |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '2026年第一季度执法计划', |
||||
|
publishTime: '2026-03-01 09:00:00', |
||||
|
enforcementUnit: '深圳市司法局', |
||||
|
area: '南山区', |
||||
|
fileName: '2026Q1执法计划.pdf', |
||||
|
isPublish: 0 |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: '2026年5月执法计划', |
||||
|
publishTime: '2026-05-01 14:00:00', |
||||
|
enforcementUnit: '深圳市司法局', |
||||
|
area: '福田区', |
||||
|
fileName: '202605执法计划.pdf', |
||||
|
isPublish: 1 |
||||
|
} |
||||
|
]; |
||||
|
queryList.value = [...queryList.value, ...mockData]; |
||||
|
queryLoading.value = false; |
||||
|
queryFinished.value = true; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
const onQueryRefresh = () => { |
||||
|
queryRefreshing.value = true; |
||||
|
queryList.value = []; |
||||
|
queryFinished.value = false; |
||||
|
fetchQueryList(); |
||||
|
setTimeout(() => { |
||||
|
queryRefreshing.value = false; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
const onQueryLoad = () => { |
||||
|
if (!queryFinished.value) { |
||||
|
fetchQueryList(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const onQuerySearch = () => { |
||||
|
queryList.value = []; |
||||
|
queryFinished.value = false; |
||||
|
fetchQueryList(); |
||||
|
} |
||||
|
|
||||
|
const onQueryClear = () => { |
||||
|
queryDateType.value = null; |
||||
|
queryDateShow.value = false; |
||||
|
queryDateSearch.value = ''; |
||||
|
queryList.value = []; |
||||
|
queryFinished.value = false; |
||||
|
fetchQueryList(); |
||||
|
} |
||||
|
|
||||
|
const querySearchDateType = (type) => { |
||||
|
queryDateType.value = type; |
||||
|
queryDateShow.value = false; |
||||
|
queryDateSearch.value = ''; |
||||
|
queryList.value = []; |
||||
|
queryFinished.value = false; |
||||
|
fetchQueryList(); |
||||
|
} |
||||
|
|
||||
|
const openQueryDatePicker = () => { |
||||
|
queryDateType.value = 9; |
||||
|
queryShowDatePicker.value = true; |
||||
|
} |
||||
|
|
||||
|
const onQueryDateConfirm = (value) => { |
||||
|
queryDateSearch.value = value.selectedValues[0] + "/" + value.selectedValues[1]; |
||||
|
queryDateShow.value = true; |
||||
|
queryShowDatePicker.value = false; |
||||
|
queryDateType.value = 9; |
||||
|
queryList.value = []; |
||||
|
queryFinished.value = false; |
||||
|
fetchQueryList(); |
||||
|
} |
||||
|
|
||||
|
const updatePublish = (id, isPublish) => { |
||||
|
if (isPublish === 1) { |
||||
|
showSuccessToast('已公开'); |
||||
|
} else { |
||||
|
showSuccessToast('已取消公开'); |
||||
|
} |
||||
|
const item = queryList.value.find(item => item.id === id); |
||||
|
if (item) { |
||||
|
item.isPublish = isPublish; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
queryDateSearch.value = `${year}/${month}`; |
||||
|
fetchQueryList(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.query-container { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #ebf3fb; |
||||
|
|
||||
|
.search-button-list { |
||||
|
height: 0.7rem; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
padding-left: 0.27rem; |
||||
|
margin-top: 0.27rem; |
||||
|
align-items: end; |
||||
|
.search-btn { |
||||
|
width: 15%; |
||||
|
height: 90%; |
||||
|
background: #ebebeb; |
||||
|
border-color: #ebebeb; |
||||
|
color: #999; |
||||
|
font-size: 0.3rem; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.search-btn.active { |
||||
|
background-color: #d9e6fd; |
||||
|
border-color: #75a5fb; |
||||
|
color: #1367fe; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-button-date { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: end; |
||||
|
position: relative; |
||||
|
.date-select { |
||||
|
margin: 3% 0 0 4%; |
||||
|
color: #c1bfbf; |
||||
|
font-size: 0.52rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.plan-list { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
padding-bottom: 60px; |
||||
|
|
||||
|
.plan-card { |
||||
|
display: flex; |
||||
|
background-color: #fff; |
||||
|
margin: 0.27rem; |
||||
|
border-radius: 0.27rem; |
||||
|
width: calc(100% - 0.54rem); |
||||
|
|
||||
|
.swipe_cell { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.card_box { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
padding: 0.27rem 0; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.card_box_span { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 2% 0; |
||||
|
padding: 0 3%; |
||||
|
color: #666; |
||||
|
font-size: 0.35rem; |
||||
|
line-height: 1.5; |
||||
|
|
||||
|
p { |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card_box_action { |
||||
|
position: absolute; |
||||
|
right: 4%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-search { |
||||
|
background: #fff; |
||||
|
padding: 12px 16px; |
||||
|
margin-bottom: -1px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-search__content { |
||||
|
height: 0.9rem; |
||||
|
border: 1px solid #ececec; |
||||
|
border-radius: 0.15rem 0 0 0.15rem; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-search__action { |
||||
|
margin: 0 3% 0 0; |
||||
|
width: 10%; |
||||
|
height: 0.9rem; |
||||
|
background: #1367fe; |
||||
|
border: 1px solid #1367fe; |
||||
|
border-radius: 0 0.15rem 0.15rem 0; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 0.9rem; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-hairline--bottom { |
||||
|
margin: -1% 0 3% 0; |
||||
|
height: 0; |
||||
|
background-color: transparent; |
||||
|
border: 1px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .card_box_span:first-child p { |
||||
|
color: #c1bfbf !important; |
||||
|
} |
||||
|
|
||||
|
.card-title p { |
||||
|
display: block !important; |
||||
|
color: #000; |
||||
|
font-size: 0.40rem; |
||||
|
font-weight: bold; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.card_box_label { |
||||
|
color: #323233; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.btn-list { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
margin: 0.3rem 3% 0; |
||||
|
width: 94%; |
||||
|
border-top: 1px solid #f4f5f6; |
||||
|
} |
||||
|
|
||||
|
.btn-list a { |
||||
|
margin: 3% 3% 1%; |
||||
|
font-size: 0.35rem; |
||||
|
color: #1367fe; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.btn-list a i { |
||||
|
margin: 0 0.12rem; |
||||
|
font-size: 0.37rem; |
||||
|
} |
||||
|
</style> |
||||
@ -1,5 +1,5 @@ |
|||||
# 执法端开发环境 |
# 执法端开发环境 |
||||
VITE_PORT = 12002 |
VITE_PORT = 12002 |
||||
VITE_BASE_URL = 'http://localhost:17000/enf-ep' |
VITE_BASE_URL = '/' |
||||
VITE_DEFAULT_LOGIN = '/enforcement/login' |
VITE_DEFAULT_LOGIN = '/enforcement/login' |
||||
VITE_APP_ENV = 'dev' |
VITE_APP_ENV = 'dev' |
||||
|
|||||
Loading…
Reference in new issue