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_BASE_URL = 'http://localhost:17000/enf-ep' |
|||
VITE_BASE_URL = '/' |
|||
VITE_DEFAULT_LOGIN = '/enforcement/login' |
|||
VITE_APP_ENV = 'dev' |
|||
|
|||
Loading…
Reference in new issue