feat: form组件替换

This commit is contained in:
rd
2025-09-03 16:28:19 +08:00
parent 64a5b41a4e
commit a29580ff1e
42 changed files with 394 additions and 453 deletions

View File

@ -107,7 +107,7 @@
</div>
</div>
<Modal style="width: 500px" v-model:open="editHistoryVisible">
<Modal style="width: 500px" v-model:open="editHistoryVisible" centered>
<template #title> Title</template>
<div></div>
</Modal>

View File

@ -17,8 +17,8 @@
>
<img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" class="mb-8px" />
<span class="text-4 color-#737478">AI营销工具</span>
<a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
<a-form-item field="mobile" hide-label>
<Form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
<FormItem name="mobile">
<a-input
v-model="loginForm.mobile"
placeholder="输入手机号"
@ -28,8 +28,8 @@
@blur="validateField('mobile')"
@input="clearError('mobile')"
/>
</a-form-item>
<a-form-item field="captcha" hide-label>
</FormItem>
<FormItem name="captcha">
<div
class="form-input border border-solid border-#d7d7d9 w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center"
>
@ -52,19 +52,19 @@
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
>
</div>
</a-form-item>
<a-form-item hide-label class="mt-68px mb-16px">
</FormItem>
<FormItem class="mt-68px mb-16px">
<Button
type="primary"
class="w-480 h-48 !text-16px !rounded-8px"
class="w-full h-48 !text-16px !rounded-8px"
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
:disabled="disabledSubmitBtn"
@click="handleSubmit"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</Button>
</a-form-item>
</a-form>
</FormItem>
</Form>
<a-space class="text-12px color-#737478 justify-start items-center">
<Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
<span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
@ -128,7 +128,7 @@
</template>
<script setup lang="ts">
import { Checkbox, Modal, Button } from 'ant-design-vue';
import { Checkbox, Modal, Button, Form, FormItem } from 'ant-design-vue';
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { joinEnterpriseByInviteCode } from '@/api/all';
@ -165,15 +165,14 @@ const formRules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value: string, callback: (error?: string) => void) => {
validator: (_rule: any, value: string) => {
if (!value) {
return Promise.reject('请填写手机号');
}
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
return Promise.reject('手机号格式不正确');
} else {
callback();
return Promise.resolve();
}
},
trigger: ['blur', 'change'],
@ -182,15 +181,14 @@ const formRules = {
captcha: [
{
required: true,
message: '请填写验证码',
trigger: ['blur', 'change'],
},
{
validator: (value: string, callback: (error?: string) => void) => {
validator: (_rule: any, value: string) => {
if (!value) {
return Promise.reject('请填写验证码');
}
if (!/^\d{6}$/.test(value)) {
callback('验证码必须是6位数字');
return Promise.reject('验证码必须是6位数字');
} else {
callback();
return Promise.resolve();
}
},
trigger: ['blur', 'change'],
@ -222,7 +220,7 @@ const selectAccount = (account: any, index: any) => {
};
const validateField = (field: string) => {
formRef.value.validateField(field);
formRef.value.validateFields(field);
};
const clearError = (field: string) => {
@ -245,11 +243,9 @@ const getCode = async () => {
// 先重置验证状态
formRef.value.clearValidate('mobile');
const result = await formRef.value.validateField('mobile');
// 只有当验证通过时才会显示滑块验证
if (result === true || result === undefined) {
formRef.value.validateFields('mobile').then(() => {
isVerificationVisible.value = true;
}
});
};
// 验证码验证通过后
@ -258,8 +254,10 @@ const handleVerificationSubmit = async () => {
startCountdown();
try {
await fetchLoginCaptCha({ mobile: loginForm.mobile });
AMessage.success('验证码发送成功');
const { code, message } = await fetchLoginCaptCha({ mobile: loginForm.mobile });
if (code === 200) {
AMessage.success(message);
}
} catch (error) {
// 重置倒计时
countdown.value = 0;

View File

@ -14,29 +14,37 @@
<Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
</template>
</a-table>
<Modal v-model:open="infoVisible" width="480px" centered title="修改企业名称" :okText="okText" @ok="handleOk">
<Modal
v-model:open="infoVisible"
width="480px"
centered
title="修改企业名称"
:okText="okText"
@ok="handleOk"
cancelText="取消"
>
<p class="tips">
企业名称只能修改2次请谨慎操作<span
>剩余{{ enterpriseInfo!.update_name_quota - enterpriseInfo!.used_update_name_count }}
</span>
</p>
<a-form
<Form
:model="form"
class="form"
:label-col-props="{ span: 6, offset: 0 }"
:wrapper-col-props="{ span: 18, offset: 0 }"
label-align="left"
>
<a-form-item required field="name" label="新企业名称">
<FormItem required name="name" label="新企业名称">
<a-input v-model.trim="form.name" size="small" :disabled="!canUpdate" placeholder="请输入新企业名称" />
</a-form-item>
</a-form>
</FormItem>
</Form>
</Modal>
<CustomerServiceModal v-model:open="customerServiceVisible" centered />
</div>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import { ref, reactive, computed } from 'vue';

View File

@ -20,13 +20,13 @@
</template>
</a-table>
<Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
<a-form
<Form
class="form"
:model="userInfoForm"
:label-col-props="{ span: 3, offset: 0 }"
:wrapper-col-props="{ span: 21, offset: 0 }"
>
<a-form-item field="head_image" label="头像">
<FormItem name="head_image" label="头像">
<div class="flex items-center">
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
<span class="upload-button" @click="triggerFileInput">
@ -40,17 +40,17 @@
<Button><icon-upload />上传新头像</Button>
</span>
</div>
</a-form-item>
<a-form-item field="name" label="昵称">
</FormItem>
<FormItem name="name" label="昵称">
<a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
</a-form-item>
</a-form>
</FormItem>
</Form>
</Modal>
<Modal v-model:open="imageVisible" centered title="头像裁剪">
<VueCropper></VueCropper>
</Modal>
<Modal v-model:open="mobileVisible" centered title="修改手机号" @ok="handleUpdateMobile">
<a-form
<Form
ref="formRef"
:model="form"
class="form"
@ -59,18 +59,18 @@
:wrapper-col-props="{ span: 19, offset: 0 }"
label-align="left"
>
<a-form-item required field="mobile" label="新手机号">
<FormItem required name="mobile" label="新手机号">
<a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
</a-form-item>
<a-form-item required field="captcha" label="获取验证码">
</FormItem>
<FormItem required name="captcha" label="获取验证码">
<a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
<template #suffix>
<span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
<span v-else>{{ countdown }}s</span>
</template>
</a-input>
</a-form-item>
</a-form>
</FormItem>
</Form>
<PuzzleVerification
:show="verificationVisible"
@submit="handleVerificationSubmit"
@ -80,7 +80,7 @@
</div>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';

View File

@ -1,20 +1,9 @@
<script lang="jsx">
import axios from 'axios';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Button } from 'ant-design-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import { IconLoading } from '@arco-design/web-vue/es/icon';
import {
Image,
Form,
FormItem,
Input,
Textarea,
Tabs,
Upload,
TabPane,
Spin,
Message as AMessage,
} from '@arco-design/web-vue';
import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
import TextOverTips from '@/components/text-over-tips';
import HighlightTextarea from './highlight-textarea';
@ -99,15 +88,7 @@ export default {
activeTab.value = key;
};
const validate = () => {
return new Promise((resolve, reject) => {
formRef.value?.validate((errors) => {
if (errors) {
reject();
} else {
resolve();
}
});
});
return formRef.value?.validate();
};
const reset = () => {
formRef.value?.resetFields?.();
@ -223,7 +204,7 @@ export default {
const renderTextForm = () => {
return (
<Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
<FormItem label="标题" field="title" required>
<FormItem label="标题" name="title" required>
<Input
v-model={props.modelValue.title}
placeholder="请输入标题"
@ -233,7 +214,7 @@ export default {
disabled={isDisabled.value}
/>
</FormItem>
<FormItem label="作品描述" field="content" class="flex-1 content-form-item">
<FormItem label="作品描述" name="content" class="flex-1 content-form-item">
<HighlightTextarea
v-model={props.modelValue.content}
disabled={isDisabled.value}

View File

@ -38,28 +38,32 @@
display: none;
}
}
:deep(.arco-form) {
:deep(.ant-form) {
height: 100%;
display: flex;
flex-direction: column;
.arco-form-item {
.ant-form-item {
margin-bottom: 24px;
.arco-form-item-label-col {
.arco-form-item-label {
.ant-form-item-label-col {
.ant-form-item-label {
color: #939499;
}
}
}
.content-form-item {
margin-bottom: 0;
display: flex;
flex-direction: column;
.arco-form-item-wrapper-col {
flex: 1;
.arco-form-item-content-wrapper,
.arco-form-item-content,
.arco-textarea-wrapper {
height: 100%;
.ant-row {
height: 100%;
display: flex;
flex-direction: column;
.ant-form-item-control-input {
flex: 1;
.ant-form-item-control-input-content,
.ant-form-item-control-input-content,
.ant-textarea-wrapper {
height: 100%;
}
}
}
}

View File

@ -1,5 +1,5 @@
<template>
<a-form-item field="files">
<FormItem name="files">
<template #label>
<div class="flex items-center">
<span class="cts !color-#211F24 mr-4px">图片</span>
@ -44,11 +44,12 @@
</a-upload>
</VueDraggable>
</div>
</a-form-item>
</FormItem>
</template>
<script setup>
import { VueDraggable } from 'vue-draggable-plus';
import { FormItem} from 'ant-design-vue';
const props = defineProps({
files: {

View File

@ -1,7 +1,7 @@
<script lang="jsx">
import axios from 'axios';
import { Button } from 'ant-design-vue';
import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
// import CommonSelect from '@/components/common-select';
// import { VueDraggable } from 'vue-draggable-plus';
import TextOverTips from '@/components/text-over-tips';
@ -190,15 +190,7 @@ export default {
};
const validate = () => {
return new Promise((resolve, reject) => {
formRef.value?.validate((errors) => {
if (errors) {
reject(formData.value);
} else {
resolve();
}
});
});
return formRef.value?.validate();
};
const resetForm = () => {
@ -239,7 +231,7 @@ export default {
const isEnd = formData.value.videoInfo.uploadStatus === ENUM_UPLOAD_STATUS.END;
return (
<FormItem
field="files"
name="files"
v-slots={{
label: () => (
<div class="flex items-center">
@ -316,10 +308,11 @@ export default {
return () => (
<Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
<FormItem label="标题" field="title" required>
<FormItem label="标题" name="title" required>
<Input
v-model={formData.value.title}
onInput={() => {
console.log('onInput')
onChange();
emit('reValidate');
}}
@ -331,7 +324,7 @@ export default {
/>
</FormItem>
<FormItem label="作品描述" field="content">
<FormItem label="作品描述" name="content">
<Textarea
v-model={formData.value.content}
onInput={onChange}
@ -353,7 +346,7 @@ export default {
/>
)}
{/* <FormItem label="所属项目" field="project_ids">
{/* <FormItem label="所属项目" name="project_ids">
<CommonSelect
v-model={formData.value.project_ids}
onChange={() => emit('change')}

View File

@ -1,6 +1,6 @@
<script lang="jsx">
import { Button } from 'ant-design-vue';
import { Table, TableColumn, Pagination, Tooltip, Modal } from '@arco-design/web-vue';
import { Button, Modal } from 'ant-design-vue';
import { Table, TableColumn, Pagination, Tooltip, } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select';
import TextOverTips from '@/components/text-over-tips';
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
@ -132,7 +132,7 @@ export default {
onCancel={onClose}
centered
destroyOnClose
modalClass="share-manuscript-modal"
wrapClassName="share-manuscript-modal"
v-slots={{
footer: () => (
<div class="flex justify-between w-full items-center">

View File

@ -1,6 +1,6 @@
<script lang="jsx">
import { Button, Modal } from 'ant-design-vue';
import { Form, FormItem, Input, Message as AMessage } from '@arco-design/web-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import { Input, Message as AMessage } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select';
import { useClipboard } from '@vueuse/core';
@ -66,24 +66,22 @@ export default {
};
const onGenerateLink = () => {
formRef.value.validate().then(async (errors) => {
if (!errors) {
try {
loading.value = true;
const { code, data } = await postShareLinksGenerate(formData.value);
if (code === 200) {
onClose();
formRef.value.validate().then(async () => {
try {
loading.value = true;
const { code, data } = await postShareLinksGenerate(formData.value);
if (code === 200) {
onClose();
const url = router.resolve({
path: `/explore/list/${data.code}`,
}).href;
copy(generateFullUrl(url));
AMessage.success('链接已复制!');
emit('close');
}
} finally {
loading.value = false;
const url = router.resolve({
path: `/explore/list/${data.code}`,
}).href;
copy(generateFullUrl(url));
AMessage.success('链接已复制!');
emit('close');
}
} finally {
loading.value = false;
}
});
};
@ -115,8 +113,15 @@ export default {
),
}}
>
<Form ref={formRef} rules={rules} model={formData.value} auto-label-width>
<FormItem label="有效期" prop="days" row-class="!items-center">
<Form
ref={formRef}
rules={rules}
model={formData.value}
labelAlign="right"
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
<FormItem label="有效期" name="days" row-class="!items-center">
<CommonSelect
v-model={formData.value.days}
options={OPTIONS}
@ -129,7 +134,7 @@ export default {
</FormItem>
<FormItem
label="分享对象"
prop="receiver"
name="receiver"
row-class="!items-center"
v-slots={{
label: () => (

View File

@ -18,7 +18,7 @@
font-size: 14px;
}
}
.arco-modal-body {
.ant-modal-body {
height: 464px;
display: flex;
flex-direction: column;

View File

@ -1,6 +1,6 @@
<script lang="jsx">
import { Modal, Button } from 'ant-design-vue';
import { Form, FormItem, Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
import { Modal, Button, Form, FormItem } from 'ant-design-vue';
import { Input, RadioGroup, Radio, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
import { useClipboard } from '@vueuse/core';
import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
import { generateFullUrl } from '@/utils/tools';
@ -109,15 +109,13 @@ export default {
handleHandwriteSubmit();
return;
}
formRef.value?.validate(async (errors) => {
if (!errors) {
taskStatus.value = TASK_STATUS.LOADING;
const { link } = form.value;
const { code, data } = await postWorksByLink({ link });
if (code === 200) {
taskStatus.value = TASK_STATUS.SUCCESS;
works.value = data ? [data] : [];
}
formRef.value?.validate().then(async () => {
taskStatus.value = TASK_STATUS.LOADING;
const { link } = form.value;
const { code, data } = await postWorksByLink({ link });
if (code === 200) {
taskStatus.value = TASK_STATUS.SUCCESS;
works.value = data ? [data] : [];
}
});
}, 300);
@ -212,7 +210,7 @@ export default {
// 渲染链接上传表单
const renderLinkForm = () => (
<FormItem label="链接地址" field="link" required>
<FormItem label="链接地址" name="link" required>
<Textarea
v-model={form.value.link}
size="large"
@ -224,7 +222,7 @@ export default {
// 渲染手写上传表单
const renderHandwriteForm = () => (
<FormItem label="上传链接" field="writerLink">
<FormItem label="上传链接" name="writerLink">
<Input v-model={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
</FormItem>
);
@ -368,10 +366,7 @@ export default {
destroyOnClose
centered
onCancel={onClose}
footer={!(isDefault.value && isLocal.value)}
v-slots={{
footer: () => renderFooterButtons(),
}}
footer={(isDefault.value && isLocal.value) ? null : renderFooterButtons()}
>
<Form
ref={formRef}

View File

@ -46,27 +46,27 @@
<template #title>
<span class="modal-title">{{ form.id > 0 ? '编辑品牌' : '添加品牌' }}</span>
</template>
<a-form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width>
<a-form-item field="name" label="品牌名称">
<Form :model="form" :rules="formRule" ref="formRef" layout="horizontal" auto-label-width labelAlign="right" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
<FormItem name="name" label="品牌名称">
<a-input v-model="form.name" class="h-36px" placeholder="请输入..." />
</a-form-item>
<a-form-item field="logo" class="form-item-logo" label="标准版Logo">
<a-space>
</FormItem>
<FormItem name="logo" class="form-item-logo" label="标准版Logo">
<div class="inline-flex">
<ImageUpload v-model="form.logo" :limit="1"></ImageUpload>
</a-space>
<a-space>
</div>
<div class="inline-flex">
<span class="form-tip">品牌常规展示使用支持PNGJPG格式</span>
</a-space>
</a-form-item>
<a-form-item field="otherLogos" class="form-item-logo" label="其他Logo">
</div>
</FormItem>
<FormItem name="otherLogos" class="form-item-logo" label="其他Logo">
<ImageUpload v-model="form.other_logos" :limit="3"></ImageUpload>
</a-form-item>
<a-form-item field="slogan" label="Slogan">
</FormItem>
<FormItem name="slogan" label="Slogan">
<a-textarea v-model="form.slogan" placeholder="请输入..." :max-length="50" show-word-limit />
</a-form-item>
</a-form>
</FormItem>
</Form>
<template #footer>
<Button @click="handleModalCancel" class="mr-8px">取消</Button>
<Button @click="handleModalCancel">取消</Button>
<Button type="primary" @click="handleModalOk">{{ btn_str }}</Button>
</template>
</Modal>
@ -128,7 +128,7 @@
import { ref, computed, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { Button, Modal } from 'ant-design-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import {
addMaterials,
@ -233,20 +233,18 @@ function handleModalOk() {
formRef.value
.validate()
.then((valid) => {
if (!valid) {
if (form.id) {
updateMaterials(form.id, form).then(() => {
Message.success('修改成功');
handleSearch();
});
} else {
addMaterials(form).then((response) => {
Message.success('新增成功');
handleSearch();
});
}
modalVisible.value = false;
if (form.id) {
updateMaterials(form.id, form).then(() => {
Message.success('修改成功');
handleSearch();
});
} else {
addMaterials(form).then((response) => {
Message.success('新增成功');
handleSearch();
});
}
modalVisible.value = false;
})
.catch((error) => {
console.error('验证失败:', error);

View File

@ -10,7 +10,7 @@
centered
wrapClassName="authorized-account-modal"
:maskClosable="false"
:footer="modalState !== MODAL_STATE.LOADING"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">

View File

@ -14,8 +14,8 @@
<div class="mb-16px t1">
{{ `已选${accountTagList.length}个账号` }}
</div>
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<a-form-item label="编辑方式" required>
<Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<FormItem label="编辑方式" required>
<a-radio-group v-model="editType">
<a-radio value="all">
<div class="flex items-center">
@ -27,8 +27,8 @@
</a-radio>
<a-radio value="each">分别编辑</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择标签" required>
</FormItem>
<FormItem label="选择标签" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<a-select
@ -44,7 +44,7 @@
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
</div>
</template>
</a-form-item>
</FormItem>
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
@ -75,7 +75,7 @@
</template>
</a-table>
</template>
</a-form>
</Form>
<template #footer>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit">确定</Button>
@ -85,7 +85,7 @@
<script setup>
import { ref, reactive } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png';

View File

@ -11,11 +11,11 @@
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
</FormItem>
</Form>
<template #footer>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@ -25,7 +25,7 @@
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -63,16 +63,14 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putGroup : postAccountGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
formRef.value.validate().then(async () => {
const _fn = isEdit.value ? putGroup : postAccountGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
});
}

View File

@ -7,7 +7,7 @@
v-model:open="visible"
width="900px"
wrapClassName="account-manage-modal"
:footer="false"
:footer="null"
centered
title="分组管理"
:maskClosable="false"

View File

@ -10,7 +10,7 @@
title="重新授权"
wrapClassName="reauthorize-account-modal"
:maskClosable="false"
:footer="modalState !== MODAL_STATE.LOADING"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">

View File

@ -7,11 +7,11 @@
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
</FormItem>
</Form>
<template #footer>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@ -21,7 +21,7 @@
<script setup>
import { ref, nextTick } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -59,8 +59,8 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
formRef.value.validate()
.then(async () => {
const _fn = isEdit.value ? putTag : postAccountTags;
const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
@ -69,8 +69,7 @@ async function onSubmit() {
emits('success');
onClose();
}
}
});
})
}
defineExpose({ open });

View File

@ -7,7 +7,7 @@
v-model:open="visible"
width="800px"
wrapClassName="tags-manage-modal"
:footer="false"
:footer="null"
centered
title="标签管理"
:maskClosable="false"

View File

@ -3,14 +3,14 @@
.tags-manage-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// padding: 24px 24px 44px !important;
overflow: hidden;
display: flex;
flex-direction: column;
.arco-btn {
.arcanto-btn {
width: fit-content;
.arco-btn-icon {
.ant-btn-icon {
line-height: 16px;
}
}

View File

@ -144,12 +144,10 @@ const handleEdit = () => {
const setCurrent = async (current) => {
if (isFirstStep.value) {
const valid = await compRef.value.validate();
if (!valid) {
return;
}
compRef.value.validate().then(() => {
currentStep.value = current;
});
}
currentStep.value = current;
};
const onPrev = () => {
currentStep.value--;

View File

@ -1,12 +1,12 @@
<template>
<a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
<a-form-item label="项目名称" required field="name">
<Form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
<FormItem label="项目名称" required name="name">
<a-input v-model="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
</a-form-item>
<a-form-item label="项目预算" field="budget">
</FormItem>
<FormItem label="项目预算" name="budget">
<a-input v-model="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
</a-form-item>
<a-form-item label="项目目标" field="target">
</FormItem>
<FormItem label="项目目标" name="target">
<a-textarea
v-model="formQuery.target"
placeholder="请输入项目目标"
@ -14,8 +14,8 @@
show-word-limit
class="h-154px"
/>
</a-form-item>
<a-form-item label="项目背景" field="background">
</FormItem>
<FormItem label="项目背景" name="background">
<a-textarea
v-model="formQuery.background"
placeholder="请输入项目背景"
@ -23,11 +23,13 @@
show-word-limit
class="h-154px"
/>
</a-form-item>
</a-form>
</FormItem>
</Form>
</template>
<script setup>
import { Form, FormItem } from 'ant-design-vue';
const props = defineProps({
formQuery: {
type: Object,
@ -42,8 +44,7 @@ const rules = {
};
const validate = async () => {
const errors = await formRef.value.validate();
return !errors
return formRef.value.validate()
};
const reset = () => {

View File

@ -11,11 +11,11 @@
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
</FormItem>
</Form>
<template #footer>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
@ -25,7 +25,7 @@
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import { Button, Modal, Form, FormItem } from 'ant-design-vue';
import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -63,16 +63,14 @@ const open = (record = {}) => {
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
formRef.value.validate().then(async () => {
const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
});
}

View File

@ -7,7 +7,7 @@
v-model:open="visible"
width="900px"
wrapClassName="put-account-group-manage-modal"
:footer="false"
:footer="null"
title="分组管理"
centered
:maskClosable="false"

View File

@ -13,17 +13,25 @@
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item v-if="!isEdit" label="上传方式" required>
<Form
ref="formRef"
:model="form"
:rules="formRules"
layout="horizontal"
labelAlign="right"
:labelCol="{ span: 5 }"
:wrapperCol="{ span: 19 }"
>
<FormItem v-if="!isEdit" label="上传方式" required>
<a-radio-group v-model="uploadType">
<a-radio value="manual">手动添加账户</a-radio>
<a-radio value="batch">批量导入账户</a-radio>
</a-radio-group>
</a-form-item>
</FormItem>
<!-- 批量导入账户模式下的内容 -->
<template v-if="isBatchImport">
<a-form-item label="账户文件" required>
<FormItem label="账户文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === UploadStatus.DEFAULT">
@ -72,33 +80,33 @@
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</a-form-item>
</FormItem>
</template>
<!-- 手动添加账户 -->
<template v-else>
<template v-if="isEdit">
<a-form-item label="账户名称" field="name">
<a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账户ID" field="account_id">
<a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="状态" field="status">
<FormItem label="账户名称" name="name">
<Input v-model:value="form.name" placeholder="请输入..." disabled />
</FormItem>
<FormItem label="账户ID" name="account_id">
<Input v-model:value="form.account_id" placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="状态" name="status">
<StatusBox :status="form.status" />
</a-form-item>
</FormItem>
</template>
<a-form-item label="手机号" field="mobile" required>
<a-input v-model="form.mobile" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="运营人员" field="operator_name" required>
<a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="号码持有人" field="holder_name" required>
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="运营平台" :required="!isEdit">
<FormItem label="手机号" name="mobile">
<Input v-model:value="form.mobile" placeholder="请输入..." size="large" />
</FormItem>
<FormItem label="运营人员" name="operator_name">
<Input v-model:value="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="号码持有人" name="holder_name">
<Input v-model:value="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="运营平台" :required="!isEdit">
<div v-if="isEdit" class="flex items-center">
<img :src="PLATFORM_LIST[form.platform].icon" width="14" height="14" class="mr-4px" />
<span>{{ PLATFORM_LIST[form.platform].label }}</span>
@ -111,19 +119,19 @@
</div>
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="所属项目" field="project_ids">
</FormItem>
<FormItem label="所属项目" name="project_ids">
<CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
</a-form-item>
</FormItem>
<template v-if="isEdit">
<a-form-item label="账户总消耗" field="total_use_amount">
<a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账户余额" field="balance_amount">
<a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
<FormItem label="账户总消耗" name="total_use_amount">
<Input v-model:value="form.total_use_amount" placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="账户余额" name="balance_amount">
<Input v-model:value="form.balance_amount" placeholder="请输入..." size="large" disabled />
</FormItem>
</template>
<a-form-item label="同步项目数据" field="is_sync_project">
<FormItem label="同步项目数据" name="is_sync_project">
<template #label>
<span class="label">同步项目数据</span>
<a-tooltip content="同步项目数据后,账户数据将同步到项目中">
@ -131,9 +139,9 @@
</a-tooltip>
</template>
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
</a-form-item>
</FormItem>
</template>
</a-form>
</Form>
<template #footer>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit" :loading="importLoading">
@ -147,10 +155,8 @@
</template>
<script setup>
// 添加Modal导入
import { Modal } from 'ant-design-vue';
import { Modal, Form, FormItem, Button, Input } from 'ant-design-vue';
import { ref, defineEmits } from 'vue';
import { Button } from 'ant-design-vue';
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
@ -205,26 +211,26 @@ const form = ref(cloneDeep(INITIAL_FORM));
const projects = ref([]);
const importLoading = ref(false);
const rules = {
const formRules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写手机号');
}
console.log({ value });
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
return Promise.reject('手机号格式不正确');
} else {
callback();
return Promise.resolve();
}
},
trigger: ['blur', 'change'],
},
],
operator_name: [{ required: true, message: '请输入运营人员' }],
holder_name: [{ required: true, message: '请输入号码持有人' }],
operator_name: [{ required: true, message: '请输入运营人员', trigger: ['blur', 'change'] }],
holder_name: [{ required: true, message: '请输入号码持有人', trigger: ['blur', 'change'] }],
};
const isBatchImport = computed(() => uploadType.value === 'batch');
@ -353,10 +359,8 @@ async function onSubmit() {
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
isEdit.value ? handleEdit() : handleAdd();
}
formRef.value.validate().then(() => {
isEdit.value ? handleEdit() : handleAdd();
});
}

View File

@ -4,7 +4,7 @@
.w-240px {
width: 240px !important;
}
.arco-modal-body {
.ant-modal-body {
.upload-block {
width: 100%;
.dt {

View File

@ -9,7 +9,7 @@
title="获取凭证"
wrapClassName="authorized-account-modal"
:maskClosable="false"
:footer="!isLoading"
:footer="isLoading ? null : footer"
centered
@cancel="close"
>
@ -45,14 +45,14 @@
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}` }}</p>
<p v-if="!isSuccess" class="red-text">失败原因{{ failReason || '-' }}</p>
</template>
<a-form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item label="账户" field="account">
<Form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem label="账户" name="account">
<a-input v-model="form.account" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="密码" field="password">
</FormItem>
<FormItem label="密码" name="password">
<a-input-password v-model="form.password" placeholder="请输入..." size="large" />
</a-form-item>
</a-form>
</FormItem>
</Form>
</template>
</div>
<template #footer>
@ -66,7 +66,7 @@
<script setup>
// 添加Modal导入
import { Modal } from 'ant-design-vue';
import { Modal, Form, FormItem } from 'ant-design-vue';
import dayjs from 'dayjs';
import { Button } from 'ant-design-vue';
import { defineExpose, ref, computed, defineEmits } from 'vue';
@ -283,8 +283,7 @@ const handleOk = () => {
}
// 未完成,校验表单
formRef.value.validate(async (errors) => {
if (errors) return;
formRef.value.validate().then(() => {
if (shouldSelectSubAccount.value) {
visible.value = false;
selectSubAccountModalRef.value.open({

View File

@ -1,20 +1,9 @@
<script lang="jsx">
import axios from 'axios';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Button } from 'ant-design-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import { IconLoading } from '@arco-design/web-vue/es/icon';
import {
Image,
Form,
FormItem,
Input,
Textarea,
Tabs,
Upload,
TabPane,
Spin,
Message as AMessage,
} from '@arco-design/web-vue';
import { Image, Input, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
import TextOverTips from '@/components/text-over-tips';
import 'swiper/css';
@ -98,15 +87,7 @@ export default {
activeTab.value = key;
};
const validate = () => {
return new Promise((resolve, reject) => {
formRef.value?.validate((errors) => {
if (errors) {
reject();
} else {
resolve();
}
});
});
return formRef.value?.validate();
};
const reset = () => {
formRef.value?.resetFields?.();
@ -222,7 +203,7 @@ export default {
const renderTextForm = () => {
return (
<Form ref={formRef} model={props.modelValue} rules={FORM_RULES} layout="vertical" auto-label-width>
<FormItem label="标题" field="title" required>
<FormItem label="标题" name="title" required>
<Input
v-model={props.modelValue.title}
placeholder="请输入标题"
@ -232,7 +213,7 @@ export default {
disabled={isDisabled.value}
/>
</FormItem>
<FormItem label="作品描述" field="content" class="flex-1 content-form-item">
<FormItem label="作品描述" name="content" class="flex-1 content-form-item">
<Textarea
v-model={props.modelValue.content}
placeholder="请输入作品描述"

View File

@ -37,28 +37,32 @@
display: none;
}
}
:deep(.arco-form) {
:deep(.ant-form) {
height: 100%;
display: flex;
flex-direction: column;
.arco-form-item {
.ant-form-item {
margin-bottom: 24px;
.arco-form-item-label-col {
.arco-form-item-label {
.ant-form-item-label-col {
.ant-form-item-label {
color: #939499;
}
}
}
.content-form-item {
margin-bottom: 0;
display: flex;
flex-direction: column;
.arco-form-item-wrapper-col {
flex: 1;
.arco-form-item-content-wrapper,
.arco-form-item-content,
.arco-textarea-wrapper {
height: 100%;
.ant-row {
height: 100%;
display: flex;
flex-direction: column;
.ant-form-item-control-input {
flex: 1;
.ant-form-item-control-input-content,
.ant-form-item-control-input-content,
.ant-textarea-wrapper {
height: 100%;
}
}
}
}

View File

@ -1,5 +1,5 @@
<template>
<a-form-item field="files">
<FormItem name="files">
<template #label>
<div class="flex items-center">
<span class="cts !color-#211F24 mr-4px">图片</span>
@ -44,11 +44,12 @@
</a-upload>
</VueDraggable>
</div>
</a-form-item>
</FormItem>
</template>
<script setup>
import { VueDraggable } from 'vue-draggable-plus';
import { FormItem} from 'ant-design-vue';
const props = defineProps({
files: {

View File

@ -1,7 +1,7 @@
<script lang="jsx">
import axios from 'axios';
import { Button } from 'ant-design-vue';
import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
import { Button, Form, FormItem } from 'ant-design-vue';
import { Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select';
import { VueDraggable } from 'vue-draggable-plus';
import TextOverTips from '@/components/text-over-tips';
@ -192,15 +192,7 @@ export default {
};
const validate = () => {
return new Promise((resolve, reject) => {
formRef.value?.validate((errors) => {
if (errors) {
reject(formData.value);
} else {
resolve();
}
});
});
return formRef.value?.validate();
};
const resetForm = () => {
@ -241,7 +233,7 @@ export default {
const isEnd = formData.value.videoInfo.uploadStatus === ENUM_UPLOAD_STATUS.END;
return (
<FormItem
field="files"
name="files"
v-slots={{
label: () => (
<div class="flex items-center">
@ -318,7 +310,7 @@ export default {
return () => (
<Form ref={formRef} model={formData.value} rules={props.rules} layout="vertical" auto-label-width>
<FormItem label="标题" field="title" required>
<FormItem label="标题" name="title" required>
<Input
v-model={formData.value.title}
onInput={() => {
@ -333,7 +325,7 @@ export default {
/>
</FormItem>
<FormItem label="作品描述" field="content">
<FormItem label="作品描述" name="content">
<Textarea
v-model={formData.value.content}
onInput={onChange}
@ -356,7 +348,7 @@ export default {
/>
)}
{/* <FormItem label="所属项目" field="project_ids">
{/* <FormItem label="所属项目" name="project_ids">
<CommonSelect
v-model={formData.value.project_ids}
onChange={() => emit('change')}

View File

@ -1,6 +1,6 @@
<script lang="jsx">
import { Button, Modal } from 'ant-design-vue';
import { Form, FormItem, Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
import { Modal, Button, Form, FormItem } from 'ant-design-vue';
import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
import {
getTemplateUrlWriter,
postWorksByLinkWriter,
@ -95,15 +95,13 @@ export default {
// 防抖提交
const debouncedSubmit = debounce(async () => {
formRef.value?.validate(async (errors) => {
if (!errors) {
taskStatus.value = TASK_STATUS.LOADING;
const { link } = form.value;
const { code, data } = await postWorksByLinkWriter(writerCode.value, { link });
if (code === 200) {
taskStatus.value = TASK_STATUS.SUCCESS;
works.value = data ? [data] : [];
}
formRef.value?.validate().then(async () => {
taskStatus.value = TASK_STATUS.LOADING;
const { link } = form.value;
const { code, data } = await postWorksByLinkWriter(writerCode.value, { link });
if (code === 200) {
taskStatus.value = TASK_STATUS.SUCCESS;
works.value = data ? [data] : [];
}
});
}, 300);
@ -189,7 +187,7 @@ export default {
// 渲染链接上传表单
const renderLinkForm = () => (
<FormItem label="链接地址" field="link" required>
<FormItem label="链接地址" name="link" required>
<Textarea
v-model={form.value.link}
size="large"
@ -335,10 +333,7 @@ export default {
maskClosable={false}
unmount-on-close
onCancel={onClose}
footer={!(isDefault.value && isLocal.value)}
v-slots={{
footer: () => renderFooterButtons(),
}}
footer={isDefault.value && isLocal.value ? null : renderFooterButtons()}
>
<Form ref={formRef} model={form.value} layout="horizontal" auto-label-width>
{/* {isDefault.value && (