feat: 导入提示弹窗
This commit is contained in:
rd
@ -2,172 +2,23 @@
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isEdit ? '编辑账号' : '添加账号'"
|
||||
modal-class="add-account-modal"
|
||||
width="500px"
|
||||
:mask-closable="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<a-form-item 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>
|
||||
|
||||
<!-- 批量导入账号模式下的内容 -->
|
||||
<template v-if="isBatchImport">
|
||||
<a-form-item label="账户文件" required>
|
||||
<!-- 默认状态 -->
|
||||
<div class="upload-block">
|
||||
<template v-if="uploadStatus === UploadStatus.DEFAULT">
|
||||
<a-upload
|
||||
ref="uploadRef"
|
||||
action="/"
|
||||
draggable
|
||||
:custom-request="handleUpload"
|
||||
accept=".xlsx,.xls"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<template #upload-button>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px" />
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex items-center justify-between py-9px px-12px flex-1 import-row"
|
||||
:class="{
|
||||
error: uploadStatus === UploadStatus.ERROR,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-file size="16" class="flex-shrink-0" />
|
||||
<span class="name ml-8px">{{ fileName }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="uploadStatus === UploadStatus.ERROR"
|
||||
class="upload-error flex-shrink-0"
|
||||
@click="handleBatchImport"
|
||||
>
|
||||
点击重试
|
||||
</span>
|
||||
</div>
|
||||
<img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
|
||||
<img :src="icon1" width="16" height="16" class="mr-4px" />
|
||||
<span class="dt">下载账户导入模板.xlsx</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</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">
|
||||
<StatusBox :status="form.status" />
|
||||
</a-form-item>
|
||||
</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="运营平台" :required="!isEdit">
|
||||
<img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
|
||||
<a-radio-group v-else v-model="form.platform">
|
||||
<a-radio :value="0">抖音</a-radio>
|
||||
<a-radio :value="1">小红书</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="号码持有人" field="holder_name">
|
||||
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="选择分组">
|
||||
<GroupSelect
|
||||
v-model="form.group_id"
|
||||
:multiple="false"
|
||||
:options="groupOptions"
|
||||
placeholder="请选择…"
|
||||
size="large"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择标签">
|
||||
<TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="笔记链接" field="end_work_link">
|
||||
<template #label>
|
||||
<span class="label">笔记链接</span>
|
||||
<a-tooltip content="平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集">
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-textarea
|
||||
v-model="form.end_work_link"
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length="72"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<template v-if="!isEdit">
|
||||
<a-form-item label="Cookie值">
|
||||
<template #label>
|
||||
<span class="label">Cookie值</span>
|
||||
<a-tooltip content="开启后可直接填写 Cookie，无需扫码授权">
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-switch v-model="isCustomCookie" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="isCustomCookie" label="" field="cookie">
|
||||
<a-textarea
|
||||
v-model="form.cookie"
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length="72"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" size="large" @click="onSubmit">
|
||||
{{ confirmBtnText }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
|
||||
<ImportPromptModal ref="importPromptModalRef" />
|
||||
</a-modal>
|
||||
|
||||
<SyncDataModal ref="syncDataModalRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Upload,
|
||||
Button,
|
||||
Switch,
|
||||
Tooltip,
|
||||
Notification,
|
||||
Message as AMessage,
|
||||
Textarea,
|
||||
} from '@arco-design/web-vue';
|
||||
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
|
||||
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
@ -175,6 +26,12 @@ import ImportPromptModal from '../import-prompt-modal';
|
||||
import StatusBox from '../status-box';
|
||||
import SyncDataModal from '../sync-data-modal';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-download.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-delete.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-dy.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-xhs.png';
|
||||
import icon5 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import icon6 from '@/assets/img/media-account/icon-success.png';
|
||||
import {
|
||||
fetchAccountTags,
|
||||
fetchAccountGroups,
|
||||
@ -185,13 +42,6 @@ import {
|
||||
batchMediaAccounts,
|
||||
} from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-download.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-delete.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-dy.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-xhs.png';
|
||||
|
||||
const emits = defineEmits(['update']);
|
||||
|
||||
const UploadStatus = {
|
||||
DEFAULT: 'default',
|
||||
WAITING: 'waiting',
|
||||
@ -208,209 +58,406 @@ const INITIAL_FORM = {
|
||||
cookie: undefined,
|
||||
};
|
||||
|
||||
const groupOptions = ref([]);
|
||||
const tagOptions = ref([]);
|
||||
const visible = ref(false);
|
||||
const uploadType = ref('manual');
|
||||
const uploadStatus = ref(UploadStatus.DEFAULT);
|
||||
const id = ref('');
|
||||
const isEdit = ref(false);
|
||||
const fileName = ref('');
|
||||
const formRef = ref();
|
||||
const file = ref(null);
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
const importPromptModalRef = ref(null);
|
||||
const uploadRef = ref(null);
|
||||
const isCustomCookie = ref(false);
|
||||
const form = ref(cloneDeep(INITIAL_FORM));
|
||||
const syncDataModalRef = ref(null);
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const groupOptions = ref([]);
|
||||
const tagOptions = ref([]);
|
||||
const visible = ref(false);
|
||||
const uploadType = ref('manual');
|
||||
const uploadStatus = ref(UploadStatus.DEFAULT);
|
||||
const id = ref('');
|
||||
const isEdit = ref(false);
|
||||
const fileName = ref('');
|
||||
const formRef = ref();
|
||||
const file = ref(null);
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
const importPromptModalRef = ref(null);
|
||||
const uploadRef = ref(null);
|
||||
const isCustomCookie = ref(false);
|
||||
const form = ref({ ...INITIAL_FORM });
|
||||
const syncDataModalRef = ref(null);
|
||||
const importLoading = ref(false);
|
||||
const CustomNotificationVisible = ref(false);
|
||||
|
||||
const rules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
operator_name: [{ required: true, message: '请输入运营人员' }],
|
||||
// holder_name: [{ required: true, message: '请输入号码持有人' }],
|
||||
};
|
||||
|
||||
const isBatchImport = computed(() => uploadType.value === 'batch');
|
||||
const confirmBtnText = computed(() => {
|
||||
if (isBatchImport.value) {
|
||||
return '确定导入';
|
||||
} else if (isEdit.value) {
|
||||
return '确定';
|
||||
} else {
|
||||
return isCustomCookie.value ? '确认添加' : '生成授权码';
|
||||
}
|
||||
});
|
||||
|
||||
// 获取分组数据
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groupOptions.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取标签数据
|
||||
const getTags = async () => {
|
||||
const { code, data } = await fetchAccountTags();
|
||||
if (code === 200) {
|
||||
tagOptions.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
function handleUpload(option) {
|
||||
const { fileItem } = option;
|
||||
|
||||
uploadStatus.value = UploadStatus.WAITING;
|
||||
|
||||
file.value = fileItem.file;
|
||||
fileName.value = fileItem.name;
|
||||
}
|
||||
|
||||
function removeFile() {
|
||||
fileName.value = '';
|
||||
file.value = null;
|
||||
uploadStatus.value = UploadStatus.DEFAULT;
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
formRef.value.resetFields();
|
||||
formRef.value.clearValidate();
|
||||
|
||||
form.value = cloneDeep(INITIAL_FORM);
|
||||
fileName.value = '';
|
||||
file.value = null;
|
||||
isEdit.value = false;
|
||||
isCustomCookie.value = false;
|
||||
uploadStatus.value = UploadStatus.DEFAULT;
|
||||
uploadType.value = 'manual';
|
||||
};
|
||||
const onClose = () => {
|
||||
reset();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const open = (accountId = '') => {
|
||||
id.value = accountId;
|
||||
isEdit.value = !!accountId;
|
||||
|
||||
if (accountId) {
|
||||
getAccountDetail();
|
||||
}
|
||||
getGroups();
|
||||
getTags();
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const getAccountDetail = async () => {
|
||||
const { code, data } = await getMediaAccountsDetail(id.value);
|
||||
if (code === 200) {
|
||||
form.value = {
|
||||
...data,
|
||||
group_id: data.group_id === 0 ? undefined : data.group_id,
|
||||
const rules = {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
operator_name: [{ required: true, message: '请输入运营人员' }],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatchImport = async () => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file.value);
|
||||
|
||||
const { code } = await batchMediaAccounts(formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
const isBatchImport = computed(() => uploadType.value === 'batch');
|
||||
const confirmBtnText = computed(() => {
|
||||
if (isBatchImport.value) {
|
||||
return importLoading.value ? '导入中' : '确定导入';
|
||||
} else if (isEdit.value) {
|
||||
return '确定';
|
||||
} else {
|
||||
return isCustomCookie.value ? '确认添加' : '生成授权码';
|
||||
}
|
||||
});
|
||||
if (code === 200) {
|
||||
AMessage.success('导入成功');
|
||||
emits('update');
|
||||
onClose();
|
||||
importPromptModalRef.value.open();
|
||||
} else {
|
||||
uploadStatus.value = UploadStatus.ERROR;
|
||||
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groupOptions.value = data;
|
||||
}
|
||||
};
|
||||
const getTags = async () => {
|
||||
const { code, data } = await fetchAccountTags();
|
||||
if (code === 200) {
|
||||
tagOptions.value = data;
|
||||
}
|
||||
};
|
||||
function handleUpload(option) {
|
||||
const { fileItem } = option;
|
||||
uploadStatus.value = UploadStatus.WAITING;
|
||||
file.value = fileItem.file;
|
||||
fileName.value = fileItem.name;
|
||||
}
|
||||
} catch (error) {
|
||||
uploadStatus.value = UploadStatus.ERROR;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddAccount = async () => {
|
||||
const _isCustomCookie = isCustomCookie.value;
|
||||
const { code, data } = await postMediaAccounts({
|
||||
...form.value,
|
||||
cookie: _isCustomCookie ? form.value.cookie : undefined,
|
||||
});
|
||||
if (code === 200) {
|
||||
emits('update');
|
||||
onClose();
|
||||
|
||||
const { id, platform } = data;
|
||||
if (_isCustomCookie) {
|
||||
syncDataModalRef.value.open(id);
|
||||
} else {
|
||||
startAuthorized(id, platform);
|
||||
function removeFile() {
|
||||
fileName.value = '';
|
||||
file.value = null;
|
||||
uploadStatus.value = UploadStatus.DEFAULT;
|
||||
}
|
||||
}
|
||||
};
|
||||
const reset = () => {
|
||||
formRef.value?.resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
form.value = { ...INITIAL_FORM };
|
||||
fileName.value = '';
|
||||
file.value = null;
|
||||
isEdit.value = false;
|
||||
importLoading.value = false;
|
||||
isCustomCookie.value = false;
|
||||
uploadStatus.value = UploadStatus.DEFAULT;
|
||||
uploadType.value = 'manual';
|
||||
};
|
||||
const onClose = () => {
|
||||
reset();
|
||||
visible.value = false;
|
||||
};
|
||||
const open = (accountId = '') => {
|
||||
id.value = accountId;
|
||||
isEdit.value = !!accountId;
|
||||
if (accountId) {
|
||||
getAccountDetail();
|
||||
}
|
||||
getGroups();
|
||||
getTags();
|
||||
visible.value = true;
|
||||
};
|
||||
const getAccountDetail = async () => {
|
||||
const { code, data } = await getMediaAccountsDetail(id.value);
|
||||
if (code === 200) {
|
||||
form.value = {
|
||||
...data,
|
||||
group_id: data.group_id === 0 ? undefined : data.group_id,
|
||||
};
|
||||
}
|
||||
};
|
||||
const handleBatchImport = async () => {
|
||||
try {
|
||||
if (!file.value) {
|
||||
AMessage.warning('请上传要导入的文件');
|
||||
return;
|
||||
}
|
||||
importLoading.value = true;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file.value);
|
||||
const { code } = await batchMediaAccounts(formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
if (code === 200) {
|
||||
AMessage.success('导入成功');
|
||||
emit('update');
|
||||
onClose();
|
||||
|
||||
const handleEditAccount = async () => {
|
||||
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
|
||||
if (code === 200) {
|
||||
AMessage.success('修改成功');
|
||||
emits('update');
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
if (isBatchImport.value) {
|
||||
handleBatchImport();
|
||||
return;
|
||||
}
|
||||
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (isCustomCookie.value && !form.value.cookie) {
|
||||
AMessage.warning('请填写Cookie值');
|
||||
const ID = 'IMPORT-ACCOUNT';
|
||||
renderNotification(ID);
|
||||
importPromptModalRef.value.open();
|
||||
} else {
|
||||
uploadStatus.value = UploadStatus.ERROR;
|
||||
}
|
||||
} catch (error) {
|
||||
uploadStatus.value = UploadStatus.ERROR;
|
||||
}
|
||||
};
|
||||
const handleAddAccount = async () => {
|
||||
const _isCustomCookie = isCustomCookie.value;
|
||||
const { code, data } = await postMediaAccounts({
|
||||
...form.value,
|
||||
cookie: _isCustomCookie ? form.value.cookie : undefined,
|
||||
});
|
||||
if (code === 200) {
|
||||
emit('update');
|
||||
onClose();
|
||||
const { id: _id, platform } = data;
|
||||
if (_isCustomCookie) {
|
||||
syncDataModalRef.value.open(_id);
|
||||
} else {
|
||||
startAuthorized(_id, platform);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleEditAccount = async () => {
|
||||
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
|
||||
if (code === 200) {
|
||||
AMessage.success('修改成功');
|
||||
emit('update');
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
async function onSubmit() {
|
||||
if (isBatchImport.value) {
|
||||
handleBatchImport();
|
||||
return;
|
||||
}
|
||||
|
||||
isEdit.value ? handleEditAccount() : handleAddAccount();
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
if (isCustomCookie.value && !form.value.cookie) {
|
||||
AMessage.warning('请填写Cookie值');
|
||||
return;
|
||||
}
|
||||
isEdit.value ? handleEditAccount() : handleAddAccount();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
const startAuthorized = (id, platform) => {
|
||||
authorizedAccountModalRef.value.open(id, platform);
|
||||
};
|
||||
const handleDownloadTemplate = async () => {
|
||||
const { code, data } = await getTemplateUrl();
|
||||
if (code === 200) {
|
||||
window.open(data.download_url, '_blank');
|
||||
}
|
||||
};
|
||||
const handleDownloadError = () => {
|
||||
console.log('handleDownloadError');
|
||||
};
|
||||
const renderLabel = (label, tooltipContent) => {
|
||||
return (
|
||||
<>
|
||||
<span class="label">{label}</span>
|
||||
<Tooltip content={tooltipContent}>
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const renderNotification = (id, hasError) => {
|
||||
Notification.warning({
|
||||
id,
|
||||
showIcon: false,
|
||||
closable: true,
|
||||
content: (
|
||||
<div>
|
||||
<div class="flex items-center mb-4px">
|
||||
<img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
|
||||
<span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
|
||||
</div>
|
||||
<p class="text-14px lh-22px font-400 color-#211F24">
|
||||
共导入 37 个账号，导入成功 32 个{hasError ? `，失败 <span class="color-#F64B31">5</span> 个` : ''}
|
||||
</p>
|
||||
{hasError && (
|
||||
<div class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={handleDownloadError}>
|
||||
下载问题表格
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
duration: 3000,
|
||||
class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
|
||||
});
|
||||
};
|
||||
|
||||
const startAuthorized = (id, platform) => {
|
||||
authorizedAccountModalRef.value.open(id, platform);
|
||||
expose({ open });
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
v-model:visible={visible.value}
|
||||
title={isEdit.value ? '编辑账号' : '添加账号'}
|
||||
modal-class="add-account-modal"
|
||||
width="500px"
|
||||
mask-closable={false}
|
||||
onClose={onClose}
|
||||
footer={null}
|
||||
>
|
||||
<Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
|
||||
{!isEdit.value && (
|
||||
<FormItem label="上传方式" required>
|
||||
<RadioGroup v-model={uploadType.value}>
|
||||
<Radio value="manual">手动添加账号</Radio>
|
||||
<Radio value="batch">批量导入账号</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
)}
|
||||
{isBatchImport.value ? (
|
||||
<FormItem label="账号文件" required>
|
||||
<div class="upload-block">
|
||||
{uploadStatus.value === UploadStatus.DEFAULT ? (
|
||||
<Upload
|
||||
ref={uploadRef}
|
||||
action="/"
|
||||
draggable
|
||||
custom-request={handleUpload}
|
||||
accept=".xlsx,.xls"
|
||||
show-file-list={false}
|
||||
>
|
||||
{{
|
||||
'upload-button': () => (
|
||||
<div class="upload-box">
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
</Upload>
|
||||
) : (
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class={[
|
||||
'flex items-center justify-between py-9px px-12px flex-1 import-row',
|
||||
{ error: uploadStatus.value === UploadStatus.ERROR },
|
||||
]}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="name ml-8px">{fileName.value}</span>
|
||||
</div>
|
||||
{uploadStatus.value === UploadStatus.ERROR && (
|
||||
<span class="upload-error flex-shrink-0" onClick={handleBatchImport}>
|
||||
点击重试
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<img src={icon2} width="16" height="16" class="cursor-pointer ml-12px" onClick={removeFile} />
|
||||
</div>
|
||||
)}
|
||||
<div class="flex items-center cursor-pointer mt-8px" onClick={handleDownloadTemplate}>
|
||||
<img src={icon1} width="16" height="16" class="mr-4px" />
|
||||
<span class="dt">下载账户导入模板.xlsx</span>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
) : (
|
||||
<>
|
||||
{isEdit.value && (
|
||||
<>
|
||||
<FormItem label="账号名称" field="name">
|
||||
<Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="账号ID" field="account_id">
|
||||
<Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
|
||||
</FormItem>
|
||||
<FormItem label="状态" field="status">
|
||||
<StatusBox status={form.value.status} />
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
<FormItem label="手机号码" field="mobile" required>
|
||||
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="运营人员" field="operator_name" required>
|
||||
<Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="运营平台" required={!isEdit.value}>
|
||||
{isEdit.value ? (
|
||||
<img src={form.value.platform === 0 ? icon3 : icon4} width="24" height="24" />
|
||||
) : (
|
||||
<RadioGroup v-model={form.value.platform}>
|
||||
<Radio value={0}>抖音</Radio>
|
||||
<Radio value={1}>小红书</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem label="号码持有人" field="holder_name">
|
||||
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="选择分组">
|
||||
<GroupSelect
|
||||
v-model={form.value.group_id}
|
||||
multiple={false}
|
||||
options={groupOptions.value}
|
||||
placeholder="请选择…"
|
||||
size="large"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="选择标签">
|
||||
<TagSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="笔记链接"
|
||||
field="end_work_link"
|
||||
v-slots={{
|
||||
label: () =>
|
||||
renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
v-model={form.value.end_work_link}
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length={72}
|
||||
auto-size={{ minRows: 3, maxRows: 5 }}
|
||||
/>
|
||||
</FormItem>
|
||||
{!isEdit.value && (
|
||||
<>
|
||||
<FormItem
|
||||
label="Cookie值"
|
||||
v-slots={{
|
||||
label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
|
||||
}}
|
||||
>
|
||||
<Switch v-model={isCustomCookie.value} size="large" />
|
||||
</FormItem>
|
||||
{isCustomCookie.value && (
|
||||
<FormItem label="" field="cookie">
|
||||
<Textarea
|
||||
v-model={form.value.cookie}
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length={72}
|
||||
auto-size={{ minRows: 3, maxRows: 5 }}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
|
||||
<Button size="large" class="cancel-btn" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" size="large" loading={importLoading.value} onClick={onSubmit}>
|
||||
{confirmBtnText.value}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AuthorizedAccountModal ref={authorizedAccountModalRef} onUpdate={() => emit('update')} />
|
||||
<ImportPromptModal ref={importPromptModalRef} />
|
||||
<SyncDataModal ref={syncDataModalRef} />
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const handleDownloadTemplate = async () => {
|
||||
const { code, data } = await getTemplateUrl();
|
||||
if (code === 200) {
|
||||
window.open(data.download_url, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
// 对外暴露打开弹窗方法
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -303,10 +303,6 @@ const startSyncDataPolling = () => {
|
||||
};
|
||||
|
||||
const handleSyncData = async (item) => {
|
||||
Notification.info({
|
||||
title: '账号正在同步数据。',
|
||||
});
|
||||
|
||||
const { code } = await postSyncMediaAccountData(item.id);
|
||||
if (code === 200) {
|
||||
if (!startSyncData.value) {
|
||||
|
||||
Reference in New Issue
Block a user