feat: form组件替换
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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: () => (
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
height: 464px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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">(品牌常规展示使用,支持PNG,JPG格式)</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);
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
v-model:open="visible"
|
||||
width="900px"
|
||||
wrapClassName="account-manage-modal"
|
||||
:footer="false"
|
||||
:footer="null"
|
||||
centered
|
||||
title="分组管理"
|
||||
:maskClosable="false"
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 });
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
v-model:open="visible"
|
||||
width="800px"
|
||||
wrapClassName="tags-manage-modal"
|
||||
:footer="false"
|
||||
:footer="null"
|
||||
centered
|
||||
title="标签管理"
|
||||
:maskClosable="false"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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--;
|
||||
|
||||
@ -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 = () => {
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
v-model:open="visible"
|
||||
width="900px"
|
||||
wrapClassName="put-account-group-manage-modal"
|
||||
:footer="false"
|
||||
:footer="null"
|
||||
title="分组管理"
|
||||
centered
|
||||
:maskClosable="false"
|
||||
|
||||
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.w-240px {
|
||||
width: 240px !important;
|
||||
}
|
||||
.arco-modal-body {
|
||||
.ant-modal-body {
|
||||
.upload-block {
|
||||
width: 100%;
|
||||
.dt {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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="请输入作品描述"
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user