From da837b54ed8e818f9ec6eea50cbbe790f6ed14b6 Mon Sep 17 00:00:00 2001
From: wangmingyong <wangmingyong@163.com>
Date: Wed, 20 May 2026 20:46:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=AB=E7=A0=81=E5=85=A5=E4=BC=81=E7=99=BB?=
 =?UTF-8?q?=E8=AE=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../register/EnforcementInfoSection.vue       |  431 +++++
 .../register/EnterpriseInfoSection.vue        |   76 +
 .../enforcement/register/RegisterPopups.vue   |  461 ++++++
 .../router/enforcement-app/enf-main-router.js |    2 +-
 .../enforce/enforcementRegister.vue           | 1418 +++--------------
 .../enforcement/enterpriseScanPreview.vue     |  226 +--
 .../src/views/enforcement/scanEntQRCode.vue   |   14 +-
 7 files changed, 1333 insertions(+), 1295 deletions(-)
 create mode 100644 zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnforcementInfoSection.vue
 create mode 100644 zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnterpriseInfoSection.vue
 create mode 100644 zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/RegisterPopups.vue

diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnforcementInfoSection.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnforcementInfoSection.vue
new file mode 100644
index 00000000..b5094a4d
--- /dev/null
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnforcementInfoSection.vue
@@ -0,0 +1,431 @@
+<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>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnterpriseInfoSection.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnterpriseInfoSection.vue
new file mode 100644
index 00000000..c5a1e9ff
--- /dev/null
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/EnterpriseInfoSection.vue
@@ -0,0 +1,76 @@
+<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>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/RegisterPopups.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/RegisterPopups.vue
new file mode 100644
index 00000000..e845b95f
--- /dev/null
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/enforcement/register/RegisterPopups.vue
@@ -0,0 +1,461 @@
+<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>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/router/enforcement-app/enf-main-router.js b/zdxt-web-client/zdxt-efcode-enforcement-app/src/router/enforcement-app/enf-main-router.js
index e9ca0084..b6345944 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/router/enforcement-app/enf-main-router.js
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/router/enforcement-app/enf-main-router.js
@@ -83,7 +83,7 @@ const routes = [
     },
     // 执法端-登记页面
     {
-        path: "/enforcement/register",
+        path: "/enforcement/enforcementRegister",
         name: "enforcementRegister",
         component: () => import("@/views/enforcement/enforce/enforcementRegister.vue"),
         meta: {
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementRegister.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementRegister.vue
index d0f66648..4e23ba9b 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementRegister.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementRegister.vue
@@ -1,621 +1,234 @@
 <template>
     <div class="register-page">
-        <div class="page-header">
+        <!-- 页面头部 -->
+        <!-- <div class="page-header">
             <van-icon name="arrow-left" class="back-icon" @click="goBack" />
             <span class="page-title">登记</span>
-        </div>
-
-        <div class="page-content">
-            <!-- 企业信息 -->
-            <div class="section">
-                <div class="section-title">企业信息</div>
-                <div class="info-row" @click="isSignMode && openEnterprisePicker()">
-                    <div class="info-label">企业名称</div>
-                    <div class="info-value">
-                        <span :class="{ placeholder: !enterpriseData?.enterpriseName }">
-                            {{ enterpriseData?.enterpriseName || '请选择' }}
-                        </span>
-                        <van-icon v-if="isSignMode" name="arrow" class="arrow-icon" />
-                    </div>
-                </div>
-                <div class="info-row" @click="isSignMode && openEnterprisePicker()">
-                    <div class="info-label">统一社会信用代码</div>
-                    <div class="info-value">
-                        <span :class="{ placeholder: !enterpriseData?.enterpriseNumber }">
-                            {{ enterpriseData?.enterpriseNumber || '请选择' }}
-                        </span>
-                        <van-icon v-if="isSignMode" name="arrow" class="arrow-icon" />
-                    </div>
-                </div>
+        </div> -->
+
+        <!-- 表单主体 -->
+        <van-form @submit="onSubmit" scroll-to-error class="page-content">
+            <!-- 企业信息组件 -->
+            <EnterpriseInfoSection
+                :enterprise-data="enterpriseData"
+                :is-sign-mode="isSignMode"
+                @open-picker="showPopups.enterprise = true"
+            />
+
+            <!-- 执法信息组件 -->
+            <EnforcementInfoSection
+                :form-data="formData"
+                :default-person="enforcementPersons[0]"
+                :additional-persons="additionalPersons"
+                @show-notice-picker="showPopups.notice = true"
+                @open-person-picker="handleOpenPersonPicker"
+                @remove-person="handleRemovePerson"
+                @show-category-picker="showPopups.category = true"
+                @show-task-source-picker="showPopups.taskSource = true"
+                @open-basis-picker="handleOpenBasisPicker"
+                @add-basis="handleAddBasis"
+                @remove-basis="handleRemoveBasis"
+                @add-person="handleAddPerson"
+            />
+
+            <!-- 底部按钮 -->
+            <div class="bottom-buttons">
+                <van-button class="btn-save" @click="handleSave">保存</van-button>
+                <van-button class="btn-submit" type="primary" native-type="submit">提交</van-button>
             </div>
-
-            <!-- 执法信息 -->
-            <div class="section">
-                <div class="section-title">执法信息</div>
-
-                <!-- 是否关联预告 -->
-                <div class="form-row" @click="showRelatedNoticePicker = true">
-                    <div class="form-label">是否关联预告</div>
-                    <div class="form-value">
-                        <span :class="{ placeholder: !formData.relatedNotice }">
-                            {{ formData.relatedNotice || '请选择' }}
-                        </span>
-                        <van-icon name="arrow" class="arrow-icon" />
-                    </div>
-                </div>
-
-                <!-- 执法单位 -->
-                <div class="form-row required">
-                    <div class="form-label">执法单位</div>
-                    <div class="form-value">{{ formData.enforcementUnit }}</div>
-                </div>
-
-                <!-- 执法人员 -->
-                <div class="form-row required">
-                    <div class="form-label">执法人员</div>
-                    <div class="form-value person-select">
-                        <!-- 默认执法人员（第一行） -->
-                        <div class="person-item default-person">
-                            <span>{{ enforcementPersons[0]?.name }} {{ enforcementPersons[0]?.id }}</span>
-                        </div>
-                        <!-- 其他行 -->
-                        <div v-for="(person, index) in additionalPersons" :key="index" class="person-item">
-                            <span @click="openPersonPicker(index)" :class="{ placeholder: !person.name }">{{ person.name
-                                || '请选择' }}</span>
-                            <van-icon name="minus" class="delete-icon" @click="removeAdditionalPerson(index)" />
-                        </div>
-                        <!-- 新增行 -->
-                        <div class="person-add" @click="openPersonPicker(-1)">
-                            <span>请选择</span>
-                            <van-icon name="plus" class="add-icon" />
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 执法类别 -->
-                <div class="form-row required" @click="showCategoryPicker = true">
-                    <div class="form-label">执法类别</div>
-                    <div class="form-value">
-                        <span :class="{ placeholder: !formData.category }">
-                            {{ formData.category || '请选择' }}
-                        </span>
-                        <van-icon name="arrow" class="arrow-icon" />
-                    </div>
-                </div>
-
-                <!-- 任务来源 -->
-                <div class="form-row required" @click="showTaskSourcePicker = true">
-                    <div class="form-label">任务来源</div>
-                    <div class="form-value">
-                        <span :class="{ placeholder: !formData.taskSource }">
-                            {{ formData.taskSource || '请选择' }}
-                        </span>
-                        <van-icon name="arrow" class="arrow-icon" />
-                    </div>
-                </div>
-
-                <!-- 执法事项 -->
-                <div class="form-row required">
-                    <div class="form-label">执法事项</div>
-                    <div class="form-value textarea-wrapper">
-                        <textarea v-model="formData.enforcementMatter" placeholder="请输入 执法事项" maxlength="1000"
-                            @input="updateCharCount"></textarea>
-                        <div class="char-count">{{ charCount }}/1000</div>
-                    </div>
-                </div>
-
-                <!-- 执法依据 -->
-                <div class="basis-container">
-                    <div v-for="(basis, index) in enforcementBases" :key="index" class="form-row basis-row">
-                        <div class="form-label">执法依据</div>
-                        <div class="form-value basis-wrapper">
-                            <span @click="openBasisPicker(index)" :class="{ placeholder: !basis }">
-                                {{ basis || '请选择' }}
-                            </span>
-                            <van-icon v-if="index === enforcementBases.length - 1" name="plus" class="add-btn" @click="addBasis" />
-                            <van-icon v-else name="cross" class="close-btn" @click="removeBasis(index)" />
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 原因 -->
-                <div class="form-row">
-                    <div class="form-label">原因</div>
-                    <div class="form-value">{{ formData.reason }}</div>
-                </div>
-
-                <!-- 执法时间 -->
-                <div class="form-row">
-                    <div class="form-label">执法时间</div>
-                    <div class="form-value">{{ formData.enforcementTime }}</div>
-                </div>
-
-                <!-- 联合执法 -->
-                <div class="form-row required">
-                    <div class="form-label">联合执法</div>
-                    <div class="form-value custom-radio-group">
-                        <label class="custom-checkbox">
-                            <input type="radio" :checked="formData.jointEnforcement === false"
-                                @change="formData.jointEnforcement = false" />
-                            <span class="checkbox-box">
-                                <span v-if="formData.jointEnforcement === false" class="check-icon">✓</span>
-                            </span>
-                            <span class="checkbox-label">否</span>
-                        </label>
-                        <label class="custom-checkbox">
-                            <input type="radio" :checked="formData.jointEnforcement === true"
-                                @change="formData.jointEnforcement = true" />
-                            <span class="checkbox-box">
-                                <span v-if="formData.jointEnforcement === true" class="check-icon">✓</span>
-                            </span>
-                            <span class="checkbox-label">是</span>
-                        </label>
-                    </div>
-                </div>
-
-                <!-- 受委托执法 -->
-                <div class="form-row required">
-                    <div class="form-label">受委托执法</div>
-                    <div class="form-value custom-radio-group">
-                        <label class="custom-checkbox">
-                            <input type="radio" :checked="formData.entrustedEnforcement === false"
-                                @change="formData.entrustedEnforcement = false" />
-                            <span class="checkbox-box">
-                                <span v-if="formData.entrustedEnforcement === false" class="check-icon">✓</span>
-                            </span>
-                            <span class="checkbox-label">否</span>
-                        </label>
-                        <label class="custom-checkbox">
-                            <input type="radio" :checked="formData.entrustedEnforcement === true"
-                                @change="formData.entrustedEnforcement = true" />
-                            <span class="checkbox-box">
-                                <span v-if="formData.entrustedEnforcement === true" class="check-icon">✓</span>
-                            </span>
-                            <span class="checkbox-label">是</span>
-                        </label>
-                    </div>
-                </div>
-                <div class="form-hint">本次执法是否为受委托事项</div>
-
-                <!-- 附件 -->
-                <div class="form-row">
-                    <div class="form-label">附件</div>
-                    <div class="form-value attachment-wrapper">
-                        <span class="attachment-hint">（不多于8张）</span>
-                        <div class="upload-area">
-                            <van-icon name="photograph" class="upload-icon" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 底部按钮 -->
-        <div class="bottom-buttons">
-            <van-button class="btn-save" @click="handleSave">保存</van-button>
-            <van-button class="btn-submit" type="primary" @click="handleSubmit">提交</van-button>
-        </div>
-
-        <!-- 企业选择弹窗 -->
-        <van-popup v-model:show="showEnterprisePicker" 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="showEnterprisePicker = false" />
-                </div>
-                <div class="search-bar">
-                    <van-search v-model="enterpriseSearchKeyword" placeholder="请输入企业名称/统一信用代码搜索" @search="searchEnterprise"
-                        @clear="clearEnterpriseSearch" />
-                    <van-button class="search-btn" type="primary" @click="searchEnterprise">搜索</van-button>
-                </div>
-                <div class="enterprise-list">
-                    <div v-for="(item, index) in enterpriseList" :key="index" class="enterprise-list-item"
-                        @click="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="showRelatedNoticePicker" 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="showRelatedNoticePicker = 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="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="showCategoryPicker" round position="bottom">
-            <van-picker :columns="categoryOptions" @cancel="showCategoryPicker = false" @confirm="onCategoryConfirm" />
-        </van-popup>
-
-        <van-popup v-model:show="showTaskSourcePicker" round position="bottom">
-            <van-picker :columns="taskSourceOptions" @cancel="showTaskSourcePicker = false" @confirm="onTaskSourceConfirm" />
-        </van-popup>
-        <!-- 人员查询弹窗 -->
-        <van-popup v-model:show="showPersonSearchPicker" 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="showPersonSearchPicker = false" />
-                </div>
-                <div class="search-bar">
-                    <van-search v-model="searchKeyword" placeholder="请输入姓名/执法证件号搜索" @search="searchPerson"
-                        @clear="clearSearch" />
-                    <van-button class="search-btn" type="primary" @click="searchPerson">搜索</van-button>
-                </div>
-                <div class="person-list">
-                    <div v-for="(person, index) in personList" :key="index" class="person-list-item"
-                        @click="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="showEnforcementBasisPicker" 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="showEnforcementBasisPicker = false" />
-                </div>
-                <div class="search-bar">
-                    <van-search v-model="basisSearchKeyword" placeholder="请输入关键字搜索" @search="searchBasis"
-                        @clear="clearBasisSearch" />
-                    <van-button class="search-btn" type="primary" @click="searchBasis">搜索</van-button>
-                </div>
-                <div class="enforcement-basis-list">
-                    <div v-for="(item, index) in enforcementBasisList" :key="index" class="basis-list-item"
-                        @click="selectBasis(item)">
-                        <div class="basis-name">{{ item.name }}</div>
-                    </div>
-                    <van-empty v-if="enforcementBasisList.length === 0" description="没有更多了" />
-                </div>
-            </div>
-        </van-popup>
+        </van-form>
+
+        <!-- 弹窗组件 -->
+        <RegisterPopups
+            :visible="showPopups"
+            :options="{ categories: categoryOptions, taskSources: taskSourceOptions }"
+            @close-popup="handleClosePopup"
+            @select-enterprise="handleSelectEnterprise"
+            @link-notice="handleLinkNotice"
+            @confirm-category="handleCategoryConfirm"
+            @confirm-task-source="handleTaskSourceConfirm"
+            @select-person="handleSelectPerson"
+            @select-basis="handleSelectBasis"
+        />
     </div>
 </template>
 
 <script setup name="EnforcementRegister">
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { showFailToast, showSuccessToast, showConfirmDialog  } from 'vant';
+import { showConfirmDialog, showSuccessToast, showToast } from 'vant';
+import EnterpriseInfoSection from '@/components/enforcement/register/EnterpriseInfoSection.vue';
+import EnforcementInfoSection from '@/components/enforcement/register/EnforcementInfoSection.vue';
+import RegisterPopups from '@/components/enforcement/register/RegisterPopups.vue';
 
 const router = useRouter();
 const route = useRoute();
 
-const enterpriseData = ref(null);
-const isSignMode = ref(false); // 是否是补录模式
+// ========== 状态定义 ==========
+
+// 补录模式
+const isSignMode = ref(false);
+
+// 企业数据
+const enterpriseData = ref({
+    enterpriseName: '深圳市南山区椿立嘉源麻辣烫店',
+    enterpriseNumber: '92440300MA5FXXXX1',
+});
 
+// 表单数据（reactive对象，子组件可以直接修改其属性）
 const formData = reactive({
     relatedNotice: '',
     enforcementUnit: '深圳市司法局',
-    enforcementPerson: '刘倩琳 19020011041',
     category: '',
     taskSource: '',
     enforcementMatter: '',
-    enforcementBasis: '',
-    reason: '系统未能有效生成监督码',
+    enforcementBases: [''],
+    reason: '系统未能有效生成监管码',
     enforcementTime: '',
-    jointEnforcement: false,
-    entrustedEnforcement: false,
-    attachments: [],
+    jointEnforcement: 0,
+    entrustedEnforcement: 0,
+    fileList: [],
 });
 
-const charCount = ref(0);
-const showRelatedNoticePicker = ref(false);
-const showCategoryPicker = ref(false);
-const showTaskSourcePicker = ref(false);
-const showPersonSearchPicker = ref(false);
-const showEnforcementBasisPicker = ref(false);
-
-// 企业选择相关
-const showEnterprisePicker = ref(false);
-const enterpriseSearchKeyword = ref('');
-const enterpriseList = ref([]);
-
-// 执法依据数组
-const enforcementBases = ref(['']);
-const currentBasisIndex = ref(0);
-
-// 执法依据搜索相关
-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 enforcementPersons = ref([
+    { name: '刘倩琳', id: '19020011041' },
+]);
 
-const openBasisPicker = (index) => {
-    currentBasisIndex.value = index;
-    basisSearchKeyword.value = '';
-    initBasisList();
-    showEnforcementBasisPicker.value = true;
-};
+const additionalPersons = ref([]);
 
-const addBasis = () => {
-    enforcementBases.value.push('');
-};
+// 弹窗显示状态
+const showPopups = reactive({
+    enterprise: false,
+    notice: false,
+    category: false,
+    taskSource: false,
+    person: false,
+    basis: false
+});
 
-const removeBasis = (index) => {
-    enforcementBases.value.splice(index, 1);
-};
+// 当前编辑索引（用于人员和执法依据）
+const currentEditIndex = ref(-1);
 
-const searchBasis = () => {
-    initBasisList();
-    if (basisSearchKeyword.value.trim()) {
-        const keyword = basisSearchKeyword.value.toLowerCase();
-        enforcementBasisList.value = enforcementBasisList.value.filter(item =>
-            item.name.toLowerCase().includes(keyword)
-        );
-    }
-};
+// 选项数据
+const categoryOptions = [
+    { text: '行政检查', value: '行政检查' },
+    { text: '行政处罚', value: '行政处罚' },
+    { text: '行政许可', value: '行政许可' },
+    { text: '行政强制', value: '行政强制' },
+    { text: '行政征收', value: '行政征收' },
+    { text: '行政给付', value: '行政给付' },
+    { text: '行政确认', value: '行政确认' },
+    { text: '行政登记', value: '行政登记' },
+    { text: '行政裁决', value: '行政裁决' },
+    { text: '文书送达', value: '文书送达' },
+];
 
-const clearBasisSearch = () => {
-    basisSearchKeyword.value = '';
-    initBasisList();
-};
+const taskSourceOptions = [
+    { text: '年度计划', value: '年度计划' },
+    { text: '临时任务', value: '临时任务' },
+    { text: '上级交办', value: '上级交办' },
+    { text: '群众举报', value: '群众举报' },
+];
 
-const selectBasis = (item) => {
-    enforcementBases.value[currentBasisIndex.value] = item.name;
-    showEnforcementBasisPicker.value = false;
-};
+// ========== 事件处理函数 ==========
 
-// 企业选择相关方法
-const openEnterprisePicker = () => {
-    enterpriseSearchKeyword.value = '';
-    initEnterpriseList();
-    showEnterprisePicker.value = true;
+// 关闭弹窗（保持 reactive 对象的响应式）
+const handleClosePopup = (type) => {
+    showPopups[type] = false;
 };
 
-const initEnterpriseList = () => {
-    enterpriseList.value = [
-        {
-            enterpriseName: '深圳市南山区椿立嘉源麻辣烫店',
-            enterpriseNumber: '92440300MA5FXXXX1',
-            enterpriseType: '个体工商户',
-        },
-        {
-            enterpriseName: '深圳伊腾迪新能源有限公司',
-            enterpriseNumber: '91440300MA5FXXXX2',
-            enterpriseType: '有限责任公司',
-        },
-        {
-            enterpriseName: '深圳市永顺新绣花有限公司',
-            enterpriseNumber: '91440300MA5FXXXX3',
-            enterpriseType: '有限责任公司',
-        },
-        {
-            enterpriseName: '深圳市中棋金业有限公司',
-            enterpriseNumber: '91440300MA5FXXXX4',
-            enterpriseType: '有限责任公司',
-        },
-        {
-            enterpriseName: '深圳市百合隆科技有限公司',
-            enterpriseNumber: '91440300MA5FXXXX5',
-            enterpriseType: '有限责任公司',
-        },
-    ];
+// 打开人员选择器
+const handleOpenPersonPicker = (index) => {
+    currentEditIndex.value = index;
+    showPopups.person = true;
 };
 
-const searchEnterprise = () => {
-    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 handleSelectPerson = (person) => {
+    if (currentEditIndex.value === -1) {
+        // 新增人员
+        additionalPersons.value.push({ name: person.name, id: person.id });
+    } else {
+        // 编辑现有人员
+        additionalPersons.value[currentEditIndex.value] = { name: person.name, id: person.id };
     }
+    showPopups.person = false;
 };
 
-const clearEnterpriseSearch = () => {
-    enterpriseSearchKeyword.value = '';
-    initEnterpriseList();
+// 删除额外人员
+const handleRemovePerson = (index) => {
+    additionalPersons.value.splice(index, 1);
 };
 
-const selectEnterprise = (item) => {
-    enterpriseData.value = item;
-    showEnterprisePicker.value = false;
-};
+// 添加额外人员
+const handleAddPerson = () => {
+    additionalPersons.value.push({ });
+}
 
-// 人员查询相关
-const searchKeyword = ref('');
-const personList = ref([]);
-const currentPersonIndex = ref(-1);
-const initPersonList = () => {
-    personList.value = [
-        { name: '白宁', id: '19020811001' },
-        { name: '蔡梓帆', id: '19020111006' },
-        { name: '陈冲', id: '19020511886' },
-        { name: '程高展', id: '19020411005' },
-        { name: '陈海涛', id: '19020411010' },
-        { name: '陈汉羽', id: '19020811004' },
-    ];
+// 打开执法依据选择器
+const handleOpenBasisPicker = (index) => {
+    currentEditIndex.value = index;
+    showPopups.basis = true;
 };
 
-const openPersonPicker = (index) => {
-    currentPersonIndex.value = index;
-    searchKeyword.value = '';
-    initPersonList();
-    showPersonSearchPicker.value = true;
+// 添加执法依据
+const handleAddBasis = () => {
+    formData.enforcementBases.push('');
 };
 
-const searchPerson = () => {
-    initPersonList();
-    if (searchKeyword.value.trim()) {
-        const keyword = searchKeyword.value.toLowerCase();
-        personList.value = personList.value.filter(item =>
-            item.name.toLowerCase().includes(keyword) ||
-            item.id.includes(keyword)
-        );
+// 删除执法依据
+const handleRemoveBasis = (index) => {
+    if (formData.enforcementBases.length > 1) {
+        formData.enforcementBases.splice(index, 1);
     }
 };
 
-const clearSearch = () => {
-    searchKeyword.value = '';
-    initPersonList();
-};
-
-const selectPerson = (person) => {
-    if (currentPersonIndex.value === -1) {
-        // 新增
-        additionalPersons.value.push({ name: person.name, id: person.id });
-    } else {
-        // 编辑
-        additionalPersons.value[currentPersonIndex.value] = { name: person.name, id: person.id };
+// 选择执法依据
+const handleSelectBasis = (basis) => {
+    const index = currentEditIndex.value;
+    if (index >= 0 && index < formData.enforcementBases.length) {
+        formData.enforcementBases[index] = basis.name;
     }
-    showPersonSearchPicker.value = false;
+    showPopups.basis = false;
 };
 
-// 预告查询相关
-const noticeList = ref([]);
-const noticePage = ref(1);
-const noticePageSize = ref(10);
-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-06' },
-            { id: 2, matter: '测试', time: '2026-03-19' },
-            { id: 3, matter: '测试', time: '2026-01-22' },
-        ];
-
-        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 handleSelectEnterprise = (enterprise) => {
+    enterpriseData.value = {
+        enterpriseName: enterprise.enterpriseName,
+        enterpriseNumber: enterprise.enterpriseNumber,
+    };
+    showPopups.enterprise = false;
 };
 
-const onNoticeScroll = (e) => {
-    const target = e.target;
-    if (target.scrollTop + target.clientHeight >= target.scrollHeight - 50) {
-        loadNotices();
-    }
-};
-
-const linkNotice = (notice) => {
+// 关联预告
+const handleLinkNotice = (notice) => {
     formData.relatedNotice = `预告-${notice.id}`;
-    showRelatedNoticePicker.value = false;
+    showPopups.notice = false;
     showSuccessToast('关联成功');
 };
 
-// 监听弹窗打开，自动加载数据
-watch(showRelatedNoticePicker, (newVal) => {
-    if (newVal) {
-        noticePage.value = 1;
-        noticeList.value = [];
-        loading.value = false;
-        finished.value = false;
-        loadNotices();
-    }
-});
-
-const enforcementPersons = ref([
-    { name: '刘倩琳', id: '19020011041' },
-]);
-
-const additionalPersons = ref([]);
-
-const addAdditionalPerson = () => {
-    additionalPersons.value.push({ name: '', id: '' });
-};
-
-const removeAdditionalPerson = (index) => {
-    additionalPersons.value.splice(index, 1);
-};
-
-const relatedNoticeOptions = ['是', '否'];
-const categoryOptions = [
-    { text: '行政检查', value: '行政检查' },
-    { text: '行政处罚', value: '行政处罚' },
-    { text: '行政许可', value: '行政许可' },
-    { text: '行政强制', value: '行政强制' },
-    { text: '行政征收', value: '行政征收' },
-    { text: '行政给付', value: '行政给付' },
-    { text: '行政确认', value: '行政确认' },
-    { text: '行政登记', value: '行政登记' },
-    { text: '行政裁决', value: '行政裁决' },
-    { text: '文书送达', value: '文书送达' },
-];
-const taskSourceOptions = [
-    { text: '年度计划', value: '年度计划' },
-    { text: '临时任务', value: '临时任务' },
-    { text: '上级交办', value: '上级交办' },
-    { text: '群众举报', value: '群众举报' },
-];
-
-const updateCharCount = () => {
-    charCount.value = formData.enforcementMatter.length;
-};
-
-const onCategoryConfirm = ({ selectedOptions }) => {
-    formData.category = selectedOptions[0].text;
-    showCategoryPicker.value = false;
+// 类别选择确认
+const handleCategoryConfirm = ({ selectedOptions }) => {
+    formData.category = selectedOptions[0]?.text || '';
+    showPopups.category = false;
 };
 
-const onTaskSourceConfirm = ({ selectedOptions }) => {
-    formData.taskSource = selectedOptions[0].text;
-    showTaskSourcePicker.value = false;
+// 任务来源选择确认
+const handleTaskSourceConfirm = ({ selectedOptions }) => {
+    formData.taskSource = selectedOptions[0]?.text || '';
+    showPopups.taskSource = false;
 };
-const onRelatedNoticeConfirm = ({ selectedOptions }) => {
-    formData.relatedNotice = selectedOptions[0].text;
-    showRelatedNoticePicker.value = false;
-};
-
-
 
+// 返回上一页
 const goBack = () => {
     router.back();
 };
 
+// 保存
 const handleSave = () => {
+    
     showConfirmDialog({
         title: '确认保存',
         message: '确认保存吗？',
@@ -627,36 +240,48 @@ const handleSave = () => {
     });
 };
 
-const handleSubmit = () => {
-    // if (!formData.category) {
-    //     showFailToast('请选择执法类别');
-    //     return;
-    // }
-    // if (!formData.taskSource) {
-    //     showFailToast('请选择任务来源');
-    //     return;
-    // }
-    // if (!formData.enforcementMatter) {
-    //     showFailToast('请输入执法事项');
-    //     return;
-    // }
+// 将 formData.fileList 转换为提交用的 fileList（纯字符串数组）
+const buildFileList = () => {
+    return (formData.fileList || [])
+        .filter(img => img && (img.url || img.content))
+        .map(img => {
+            return img.url || '';
+        })
+        .filter(Boolean);
+};
+
+// 提交表单
+const onSubmit = () => {
+    // 有未上传完的附件则拦截
+    const uploadingFile = (formData.fileList || []).find(img => img && img.status === 'uploading');
+    if (uploadingFile) {
+        showToast('附件上传中，请稍后');
+        return;
+    }
+
     showConfirmDialog({
         title: '确认提交',
         message: '确认提交吗？提交后将无法修改。',
         width: '80%',
     }).then(() => {
+        // 构建提交数据，包含文件列表
+        const payload = {
+            ...formData,
+            fileList: buildFileList()
+        };
+        console.log('提交数据:', payload);
         showSuccessToast('提交成功');
     }).catch(() => {
         // 用户取消
     });
 };
 
+// ========== 生命周期 ==========
 onMounted(() => {
     // 判断是否是补录模式
     const reason = route.query.reason;
     isSignMode.value = reason === '补录';
 
-    // 补录模式下企业信息为空，需要用户选择
     // 非补录模式下从缓存读取企业信息
     if (!isSignMode.value) {
         const cached = sessionStorage.getItem('enterpriseScanData');
@@ -670,6 +295,7 @@ onMounted(() => {
         }
     }
 
+    // 设置当前时间
     const now = new Date();
     formData.enforcementTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
 });
@@ -677,665 +303,95 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .register-page {
-    height: 100vh;
     display: flex;
     flex-direction: column;
-    background-color: #f5f5f5;
-    overflow: hidden;
+    background-color: #f7f8fa;
+    height: 94vh;
 }
 
 .page-header {
     display: flex;
     align-items: center;
-    padding: 0.3rem;
+    padding: 0 0.32rem;
+    height: 1.12rem;
     background: #fff;
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
 
     .back-icon {
-        font-size: 0.5rem;
+        font-size: 0.48rem;
         color: #333;
+        margin-right: 0.16rem;
     }
 
     .page-title {
         flex: 1;
         text-align: center;
-        font-size: 0.4rem;
-        font-weight: 500;
+        font-size: 0.38rem;
+        font-weight: 600;
         color: #333;
-        margin-right: 0.5rem;
+        margin-right: 0.64rem;
     }
 }
 
 .page-content {
     flex: 1;
     overflow-y: auto;
-    padding: 0.3rem;
-    padding-bottom: 1.5rem;
-}
-
-.section {
-    background: #fff;
-    border-radius: 0.2rem;
-    margin-bottom: 0.3rem;
-    overflow: hidden;
-}
-
-.section-title {
-    padding: 0.3rem;
-    font-size: 0.38rem;
-    font-weight: 500;
-    color: #333;
-    border-bottom: 1px solid #f5f5f5;
-}
-
-.info-row {
-    display: flex;
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    &:last-child {
-        border-bottom: none;
-    }
-}
-
-.info-label {
-    flex: none;
-    width: 3rem;
-    font-size: 0.35rem;
-    color: #333;
-    line-height: 1.5;
-}
-
-.info-value {
-    flex: 1;
-    font-size: 0.35rem;
-    color: #666;
-    line-height: 1.5;
-}
-
-.form-row {
-    display: flex;
-    align-items: center;
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-    min-height: 1rem;
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    &.required .form-label::before {
-        content: '*';
-        color: #ee0a24;
-        margin-right: 0.05rem;
-    }
-}
-
-.form-label {
-    flex: none;
-    width: 2.2rem;
-    font-size: 0.35rem;
-    color: #333;
-    line-height: 1.5;
-}
-
-.form-value {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    font-size: 0.35rem;
-    color: #333;
-
-    .placeholder {
-        color: #999;
-    }
-
-    .arrow-icon {
-        font-size: 0.32rem;
-        color: #999;
-        margin-left: 0.1rem;
-    }
-
-    .plus-icon {
-        font-size: 0.4rem;
-        color: #999;
-        margin-left: 0.1rem;
-    }
-}
-
-.textarea-wrapper {
-    flex-direction: column;
-    align-items: flex-start;
-
-    textarea {
-        width: 100%;
-        min-height: 1.5rem;
-        border: none;
-        outline: none;
-        font-size: 0.35rem;
-        color: #333;
-        resize: none;
-        padding: 0;
-
-        &::placeholder {
-            color: #999;
-        }
-    }
-
-    .char-count {
-        align-self: flex-end;
-        font-size: 0.28rem;
-        color: #999;
-        margin-top: 0.1rem;
-    }
-}
-
-.radio-group {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.4rem;
-
-    .radio-item {
-        display: flex;
-        align-items: center;
-        gap: 0.1rem;
-
-        input[type="radio"] {
-            width: 0.36rem;
-            height: 0.36rem;
-            accent-color: #1367fe;
-        }
-
-        span {
-            font-size: 0.35rem;
-            color: #333;
-        }
-    }
-}
-
-.custom-radio-group {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.custom-checkbox {
-    display: flex;
-    align-items: center;
-    gap: 0.15rem;
-
-    input[type="radio"] {
-        display: none;
-    }
-
-    .checkbox-box {
-        width: 0.36rem;
-        height: 0.36rem;
-        border: 1px solid #ccc;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #fff;
-    }
-
-    &:has(input:checked) {
-        .checkbox-box {
-            background: #1367fe;
-            border-color: #1367fe;
-        }
-    }
-
-    .check-icon {
-        color: #fff;
-        font-size: 0.24rem;
-        font-weight: bold;
-    }
-
-    .checkbox-label {
-        font-size: 0.35rem;
-        color: #333;
-    }
-}
-
-.person-select {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.15rem;
-    width: 100%;
-
-    .person-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        font-size: 0.35rem;
-        color: #333;
-        padding: 0.1rem 0;
-
-        &.default-person {
-            justify-content: flex-start;
-        }
-
-        .placeholder {
-            color: #999;
-        }
-
-        .delete-icon {
-            color: #999;
-            font-size: 0.35rem;
-        }
-    }
-
-    .person-add {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        padding: 0.2rem 0;
-        font-size: 0.35rem;
-        color: #999;
-
-        .add-icon {
-            color: #1367fe;
-            font-size: 0.4rem;
-        }
-    }
-}
-
-.form-hint {
-    font-size: 0.28rem;
-    color: #999;
-    padding: 0 0.3rem 0.3rem;
-    margin-top: -0.15rem;
-}
-
-/* 企业选择弹窗样式 */
-.enterprise-search-popup {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.enterprise-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.2rem;
+    -webkit-overflow-scrolling: touch;
+    padding: 0.24rem;
 }
 
-.enterprise-list-item {
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    .enterprise-name {
-        font-size: 0.38rem;
-        color: #333;
-        font-weight: 500;
-        margin-bottom: 0.1rem;
-    }
-
-    .enterprise-number {
-        font-size: 0.32rem;
-        color: #999;
-    }
-}
-
-/* 人员查询弹窗样式 */
-.person-search-popup {
+.bottom-buttons {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
     display: flex;
-    flex-direction: column;
-    height: 100%;
+    gap: 0.24rem;
+    padding: 0.28rem 0.32rem;
     background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
+    z-index: 99;
 
-.search-bar {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    :deep(.van-search) {
+    .btn-save,
+    .btn-submit {
         flex: 1;
-    }
-
-    .search-btn {
-        font-size: 0.32rem;
-        padding: 0.2rem 0.4rem;
-    }
-}
-
-.person-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.2rem;
-}
-
-.person-list-item {
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    .person-name {
-        font-size: 0.38rem;
-        color: #333;
-        font-weight: 500;
-        margin-bottom: 0.1rem;
-    }
-
-    .person-id {
-        font-size: 0.32rem;
-        color: #999;
-    }
-}
-
-/* 预告查询弹窗样式 */
-.notice-popup {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.popup-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.4rem 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    .popup-title {
-        font-size: 0.4rem;
-        font-weight: 500;
-        color: #333;
-    }
-
-    .close-icon {
-        font-size: 0.45rem;
-        color: #999;
-    }
-}
-
-.popup-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.3rem;
-}
-
-.notice-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.3rem 0;
-    border-bottom: 1px solid #f5f5f5;
-
-    &:last-child {
-        border-bottom: none;
-    }
-}
-
-.notice-info {
-    flex: 1;
-
-    .notice-matter,
-    .notice-time {
-        font-size: 0.35rem;
-        color: #333;
-        margin-bottom: 0.1rem;
-    }
-}
-
-.link-btn {
-    font-size: 0.32rem;
-    padding: 0.15rem 0.3rem;
-    border-radius: 0.1rem;
-}
-
-.loading-more {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.3rem;
-    font-size: 0.32rem;
-    color: #999;
-}
-
-/* 选择器弹窗样式 */
-.picker-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.picker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    .picker-btn {
-        font-size: 0.35rem;
-
-        &.cancel {
-            color: #999;
-        }
-
-        &.confirm {
-            color: #1367fe;
-            font-weight: 500;
-        }
-    }
-}
-
-.picker-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.2rem;
-}
-
-.picker-item {
-    padding: 0.35rem 0.3rem;
-    font-size: 0.38rem;
-    color: #333;
-    text-align: center;
-    border-radius: 0.1rem;
-
-    &.active {
-        background: #e8f0fe;
-        color: #1367fe;
-    }
-}
-
-/* 列表选择器弹出框样式 */
-.list-picker-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.list-picker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    .list-picker-cancel {
-        font-size: 0.35rem;
-        color: #999;
-    }
-
-    .list-picker-confirm {
-        font-size: 0.35rem;
-        color: #1367fe;
-        font-weight: 500;
-    }
-}
-
-.list-picker-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.2rem;
-}
-
-.list-picker-item {
-    padding: 0.35rem 0.3rem;
-    font-size: 0.38rem;
-    color: #333;
-    text-align: center;
-    border-radius: 0.1rem;
-
-    &.active {
-        background: #e8f0fe;
-        color: #1367fe;
-    }
-}
-
-.no-more {
-    text-align: center;
-    padding: 0.3rem;
-    font-size: 0.32rem;
-    color: #999;
-}
-
-/* 执法依据容器样式 */
-.basis-container {
-    .basis-row {
-        padding-left: 0;
-        padding-right: 0;
-
-        &:not(:last-child) {
-            border-bottom: 1px solid #f5f5f5;
-        }
-    }
-}
-
-.basis-wrapper {
-    position: relative;
-
-    .close-btn,
-    .add-btn {
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.3rem;
-        margin-left: 0.2rem;
-    }
-
-    .close-btn {
-        background: #ddd;
-        color: #666;
-    }
-
-    .add-btn {
-        background: #1367fe;
-        color: #fff;
-    }
-}
-
-/* 执法依据弹窗样式 */
-.enforcement-basis-popup {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.enforcement-basis-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.2rem;
-}
-
-.basis-list-item {
-    padding: 0.3rem;
-    border-bottom: 1px solid #f5f5f5;
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    .basis-name {
-        font-size: 0.38rem;
-        color: #333;
+        height: 0.92rem;
+        border-radius: 0.46rem;
+        font-size: 0.34rem;
         font-weight: 500;
-    }
-}
-
-.attachment-wrapper {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 0.2rem;
-
-    .attachment-hint {
-        font-size: 0.28rem;
-        color: #999;
-    }
-
-    .upload-area {
-        width: 1.5rem;
-        height: 1.5rem;
-        background: #f5f5f5;
-        border-radius: 0.1rem;
+        border: none;
+        transition: all 0.2s;
         display: flex;
         align-items: center;
         justify-content: center;
 
-        .upload-icon {
-            font-size: 0.6rem;
-            color: #999;
+        &:active {
+            transform: scale(0.96);
+            opacity: 0.9;
         }
     }
-}
-
-.bottom-buttons {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    padding: 0.3rem;
-    gap: 0.3rem;
-    background: #fff;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
     .btn-save {
-        flex: 1;
-        height: 1rem;
-        border-radius: 0.5rem;
-        font-size: 0.4rem;
         border: 1px solid #1367fe;
         color: #1367fe;
         background: #fff;
+
+        &:active {
+            background: rgba(19, 103, 254, 0.05);
+        }
     }
 
     .btn-submit {
-        flex: 1;
-        height: 1rem;
-        border-radius: 0.5rem;
-        font-size: 0.4rem;
-        background: #1367fe;
-        border: none;
+        background: linear-gradient(135deg, #1367fe 0%, #4a8cff 100%);
+        color: #fff;
+        box-shadow: 0 4px 12px rgba(19, 103, 254, 0.3);
+
+        &:active {
+            box-shadow: 0 2px 8px rgba(19, 103, 254, 0.2);
+        }
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enterpriseScanPreview.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enterpriseScanPreview.vue
index ce27317b..ea97ae10 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enterpriseScanPreview.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enterpriseScanPreview.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="home app_content">
+    <div class="home">
         <!-- 中间 -->
         <div class="warp_body">
             <div class="white-body">
                 <!-- Tab 切换 -->
                 <div class="tabs">
-                    <div class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
-                        <span>企业画像</span>
+                    <div class="tab-item portrayal" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
+                        <div class="tab-item-title">企业画像</div>
                     </div>
-                    <div class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
-                        <span>执法记录</span>
+                    <div class="tab-item record" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
+                        <div class="tab-item-title">执法记录</div>
                     </div>
                 </div>
 
                 <!-- 企业画像 Tab -->
-                <div v-if="currentTab === 0" class="tab-content">
+                <div v-if="currentTab === 0">
                     <!-- 企业信息卡片 -->
                     <div class="enterprise-card">
                         <div v-if="enterpriseData" class="enterprise-info">
@@ -51,14 +51,16 @@
                                     <div class="info-label">注册地址</div>
                                     <div class="info-value address-value">
                                         <span class="address-text">{{ enterpriseData.enterpriseAddress }}</span>
-                                        <span class="expand-text" v-if="enterpriseData.enterpriseAddress && enterpriseData.enterpriseAddress.length > 20">展开</span>
+                                        <span class="expand-text"
+                                            v-if="enterpriseData.enterpriseAddress && enterpriseData.enterpriseAddress.length > 20">展开</span>
                                     </div>
                                 </div>
                                 <div class="info-item">
                                     <div class="info-label">经营范围</div>
                                     <div class="info-value scope-value">
                                         <span class="scope-text">{{ enterpriseData.businessScope }}</span>
-                                        <span class="expand-text" v-if="enterpriseData.businessScope && enterpriseData.businessScope.length > 30">展开</span>
+                                        <span class="expand-text"
+                                            v-if="enterpriseData.businessScope && enterpriseData.businessScope.length > 30">展开</span>
                                     </div>
                                 </div>
                             </template>
@@ -76,23 +78,6 @@
                             <van-icon :name="isCollapsed ? 'arrow-down' : 'arrow-up'" />
                         </div>
                     </div>
-
-                    <!-- 执法记录卡片 -->
-                    <div class="record-card">
-                        <!-- 执法记录子Tab -->
-                        <div class="record-tabs">
-                            <div class="record-tab-item" :class="{ active: recordTab === 0 }" @click="recordTab = 0">
-                                <span>历史执法案件</span>
-                            </div>
-                            <div class="record-tab-item" :class="{ active: recordTab === 1 }" @click="recordTab = 1">
-                                <span>历史处罚案件</span>
-                            </div>
-                            <div class="record-tab-item" :class="{ active: recordTab === 2 }" @click="recordTab = 2">
-                                <span>历史强制案件</span>
-                            </div>
-                        </div>
-                        <van-empty description="暂无执法记录" />
-                    </div>
                 </div>
 
                 <!-- 执法记录 Tab -->
@@ -109,26 +94,19 @@
 
                     <!-- 执法记录列表 -->
                     <div class="record-list">
-                        <div
-                            v-for="(item, index) in (recordTab === 0 ? cityRecords : unitRecords)"
-                            :key="index"
-                            class="record-card-item"
-                        >
+                        <div v-for="(item, index) in (recordTab === 0 ? cityRecords : unitRecords)" :key="index"
+                            class="record-card-item">
                             <div class="record-header">
                                 <div class="record-date">{{ item.date }}</div>
                                 <div class="record-company">{{ enterpriseData?.enterpriseName }}</div>
                                 <div class="record-count">被执法次数：{{ item.count }}次</div>
                             </div>
                             <div class="record-timeline" v-if="isRecordExpanded">
-                                <div
-                                    v-for="(timeline, tIndex) in item.timeline"
-                                    :key="tIndex"
-                                    class="timeline-item"
-                                >
+                                <div v-for="(timeline, tIndex) in item.timeline" :key="tIndex" class="timeline-item" :class="{ 'has-line': tIndex !== item.timeline.length - 1 }">
                                     <div class="timeline-dot"></div>
                                     <div class="timeline-content">
                                         <div class="timeline-time">{{ timeline.time }}</div>
-                                        <div class="timeline-unit">执法单位：{{ timeline.unit }}</div>
+                                        <div class="timeline-unit"><span class="unit-label">执法单位：</span>{{ timeline.unit }}</div>
                                     </div>
                                 </div>
                             </div>
@@ -142,6 +120,23 @@
                         </div>
                     </div>
                 </div>
+
+            </div>
+            <!-- 执法记录卡片 -->
+            <div class="record-card" v-if="currentTab === 0">
+                <!-- 执法记录子Tab -->
+                <div class="record-tabs">
+                    <div class="record-tab-item" :class="{ active: recordTab === 0 }" @click="recordTab = 0">
+                        <span>历史执法案件</span>
+                    </div>
+                    <div class="record-tab-item" :class="{ active: recordTab === 1 }" @click="recordTab = 1">
+                        <span>历史处罚案件</span>
+                    </div>
+                    <div class="record-tab-item" :class="{ active: recordTab === 2 }" @click="recordTab = 2">
+                        <span>历史强制案件</span>
+                    </div>
+                </div>
+                <van-empty description="暂无执法记录" />
             </div>
         </div>
 
@@ -232,7 +227,7 @@ const formatDate = (dateStr) => {
 // ========== 页面跳转 ==========
 const toSign = () => {
     router.push({
-        path: '/enforcement/register',
+        path: '/enforcement/enforcementRegister',
     });
 };
 </script>
@@ -255,49 +250,65 @@ const toSign = () => {
     .white-body {
         margin: 0 0.3rem;
         width: calc(100% - 0.6rem);
-        min-height: 100vh;
         background-color: #fff;
         border-radius: 0.27rem;
         overflow: hidden;
+        margin-bottom: 20px;
     }
 }
 
 .tabs {
     display: flex;
     padding: 0.3rem 0.3rem 0;
-    gap: 0.1rem;
 }
 
 .tab-item {
     flex: 1;
-    height: 0.9rem;
+    height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    overflow: hidden;
-    transform: skewX(-15deg);
 
-    span {
-        display: block;
-        width: 100%;
-        height: 100%;
-        line-height: 0.9rem;
-        text-align: center;
+    .tab-item-title {
         font-size: 0.38rem;
-        color: #1367fe;
-        background: #e6f0fd;
-        transform: skewX(15deg);
     }
 
-    &.active span {
-        background: linear-gradient(135deg, #3b82f6, #2563eb);
-        color: #fff;
+    &.portrayal {
+        background: url('@/assets/images/tab_bg1_1.png') no-repeat center center;
+        background-size: 100% 100%;
+
+        .tab-item-title {
+            color: #1989fa;
+        }
+
+        &.active {
+            background: url('@/assets/images/tab_bg1.png') no-repeat center center;
+            background-size: 100% 100%;
+
+            .tab-item-title {
+                color: #fff;
+            }
+        }
     }
-}
 
-.tab-content {
-    padding: 0.3rem;
+    &.record {
+        background: url('@/assets/images/tab_bg.png') no-repeat center center;
+        background-size: 100% 100%;
+
+        .tab-item-title {
+            color: #1989fa;
+        }
+
+        &.active {
+            background: url('@/assets/images/tab_bg_1.png') no-repeat center center;
+            background-size: 100% 100%;
+
+            .tab-item-title {
+                color: #fff;
+            }
+        }
+    }
 }
 
 .enterprise-card {
@@ -320,10 +331,11 @@ const toSign = () => {
 
     .info-label {
         flex: none;
-        width: 2.2rem;
-        font-size: 0.35rem;
-        color: #333;
+        width: 74px;
+        font-size: 14px;
+        color: #000;
         line-height: 1.5;
+        margin-right: 30px;
     }
 
     .info-value {
@@ -367,6 +379,13 @@ const toSign = () => {
     background: #fff;
     border-radius: 0.2rem;
     padding: 0 0.3rem;
+    margin: 0.3rem;
+}
+
+.tab-content {
+    height: calc(100vh - 70px);
+    background: #fff;
+    box-sizing: border-box;
 }
 
 .record-tabs {
@@ -382,26 +401,18 @@ const toSign = () => {
     cursor: pointer;
     position: relative;
 
-    span {
-        font-size: 0.35rem;
-        color: #999;
-    }
+    &.active {
+        border-bottom: 3px solid #1989fa;
 
-    &.active span {
-        color: #1367fe;
-        font-weight: 500;
+        span {
+            color: #1989fa;
+            font-weight: 650;
+        }
     }
 
-    &.active::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 1.5rem;
-        height: 0.06rem;
-        background: #1367fe;
-        border-radius: 0.03rem;
+    span {
+        font-size: 0.35rem;
+        color: #999;
     }
 }
 
@@ -423,53 +434,54 @@ const toSign = () => {
         color: #999;
     }
 }
-
-.record-list {
-    margin-top: 0.3rem;
-}
-
 .record-card-item {
     background: #fff;
-    border-radius: 0.2rem;
+    border-radius: 8px;
     padding: 0.3rem;
-    margin-bottom: 0.3rem;
+    margin: 10px;
+    margin-top: 20px;
+    box-shadow: 0 0px 8px #e5e5e5;
 }
 
 .record-header {
     margin-bottom: 0.3rem;
 
     .record-date {
-        font-size: 0.32rem;
+        font-size: 14px;
         color: #999;
         margin-bottom: 0.15rem;
     }
 
     .record-company {
-        font-size: 0.38rem;
-        color: #333;
-        font-weight: 500;
-        margin-bottom: 0.15rem;
+        font-size: 16px;
+        color: #000;
+        font-weight: 600;
+        padding: 10px 0px 10px 20px;
+        letter-spacing: 0.05rem;
     }
 
     .record-count {
-        font-size: 0.32rem;
-        color: #666;
+        font-size: 14px;
+        color: #393939dd;
+        padding-left: 20px;
+        letter-spacing: 0.02rem;
     }
 }
 
 .record-timeline {
     position: relative;
-    padding-left: 0.4rem;
-    margin-top: 0.2rem;
+    margin-left: 28px;
+    margin-top: 26px;
 }
 
-.record-timeline::before {
+.timeline-item.has-line::before {
     content: '';
     position: absolute;
-    left: 0.08rem;
-    top: 0;
+    left: 3px;
+    top: 20px;
     bottom: 0;
-    width: 1px;
+    width: 2px;
+    height: 48px;
     background: #e5e5e5;
 }
 
@@ -480,14 +492,15 @@ const toSign = () => {
     position: relative;
 
     .timeline-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: 10px;
+        height: 10px;
         border-radius: 50%;
         background: #1367fe;
         margin-right: 0.2rem;
         flex-shrink: 0;
         position: relative;
         z-index: 1;
+        top: 4px;
     }
 
     .timeline-content {
@@ -495,18 +508,19 @@ const toSign = () => {
         min-width: 0;
 
         .timeline-time {
-            font-size: 0.32rem;
-            color: #333;
+            font-size: 16px;
+            color: #ccc;
             font-weight: 400;
-            line-height: 1.4;
+           
         }
 
         .timeline-unit {
-            font-size: 0.28rem;
+            font-size: 14px;
             color: #999;
-            margin-top: 0.04rem;
-            padding-left: 0.4rem;
-            line-height: 1.4;
+            padding:10px 0px;
+            .unit-label{
+                color: #000;
+            }
         }
     }
 }
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/scanEntQRCode.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/scanEntQRCode.vue
index 919768f9..24aea649 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/scanEntQRCode.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/scanEntQRCode.vue
@@ -46,7 +46,6 @@
             v-model:show="showSearchModal"
             position="bottom"
             :style="{ height: '80%' }"
-            round
             closeable
             close-icon="cross"
             :close-on-click-overlay="false"
@@ -80,7 +79,6 @@
                                 type="text"
                                 class="search-input"
                                 placeholder="请输入企业名称/统一信用代码"
-                                @keyup.enter="handleSearch"
                             />
                             <van-icon
                                 v-if="searchKeyword"
@@ -369,6 +367,7 @@ const clearSearch = () => {
     enterpriseList.value = [];
     finished.value = false;
     error.value = false;
+     loadEnterprises();
 };
 
 const loadEnterprises = () => {
@@ -495,7 +494,7 @@ const selectEnterprise = (item) => {
 
 const toSign = () => {
     router.push({
-        path: '/enforcement/register',
+        path: '/enforcement/enforcementRegister',
         query: {
             reason: '补录',
             checkCss: 9,
@@ -651,14 +650,14 @@ onBeforeUnmount(() => {
 :deep(.van-popup__close-icon--top-right) {
     top: 0.3rem;
     right: 0.3rem;
-    color: #999;
+    color: #000;
     font-size: 0.5rem;
     z-index: 10;
 }
 
 .section-label {
     font-size: 0.35rem;
-    color: #333;
+    color: #000;
     margin-bottom: 0.25rem;
     font-weight: 500;
 }
@@ -755,7 +754,7 @@ onBeforeUnmount(() => {
 
 .enterprise-item {
     display: flex;
-    align-items: center;
+    // align-items: center;
     padding: 0.3rem 0;
     border-bottom: 1px solid #f5f5f5;
     cursor: pointer;
@@ -785,8 +784,9 @@ onBeforeUnmount(() => {
 .item-name {
     flex: 1;
     font-size: 0.35rem;
-    color: #333;
+    color: #000;
     line-height: 1.4;
+    margin-top: 5px;
 }
 
 .loading-more {