上官小雨
3 months ago
12 changed files with 129 additions and 1136 deletions
@ -1,431 +0,0 @@ |
|||
<template> |
|||
<div class="section"> |
|||
<div class="section-title">执法信息</div> |
|||
|
|||
<!-- 是否关联预告 --> |
|||
<van-field v-model="formData.relatedNotice" is-link readonly name="relatedNotice" label="是否关联预告" |
|||
placeholder="请选择" @click="$emit('showNoticePicker')" clearable /> |
|||
|
|||
<!-- 执法单位 --> |
|||
<van-field v-model="formData.enforcementUnit" name="enforcementUnit" label="执法单位" placeholder="请输入执法单位" |
|||
:rules="[{ required: true, message: '请填写执法单位' }]" required /> |
|||
|
|||
<!-- 执法人员 --> |
|||
<div class="form-row required"> |
|||
<div class="form-label"><span class="required-mark">*</span>执法人员</div> |
|||
<div class="form-value person-select"> |
|||
<div class="person-item default-person"> |
|||
<span>{{ defaultPerson?.name }} {{ defaultPerson?.id }}</span> |
|||
</div> |
|||
<div v-for="(person, index) in additionalPersons" :key="index" class="person-item-add"> |
|||
<span @click="$emit('openPersonPicker', index)" :class="{ placeholder: !person.name }"> |
|||
{{ person.name || '请选择' }} |
|||
</span> |
|||
<van-icon name="close" class="remove-icon" @click="$emit('removePerson', index)" /> |
|||
</div> |
|||
<div class="person-add"> |
|||
<span @click="$emit('openPersonPicker', -1)">请选择</span> |
|||
<van-icon name="add-o" class="add-circle-icon" @click="$emit('addPerson')" /> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- 隐藏字段用于验证执法人员 --> |
|||
<van-field v-model="hasPerson" name="enforcementPerson" :rules="[{ required: true, message: '请选择执法人员' }]" |
|||
style="display: none;" /> |
|||
|
|||
<!-- 执法类别 --> |
|||
<van-field v-model="formData.category" is-link readonly name="category" label="执法类别" placeholder="请选择" |
|||
@click="$emit('showCategoryPicker')" clearable :rules="[{ required: true, message: '请选择执法类别' }]" required /> |
|||
|
|||
<!-- 任务来源 --> |
|||
<van-field v-model="formData.taskSource" is-link readonly name="taskSource" label="任务来源" placeholder="请选择" |
|||
@click="$emit('showTaskSourcePicker')" clearable :rules="[{ required: true, message: '请选择任务来源' }]" |
|||
required /> |
|||
|
|||
<!-- 执法事项 --> |
|||
<van-field v-model="formData.enforcementMatter" name="enforcementMatter" label="执法事项" placeholder="请输入执法事项" |
|||
type="textarea" :rules="[{ required: true, message: '请填写执法事项' }]" required rows="3" maxlength="1000" |
|||
show-word-limit /> |
|||
|
|||
<!-- 执法依据 --> |
|||
<div class="basis-container"> |
|||
<div v-for="(basis, index) in formData.enforcementBases" :key="index" class="form-row basis-row"> |
|||
<div class="form-label">执法依据</div> |
|||
<div class="form-value basis-wrapper"> |
|||
<span @click="$emit('openBasisPicker', index)" :class="{ placeholder: !basis }"> |
|||
{{ basis || '请选择' }} |
|||
</span> |
|||
<van-icon v-if="index === formData.enforcementBases.length - 1" name="add-o" class="add-circle-icon" |
|||
@click.stop="$emit('addBasis')" /> |
|||
<van-icon v-else name="close" class="close-btn" @click.stop="$emit('removeBasis', index)" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 原因 --> |
|||
<van-field v-model="formData.reason" name="reason" label="原因" placeholder="请输入原因" readonly /> |
|||
|
|||
<!-- 执法时间 --> |
|||
<van-field v-model="formData.enforcementTime" name="enforcementTime" label="执法时间" placeholder="请选择执法时间" |
|||
readonly /> |
|||
<!-- <van-field v-model="formData.enforcementTime" name="enforcementTime" label="执法时间" placeholder="请选择执法时间" is-link |
|||
readonly :rules="[{ required: true, message: '请选择执法时间' }]" required /> --> |
|||
|
|||
<!-- 联合执法 --> |
|||
</div> |
|||
<div class="form-section"> |
|||
<div class=""> |
|||
<van-field name="radio" label="联合执法" required> |
|||
<template #input> |
|||
<van-radio-group v-model="formData.jointEnforcement" direction="horizontal"> |
|||
<van-radio name="0" shape="square">否</van-radio> |
|||
<van-radio name="1" shape="square">是</van-radio> |
|||
</van-radio-group> |
|||
</template> |
|||
</van-field> |
|||
<!-- <div class="form-label"><span class="required-mark">*</span>联合执法</div> |
|||
<div class="form-value radio-group"> |
|||
<label :class="['radio-option', { active: formData.jointEnforcement === false }]" |
|||
@click="formData.jointEnforcement = false"> |
|||
否 |
|||
</label> |
|||
<label :class="['radio-option', { active: formData.jointEnforcement === true }]" |
|||
@click="formData.jointEnforcement = true"> |
|||
是 |
|||
</label> |
|||
</div> --> |
|||
</div> |
|||
<!-- 隐藏字段用于验证联合执法 --> |
|||
<van-field v-model="jointEnforcementValue" name="jointEnforcement" |
|||
:rules="[{ required: true, message: '请选择联合执法' }]" style="display: none;" /> |
|||
</div> |
|||
<div class="form-entrusted"> |
|||
<!-- 受委托执法 --> |
|||
<div class="entrusted-enforcement"> |
|||
<van-field name="radio" label="受委托执法" required> |
|||
<template #input> |
|||
<van-radio-group v-model="formData.entrustedEnforcement" direction="horizontal"> |
|||
<van-radio name="0" shape="square">否</van-radio> |
|||
<van-radio name="1" shape="square">是</van-radio> |
|||
</van-radio-group> |
|||
</template> |
|||
</van-field> |
|||
<!-- <div class="form-label"><span class="required-mark">*</span>受委托执法</div> |
|||
<div class="form-value radio-group"> |
|||
<label :class="['radio-option', { active: formData.entrustedEnforcement === false }]" |
|||
@click="formData.entrustedEnforcement = false"> |
|||
否 |
|||
</label> |
|||
<label :class="['radio-option', { active: formData.entrustedEnforcement === true }]" |
|||
@click="formData.entrustedEnforcement = true"> |
|||
是 |
|||
</label> |
|||
</div> --> |
|||
</div> |
|||
<!-- 隐藏字段用于验证受委托执法 --> |
|||
<van-field v-model="entrustedEnforcementValue" name="entrustedEnforcement" |
|||
:rules="[{ required: true, message: '请选择受委托执法' }]" style="display: none;" /> |
|||
<div class="form-hint">本次执法是否为受委托事项</div> |
|||
|
|||
<!-- 附件 --> |
|||
<div class="file-upload-row"> |
|||
<div class="file-upload-label">附件 <span class="form-text">（不多于8张）</span></div> |
|||
<div class="uploader-wrapper"> |
|||
<van-uploader v-model="formData.fileList" multiple :max-count="8" :after-read="onAfterReadImage" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="EnforcementInfoSection"> |
|||
import { computed } from 'vue'; |
|||
import { uploadFile } from '@/util/fileUpload'; |
|||
|
|||
const props = defineProps({ |
|||
formData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
defaultPerson: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
additionalPersons: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}); |
|||
|
|||
defineEmits([ |
|||
'showNoticePicker', |
|||
'openPersonPicker', |
|||
'removePerson', |
|||
'showCategoryPicker', |
|||
'showTaskSourcePicker', |
|||
'openBasisPicker', |
|||
'addBasis', |
|||
'removeBasis' |
|||
]); |
|||
|
|||
// 计算属性：是否有执法人员 |
|||
const hasPerson = computed(() => { |
|||
return props.defaultPerson?.name || props.additionalPersons.some(p => p.name); |
|||
}); |
|||
|
|||
// 联合执法值（用于验证） |
|||
const jointEnforcementValue = computed(() => { |
|||
return props.formData.jointEnforcement !== undefined ? '已选择' : ''; |
|||
}); |
|||
|
|||
// 受委托执法值（用于验证） |
|||
const entrustedEnforcementValue = computed(() => { |
|||
return props.formData.entrustedEnforcement !== undefined ? '已选择' : ''; |
|||
}); |
|||
|
|||
// 附件上传处理 |
|||
const onAfterReadImage = (file) => { |
|||
const files = Array.isArray(file) ? file : [file]; |
|||
files.forEach(f => { |
|||
uploadFile(f, (res) => { |
|||
const data = res && res.data ? res.data : res; |
|||
const filePath = typeof data === 'string' ? data : (data && (data.url || data.fileUrl || data.path)) || ''; |
|||
if (filePath) { |
|||
f.url = filePath; |
|||
f.status = 'done'; |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.section { |
|||
background: #fff; |
|||
border-radius: 0.16rem; |
|||
margin-bottom: 0.24rem; |
|||
overflow: hidden; |
|||
|
|||
:deep(.van-field__label) { |
|||
margin-right: 6px; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.section-title { |
|||
padding: 0.28rem 0.32rem; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #000; |
|||
} |
|||
|
|||
.form-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
// align-items: center; |
|||
padding: 0.32rem; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
&.clickable { |
|||
&:active { |
|||
background: #f9f9f9; |
|||
} |
|||
} |
|||
|
|||
&.required .form-label { |
|||
position: relative; |
|||
padding-left: 0.1rem; |
|||
} |
|||
|
|||
&.radio-row { |
|||
padding-top: 0.24rem; |
|||
padding-bottom: 0.24rem; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.attachment-row {} |
|||
|
|||
.required-mark { |
|||
color: #ee0a24; |
|||
font-size: 0.32rem; |
|||
margin-right: 0.08rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.form-label { |
|||
font-size: 14px; |
|||
color: #333; |
|||
flex: none; |
|||
width: 2.4rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.form-value { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
color: #333; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.placeholder { |
|||
color: #c8c9cc; |
|||
} |
|||
} |
|||
|
|||
.person-select { |
|||
// margin-left: 30px; |
|||
display: block; |
|||
// flex-direction: column; |
|||
// align-items: flex-end; |
|||
// gap: 0.16rem; |
|||
} |
|||
|
|||
.person-item { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
&.default-person span { |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.person-item-add { |
|||
padding: 10px 10px 0px 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.remove-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.person-add { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #c8c9cc; |
|||
font-size: 14px; |
|||
padding: 10px 10px 0px 0px; |
|||
|
|||
.add-circle-icon { |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
.basis-container { |
|||
margin-bottom: 0.12rem; |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.basis-row { |
|||
padding: 0.24rem 0.32rem; |
|||
} |
|||
|
|||
.basis-wrapper { |
|||
margin-left: 8px; |
|||
display: flex; |
|||
align-items: end; |
|||
justify-content: space-between; |
|||
padding-right: 10px; |
|||
|
|||
.close-btn { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.add-circle-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.form-section { |
|||
margin-bottom: 10px; |
|||
|
|||
:deep(.van-field__value) { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.form-entrusted { |
|||
height: 200px; |
|||
background-color: #fff; |
|||
|
|||
.entrusted-enforcement { |
|||
:deep(.van-field__value) { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.radio-option { |
|||
padding: 0.12rem 0.48rem; |
|||
border: 1px solid #dcdee0; |
|||
border-radius: 0.06rem; |
|||
font-size: 0.3rem; |
|||
color: #666; |
|||
transition: all 0.2s; |
|||
|
|||
&:active { |
|||
transform: scale(0.95); |
|||
} |
|||
|
|||
&.active { |
|||
border-color: #1367fe; |
|||
color: #1367fe; |
|||
background: rgba(19, 103, 254, 0.05); |
|||
} |
|||
} |
|||
|
|||
.form-hint { |
|||
font-size: 12px; |
|||
color: #999; |
|||
padding: 0.12rem 0.32rem 0.24rem; |
|||
text-align: right; |
|||
} |
|||
|
|||
.attachment-wrapper { |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
gap: 0.16rem; |
|||
} |
|||
|
|||
.attachment-hint { |
|||
font-size: 0.26rem; |
|||
color: #999; |
|||
} |
|||
|
|||
.upload-icon { |
|||
font-size: 0.72rem; |
|||
color: #c8c9cc; |
|||
} |
|||
.file-upload-row{ |
|||
padding:0px 20px 20px 20px; |
|||
.file-upload-label{ |
|||
font-size: 14px; |
|||
color: #333; |
|||
margin-bottom: 0.16rem; |
|||
} |
|||
} |
|||
|
|||
.uploader-wrapper { |
|||
:deep(.van-uploader__upload) { |
|||
background: #f5f7fa; |
|||
border-radius: 0.1rem; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,76 +0,0 @@ |
|||
<template> |
|||
<div class="section"> |
|||
<div class="section-title">企业信息</div> |
|||
|
|||
<!-- 企业名称 --> |
|||
<van-field v-model="enterpriseName" :is-link="isSignMode" :readonly="true" name="enterpriseName" label="企业名称" |
|||
placeholder="请选择" @click="handleClick" clearable |
|||
:rules="isSignMode ? [{ required: true, message: '请选择企业名称' }] : []" :required="isSignMode" /> |
|||
|
|||
<!-- 统一社会信用代码 --> |
|||
<van-field v-model="enterpriseNumber" :is-link="isSignMode" :readonly="true" name="enterpriseNumber" |
|||
label="统一社会信用代码" placeholder="请选择" @click="handleClick" clearable |
|||
:rules="isSignMode ? [{ required: true, message: '请选择统一社会信用代码' }] : []" :required="isSignMode" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="EnterpriseInfoSection"> |
|||
import { computed } from 'vue'; |
|||
|
|||
const props = defineProps({ |
|||
enterpriseData: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
isSignMode: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}); |
|||
|
|||
const emit = defineEmits(['update:enterpriseData', 'open-picker']); |
|||
|
|||
// 计算属性：企业名称（支持双向绑定） |
|||
const enterpriseName = computed({ |
|||
get: () => props.enterpriseData?.enterpriseName || '', |
|||
set: (val) => { |
|||
emit('update:enterpriseData', { ...props.enterpriseData, enterpriseName: val }); |
|||
} |
|||
}); |
|||
|
|||
// 计算属性：统一社会信用代码（支持双向绑定） |
|||
const enterpriseNumber = computed({ |
|||
get: () => props.enterpriseData?.enterpriseNumber || '', |
|||
set: (val) => { |
|||
emit('update:enterpriseData', { ...props.enterpriseData, enterpriseNumber: val }); |
|||
} |
|||
}); |
|||
|
|||
const handleClick = () => { |
|||
emit('open-picker'); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.section { |
|||
background: #fff; |
|||
border-radius: 0.16rem; |
|||
margin-bottom: 0.24rem; |
|||
overflow: hidden; |
|||
|
|||
:deep(.van-field__label) { |
|||
width: 64px; |
|||
margin-right: 22px; |
|||
color: #000; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.section-title { |
|||
padding: 0.28rem 0.32rem; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
color: #000; |
|||
|
|||
} |
|||
</style> |
|||
@ -1,461 +0,0 @@ |
|||
<template> |
|||
<div class="register-popups"> |
|||
<!-- 企业选择弹窗 --> |
|||
<van-popup v-model:show="localEnterprisePopup" position="bottom" :style="{ height: '80%' }" round> |
|||
<div class="enterprise-search-popup"> |
|||
<div class="popup-header"> |
|||
<span class="popup-title">选择企业</span> |
|||
<van-icon name="cross" class="close-icon" @click="localEnterprisePopup = false" /> |
|||
</div> |
|||
<div class="search-bar"> |
|||
<van-search v-model="enterpriseSearchKeyword" placeholder="请输入企业名称/统一信用代码搜索" |
|||
@search="handleEnterpriseSearch" @clear="clearEnterpriseSearch" /> |
|||
<van-button class="search-btn" type="primary" @click="handleEnterpriseSearch">搜索</van-button> |
|||
</div> |
|||
<div class="enterprise-list"> |
|||
<div v-for="(item, index) in enterpriseList" :key="index" class="enterprise-list-item" |
|||
@click="$emit('selectEnterprise', item)"> |
|||
<div class="enterprise-name">{{ item.enterpriseName }}</div> |
|||
<div class="enterprise-number">统一社会信用代码：{{ item.enterpriseNumber }}</div> |
|||
</div> |
|||
<van-empty v-if="enterpriseList.length === 0" description="暂无数据" /> |
|||
</div> |
|||
</div> |
|||
</van-popup> |
|||
|
|||
<!-- 预告查询弹窗 --> |
|||
<van-popup v-model:show="localNoticePopup" position="bottom" :style="{ height: '70%' }"> |
|||
<div class="notice-popup"> |
|||
<div class="popup-header"> |
|||
<span class="popup-title">预告查询</span> |
|||
<van-icon name="cross" class="close-icon" @click="localNoticePopup = false" /> |
|||
</div> |
|||
<div class="popup-content" @scroll="onNoticeScroll"> |
|||
<div v-for="(notice, index) in noticeList" :key="index" class="notice-item"> |
|||
<div class="notice-info"> |
|||
<div class="notice-matter">执法事项：{{ notice.matter }}</div> |
|||
<div class="notice-time">执法时间：{{ notice.time }}</div> |
|||
</div> |
|||
<van-button class="link-btn" type="primary" @click="$emit('linkNotice', notice)"> |
|||
一键关联 |
|||
</van-button> |
|||
</div> |
|||
<div v-if="loading" class="loading-more"> |
|||
<van-loading size="small" /> |
|||
<span>加载中...</span> |
|||
</div> |
|||
<div v-else-if="finished" class="no-more">没有更多了</div> |
|||
</div> |
|||
</div> |
|||
</van-popup> |
|||
|
|||
<!-- 类别选择弹窗 --> |
|||
<van-popup v-model:show="localCategoryPopup" round position="bottom"> |
|||
<van-picker :columns="options.categories" @cancel="localCategoryPopup = false" |
|||
@confirm="$emit('confirmCategory', $event)" /> |
|||
</van-popup> |
|||
|
|||
<!-- 任务来源弹窗 --> |
|||
<van-popup v-model:show="localTaskSourcePopup" round position="bottom"> |
|||
<van-picker :columns="options.taskSources" @cancel="localTaskSourcePopup = false" |
|||
@confirm="$emit('confirmTaskSource', $event)" /> |
|||
</van-popup> |
|||
|
|||
<!-- 人员查询弹窗 --> |
|||
<van-popup v-model:show="localPersonPopup" position="bottom" :style="{ height: '80%' }"> |
|||
<div class="person-search-popup"> |
|||
<div class="popup-header"> |
|||
<span class="popup-title">人员查询</span> |
|||
<van-icon name="cross" class="close-icon" @click="localPersonPopup = false" /> |
|||
</div> |
|||
<div class="search-bar"> |
|||
<van-search v-model="personSearchKeyword" placeholder="请输入姓名/执法证件号搜索" @search="handlePersonSearch" |
|||
@clear="clearPersonSearch" /> |
|||
<van-button class="search-btn" type="primary" @click="handlePersonSearch">搜索</van-button> |
|||
</div> |
|||
<div class="person-list"> |
|||
<div v-for="(person, index) in personList" :key="index" class="person-list-item" |
|||
@click="$emit('selectPerson', person)"> |
|||
<div class="person-name">{{ person.name }}</div> |
|||
<div class="person-id">执法证件号：{{ person.id }}</div> |
|||
</div> |
|||
<van-empty v-if="personList.length === 0" description="暂无数据" /> |
|||
</div> |
|||
</div> |
|||
</van-popup> |
|||
|
|||
<!-- 执法依据弹窗 --> |
|||
<van-popup v-model:show="localBasisPopup" position="bottom" :style="{ height: '80%' }"> |
|||
<div class="enforcement-basis-popup"> |
|||
<div class="popup-header"> |
|||
<span class="popup-title">执法依据</span> |
|||
<van-icon name="cross" class="close-icon" @click="localBasisPopup = false" /> |
|||
</div> |
|||
<div class="search-bar"> |
|||
<van-search v-model="basisSearchKeyword" placeholder="请输入关键字搜索" @search="handleBasisSearch" |
|||
@clear="clearBasisSearch" /> |
|||
<van-button class="search-btn" type="primary" @click="handleBasisSearch">搜索</van-button> |
|||
</div> |
|||
<div class="enforcement-basis-list"> |
|||
<div v-for="(item, index) in enforcementBasisList" :key="index" class="basis-list-item" |
|||
@click="$emit('selectBasis', item)"> |
|||
<div class="basis-name">{{ item.name }}</div> |
|||
</div> |
|||
<van-empty v-if="enforcementBasisList.length === 0" description="没有更多了" /> |
|||
</div> |
|||
</div> |
|||
</van-popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="RegisterPopups"> |
|||
import { ref, reactive, watch, computed } from 'vue'; |
|||
|
|||
const props = defineProps({ |
|||
visible: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
options: { |
|||
type: Object, |
|||
default: () => ({ |
|||
categories: [], |
|||
taskSources: [] |
|||
}) |
|||
} |
|||
}); |
|||
|
|||
const emit = defineEmits([ |
|||
'close-popup', |
|||
'selectEnterprise', |
|||
'linkNotice', |
|||
'confirmCategory', |
|||
'confirmTaskSource', |
|||
'selectPerson', |
|||
'selectBasis' |
|||
]); |
|||
|
|||
// 使用 computed 创建可写的计算属性（自动同步 props，保证响应式） |
|||
const localEnterprisePopup = computed({ |
|||
get: () => props.visible.enterprise, |
|||
set: () => emit('close-popup', 'enterprise') |
|||
}); |
|||
|
|||
const localNoticePopup = computed({ |
|||
get: () => props.visible.notice, |
|||
set: () => emit('close-popup', 'notice') |
|||
}); |
|||
|
|||
const localCategoryPopup = computed({ |
|||
get: () => props.visible.category, |
|||
set: () => emit('close-popup', 'category') |
|||
}); |
|||
|
|||
const localTaskSourcePopup = computed({ |
|||
get: () => props.visible.taskSource, |
|||
set: () => emit('close-popup', 'taskSource') |
|||
}); |
|||
|
|||
const localPersonPopup = computed({ |
|||
get: () => props.visible.person, |
|||
set: () => emit('close-popup', 'person') |
|||
}); |
|||
|
|||
const localBasisPopup = computed({ |
|||
get: () => props.visible.basis, |
|||
set: () => emit('close-popup', 'basis') |
|||
}); |
|||
|
|||
// ========== 企业选择相关 ========== |
|||
const enterpriseSearchKeyword = ref(''); |
|||
const enterpriseList = ref([]); |
|||
|
|||
const initEnterpriseList = () => { |
|||
enterpriseList.value = [ |
|||
{ enterpriseName: '深圳市南山区椿立嘉源麻辣烫店', enterpriseNumber: '92440300MA5FXXXX1' }, |
|||
{ enterpriseName: '深圳伊腾迪新能源有限公司', enterpriseNumber: '91440300MA5FXXXX2' }, |
|||
{ enterpriseName: '深圳市永顺新绣花有限公司', enterpriseNumber: '91440300MA5FXXXX3' }, |
|||
{ enterpriseName: '深圳市中棋金业有限公司', enterpriseNumber: '91440300MA5FXXXX4' }, |
|||
{ enterpriseName: '深圳市百合隆科技有限公司', enterpriseNumber: '91440300MA5FXXXX5' }, |
|||
]; |
|||
}; |
|||
|
|||
const handleEnterpriseSearch = () => { |
|||
initEnterpriseList(); |
|||
if (enterpriseSearchKeyword.value.trim()) { |
|||
const keyword = enterpriseSearchKeyword.value.toLowerCase(); |
|||
enterpriseList.value = enterpriseList.value.filter(item => |
|||
item.enterpriseName.toLowerCase().includes(keyword) || |
|||
item.enterpriseNumber.toLowerCase().includes(keyword) |
|||
); |
|||
} |
|||
}; |
|||
|
|||
const clearEnterpriseSearch = () => { |
|||
enterpriseSearchKeyword.value = ''; |
|||
initEnterpriseList(); |
|||
}; |
|||
|
|||
watch(localEnterprisePopup, (val) => { |
|||
if (val) { |
|||
enterpriseSearchKeyword.value = ''; |
|||
initEnterpriseList(); |
|||
} |
|||
}); |
|||
|
|||
// ========== 人员查询相关 ========== |
|||
const personSearchKeyword = ref(''); |
|||
const personList = ref([]); |
|||
|
|||
const initPersonList = () => { |
|||
personList.value = [ |
|||
{ id: '19020011041', name: '刘倩琳' }, |
|||
{ id: '19020011042', name: '张明华' }, |
|||
{ id: '19020011043', name: '李晓东' }, |
|||
{ id: '19020011044', name: '王芳' }, |
|||
]; |
|||
}; |
|||
|
|||
const handlePersonSearch = () => { |
|||
initPersonList(); |
|||
if (personSearchKeyword.value.trim()) { |
|||
const keyword = personSearchKeyword.value.toLowerCase(); |
|||
personList.value = personList.value.filter(item => |
|||
item.name.toLowerCase().includes(keyword) || |
|||
item.id.toLowerCase().includes(keyword) |
|||
); |
|||
} |
|||
}; |
|||
|
|||
const clearPersonSearch = () => { |
|||
personSearchKeyword.value = ''; |
|||
initPersonList(); |
|||
}; |
|||
|
|||
watch(localPersonPopup, (val) => { |
|||
if (val) { |
|||
personSearchKeyword.value = ''; |
|||
initPersonList(); |
|||
} |
|||
}); |
|||
|
|||
// ========== 执法依据相关 ========== |
|||
const basisSearchKeyword = ref(''); |
|||
const enforcementBasisList = ref([]); |
|||
|
|||
const initBasisList = () => { |
|||
enforcementBasisList.value = [ |
|||
{ id: 1, name: '《中华人民共和国行政处罚法》' }, |
|||
{ id: 2, name: '《中华人民共和国行政许可法》' }, |
|||
{ id: 3, name: '《中华人民共和国行政强制法》' }, |
|||
{ id: 4, name: '《深圳市经济特区商事登记若干规定》' }, |
|||
{ id: 5, name: '《深圳经济特区优化营商环境条例》' }, |
|||
{ id: 6, name: '《中华人民共和国市场主体登记管理条例》' }, |
|||
]; |
|||
}; |
|||
|
|||
const handleBasisSearch = () => { |
|||
initBasisList(); |
|||
if (basisSearchKeyword.value.trim()) { |
|||
const keyword = basisSearchKeyword.value.toLowerCase(); |
|||
enforcementBasisList.value = enforcementBasisList.value.filter(item => |
|||
item.name.toLowerCase().includes(keyword) |
|||
); |
|||
} |
|||
}; |
|||
|
|||
const clearBasisSearch = () => { |
|||
basisSearchKeyword.value = ''; |
|||
initBasisList(); |
|||
}; |
|||
|
|||
watch(localBasisPopup, (val) => { |
|||
if (val) { |
|||
basisSearchKeyword.value = ''; |
|||
initBasisList(); |
|||
} |
|||
}); |
|||
|
|||
// ========== 预告查询相关 ========== |
|||
const noticeList = ref([]); |
|||
const noticePage = ref(1); |
|||
const loading = ref(false); |
|||
const finished = ref(false); |
|||
|
|||
const loadNotices = () => { |
|||
if (loading.value || finished.value) return; |
|||
loading.value = true; |
|||
|
|||
setTimeout(() => { |
|||
const mockData = [ |
|||
{ id: 1, matter: '例行检查', time: '2026-05-20 10:00' }, |
|||
{ id: 2, matter: '专项检查', time: '2026-05-19 14:30' }, |
|||
]; |
|||
|
|||
if (noticePage.value === 1) { |
|||
noticeList.value = mockData; |
|||
} else { |
|||
noticeList.value = [...noticeList.value, ...mockData]; |
|||
} |
|||
|
|||
loading.value = false; |
|||
|
|||
if (noticePage.value >= 1) { |
|||
finished.value = true; |
|||
} |
|||
|
|||
noticePage.value++; |
|||
}, 500); |
|||
}; |
|||
|
|||
const onNoticeScroll = () => { }; |
|||
|
|||
watch(localNoticePopup, (newVal) => { |
|||
if (newVal) { |
|||
noticePage.value = 1; |
|||
noticeList.value = []; |
|||
loading.value = false; |
|||
finished.value = false; |
|||
loadNotices(); |
|||
} |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.register-popups { |
|||
// 容器样式（可选） |
|||
} |
|||
|
|||
.popup-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0.3rem; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
|
|||
.popup-title { |
|||
font-size: 0.4rem; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.close-icon { |
|||
font-size: 0.45rem; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.search-bar { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0.3rem; |
|||
|
|||
// padding: 0.3rem; |
|||
:deep(.van-search) { |
|||
padding-right: 0px; |
|||
flex: 1; |
|||
height: 34px; |
|||
} |
|||
|
|||
.search-btn { |
|||
flex: none; |
|||
height: 34px; |
|||
} |
|||
} |
|||
|
|||
.enterprise-search-popup, |
|||
.person-search-popup, |
|||
.enforcement-basis-popup { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.enterprise-list, |
|||
.person-list, |
|||
.enforcement-basis-list { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0 0.3rem; |
|||
} |
|||
|
|||
.enterprise-list-item, |
|||
.person-list-item, |
|||
.basis-list-item { |
|||
padding:20px 20px 14px 14px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
|
|||
&:active { |
|||
background: #f9f9f9; |
|||
} |
|||
} |
|||
|
|||
.enterprise-name, |
|||
.person-name, |
|||
.basis-name { |
|||
font-size: 16px; |
|||
color: #333; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.enterprise-number, |
|||
.person-id { |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
|
|||
.notice-popup { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.popup-content { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0.3rem; |
|||
} |
|||
|
|||
.notice-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0.3rem; |
|||
// background: #f9f9f9; |
|||
margin-bottom: 0.2rem; |
|||
border-bottom: 0.1px solid #ededed; |
|||
|
|||
.notice-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.notice-matter { |
|||
font-size: 16px; |
|||
color: #000; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.notice-time { |
|||
font-size: 14px; |
|||
color: #999; |
|||
} |
|||
|
|||
.link-btn { |
|||
flex: none; |
|||
font-size: 12px; |
|||
height: 26px; |
|||
} |
|||
} |
|||
|
|||
.loading-more, |
|||
.no-more { |
|||
text-align: center; |
|||
padding: 0.3rem; |
|||
font-size: 0.28rem; |
|||
color: #999; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 0.1rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue