<template>
<div class="layout-container">
<div class="layout-content">
<el-row class="ml10" v-show="showSearch">
<el-
form :inline="true" :model="state.query
Form" @keyup.enter="getDataList" ref="queryRef">
<el-
form-item label="公告标题" prop="titleKeyword">
<el-input v-model="state.query
Form.titleKeyword" placeholder="请输入" />
</el-
form-item>
<el-
form-item>
<el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }} </el-button>
<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
</el-
form-item>
</el-
form>
</el-row>
<el-row class="action-bar">
<el-button type="primary" @click="
formDialogRef.openDialog('create')"> 添加公告 </el-button>
<div class="right-toolbar-wrap">
<right-toolbar v-model:showSearch="showSearch"></right-toolbar>
</div>
</el-row>
<div class="table-wrap">
<el-table
:data="state.dataList"
stripe
@sort-change="sortChangeHandle"
v-loading="state.loading"
border
style="width: 100%"
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column label="ID" prop="id" width="60" />
<el-table-column label="公告标题" prop="title" show-overflow-tooltip />
<el-table-column label="公告内容" prop="content" show-overflow-tooltip />
<el-table-column label="关联内容" prop="bizDesc" show-overflow-tooltip />
<el-table-column label="发送用户" prop="sendUserDesc" show-overflow-tooltip />
<el-table-column label="发送状态" prop="sendStatusDesc" show-overflow-tooltip />
<el-table-column label="创建人" prop="createUserName" show-overflow-tooltip />
<el-table-column label="创建时间" prop="createAt" show-overflow-tooltip />
<el-table-column :label="$t('common.action')" fixed="right" min-width="180">
<template #default="scope">
<!-- 编辑按钮：传递整行数据+打印日志，确认row有noticeId -->
<el-button
icon="edit"
size="small"
text
type="primary"
@click="() => {
console.log('列表传递的row（含noticeId）：', scope.row);
console.log('row中的noticeId值：', scope.row.noticeId); // 直接打印noticeId
formDialogRef.openDialog('edit', scope.row)
}"
> 编辑 </el-button>
<!-- 撤回/取消/发送记录：均用noticeId（大写I） -->
<el-button icon="Delete" size="small" text type="primary" @click="handleWithdraw(scope.row.noticeId)" v-if="scope.row.sendStatus == 1 || scope.row.sendStatus == 2" > 撤回 </el-button>
<el-button icon="Tickets" size="small" text type="primary" @click="openSendRecordDialog(scope.row.noticeId)" v-if="scope.row.sendStatus == 2"> 发送记录 </el-button>
<el-button icon="Delete" size="small" text type="primary" @click="handleCancel(scope.row.noticeId)" v-if="scope.row.sendStatus == 0" > 取消 </el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrap">
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
</div>
<
FormDialog ref="
formDialogRef" @refresh="getDataList(false)" />
</div>
</div>
<!-- 发送记录弹框：字段名改为noticeId -->
<el-dialog title="发送记录" v-model="sendRecordDialog.visible" width="800px" :close-on-click-modal="false" draggable>
<el-table :data="sendRecordDialog.dataList" border stripe v-loading="sendRecordDialog.loading" style="width: 100%; margin-bottom: 16px">
<el-table-column label="用户" min-width="350" align="center">
<template #default="scope">
<div class="user-info">
<el-avatar
:src="scope.row.userAvatar || ''"
icon="User"
class="user-avatar"
/>
<div class="user-meta">
<div class="user-name">
<div>{{ scope.row.name || '未知用户' }}</div>
<div class="user-nickname">{{ scope.row.nickname || '无昵称' }}</div>
<div class="user-mobile">{{ scope.row.mobile || '-' }}</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="发送时间" prop="sendTime" show-overflow-tooltip min-width="180" align="center" />
</el-table>
<pagination
@current-change="handleSendRecordCurrentChange"
@size-change="handleSendRecordSizeChange"
v-bind="sendRecordDialog.pagination"
style="text-align: right"
/>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicTableProps, useTable } from '@/hooks/table';
import { messagePageList } from '@/api/admin/message';
import { getSendRecordList, withdrawNotice, cancelNotice } from '@/api/admin/notice';
import { ElMessageBox } from 'element-plus';
import { useMessage } from '@/hooks/message';
const
FormDialog = defineAsyncComponent(() => import('./components/in
formation.vue'));
const RightToolbar = defineAsyncComponent(() => import('@/components/rightToolbar/index.vue'));
const Pagination = defineAsyncComponent(() => import('@/components/pagination/index.vue'));
const bizTypeMap = {
1: '朋友圈',
3: '课程',
6: '知识库',
10: '课程',
20: '活动',
30: '公告',
};
const queryRef = ref();
const showSearch = ref(true);
const
formDialogRef = ref();
const message = useMessage();
const state: BasicTableProps = reactive<BasicTableProps>({
query
Form: { titleKeyword: '', createTime: '' },
pageList: messagePageList,
descs: ['createAt'],
loading: false,
dataList: [],
pagination: { pageNum: 1, pageSize: 10, total: 0 },
});
// 发送记录弹框：字段名改为noticeId（大写I）
const sendRecordDialog = reactive({
visible: false,
loading: false,
noticeId: '', // 修复：统一为noticeId
dataList: [] as Array<{
userId: string;
name: string;
nickname: string;
mobile: string;
userAvatar: string;
status: number;
sendTime: string;
}>,
pagination: { pageNum: 1, pageSize: 10, total: 0 },
});
const { getDataList, currentChangeHandle, sortChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const resetQuery = () => {
queryRef.value?.resetFields();
state.query
Form = { titleKeyword: '', createTime: '' };
getDataList();
};
// 发送记录：
const getSendRecordListData = async (pageNum: number = 1, pageSize: number = 10) => {
if (!sendRecordDialog.noticeId) return;
sendRecordDialog.loading = true;
try {
const res = await getSendRecordList({ pageNum, pageSize, noticeId: sendRecordDialog.noticeId });
sendRecordDialog.dataList = res.data.list || [];
sendRecordDialog.pagination = { pageNum, pageSize, total: res.data.total || 0 };
} catch (err) {
message.error('获取发送记录失败，请重试');
} finally {
sendRecordDialog.loading = false;
}
};
const openSendRecordDialog = (noticeId: string) => {
// if (!noticeId) {
// message.warning('公告ID不存在');
// return;
// }
sendRecordDialog.noticeId = noticeId;
sendRecordDialog.visible = true;
sendRecordDialog.pagination.pageNum = 1;
getSendRecordListData(1, sendRecordDialog.pagination.pageSize);
};
const handleSendRecordCurrentChange = (pageNum: number) => {
getSendRecordListData(pageNum, sendRecordDialog.pagination.pageSize);
};
const handleSendRecordSizeChange = (pageSize: number) => {
sendRecordDialog.pagination.pageSize = pageSize;
getSendRecordListData(1, pageSize);
};
// 撤回/取消：用noticeId传参
const handleWithdraw = async (noticeId: string) => {
if (!noticeId) {
message.warning('公告ID不存在，无法撤回');
return;
}
try {
await ElMessageBox.confirm('此操作可撤回公告记录，是否确认撤回？', '确认撤回', {
type: 'warning',
confirmButtonText: '确认',
cancelButtonText: '取消',
});
const res = await withdrawNotice(noticeId);
message.success(res.data?.message || '公告撤回成功');
getDataList();
} catch (err: any) {
if (err === 'cancel') message.info('已取消撤回操作');
else message.error(err?.data?.message || '公告撤回失败，请重试');
}
};
const handleCancel = async (noticeId: string) => {
if (!noticeId) {
message.warning('公告ID不存在，无法取消');
return;
}
try {
await ElMessageBox.confirm('此操作可取消公告内容，是否确认取消？', '确认取消公告', {
type: 'warning',
confirmButtonText: '确认',
cancelButtonText: '取消',
});
const res = await cancelNotice(noticeId);
message.success(res.data?.message || '公告取消成功');
getDataList();
} catch (err: any) {
if (err == 'cancel') message.info('已取消取消操作');
else message.error(err?.data?.message || '公告取消失败，请重试');
}
};
</script>
<style lang="scss" scoped>
.layout-container {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
padding: 16px;
}
.layout-content { width: 100%; }
.action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
}
.right-toolbar-wrap { margin-left: auto; }
.table-wrap {
width: 100%;
overflow-x: auto;
}
.pagination-wrap {
width: 100%;
margin-top: 16px;
text-align: right;
}
.user-info {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.user-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 50%;
margin-right: 12px;
object-fit: cover;
border: 1px solid #f0f2f5;
background-color: #f7f8fa;
}
::v-deep(.el-avatar img) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.user-meta {
display: flex;
flex-direction: column;
align-items: center;
}
.user-name {
font-size: 14px;
color: #1d2129;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.user-nickname { font-size: 14px; color: #4e5969; }
.user-mobile { font-size: 14px; color: #86909c; }
.user-id { font-size: 12px; color: #86909c; margin-top: 2px; }
::v-deep(.el-dialog__footer) { padding-top: 0; }
</style> 列表页
和<template>
<el-dialog center width="600px" :title="title" v-model="visible" :close-on-click-modal="false" draggable :lock-scroll="false">
<div class="signerInfo">
<div ref="signerInfoRight" class="signerInfoRight">
<el-
form ref="data
FormRef" :model="
form" :
disabled="
readonly" label-position="left" label-width="80px">
<!-- 公告标题（必填） -->
<el-
form-item label="公告标题" prop="title" class="required-item">
<template #label>
<span class="required-mark">*</span>
<span>公告标题</span>
</template>
<el-input v-model="
form.title" placeholder="请输入公告标题（限20字）" maxlength="20" show-word-limit />
</el-
form-item>
<!-- 公告内容（可选） -->
<el-
form-item label="公告内容" prop="content">
<el-input v-model="
form.content" type="textarea" placeholder="请输入公告内容（限200字）" maxlength="200" show-word-limit rows="4" />
</el-
form-item>
<!-- 关联内容（必填） -->
<el-
form-item label="关联内容" prop="bizType" class="no-label required-item">
<template #label>
<span class="required-mark">*</span>
<span>关联内容</span>
</template>
<el-select v-model="
form.bizType" placeholder="请选择关联类型" @change="handleBizTypeChange" style="width: 220px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in bizTypeOptions" />
</el-select>
<!-- 朋友圈下拉（bizType=1） -->
<el-select style="width: 220px; margin-left: 7px" v-model="
form.bizId" placeholder="请选择朋友圈关联内容" v-if="
form.bizType == 1">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in relatedList" />
</el-select>
<!-- 课程下拉（bizType=3） -->
<el-select style="width: 220px; margin-left: 7px" v-model="
form.bizId" placeholder="请选择课程关联内容" v-if="
form.bizType == 3">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in relatedList" />
</el-select>
<!-- 知识库下拉（bizType=6） -->
<el-select style="width: 220px; margin-left: 7px" v-model="
form.bizId" placeholder="请选择知识库关联内容" v-if="
form.bizType == 6">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in relatedList" />
</el-select>
</el-
form-item>
<!-- 发送用户（必填） -->
<div style="display:flex">
<el-
form-item label="发送用户" prop="userType" class="no-label required-item">
<template #label>
<span class="required-mark">*</span>
<span>发送用户</span>
</template>
<el-select v-model="
form.userType" placeholder="全部" @change="handleUserTypeChange" style="width: 220px">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in userTypeOptions" />
</el-select>
</el-
form-item>
<el-
form-item v-if="
form.userType == 3" prop="groupTeamList">
<el-select
v-model="
form.groupTeamList"
filterable
multiple
:clearable="true"
placeholder="请选择团队"
style="width: 220px"
>
<el-option :key="item.account" :label="item.name" :value="item.account + ''" v-for="item in groupTeamList" />
</el-select>
</el-
form-item>
<el-
form-item v-if="
form.userType == 2" prop="groupRoleList">
<el-select
v-model="
form.groupRoleList"
filterable
multiple
:clearable="true"
placeholder="请选择角色"
style="width: 220px"
>
<el-option :key="item.account" :label="item.name" :value="item.account + ''" v-for="item in groupRoleList" />
</el-select>
</el-
form-item>
<el-
form-item v-if="
form.userType == 4" label="指定用户" prop="groupUsrList">
<div>
<el-tag
style="margin-right: 4px; margin-bottom: 4px"
v-for="tag in
form.groupUsrList"
:key="tag.userId"
closable
@close="handleRemoveUse(tag)"
>
{{ tag.nickName || tag.name }}
</el-tag>
</div>
</el-
form-item>
</div>
<div v-if="
form.userType == 4" style="width: 27%; margin-left: 115px;margin-bottom:13px">
<div class="">
<CustomerDragUpload
class="fileItemUpload"
action="/admin/v1/tenant/user/analysis"
:limit="1"
@singleSuccess="(val) => handleUploadSuccess('fileItemUpload', val)"
>
上传用户名单
</CustomerDragUpload>
</div>
<div class="downTemplate" @click="fileTemplate('user')">
下载用户名单模版
</div>
</div>
<!-- 发送时间（可选） -->
<el-
form-item label="发送时间" prop="sendTime">
<el-date-picker
v-model="
form.sendTime"
type="datetime"
placeholder="不填写默认立即发送"
value-
format="yyyy-MM-dd HH:mm:ss"
style="width: 220px"
/>
</el-
form-item>
</el-
form>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" :loading="submitting" @click="preSubmit" :
disabled="loading">
提交 </el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts" name="Notice
FormDialog">
import { useMessage } from '@/hooks/message';
import { useI18n } from 'vue-i18n';
import { use
FormModal } from '@/hooks/use
FormModal';
import { ref } from 'vue';
import { getFriendList, getCourseList, getKnowledgeList, saveNotice } from '@/api/admin/notice';
import { pageList as teamConfigPageList} from '@/api/admin/teamConfig';
import { page
FormList} from '@/api/admin/roleConfig';
import { downExcelTemp } from '@/api/admin/tool'
import CustomerDragUpload from '@/components/customerDragUpload/index.vue';
const emit = defineEmits(['refresh']);
const { t } = useI18n();
const data
FormRef = ref();
const message = useMessage();
// 响应式数据
const groupTeamList = ref<{ account: string; name: string }[]>([]);
const groupRoleList = ref<{ account: string; name: string }[]>([]);
const relatedList = ref<any[]>([]);
interface Notice
Form {
id?: number;
noticeId?: number; // 统一为 noticeId（大写I），
和列表、接口一致
title: string;
content: string;
bizType: number | '';
bizId: number | '';
userType: number | '';
groupTeamList: string[];
groupRoleList: string[];
groupUsrList: any[];
audienceIds: number[];
sendTime?: string;
}
// 关联类型选项
const bizTypeOptions = ref([
{ label: '朋友圈', value: 1 },
{ label: '课程', value: 3 },
{ label: '知识库', value: 6 },
]);
// 发送用户类型选项
const userTypeOptions = ref([
{ label: '全员', value: 1 },
{ label: '指定角色', value: 2 },
{ label: '指定团队', value: 3 },
{ label: '指定用户', value: 4 },
]);
/**
* 关联类型变更：加载对应下拉列表
*/
const handleBizTypeChange = async () => {
form.value.bizId = '';
relatedList.value = [];
try {
if (
form.value.bizType === 1) {
const res = await getFriendList({ pageNum: 1, pageSize: 100, bizType: 1 });
relatedList.value = res.data.list.map((item: any) => ({
id: item.articleId,
name: item.parentCategoryName ? `${item.parentCategoryName} - ${item.categoryName}` : item.categoryName || '无分类'
}));
} else if (
form.value.bizType === 3) {
const res = await getCourseList({ pageNum: 1, pageSize: 100, bizType: 3 });
relatedList.value = res.data.list.map((item: any) => ({
id: item.id,
name: item.title || '无课程名称'
}));
} else if (
form.value.bizType === 6) {
const res = await getKnowledgeList({ pageNum: 1, pageSize: 100, bizType: 6 });
relatedList.value = res.data.list.map((item: any) => ({
id: item.articleId,
name: item.title || '无知识库标题'
}));
}
} catch (err) {
const typeName =
form.value.bizType === 1 ? '朋友圈' :
form.value.bizType === 3 ? '课程' : '知识库';
message.error(`获取${typeName}列表失败，请重试`);
}
};
/**
* 发送用户类型变更：重置选择项
*/
const handleUserTypeChange = () => {
form.value.groupTeamList = [];
form.value.groupRoleList = [];
form.value.groupUsrList = [];
form.value.audienceIds = [];
};
/**
* 初始化团队/角色列表
*/
const init = async () => {
teamConfigPageList({ pageNum: 1, pageSize: 1000 }).then(res => {
groupTeamList.value = res.data.list.map(ele => ({
account: ele.teamId,
name: ele.teamName
}));
});
page
FormList({ pageNum: 1, pageSize: 1000 }).then(res => {
groupRoleList.value = res.data.list.map(ele => ({
account: ele.roleId,
name: ele.roleName
}));
});
};
/**
* 编辑回显：强制给
form.noticeId 赋值（核心修复）
*/
const fetchById = async (row: any): Promise<Notice
Form> => {
console.log('列表传递的row（编辑回显）：', row);
console.log('row.noticeId（大写I）的值：', row.noticeId); // 验证row是否有noticeId
const detail = row;
let groupTeamList: string[] = [];
let groupRoleList: string[] = [];
let groupUsrList: any[] = [];
const sendUserDesc = detail.sendUserDesc || '';
// 关联内容回显
if (detail.bizType) {
form.value.bizType = detail.bizType;
await handleBizTypeChange();
form.value.bizId = detail.bizId;
}
// 发送用户回显
if (detail.userType === 2) {
groupRoleList = sendUserDesc.split(',').filter(id => id.trim());
} else if (detail.userType === 3) {
groupTeamList = sendUserDesc.split(',').filter(id => id.trim());
} else if (detail.userType === 4) {
groupUsrList = detail.userList || [];
}
// 【强制赋值】确保 noticeId 被赋值到
表单
const noticeIdVal = detail.noticeId; // 从row读取noticeId（大写I）
console.log('赋值给
form.noticeId的值：', noticeIdVal); // 验证赋值结果
return {
id: detail.id,
noticeId: noticeIdVal, // 明确赋值，避免遗漏
title: detail.title || '',
content: detail.content || '',
bizType: detail.bizType || '',
bizId: detail.bizId || '',
userType: detail.userType || '',
groupTeamList,
groupRoleList,
groupUsrList,
audienceIds: detail.audienceIds || [],
sendTime: detail.sendTime || ''
} as Notice
Form;
};
/**
* 新增公告：不传递 noticeId
*/
const createApi = async (data: Notice
Form) => {
const submitData = {
title: data.title,
content: data.content || '',
bizType: Number(data.bizType),
bizId: Number(data.bizId),
userType: Number(data.userType),
audienceIds: data.audienceIds,
sendTime: data.sendTime || ''
};
console.log('新增
提交数据（无noticeId）：', submitData);
const res = await saveNotice(submitData);
return res.data;
};
/**
* 编辑公告：强制携带 noticeId（大写I）
*/
const updateApi = async (data: Notice
Form) => {
// 【双重保险】如果data.noticeId为空，直接从
form取（避免fetchById赋值失败）
const finalNoticeId = data.noticeId ||
form.value.noticeId;
if (!finalNoticeId) {
message.error('noticeId缺失，无法
提交编辑');
throw new Error('noticeId is required for update');
}
const submitData = {
id: data.id,
noticeId: finalNoticeId, // 强制携带，确保传参
title: data.title,
content: data.content || '',
bizType: Number(data.bizType),
bizId: Number(data.bizId),
userType: Number(data.userType),
audienceIds: data.audienceIds,
sendTime: data.sendTime || ''
};
// 【关键日志】打印
提交数据，让你直观看到noticeId是否存在
console.log('编辑
提交数据（含noticeId）：', submitData);
const res = await saveNotice(submitData);
return res.data;
};
//
表单模态框初始化：确保init
Form包含noticeId
const { visible, title,
form,
readonly, loading, submitting, openDialog, close, submit } = use
FormModal<Notice
Form, any>({
init
Form: () => ({
id: undefined,
noticeId: undefined, // 必须包含，保持响应式
title: '',
content: '',
bizType: '',
bizId: '',
userType: '',
groupTeamList: [],
groupRoleList: [],
groupUsrList: [],
audienceIds: [],
sendTime: ''
}),
fetchById,
create: createApi,
update: updateApi,
titles: {
create: t('添加通告'),
edit: t('编辑通告'),
},
afterSubmit: () => {
message.success(t('common.optSuccessText'));
emit('refresh');
},
beforeOpen: init
});
/**
* 下载用户模板
*/
const fileTemplate = (type: string) => {
downExcelTemp('/admin/v1/system/template/getTemplate', { key: type });
};
/**
* 上传用户名单成功回调
*/
const handleUploadSuccess = (key: string, data: any) => {
if (key === 'fileItemUpload') {
form.value.groupUsrList = data;
}
};
/**
* 移除指定用户
*/
const handleRemoveUse = (item: any) => {
const findIndex =
form.value.groupUsrList.findIndex((sitem: any) => sitem.userId === item.userId);
if (findIndex > -1) {
form.value.groupUsrList.splice(findIndex, 1);
}
};
/**
*
表单校验
*/
const validate
Form = (): boolean => {
if (!
form.value.title.trim()) {
message.error('请输入公告标题');
return false;
}
if (
form.value.title.length > 20) {
message.error('公告标题不能超过20字');
return false;
}
if (!
form.value.bizType) {
message.error('请选择关联类型');
return false;
}
if (!
form.value.bizId || isNaN(Number(
form.value.bizId))) {
const typeName =
form.value.bizType === 1 ? '朋友圈' :
form.value.bizType === 3 ? '课程' : '知识库';
message.error(`请选择有效的${typeName}关联内容`);
return false;
}
if (!
form.value.userType) {
message.error('请选择发送用户类型');
return false;
}
if (
form.value.userType === 2 && !
form.value.groupRoleList.length) {
message.error('请选择指定角色');
return false;
}
if (
form.value.userType === 3 && !
form.value.groupTeamList.length) {
message.error('请选择指定团队');
return false;
}
if (
form.value.userType === 4 && !
form.value.groupUsrList.length) {
message.error('请上传指定用户名单');
return false;
}
// 编辑时校验noticeId（双重保险）
// if (title.value === t('编辑通告') && !
form.value.noticeId) {
// message.error('公告ID缺失，无法编辑');
// return false;
// }
return true;
};
/**
*
提交前预处理
*/
const preSubmit = async () => {
if (!validate
Form()) return;
// 组装受众ID
if (
form.value.userType === 2) {
form.value.audienceIds =
form.value.groupRoleList.map(id => Number(id));
} else if (
form.value.userType === 3) {
form.value.audienceIds =
form.value.groupTeamList.map(id => Number(id));
} else if (
form.value.userType === 4) {
form.value.audienceIds =
form.value.groupUsrList.map(item => item.userId);
} else {
form.value.audienceIds = [];
}
// 转换字段类型
form.value.bizType = Number(
form.value.bizType);
form.value.bizId = Number(
form.value.bizId);
form.value.userType = Number(
form.value.userType);
// 打印
form完整数据，确认noticeId存在
console.log('
提交前
form数据：',
form.value);
submit(
form.value);
};
// 暴露方法给父组件
defineExpose({ openDialog });
</script>
<style scoped lang="scss">
.signerInfoRight { padding: 10px 0; }
.dialog-footer {
display: flex;
justify-content: center;
gap: 10px;
}
.required-mark {
color: #ff4d4f;
margin-right: 4px;
font-size: 14px;
}
.required-item .el-
form-item__label {
display: flex;
align-items: center;
}
.no-label.required-item .el-
form-item__label { padding-right: 12px; }
.downTemplate {
margin-top: 10px;
color: blue;
cursor: pointer;
}
</style> 弹框为什么点编辑的时候没有取到列表的数据返显
本文探讨了HTML表单中disabled和readonly属性的区别，特别是在表单提交时的行为差异。指出disabled属性会导致表单元素的值在提交时不被传递，而readonly则会正常传递值。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
