fix: 处理表单双向绑定失效问题

This commit is contained in:
ZhuRui
2026-08-06 11:04:20 +08:00
parent eb5299735a
commit 92a6a06bbc
8 changed files with 138 additions and 10 deletions
+16 -2
View File
@@ -66,7 +66,14 @@ export default defineComponent({
> >
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark> <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
<Form.Item label="新密码" name="newPassword" rules={newPasswordRules}> <Form.Item label="新密码" name="newPassword" rules={newPasswordRules}>
<Input.Password placeholder="至少8位,含字母+数字" allowClear /> <Input.Password
value={formData.newPassword}
onUpdate:value={(val: any) => {
formData.newPassword = val;
}}
placeholder="至少8位,含字母+数字"
allowClear
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@@ -74,7 +81,14 @@ export default defineComponent({
name="confirmPassword" name="confirmPassword"
rules={confirmNewPasswordRules(() => formData.newPassword)} rules={confirmNewPasswordRules(() => formData.newPassword)}
> >
<Input.Password placeholder="再次输入新密码" allowClear /> <Input.Password
value={formData.confirmPassword}
onUpdate:value={(val: any) => {
formData.confirmPassword = val;
}}
placeholder="再次输入新密码"
allowClear
/>
</Form.Item> </Form.Item>
<div class={styles.tip}>{TIPS_TEXT}</div> <div class={styles.tip}>{TIPS_TEXT}</div>
@@ -481,7 +481,15 @@ export default defineComponent({
> >
{/* ===== Banner 标题 ===== */} {/* ===== Banner 标题 ===== */}
<Form.Item label="Banner标题" name="title" rules={titleRules}> <Form.Item label="Banner标题" name="title" rules={titleRules}>
<Input placeholder="请输入标题" maxlength={TITLE_MAX} allowClear /> <Input
value={formData.title}
onUpdate:value={(val: any) => {
formData.title = val;
}}
placeholder="请输入标题"
maxlength={TITLE_MAX}
allowClear
/>
</Form.Item> </Form.Item>
{/* ===== 上传图片(必填,带裁剪) ===== */} {/* ===== 上传图片(必填,带裁剪) ===== */}
@@ -537,13 +545,24 @@ export default defineComponent({
{/* ===== 跳转类型 ===== */} {/* ===== 跳转类型 ===== */}
<Form.Item label="跳转类型" name="type" rules={typeRules}> <Form.Item label="跳转类型" name="type" rules={typeRules}>
<Select options={JUMP_TYPE_OPTIONS as any} placeholder="请选择" /> <Select
value={formData.type}
onUpdate:value={(val: any) => {
formData.type = val;
}}
options={JUMP_TYPE_OPTIONS as any}
placeholder="请选择"
/>
</Form.Item> </Form.Item>
{/* ===== 联动字段:赛事详情页 → 模糊搜索关联赛事 ===== */} {/* ===== 联动字段:赛事详情页 → 模糊搜索关联赛事 ===== */}
{formData.type === '1' && ( {formData.type === '1' && (
<Form.Item label="关联赛事" name="relatedEventId"> <Form.Item label="关联赛事" name="relatedEventId">
<Select <Select
value={formData.relatedEventId}
onUpdate:value={(val: any) => {
formData.relatedEventId = val;
}}
showSearch showSearch
filterOption={false} filterOption={false}
allowClear={!eventSearchLoading.value} allowClear={!eventSearchLoading.value}
@@ -563,14 +582,30 @@ export default defineComponent({
{/* ===== 联动字段:自定义链接 ===== */} {/* ===== 联动字段:自定义链接 ===== */}
{formData.type === '2' && ( {formData.type === '2' && (
<Form.Item label="跳转地址" name="linkUrl" rules={linkUrlRules}> <Form.Item label="跳转地址" name="linkUrl" rules={linkUrlRules}>
<Input placeholder="https://xxx" maxlength={URL_MAX} allowClear /> <Input
value={formData.linkUrl}
onUpdate:value={(val: any) => {
formData.linkUrl = val;
}}
placeholder="https://xxx"
maxlength={URL_MAX}
allowClear
/>
</Form.Item> </Form.Item>
)} )}
{/* ===== 联动字段:小程序页面 ===== */} {/* ===== 联动字段:小程序页面 ===== */}
{formData.type === '3' && ( {formData.type === '3' && (
<Form.Item label="小程序路径" name="linkUrl" rules={miniProgramPathRules}> <Form.Item label="小程序路径" name="linkUrl" rules={miniProgramPathRules}>
<Input placeholder="/pages/index/index" maxlength={PATH_MAX} allowClear /> <Input
value={formData.linkUrl}
onUpdate:value={(val: any) => {
formData.linkUrl = val;
}}
placeholder="/pages/index/index"
maxlength={PATH_MAX}
allowClear
/>
</Form.Item> </Form.Item>
)} )}
@@ -649,6 +684,10 @@ export default defineComponent({
{/* ===== 排序 ===== */} {/* ===== 排序 ===== */}
<Form.Item label="排序" name="sort" rules={sortRules}> <Form.Item label="排序" name="sort" rules={sortRules}>
<InputNumber <InputNumber
value={formData.sort}
onUpdate:value={(val: any) => {
formData.sort = val;
}}
placeholder="数字越小越靠前" placeholder="数字越小越靠前"
min={1} min={1}
max={999} max={999}
+8
View File
@@ -38,6 +38,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="用户昵称" name="nickname"> <Form.Item label="用户昵称" name="nickname">
<Input <Input
value={filterForm.nickname}
onUpdate:value={(val: any) => {
filterForm.nickname = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '180px' }} style={{ width: '180px' }}
allowClear allowClear
@@ -46,6 +50,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="手机号" name="phone"> <Form.Item label="手机号" name="phone">
<Input <Input
value={filterForm.phone}
onUpdate:value={(val: any) => {
filterForm.phone = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '180px' }} style={{ width: '180px' }}
allowClear allowClear
+8
View File
@@ -132,6 +132,10 @@ export default defineComponent({
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}> <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="nickname"> <Form.Item label="用户昵称" name="nickname">
<Input <Input
value={filterForm.nickname}
onUpdate:value={(val: any) => {
filterForm.nickname = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '180px' }} style={{ width: '180px' }}
allowClear allowClear
@@ -140,6 +144,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="手机号" name="phone"> <Form.Item label="手机号" name="phone">
<Input <Input
value={filterForm.phone}
onUpdate:value={(val: any) => {
filterForm.phone = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '180px' }} style={{ width: '180px' }}
allowClear allowClear
+12
View File
@@ -94,6 +94,10 @@ export default defineComponent({
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}> <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="nickname"> <Form.Item label="申请人昵称" name="nickname">
<Input <Input
value={filterForm.nickname}
onUpdate:value={(val: any) => {
filterForm.nickname = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '160px' }} style={{ width: '160px' }}
allowClear allowClear
@@ -102,6 +106,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="手机号" name="phone"> <Form.Item label="手机号" name="phone">
<Input <Input
value={filterForm.phone}
onUpdate:value={(val: any) => {
filterForm.phone = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '160px' }} style={{ width: '160px' }}
allowClear allowClear
@@ -110,6 +118,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="真实姓名" name="realName"> <Form.Item label="真实姓名" name="realName">
<Input <Input
value={filterForm.realName}
onUpdate:value={(val: any) => {
filterForm.realName = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '160px' }} style={{ width: '160px' }}
allowClear allowClear
+4
View File
@@ -60,6 +60,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="操作人" name="searchOperator"> <Form.Item label="操作人" name="searchOperator">
<Input <Input
value={filterForm.searchOperator}
onUpdate:value={(val: any) => {
filterForm.searchOperator = val;
}}
placeholder="请输入" placeholder="请输入"
style={{ width: '160px' }} style={{ width: '160px' }}
allowClear allowClear
@@ -141,7 +141,15 @@ export default defineComponent({
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark> <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
{/* 角色名称 */} {/* 角色名称 */}
<Form.Item label="角色名称" name="roleName" rules={roleNameRules}> <Form.Item label="角色名称" name="roleName" rules={roleNameRules}>
<Input placeholder="请输入" maxlength={20} allowClear /> <Input
value={formData.roleName}
onUpdate:value={(val: any) => {
formData.roleName = val;
}}
placeholder="请输入"
maxlength={20}
allowClear
/>
</Form.Item> </Form.Item>
{/* 菜单权限配置 */} {/* 菜单权限配置 */}
@@ -234,10 +234,26 @@ export default defineComponent({
{/* 姓名 / 手机号:同一行 */} {/* 姓名 / 手机号:同一行 */}
<div class={styles.row}> <div class={styles.row}>
<Form.Item label="姓名" name="realName" rules={realNameRules} class={styles.col}> <Form.Item label="姓名" name="realName" rules={realNameRules} class={styles.col}>
<Input placeholder="真实姓名" maxlength={8} allowClear /> <Input
value={formData.realName}
onUpdate:value={(val: any) => {
formData.realName = val;
}}
placeholder="真实姓名"
maxlength={8}
allowClear
/>
</Form.Item> </Form.Item>
<Form.Item label="手机号" name="phone" rules={phoneRules} class={styles.col}> <Form.Item label="手机号" name="phone" rules={phoneRules} class={styles.col}>
<Input placeholder="11位手机号" maxlength={11} allowClear /> <Input
value={formData.phone}
onUpdate:value={(val: any) => {
formData.phone = val;
}}
placeholder="11位手机号"
maxlength={11}
allowClear
/>
</Form.Item> </Form.Item>
</div> </div>
@@ -258,6 +274,10 @@ export default defineComponent({
</Form.Item> </Form.Item>
<Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}> <Form.Item label="角色" name="roleId" rules={roleRules} class={styles.col}>
<Select <Select
value={formData.roleId}
onUpdate:value={(val: any) => {
formData.roleId = val;
}}
showSearch showSearch
filterOption={false} filterOption={false}
allowClear={!roleSearchLoading.value} allowClear={!roleSearchLoading.value}
@@ -284,6 +304,10 @@ export default defineComponent({
class={styles.col} class={styles.col}
> >
<Input.Password <Input.Password
value={formData.password}
onUpdate:value={(val: any) => {
formData.password = val;
}}
placeholder={isEdit ? '请输入新密码' : '至少8位,含字母+数字'} placeholder={isEdit ? '请输入新密码' : '至少8位,含字母+数字'}
allowClear allowClear
/> />
@@ -294,12 +318,23 @@ export default defineComponent({
class={styles.col} class={styles.col}
rules={confirmPasswordRules(() => formData.password)} rules={confirmPasswordRules(() => formData.password)}
> >
<Input.Password placeholder="再次输入密码" allowClear /> <Input.Password
value={formData.confirmPassword}
onUpdate:value={(val: any) => {
formData.confirmPassword = val;
}}
placeholder="再次输入密码"
allowClear
/>
</Form.Item> </Form.Item>
</div> </div>
{/* 角色:单独一行 */} {/* 角色:单独一行 */}
<Form.Item label="角色" name="roleId" rules={roleRules}> <Form.Item label="角色" name="roleId" rules={roleRules}>
<Select <Select
value={formData.roleId}
onUpdate:value={(val: any) => {
formData.roleId = val;
}}
showSearch showSearch
filterOption={false} filterOption={false}
allowClear={!roleSearchLoading.value} allowClear={!roleSearchLoading.value}