renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 账号管理-授权、添加、分组管理、标签管理

Browse Source
This commit is contained in:
rd
2025-07-03 16:56:10 +08:00
parent 2b4e691f4e
commit 8070350836
22 changed files with 552 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
View File

@ -16,7 +16,7 @@
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账号吗？</span>
<span>确认删除 {{ accountName || '-' }} 这个账号吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>

13
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -14,7 +14,7 @@
>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name }}</p>
<p class="name">{{ item.name || '-' }}</p>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :status="item.status" />
@ -25,19 +25,19 @@
</div>
<div class="field-row">
<span class="label">账号ID</span>
<span class="cts">{{ item.account_id }}</span>
<span class="cts">{{ item.account_id || '-' }}</span>
</div>
<div class="field-row">
<span class="label">手机号码</span>
<span class="cts">{{ item.mobile }}</span>
<span class="cts">{{ item.mobile || '-' }}</span>
</div>
<div class="field-row">
<span class="label">运营人员</span>
<span class="cts">{{ item.operator?.name }}</span>
<span class="cts">{{ item.operator?.name || '-' }}</span>
</div>
<div class="field-row">
<span class="label">分组</span>
<span class="cts">{{ item.group?.name }}</span>
<span class="cts">{{ item.group?.name || '-' }}</span>
</div>
<div class="field-row">
<span class="label">标签</span>
@ -148,7 +148,8 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
const isUnauthorized = isUnauthorizedStatus(item.status);
// const isUnauthorized = isUnauthorizedStatus(item.status);
const isUnauthorized = false;
if (isUnauthorized) {
authorizedAccountModalRef.value?.open(item.id);
} else {

138
src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
View File

@ -21,32 +21,45 @@
<!-- 批量导入账号模式下的内容 -->
<template v-if="isBatchImport">
<a-form-item label="账号文件" required>
<a-form-item label="账户文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === 'default'">
<a-upload draggable :custom-request="handleUpload" />
<template v-if="uploadStatus === UploadStatus.DEFAULT">
<a-upload
ref="uploadRef"
action="/"
draggable
:custom-request="handleUpload"
accept=".xlsx,.xls,.docx,.doc"
:show-file-list="false"
/>
</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 === 'error',
error: uploadStatus === UploadStatus.ERROR,
}"
>
<div class="flex items-center">
<icon-file size="16" />
<span class="name ml-8px">{{ fileName }}</span>
</div>
<span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
<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>
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</a-form-item>
@ -123,6 +136,7 @@ import {
getMediaAccountsDetail,
putMediaAccounts,
getTemplateUrl,
batchMediaAccounts,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-download.png';
@ -130,31 +144,36 @@ 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 groupOptions = ref([]);
const tagOptions = ref([]);
const visible = ref(false);
const uploadType = ref('manual');
const uploadStatus = ref('default');
const id = ref('');
const isEdit = ref(false);
const fileName = ref('账号导入模板.xlsx');
const formRef = ref();
const authorizedAccountModalRef = ref(null);
const importPromptModalRef = ref(null);
const form = ref({
const emits = defineEmits(['update']);
const UploadStatus = {
DEFAULT: 'default',
WAITING: 'waiting',
ERROR: 'error',
};
const INITIAL_FORM = {
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
group_id: '',
group_id: undefined,
tag_ids: [],
});
};
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '生成授权码';
});
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 form = ref(cloneDeep(INITIAL_FORM));
const rules = {
mobile: [
@ -178,6 +197,12 @@ const rules = {
holder_name: [{ required: true, message: '请输入号码持有人' }],
};
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '生成授权码';
});
// 获取分组数据
const getGroups = async () => {
try {
@ -202,39 +227,41 @@ const getTags = async () => {
}
};
function handleUpload({ file, onSuccess, onError }) {
// 模拟上传
uploadStatus.value = 'error';
function handleUpload(option) {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
}
function removeFile() {
fileName.value = '';
uploadStatus.value = 'default';
file.value = null;
uploadStatus.value = UploadStatus.DEFAULT;
}
function retryUpload() {
handleUpload();
// uploadStatus.value = 'default';
}
const reset = () => {
formRef.value.resetFields();
formRef.value.clearValidate();
form.value = cloneDeep(INITIAL_FORM);
fileName.value = '';
file.value = null;
isEdit.value = false;
uploadStatus.value = 'default';
uploadStatus.value = UploadStatus.DEFAULT;
uploadType.value = 'manual';
};
function onClose() {
const onClose = () => {
reset();
visible.value = false;
}
};
const open = (accountId = '') => {
id.value = accountId;
isEdit.value = !!accountId;
console.log({ accountId });
if (accountId) {
getAccountDetail();
}
@ -251,9 +278,27 @@ const getAccountDetail = async () => {
}
};
const handleBatchImport = () => {
onClose();
importPromptModalRef.value.open();
const handleBatchImport = async () => {
try {
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('导入成功');
emits('update');
onClose();
importPromptModalRef.value.open();
} else {
uploadStatus.value = UploadStatus.ERROR;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
}
};
async function onSubmit() {
@ -262,27 +307,26 @@ async function onSubmit() {
return;
}
handleSuccess();
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = id.value ? putMediaAccounts : postMediaAccounts;
const _params = id.value ? { id: id.value, ...form.value } : form;
const _params = id.value ? { id: id.value, ...form.value } : form.value;
const { code, data } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '修改成功' : '生成授权码成功');
isEdit.value && AMessage.success('修改成功');
emits('update');
if (isEdit.value) {
visible.value = false;
onClose();
} else {
handleSuccess(data?.id);
startAuthorized(data?.id);
}
}
}
});
}
const handleSuccess = (id) => {
const startAuthorized = (id) => {
authorizedAccountModalRef.value.open(id);
};

4
src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
View File

@ -9,7 +9,7 @@
width: 100%;
.dt {
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -21,7 +21,7 @@
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

108
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -31,19 +31,15 @@
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
</template>
<template v-else>
<!-- <div class="flex items-center mb-16px">
<img :src="icon1" width="16" height="16" />
<span class="ml-8px red-text">未识别到有效二维码。</span>
</div> -->
<div class="img-box">
<img :src="imgUrl" width="160" height="160" class="mb-16px" />
<div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
<img :src="imgUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
</div>
<span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
<span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
</template>
</template>
</div>
@ -55,15 +51,17 @@
</template>
<script setup>
import { defineExpose, ref, onUnmounted } from 'vue';
import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
import { defineExpose, ref } from 'vue';
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
const OVERDUE_TIME = 30000; // 失效时间
// 失效时间
const emits = defineEmits(['update']);
const OVERDUE_TIME = 30000;
const visible = ref(false);
const isOverdue = ref(false); // 二维码失效
const isLoading = ref(false);
@ -76,12 +74,10 @@ const imgUrl = ref('');
let progressTimer = null;
let overdueTimer = null;
let statusPollingTimer = null;
const notCompleted = computed(() => {
return !isCompleted.value;
});
const confirmBtnText = computed(() => {
if (notCompleted.value) return '完成扫码';
if (!isCompleted.value) return '完成扫码';
return isSuccess.value ? '继续添加' : '重新扫码';
});
@ -90,15 +86,20 @@ const open = (accountId) => {
getAuthorizedQrCode();
visible.value = true;
};
const close = () => {
const resetTaskFields = () => {
isOverdue.value = false;
isLoading.value = false;
isCompleted.value = false;
isSuccess.value = false;
failReason.value = '';
progress.value = 0;
imgUrl.value = '';
};
const close = () => {
resetTaskFields();
id.value = '';
clearFakeProgressTimer();
clearStatusPollingTimer();
clearOverdueTimer();
visible.value = false;
};
@ -106,8 +107,9 @@ const close = () => {
const getAuthorizedQrCode = async () => {
const { code, data } = await getAuthorizedImage(id.value);
if (code === 200) {
imgUrl.value = data.url;
imgUrl.value = data.image;
overdueTimer = null;
isOverdue.value = false;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
@ -115,27 +117,62 @@ const getAuthorizedQrCode = async () => {
}, OVERDUE_TIME);
}
};
const clearStatusPollingTimer = () => {
if (statusPollingTimer) {
clearInterval(statusPollingTimer);
statusPollingTimer = null;
}
};
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (!isCompleted.value) {
await getAuthorizedStatus();
if (isCompleted.value) {
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
isLoading.value = false;
}
}
}, 2000);
};
const startLoading = async () => {
isLoading.value = true;
isCompleted.value = false;
progress.value = 0;
startFakeProgressPolling();
// const { code } = await startPatchAccount(id.value);
// if (code === 200) {
// isLoading.value = true;
// progress.value = 0;
// startFakeProgressPolling();
// }
startStatusPolling();
};
const getAuthorizedStatus = async () => {
const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
if (code === 200) {
const { status, message } = data;
if (status !== 0) {
isCompleted.value = true;
isSuccess.value = status === 1;
failReason.value = status === 2 ? message : '';
isOverdue.value = false;
}
}
};
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (progress.value < 0.99) {
if (!isCompleted.value && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (!isCompleted.value && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
}
}, 1000);
};
@ -154,16 +191,27 @@ const clearOverdueTimer = () => {
};
const handleOk = () => {
if (notCompleted.value) {
if (!imgUrl.value) {
AMessage.error('二维码获取中，请稍等');
return;
}
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
return;
}
if (isCompleted.value) {
clearOverdueTimer();
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
return;
if (isSuccess.value) {
close();
} else {
resetTaskFields();
getAuthorizedQrCode();
}
} else {
startLoading();
return;
}
};

6
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
View File

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

12
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
View File

@ -135,9 +135,15 @@ const getOperators = async () => {
};
onMounted(() => {
// getTags();
// getGroups();
// getOperators();
getTags();
getGroups();
getOperators();
});
defineExpose({
getGroups,
getOperators,
getTags,
});
</script>

151
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
View File

@ -12,79 +12,75 @@
:mask-closable="false"
@close="close"
>
<template v-if="!list.length">
<div class="flex items-center justify-center flex-col">
<div class="w-120px h-120px flex items-center justify-center mb-32px">
<img :src="icon2" width="106" height="72" />
</div>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>去添加</template>
</a-button>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
</template>
<template v-else>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>添加新分组</template>
</a-button>
</div>
<a-table
:columns="columns"
:data="list"
row-key="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
<a-button type="primary" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
</a-table>
<div class="pagination-box flex justify-end">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</template>
<template #default>添加新分组</template>
</a-button>
</div>
<AddGroup ref="addGroupRef" @success="getData" />
<DeleteGroup ref="deleteGroupRef" @success="getData" />
<a-table
:columns="columns"
:data="list"
row-key="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
>
<template #empty>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>去添加</template>
</a-button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</template>
</a-table>
<div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
</a-modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getGroupList } from '@/api/all/propertyMarketing';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
import AddGroup from './add-group.vue';
@ -94,6 +90,8 @@ import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/media-account/icon-empty.png';
import icon3 from '@/assets/img/media-account/icon-add.png';
const emit = defineEmits(['update']);
const visible = ref(false);
const isEdit = ref(false);
const addGroupRef = ref(null);
@ -105,8 +103,8 @@ const list = ref([]);
const loading = ref(false);
const query = ref({
name: '',
column: '',
order: '',
sort_column: '',
sort_order: '',
});
const pageInfo = ref({
page: 1,
@ -114,11 +112,6 @@ const pageInfo = ref({
total: 0,
});
const sortInfo = ref({
field: '',
direction: '',
});
const columns = [
{ title: '分组名称', dataIndex: 'name' },
{
@ -145,11 +138,11 @@ function open() {
const close = () => {
query.value.name = '';
query.value.sort_column = '';
query.value.sort_order = '';
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value.column = '';
query.value.order = '';
list.value = [];
visible.value = false;
};
@ -167,8 +160,8 @@ function openDelete(record) {
}
const handleSorterChange = (column, order) => {
query.value.column = column;
query.value.order = order === 'ascend' ? 'asc' : 'desc';
query.value.sort_column = column;
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
getData();
};
@ -181,7 +174,7 @@ async function getData() {
pageSize,
...query.value,
};
const { code, data } = await getGroupList(params);
const { code, data } = await getAccountGroup(params);
if (code === 200) {
list.value = data?.data ?? [];
pageInfo.value.total = data.total;
@ -204,6 +197,10 @@ const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
reload();
};
const update = () => {
getData();
emit('update');
};
defineExpose({ open });
</script>

4
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
View File

@ -10,7 +10,7 @@
}
.s1 {
color: var(--Text-3, #737478);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
.arco-pagination-jumper-prepend {
color: var(--Text-2, #3c4043);
text-align: right;
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

7
src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
View File

@ -14,11 +14,14 @@
<div class="flex flex-col items-center">
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
<div class="flex flex-col">
<p class="tip">账号已导入成功，当前状态为“未授权”。</p>
<p class="tip">请前往卡片列表手动完成授权，完成后账号即可正常使用。</p>
</div>
</div>
</div>
<template #footer>
<a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
<a-button size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
</template>
</a-modal>

2
src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
View File

@ -4,7 +4,7 @@
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

119
src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
View File

@ -14,7 +14,7 @@
>
<div class="flex flex-col items-center">
<template v-if="taskStep === TASK_STEP.default">
<template v-if="hasUnsyncData">
<!-- <template v-if="hasUnsyncData">
<div class="flex items-center mb-20px">
<img :src="icon4" width="16" height="16" class="mr-16px" />
<span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
@ -29,19 +29,19 @@
><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
>
</a-radio-group>
</template>
<template v-else>
<div class="img-box">
<img :src="imgUrl" width="160" height="160" class="mb-16px" />
<div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
</template> -->
<!-- <template v-else> -->
<div class="img-box">
<img :src="imgUrl" width="160" height="160" />
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
<span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
</template>
</div>
<span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
</template>
<!-- </template> -->
<template v-else-if="taskStep === TASK_STEP.loading">
<a-progress
:percent="progress"
@ -75,7 +75,7 @@
</div>
<template #footer>
<a-button
v-if="(taskStep === TASK_STEP.default && hasUnsyncData) || taskStep === TASK_STEP.end"
v-if="taskStep === TASK_STEP.default || taskStep === TASK_STEP.end"
size="large"
class="cancel-btn"
@click="close"
@ -88,7 +88,7 @@
<script setup>
import { defineExpose, ref, onUnmounted } from 'vue';
import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@ -111,16 +111,18 @@ const id = ref('');
const imgUrl = ref('');
const taskStep = ref(TASK_STEP.default);
const hasUnsyncData = ref(false); // 含有未同步数据
// const hasUnsyncData = ref(false); // 含有未同步数据
const isNicknameChanged = ref(false); // 昵称发生变化
const actionType = ref(1);
let progressTimer = null;
let overdueTimer = null;
let statusPollingTimer = null;
const confirmBtnText = computed(() => {
if (taskStep.value === TASK_STEP.default) {
return hasUnsyncData.value ? '确定' : '完成扫码';
// return hasUnsyncData.value ? '确定' : '完成扫码';
return '完成扫码';
}
if (taskStep.value === TASK_STEP.end) {
@ -136,26 +138,57 @@ const open = (accountId) => {
getAuthorizedQrCode();
visible.value = true;
};
const close = () => {
const resetTaskFields = () => {
isOverdue.value = false;
isSuccess.value = false;
failReason.value = '';
progress.value = 0;
taskStep.value = TASK_STEP.default;
actionType.value = 1;
hasUnsyncData.value = false;
imgUrl.value = '';
isNicknameChanged.value = false;
actionType.value = 1;
taskStep.value = TASK_STEP.default;
};
const close = () => {
resetTaskFields();
id.value = '';
clearFakeProgressTimer();
clearOverdueTimer();
visible.value = false;
};
const getAuthorizedStatus = async () => {
const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
if (code === 200) {
const { status, message } = data;
if (status !== 0) {
taskStep.value = TASK_STEP.end;
isSuccess.value = status === 1;
failReason.value = status === 2 ? message : '';
isOverdue.value = false;
}
}
};
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (taskStep.value === TASK_STEP.loading) {
await getAuthorizedStatus();
if (taskStep.value === TASK_STEP.end) {
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
}
}
}, 2000);
};
const getAuthorizedQrCode = async () => {
const { code, data } = await getAuthorizedImage(id.value);
if (code === 200) {
imgUrl.value = data.url;
imgUrl.value = data.image;
overdueTimer = null;
isOverdue.value = false;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
@ -163,28 +196,28 @@ const getAuthorizedQrCode = async () => {
}, OVERDUE_TIME);
}
};
const startLoading = async () => {
taskStep.value = TASK_STEP.loading;
progress.value = 0;
startFakeProgressPolling();
// const { code } = await startPatchAccount(id.value);
// if (code === 200) {
// taskStep.value = TASK_STEP.loading;
// progress.value = 0;
// startFakeProgressPolling();
// }
startStatusPolling();
};
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
if (taskStep.value === TASK_STEP.loading) {
if (progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
}
} else {
taskStep.value = TASK_STEP.end;
clearFakeProgressTimer();
clearStatusPollingTimer();
}
}, 1000);
};
@ -202,22 +235,23 @@ const clearOverdueTimer = () => {
}
};
const getSyncDataStatus = () => {
return hasUnsyncData.value;
const clearStatusPollingTimer = () => {
if (statusPollingTimer) {
clearInterval(statusPollingTimer);
statusPollingTimer = null;
}
};
const handleOk = () => {
if (taskStep.value === TASK_STEP.default) {
clearOverdueTimer();
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
if (!imgUrl.value) {
AMessage.error('二维码获取中，请稍等');
return;
}
const _hasUnsyncData = getSyncDataStatus();
if (!_hasUnsyncData) {
hasUnsyncData.value = true;
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
return;
}
@ -231,9 +265,10 @@ const handleOk = () => {
console.log('确定覆盖');
} else {
if (isSuccess.value) {
console.log('继续添加');
close();
} else {
console.log('重新扫码');
resetTaskFields();
getAuthorizedQrCode();
}
}
}

119
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
View File

@ -8,42 +8,53 @@
width="800px"
modal-class="tags-manage-modal"
:footer="false"
title="标签管理"
:mask-closable="false"
@close="close"
>
<template #title>标签管理</template>
<template v-if="!list.length">
<div class="flex items-center justify-center flex-col">
<div class="w-120px h-120px flex items-center justify-center mb-32px">
<img :src="iconEmpty" width="106" height="72" />
</div>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<template #icon>
<img :src="iconAdd" width="16" height="16" />
</template>
<template #default>去添加</template>
</a-button>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
</template>
<template v-else>
<a-button type="primary" size="medium" @click="openAdd">
<template #icon>
<img :src="iconAdd" width="16" height="16" />
</template>
<template #default>添加新标签</template>
</a-button>
<div class="tag-list">
<a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
</div>
<div class="h-300px">
<div v-if="showDataSource.length" class="tag-list">
<a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
<div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
<span>{{ tag.name }}</span>
<img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
</div>
</a-tooltip>
</div>
</template>
<AddTag ref="addTagRef" @success="getData" />
<DeleteTag ref="deleteTagRef" @success="getData" />
<template v-else>
<NoData>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<template #icon>
<img :src="iconAdd" width="16" height="16" class="relative top-2px" />
</template>
<template #default>去添加</template>
</a-button>
</NoData>
</template>
</div>
<AddTag ref="addTagRef" @success="update" />
<DeleteTag ref="deleteTagRef" @success="update" />
</a-modal>
</template>
@ -55,29 +66,29 @@ import AddTag from './add-tag.vue';
import DeleteTag from './delete-tag.vue';
import iconAdd from '@/assets/img/media-account/icon-add.png';
import iconEmpty from '@/assets/img/media-account/icon-empty.png';
import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
const emit = defineEmits(['update']);
const visible = ref(false);
const list = ref([]);
const allDataSource = ref([]);
const showDataSource = ref([]);
const addTagRef = ref(null);
const deleteTagRef = ref(null);
const query = ref({
name: '',
});
const getData = async () => {
list.value = [
{ id: 1, name: '测试1' },
{ id: 2, name: '测试2' },
{ id: 3, name: '测试3' },
{ id: 4, name: '测试4' },
{ id: 5, name: '测试5' },
{ id: 6, name: '测试6' },
{ id: 7, name: '测试7' },
{ id: 8, name: '测试8' },
{ id: 9, name: '测试9' },
{ id: 10, name: '测试10' },
];
// const { code, data } = await getTagsList();
// if (code === 200) list.value = data.list;
const { code, data } = await getTagsList();
if (code === 200) {
allDataSource.value = data ?? [];
showDataSource.value = allDataSource.value;
}
};
const handleSearch = () => {
showDataSource.value = allDataSource.value.filter((item) => item.name.includes(query.value.name));
};
const open = () => {
@ -85,6 +96,9 @@ const open = () => {
getData();
};
const close = () => {
showDataSource.value = [];
allDataSource.value = [];
query.value.name = '';
visible.value = false;
};
const openAdd = () => {
@ -99,39 +113,14 @@ function openEdit(record) {
function openDelete(record) {
deleteTagRef.value.open(record);
}
const update = () => {
getData();
emit('update');
};
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 16px;
.tag-item {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 4px;
padding: 4px 12px;
position: relative;
.delete-icon {
position: absolute;
z-index: 1;
top: -6px;
right: -6px;
cursor: pointer;
width: 12px;
height: 12px;
display: none;
}
&:hover {
.delete-icon {
display: block;
}
}
}
}
</style>

35
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
View File

@ -5,7 +5,6 @@
.arco-modal-body {
padding: 24px 24px 44px !important;
max-height: 304px;
overflow: hidden;
display: flex;
flex-direction: column;
@ -16,25 +15,31 @@
}
}
.tag-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
.tag-item {
height: 24px;
display: flex;
height: 32px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
gap: 12px;
.text {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
background: #f5f5f5;
border-radius: 4px;
padding: 4px 12px;
position: relative;
.delete-icon {
position: absolute;
z-index: 1;
top: -6px;
right: -6px;
cursor: pointer;
width: 12px;
height: 12px;
display: none;
}
&:hover {
.delete-icon {
display: block;
}
}
}
}

10
src/views/property-marketing/media-account/account-manage/constants.ts
View File

@ -11,6 +11,12 @@ export const INITIAL_QUERY = {
tag_ids: [],
};
export const INITIAL_PAGE_INFO = {
page: 1,
pageSize: 8,
total: 0,
};
export const PLATFORM_LIST = [
{
label: '抖音',
@ -23,10 +29,10 @@ export const PLATFORM_LIST = [
];
export enum EnumStatus {
NORMAL = 1,
PAUSE = 3,
UNAUTHORIZED = 0,
NORMAL = 1,
ABNORMAL = 2,
PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,

108
src/views/property-marketing/media-account/account-manage/index.vue
View File

@ -28,7 +28,7 @@
</a-button>
</div>
</div>
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
</div>
<div
@ -80,13 +80,16 @@
</div>
<div class="card-wrap">
<AccountTable
v-if="dataSource.length > 0"
:dataSource="dataSource"
:selectedItems="selectedItems"
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
/>
<div class="pagination-box">
<NoData v-else />
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
@ -101,9 +104,9 @@
</div>
</div>
<GroupManageModal ref="groupManageModalRef" />
<TagsManageModal ref="tagsManageModalRef" />
<AddAccountModal ref="addAccountModalRef" />
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
<TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
<BatchTagModal ref="batchTagModalRef" @update="getData" />
<BatchGroupModal ref="batchGroupModalRef" @update="getData" />
@ -122,7 +125,7 @@ import DeleteAccountModal from './components/account-table/delete-account';
import BatchTagModal from './components/batch-tag-modal';
import BatchGroupModal from './components/batch-group-modal';
import { INITIAL_QUERY } from './constants';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { getMediaAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-add.png';
@ -138,13 +141,10 @@ const addAccountModalRef = ref(null);
const deleteAccountRef = ref(null);
const batchTagModalRef = ref(null);
const batchGroupModalRef = ref(null);
const filterBlockRef = ref(null);
const tipStatus = ref(2);
const pageInfo = reactive({
page: 1,
pageSize: 8,
total: 0,
});
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
@ -161,95 +161,37 @@ onMounted(() => {
});
const getData = async () => {
console.log('getData');
// const { page, pageSize } = pageInfo;
// const { code, data, total } = await getMediaAccounts({
// page,
// page_size: pageSize,
// ...query.value,
// });
// if (code === 200) {
// dataSource.value = data?.data ?? [];
// pageInfo.total = data?.total ?? 0;
// }
dataSource.value = [
{
id: 1,
name: '全球',
account_id: 1,
mobile: 1777777,
status: 0,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
{
name: '标签3',
},
{
name: '标签4',
},
{
name: '标签5',
},
],
},
{
id: 2,
name: '全球2',
account_id: 1,
mobile: 1777777,
status: 4,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
],
},
];
const { page, pageSize } = pageInfo.value;
const { code, data } = await getMediaAccounts({
page,
page_size: pageSize,
...query.value,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.value.total = data?.total ?? 0;
}
};
const reload = () => {
pageInfo.page = 1;
pageInfo.value.page = 1;
getData();
};
const handleSearch = () => {
getData();
};
const handleReset = () => {
pageInfo.page = 1;
pageInfo.pageSize = 20;
pageInfo.total = 0;
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
selectedItems.value = [];
query.value = cloneDeep(INITIAL_QUERY);
reload();
};
const onPageChange = (current) => {
pageInfo.page = current;
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.value.pageSize = pageSize;
reload();
};

4
src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
View File

@ -7,7 +7,7 @@
<div class="container px-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账号名称</span>
<span class="label">账户名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
@ -17,7 +17,7 @@
</a-space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">项目分组</span>
<span class="label">计划分组</span>
<a-space class="w-200px">
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>

135
src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
View File

@ -12,74 +12,65 @@
:mask-closable="false"
@close="close"
>
<template v-if="!list.length">
<div class="flex items-center justify-center flex-col">
<div class="w-120px h-120px flex items-center justify-center mb-32px">
<img :src="icon2" width="106" height="72" />
</div>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" class="relative top-3px" />
</template>
<template #default>去添加</template>
</a-button>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
</template>
<template v-else>
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>添加新分组</template>
</a-button>
</div>
<a-table
:columns="columns"
:data="list"
row-key="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
>
<template #empty>
<NoData />
<a-button type="primary" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</template>
</a-table>
<div class="pagination-box flex justify-end">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</template>
<template #default>添加新分组</template>
</a-button>
</div>
<a-table
:columns="columns"
:data="list"
row-key="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
>
<template #empty>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" class="relative top-3px" />
</template>
<template #default>去添加</template>
</a-button>
</NoData>
</template>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</template>
</a-table>
<div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
@ -107,8 +98,8 @@ const list = ref([]);
const loading = ref(false);
const query = ref({
name: '',
column: '',
order: '',
sort_column: '',
sort_order: '',
});
const pageInfo = ref({
page: 1,
@ -148,8 +139,8 @@ const close = () => {
pageInfo.value.page = 1;
pageInfo.value.pageSize = 20;
pageInfo.value.total = 0;
query.value.column = '';
query.value.order = '';
query.value.sort_column = '';
query.value.sort_order = '';
list.value = [];
visible.value = false;
};
@ -167,8 +158,8 @@ function openDelete(record) {
}
const handleSorterChange = (column, order) => {
query.value.column = column;
query.value.order = order === 'ascend' ? 'asc' : 'desc';
query.value.sort_column = column;
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
getData();
};
async function getData() {

4
src/views/property-marketing/put-account/account-data/index.vue
View File

@ -7,7 +7,7 @@
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="项目"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
<template #icon>
@ -44,7 +44,7 @@
</div>
</div>
<GroupManageModal ref="groupManageModalRef" @update="() => filterBlockRef?.getGroups()" />
<GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
</div>
</template>

17
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -160,6 +160,13 @@ const UploadStatus = {
WAITING: 'waiting',
ERROR: 'error',
};
const INITIAL_FORM = {
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
is_sync: 0,
};
const visible = ref(false);
const uploadType = ref('manual');
@ -172,13 +179,7 @@ const authorizedAccountModalRef = ref(null);
// const importPromptModalRef = ref(null);
const uploadRef = ref(null);
const file = ref(null);
const form = ref({
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
is_sync: 0,
});
const form = ref(cloneDeep(INITIAL_FORM));
const rules = {
mobile: [
@ -227,6 +228,7 @@ const reset = () => {
formRef.value.resetFields();
formRef.value.clearValidate();
form.value = cloneDeep(INITIAL_FORM);
fileName.value = '';
file.value = null;
isEdit.value = false;
@ -268,6 +270,7 @@ const handleBatchImport = async () => {
});
if (code === 200) {
AMessage.success('导入成功');
emits('update');
onClose();
} else {
uploadStatus.value = UploadStatus.ERROR;