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

Merge remote-tracking branch 'origin/main' into feature/0909_主agent优化

Browse Source 
# Conflicts:
#	src/views/home/components/history-conversation-drawer/index.vue
This commit is contained in:
rd
2025-09-12 15:13:51 +08:00
parent 0706fcfae2 a64613326b
commit 7beafc46b1
235 changed files with 5666 additions and 6193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,27 +3,27 @@
* @Date: 2025-06-26 17:44:16
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isBatch ? '批量删除账号' : '删除账号'"
width="400px"
modal-class="account-manage-modal"
@close="onClose"
wrapClassName="account-manage-modal"
@cancel="onClose"
centered
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账号吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Modal, Button, message } from 'ant-design-vue';
import { ref } from 'vue';
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -56,7 +56,7 @@ async function onDelete() {
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
isBatch.value ? emits('batchUpdate') : emits('update');
onClose();
}

54
src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx
View File

@ -3,7 +3,9 @@ import {
EnumErrorStatus,
getStatusInfo,
} from '@/views/property-marketing/media-account/components/status-select/status-box';
import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
import { Dropdown, Menu } from 'ant-design-vue';
const { Item: MenuItem } = Menu;
import { Tooltip, Button } from 'ant-design-vue';
export default defineComponent({
name: 'FooterBtn',
props: {
@ -21,37 +23,37 @@ export default defineComponent({
const renderEditDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('openEdit', props.item)}>
编辑
</Doption>
</MenuItem>
);
};
const renderReauthorizeDoption = (text = '重新授权') => {
return (
<Doption class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('handleReauthorize', props.item)}>
{text}
</Doption>
</MenuItem>
);
};
const renderPauseDoption = () => {
return (
<Doption class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
<MenuItem class="color-#211F24" onClick={() => emit('handlePause', props.item)}>
暂停同步
</Doption>
</MenuItem>
);
};
const renderUpdateBtn = () => {
return (
<Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('syncData', props.item)}>
更新数据
</Button>
);
};
const renderDeleteDoption = () => {
return (
<Doption class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
<MenuItem class="color-#F64B31" onClick={() => emit('openDelete', props.item)}>
删除
</Doption>
</MenuItem>
);
};
const renderNormal = () => {
@ -61,17 +63,17 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>
@ -86,19 +88,19 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
开启同步
</Button>
</>
@ -115,15 +117,15 @@ export default defineComponent({
return renderUpdateBtn();
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
return (
<Tooltip content={statusInfo.value.disabledBtnTooltip}>
<Button type="outline" size="mini" disabled>
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
<Button type="primary" ghost size="small" disabled>
重新授权
</Button>
</Tooltip>
);
} else {
return (
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
{isUnauthorized ? '去授权' : '重新授权'}
</Button>
);
@ -135,17 +137,17 @@ export default defineComponent({
trigger="hover"
v-slots={{
default: () => (
<Button type="outline" class="mr-8px" size="mini">
<Button type="primary" ghost class="mr-8px" size="small">
更多
</Button>
),
content: () => (
<>
overlay: () => (
<Menu>
{renderEditDoption()}
{isMissing && renderReauthorizeDoption()}
{renderPauseDoption()}
{renderDeleteDoption()}
</>
</Menu>
),
}}
></Dropdown>

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

@ -4,24 +4,21 @@
-->
<template>
<div class="card-container">
<a-spin
<Spin
v-for="(item, index) in dataSource"
:key="index"
:loading="isSyncing(item)"
:spinning="isSyncing(item)"
tip="更新数据中..."
class="card-item"
:class="{
checked: isSelected(item),
}"
:wrapperClassName="`card-item ${isSelected(item) ? 'checked' : ''}`"
>
<template #icon>
<icon-sync size="24" />
</template>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)" class="relative top--2px"></Checkbox>
<div class="ml-8px flex-1">
<a-tooltip content="点击查看账号详情">
<Tooltip title="点击查看账号详情">
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
</a-tooltip>
</Tooltip>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :item="item" />
@ -54,10 +51,10 @@
<span class="label">所属项目</span>
<span v-if="!item.projects.length" class="cts">-</span>
<div v-else class="flex items-center">
<a-tooltip
<Tooltip
v-if="item.projects.length > 2"
position="bottom"
:content="
placement="bottom"
:title="
item.projects
.slice(2)
.map((v) => v.name)
@ -67,7 +64,7 @@
<div class="tag-box">
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ project.name }}</span>
@ -82,10 +79,10 @@
<span class="label">标签</span>
<span v-if="!item.tags.length" class="cts">-</span>
<div v-else class="flex items-center">
<a-tooltip
<Tooltip
v-if="item.tags.length > 2"
position="bottom"
:content="
placement="bottom"
:title="
item.tags
.slice(2)
.map((v) => v.name)
@ -95,7 +92,7 @@
<div class="tag-box">
<span class="text">{{ `+${item.tags.length - 2}` }}</span>
</div>
</a-tooltip>
</Tooltip>
<div v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
@ -119,13 +116,13 @@
<span class="name !mb-0">{{ getErrorStatusText(item) }}</span>
</div>
<div class="flex items-center">
<a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
<a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
<Button type="primary" ghost class="mr-8px" size="small" @click="handleCancel(item)">取消</Button>
<Button type="primary" ghost size="small" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
getConfirmBtnText(item)
}}</a-button>
}}</Button>
</div>
</div>
</a-spin>
</Spin>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@ -134,6 +131,7 @@
<script setup>
import { defineProps, ref, computed, inject } from 'vue';
import { Checkbox, Button, Tooltip, Spin } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

18
src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
View File

@ -3,19 +3,27 @@
* @Date: 2025-06-27 14:41:20
-->
<template>
<a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="暂停同步"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Button, Modal, message } from 'ant-design-vue';
import { ref } from 'vue';
import { pausePatchAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -44,7 +52,7 @@ const open = (record) => {
async function onConfirm() {
const { code } = await pausePatchAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
message.success('暂停成功');
emits('success');
onClose();
}

8
src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
View File

@ -4,13 +4,17 @@
// grid-template-rows: repeat(2, 1fr); /* 2行 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
gap: 20px;
:deep(.ant-spin-container) {
height: 100%;
width: 100%;
display: flex;
align-items: flex-start;
}
.card-item {
border-radius: 8px;
// border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
position: relative;
.name {
color: var(--Text-1, #211f24);

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

@ -5,20 +5,19 @@
<script lang="jsx">
import { ref, computed } from 'vue';
import {
Button,
Modal,
Form,
FormItem,
Input,
RadioGroup,
Radio,
Upload,
Button,
Switch,
Input,
message,
Tooltip,
Notification,
Message as AMessage,
Textarea,
} from '@arco-design/web-vue';
Upload,
Switch,
} from 'ant-design-vue';
const { TextArea } = Input;
import AuthorizedAccountModal from '../authorized-account-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@ -88,15 +87,14 @@ export default {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
validator: (_rule, value) => {
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'],
@ -135,10 +133,9 @@ export default {
}
};
function handleUpload(option) {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
file.value = option.file;
fileName.value = option.file.name;
}
function removeFile() {
fileName.value = '';
@ -188,7 +185,7 @@ export default {
const handleBatchImport = async () => {
try {
if (!file.value) {
AMessage.warning('请上传要导入的文件');
message.warning('请上传要导入的文件');
return;
}
@ -234,7 +231,7 @@ export default {
const handleEditAccount = async () => {
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
if (code === 200) {
AMessage.success('修改成功');
message.success('修改成功');
emit('update');
onClose();
}
@ -244,14 +241,12 @@ export default {
handleBatchImport();
return;
}
formRef.value.validate(async (errors) => {
if (!errors) {
if (isCustomCookie.value && !form.value.cookie) {
AMessage.warning('请填写Cookie值');
return;
}
isEdit.value ? handleEditAccount() : handleAddAccount();
formRef.value.validate().then(async () => {
if (isCustomCookie.value && !form.value.cookie) {
message.warning('请填写Cookie值');
return;
}
isEdit.value ? handleEditAccount() : handleAddAccount();
});
}
const startAuthorized = (id, platform) => {
@ -278,18 +273,27 @@ export default {
return () => (
<Modal
v-model:visible={visible.value}
v-model:open={visible.value}
title={isEdit.value ? '编辑账号' : '添加账号'}
modal-class="add-account-modal"
wrapClassName="add-account-modal"
width="500px"
mask-closable={false}
onClose={onClose}
centered
maskClosable={false}
onCancel={onClose}
footer={null}
>
<Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
<Form
ref={formRef}
model={form.value}
rules={rules}
layout="horizontal"
labelAlign="right"
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
{!isEdit.value && (
<FormItem label="上传方式" required>
<RadioGroup v-model={uploadType.value}>
<RadioGroup v-model:value={uploadType.value}>
<Radio value="manual">手动添加账号</Radio>
<Radio value="batch">批量导入账号</Radio>
</RadioGroup>
@ -302,19 +306,14 @@ export default {
<Upload
ref={uploadRef}
action="/"
draggable
custom-request={handleUpload}
customRequest={handleUpload}
accept=".xlsx,.xls"
show-file-list={false}
showUploadList={false}
>
{{
'upload-button': () => (
<div class="upload-box">
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
),
}}
<div class="upload-box">
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
<span class="tip">支持 xls, xlsx格式</span>
</div>
</Upload>
) : (
<div class="flex items-center">
@ -346,35 +345,35 @@ export default {
<>
{isEdit.value && (
<>
<FormItem label="账号名称" field="name">
<Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
<FormItem label="账号名称" name="name">
<Input v-model:value={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 label="账号ID" name="account_id">
<Input v-model:value={form.value.account_id} placeholder="请输入..." size="large" disabled />
</FormItem>
<FormItem label="状态" field="status">
<FormItem label="状态" name="status">
<StatusBox item={form.value} />
</FormItem>
</>
)}
<FormItem label="手机号码" field="mobile" required>
<Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
<FormItem label="手机号码" name="mobile" required>
<Input v-model:value={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 label="运营人员" name="operator_name" required>
<Input v-model:value={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}>
<RadioGroup v-model:value={form.value.platform}>
<Radio value={1}>小红书</Radio>
<Radio value={0}>抖音</Radio>
</RadioGroup>
)}
</FormItem>
<FormItem label="号码持有人" field="holder_name">
<Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
<FormItem label="号码持有人" name="holder_name">
<Input v-model:value={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
</FormItem>
<FormItem label="所属项目">
<CommonSelect
@ -395,21 +394,26 @@ export default {
</FormItem>
<FormItem label="选择标签">
<CommonSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
<CommonSelect
v-model={form.value.tag_ids}
options={tagOptions.value}
placeholder="请选择…"
size="large"
/>
</FormItem>
<FormItem
label="笔记链接"
field="end_work_link"
name="end_work_link"
v-slots={{
label: () =>
renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
}}
>
<Textarea
v-model={form.value.end_work_link}
<TextArea
v-model:value={form.value.end_work_link}
placeholder="请输入..."
size="large"
auto-size={{ minRows: 3, maxRows: 5 }}
autoSize={{ minRows: 3, maxRows: 5 }}
/>
</FormItem>
<FormItem
@ -421,12 +425,12 @@ export default {
<Switch v-model={isCustomCookie.value} size="large" />
</FormItem>
{isCustomCookie.value && (
<FormItem label="" field="cookie">
<Textarea
v-model={form.value.cookie}
<FormItem label=" " name="cookie">
<TextArea
v-model:value={form.value.cookie}
placeholder="请输入..."
size="large"
auto-size={{ minRows: 5, maxRows: 8 }}
autoSize={{ minRows: 5, maxRows: 8 }}
/>
</FormItem>
)}

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

@ -4,7 +4,7 @@
.w-240px {
width: 240px !important;
}
.arco-modal-body {
.ant-modal-body {
.upload-block {
width: 100%;
.dt {
@ -36,15 +36,8 @@
}
}
}
.arco-upload-drag {
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.arco-icon {
margin-bottom: 16px;
}
.ant-upload {
width: 100%;
}
.upload-box {
display: flex;
@ -77,13 +70,13 @@
}
}
}
.upload-dragger {
border: 1px dashed #d9d9d9;
padding: 24px 0;
text-align: center;
background: #fafafa;
cursor: pointer;
}
// .upload-dragger {
// border: 1px dashed #d9d9d9;
// padding: 24px 0;
// text-align: center;
// background: #fafafa;
// cursor: pointer;
// }
.upload-error {
color: #f53f3f;
margin-left: 8px;

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

@ -3,24 +3,25 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="授权账号"
modal-class="authorized-account-modal"
:mask-closable="false"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
centered
wrapClassName="authorized-account-modal"
:maskClosable="false"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
<Progress
:percent="progress"
color="#6D4CFE"
trackColor="#E6E6E8"
size="large"
:stroke-width="4"
strokeColor="#6D4CFE"
trailColor="#E6E6E8"
size="default"
:strokeWidth="4"
type="circle"
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
@ -40,7 +41,7 @@
<!-- 二维码加载中或失败 -->
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<Image :src="icon1" :width="160" :height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<img
v-if="modalState === MODAL_STATE.QR_FAILED"
@ -62,7 +63,7 @@
</div>
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
<!-- 二维码失效遮罩 -->
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
<icon-refresh size="24" class="mb-13px" />
@ -76,24 +77,24 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
</Button>
<Button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
</Modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
@ -241,12 +242,12 @@ const getAuthorizedStatus = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
const step = Math.random() * 4 + 1;
progress.value = Math.min(progress.value + step, 99);
progress.value = Number(progress.value.toFixed(2));
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
progress.value = 99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -284,7 +285,7 @@ const handleOk = () => {
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
message.warning('二维码生成中，请稍等');
return;
}

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

@ -3,73 +3,87 @@
* @Date: 2025-06-27 09:35:49
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="批量分组"
modal-class="batch-group-modal"
wrapClassName="batch-group-modal"
width="800px"
:mask-closable="false"
:maskClosable="false"
centered
>
<div class="mb-16px t1">
{{ `已选${accountGroupList.length}个账号` }}
</div>
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<a-form-item label="编辑方式" required>
<a-radio-group v-model="editType">
<a-radio value="all">
<Form ref="formRef" :model="form" layout="horizontal">
<FormItem label="编辑方式" required>
<Radio.Group v-model:value="editType">
<Radio value="all">
<div class="flex items-center">
<span>统一编辑</span>
<a-tooltip content="原分组将被清除，统一加入新分组。">
<Tooltip title="原分组将被清除，统一加入新分组。">
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
</a-tooltip>
</Tooltip>
</div>
</a-radio>
<a-radio value="each">分别编辑</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择分组" required>
</Radio>
<Radio value="each">分别编辑</Radio>
</Radio.Group>
</FormItem>
<FormItem label="选择分组" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
</div>
</template>
</a-form-item>
</FormItem>
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
<a-table :data="accountGroupList" :pagination="false" row-key="id" class="w-100%" column-resizable>
<template #columns>
<a-table-column title="账号名称" data-index="name" width="200">
<template #cell="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</a-table-column>
<a-table-column title="选择分组" data-index="group_id">
<template #cell="{ record }">
<div class="flex items-center w-100%">
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
</div>
</template>
</a-table-column>
<Table
:dataSource="accountGroupList"
:columns="columns"
:pagination="false"
rowKey="id"
bordered
:showSorterTooltip="false"
@resizeColumn="handleResizeColumn"
>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'name'">
<span>{{ record.name || '-' }}</span>
</template>
<template v-else-if="column.dataIndex === 'group_id'">
<div class="flex items-center w-100%">
<CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" class="w-full" />
</div>
</template>
</template>
</a-table>
</Table>
</template>
</a-form>
</Form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" @click="onSubmit">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ref, reactive, computed } from 'vue';
import { Modal, Form, FormItem, Radio, Tooltip, Button, Table, message } from 'ant-design-vue';
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
import CommonSelect from '@/components/common-select';
import icon1 from '@/assets/img/icon-question.png';
// [{id, name, group_id: null}]
const columns = ref([
{ title: '账号名称', dataIndex: 'name', width: 100, minWidth: 100, resizable: true },
{ title: '选择分组', dataIndex: 'group_id' },
]);
const handleResizeColumn = (w, col) => {
const idx = columns.value.findIndex((c) => c.dataIndex === col.dataIndex);
if (idx !== -1) columns.value[idx].width = w;
};
const emits = defineEmits(['update']);
const visible = ref(false);
@ -102,18 +116,17 @@ const getTags = async () => {
const onClose = () => {
visible.value = false;
form.group_id = null;
};
const onSubmit = async () => {
if (isAllEdit.value) {
if (form.group_id === null) {
AMessage.error('请选择分组');
message.error('请选择分组');
return;
}
} else {
if (accountGroupList.value.some((item) => item.group_id === null)) {
AMessage.error('请选择分组');
message.error('请选择分组');
return;
}
}
@ -126,7 +139,7 @@ const onSubmit = async () => {
// 这里处理批量标签的提交逻辑
const { code } = await batchPutGroup({ media_accounts });
if (code === 200) {
AMessage.success('设置分组成功');
message.success('设置分组成功');
emits('update');
visible.value = false;
}

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

@ -2,7 +2,7 @@
.batch-group-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);

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

@ -3,87 +3,85 @@
* @Date: 2025-06-27 09:35:49
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
title="批量标签"
modal-class="batch-tag-modal"
wrapClassName="batch-tag-modal"
width="800px"
:mask-closable="false"
centered
:maskClosable="false"
>
<div class="mb-16px t1">
{{ `已选${accountTagList.length}个账号` }}
</div>
<a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<a-form-item label="编辑方式" required>
<a-radio-group v-model="editType">
<a-radio value="all">
<Form ref="formRef" :model="form" layout="horizontal" auto-label-width>
<FormItem label="编辑方式" required>
<RadioGroup v-model:value="editType">
<Radio value="all">
<div class="flex items-center">
<span>统一编辑</span>
<a-tooltip content="原标签将被清除，统一为新标签。">
<Tooltip title="原标签将被清除，统一为新标签。">
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
</a-tooltip>
</Tooltip>
</div>
</a-radio>
<a-radio value="each">分别编辑</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择标签" required>
</Radio>
<Radio value="each">分别编辑</Radio>
</RadioGroup>
</FormItem>
<FormItem label="选择标签" required>
<template v-if="editType === 'all'">
<div class="flex items-center w-100%">
<a-select
v-model="form.tags"
<Select
v-model:value="form.tags"
:options="tagOptions"
multiple
allow-create
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:limit="5"
:max-tag-count="5"
class="flex-1"
@create="handleCreateTag"
@search="handleCreateTag"
/>
<span class="ml-12px">{{ `${form.tags.length}/5` }}</span>
</div>
</template>
</a-form-item>
</FormItem>
<!-- 分别编辑 -->
<template v-if="editType === 'each'">
<a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%" column-resizable>
<template #columns>
<a-table-column title="账号名称" data-index="name" width="200">
<template #cell="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</a-table-column>
<a-table-column title="选择标签" data-index="tags">
<template #cell="{ record, rowIndex }">
<div class="flex items-center w-100%">
<a-select
v-model="record.tags"
:options="tagOptions"
multiple
allow-create
placeholder="请输入标签，回车键可直接添加..."
:limit="5"
style="width: 90%"
@create="(val) => handleCreateTag(val, rowIndex)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</a-table-column>
</template>
</a-table>
<Table :dataSource="accountTagList" :pagination="false" rowKey="id" class="w-100%">
<Table.Column title="账号名称" dataIndex="name" :width="200">
<template #customRender="{ record }">
<span>{{ record.name || '-' }}</span>
</template>
</Table.Column>
<Table.Column title="选择标签" dataIndex="tags">
<template #customRender="{ record, index }">
<div class="flex items-center w-100%">
<Select
v-model:value="record.tags"
:options="tagOptions"
mode="tags"
placeholder="请输入标签，回车键可直接添加..."
:max-tag-count="5"
class="!w-full"
@search="(val) => handleCreateTag(val, index)"
/>
<span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
</div>
</template>
</Table.Column>
</Table>
</template>
</a-form>
</Form>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" size="large" @click="onSubmit">确定</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Button, Form, FormItem, Modal, Radio, RadioGroup, Select, Table, Tooltip, message } from 'ant-design-vue';
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/icon-question.png';
@ -143,12 +141,12 @@ const onClose = () => {
const onSubmit = async () => {
if (isAllEdit.value) {
if (form.tags.length === 0) {
AMessage.error('请输入标签');
message.error('请输入标签');
return;
}
} else {
if (accountTagList.value.some((item) => item.tags.length === 0)) {
AMessage.error('请输入标签');
message.error('请输入标签');
return;
}
}
@ -160,7 +158,7 @@ const onSubmit = async () => {
console.log({ media_accounts });
const { code } = await batchPutTag({ media_accounts });
if (code === 200) {
AMessage.success('设置标签成功');
message.success('设置标签成功');
emits('update');
visible.value = false;
}

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

@ -2,7 +2,7 @@
.batch-tag-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);

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

@ -8,86 +8,73 @@
<div class="filter-row flex">
<div class="filter-row-item">
<span class="label">账号名称/ID/手机号</span>
<a-space size="medium">
<a-input
v-model="query.search"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
<Input v-model:value="query.search" class="w-240px" placeholder="请搜索..." allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<div class="filter-row-item">
<span class="label">状态</span>
<a-space class="w-180px">
<StatusSelect v-model="query.status" @change="handleSearch" />
</a-space>
<StatusSelect v-model="query.status" @change="handleSearch" class="w-180px" />
</div>
<div class="filter-row-item">
<span class="label">平台</span>
<a-space class="w-160px">
<a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</a-option
>
</a-select>
</a-space>
<Select
v-model:value="query.platform"
class="w-160px"
size="middle"
placeholder="全部"
allowClear
@change="handleSearch"
>
<Option
v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
:key="index"
:value="item.value"
:label="item.label"
>{{ item.label }}</Option
>
</Select>
</div>
<div class="filter-row-item">
<span class="label">运营人员</span>
<a-space class="w-160px">
<CommonSelect
v-model="query.operator_id"
allowSearch
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</a-space>
<CommonSelect
class="w-160px"
v-model="query.operator_id"
allowSearch
:multiple="false"
:options="operators"
@change="handleSearch"
/>
</div>
</div>
<div class="filter-row">
<div class="filter-row-item">
<span class="label">分组</span>
<a-space class="w-200px">
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" class="!w-200px" />
</div>
<div class="filter-row-item">
<span class="label">所属项目</span>
<a-space class="w-200px">
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" class="!w-200px" />
</div>
<div class="filter-row-item">
<span class="label">标签</span>
<a-space class="w-320px">
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
<CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" class="!w-320px" />
</div>
<div class="filter-row-item">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="w-84px mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px" size="medium" @click="handleReset">
</Button>
<Button class="w-84px" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -95,6 +82,8 @@
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { Button, Input, Select } from 'ant-design-vue';
const { Option } = Select;
import {
fetchAccountTags,
getProjectList,
@ -114,7 +103,7 @@ const props = defineProps({
},
});
const emits = defineEmits('onSearch', 'onReset', 'update:query');
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
const tags = ref([]);
const groups = ref([]);

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

@ -3,27 +3,29 @@
* @Date: 2025-06-26 11:44:17
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑分组' : '添加新分组'"
modal-class="account-manage-modal"
wrapClassName="group-manage-modal"
width="400px"
@close="onClose"
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
<Input v-model:value="form.name" placeholder="请输入…" />
</FormItem>
</Form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -61,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) {
message.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
});
}

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

@ -3,22 +3,28 @@
* @Date: 2025-06-26 11:45:05
-->
<template>
<a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="删除分组"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { deleteGroup } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -46,7 +52,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deleteGroup(groupId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('success');
onClose();
}

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

@ -3,84 +3,103 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="900px"
modal-class="account-manage-modal"
:footer="false"
wrapClassName="account-manage-modal"
:footer="null"
centered
title="分组管理"
:mask-closable="false"
@close="close"
:maskClosable="false"
@cancel="close"
>
<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="reload">
<Space size="medium" class="w-240px">
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="reload">
<template #prefix>
<icon-search />
</template>
</a-input>
</a-space>
</Input>
</Space>
</div>
<a-button type="primary" size="medium" @click="openAdd"
<Button type="primary" size="middle" @click="openAdd"
><template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加新分组</template>
</a-button>
</Button>
</div>
<a-table
column-resizable
:columns="columns"
:data="list"
row-key="id"
<Table
:dataSource="list"
rowKey="id"
:loading="loading"
:scroll="{ y: 500 }"
class="h-500px"
:pagination="false"
@sorter-change="handleSorterChange"
:showSorterTooltip="false"
@change="
(pagination, filters, sorter) => {
if (sorter && sorter.columnKey) {
handleSorterChange(sorter.columnKey, sorter.order);
}
}
"
>
<template #empty>
<Table.Column title="分组名称" dataIndex="name" />
<Table.Column title="创建人" dataIndex="creator">
<template #customRender="{ record }">
{{ record.creator?.name || '-' }}
</template>
</Table.Column>
<Table.Column title="创建日期" dataIndex="created_at" :width="160" key="created_at" :sorter="true">
<template #customRender="{ record }">
{{ exactFormatTime(record.created_at) }}
</template>
</Table.Column>
<Table.Column title="操作" :align="'center'" :width="120">
<template #customRender="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
</div>
</template>
</Table.Column>
<template #emptyText>
<NoData>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
<Button type="primary" class="mb-16px" size="middle" @click="openAdd"
><template #icon>
<icon-plus size="16"/>
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>去添加</template>
</a-button>
</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>
</Table>
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<AddGroup ref="addGroupRef" @success="update" />
<DeleteGroup ref="deleteGroupRef" @success="update" />
</a-modal>
</Modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Input, Modal, Space, Table, Pagination } from 'ant-design-vue';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';
@ -115,25 +134,6 @@ const loading = ref(false);
const query = ref(cloneDeep(INITIAL_QUERY));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const columns = [
{ title: '分组名称', dataIndex: 'name' },
{
title: '创建人',
dataIndex: 'creator',
render: ({ record }) => record.creator?.name || '-',
},
{
title: '创建日期',
dataIndex: 'created_at',
width: 160,
render: ({ record }) => exactFormatTime(record.created_at),
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
];
function open() {
visible.value = true;
getData();
@ -188,8 +188,9 @@ const reload = () => {
getData();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.pageSize = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {

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

@ -2,9 +2,9 @@
.account-manage-modal {
border-radius: 8px;
.arco-modal-body {
.arco-btn {
.arco-btn-icon {
.ant-modal-body {
.ant-btn {
.ant-btn-icon {
line-height: 16px;
}
}

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

@ -3,13 +3,14 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="导入提示"
modal-class="import-prompt-modal"
:mask-closable="false"
@close="close"
wrapClassName="import-prompt-modal"
:maskClosable="false"
centered
@cancel="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
@ -21,13 +22,14 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
<Button size="large" @click="close">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { Button, Modal } from 'ant-design-vue';
import { defineExpose } from 'vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

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

@ -1,7 +1,7 @@
@import "@/views/property-marketing/component.scss";
.import-prompt-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;

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

@ -3,24 +3,25 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="500px"
centered
title="重新授权"
modal-class="reauthorize-account-modal"
:mask-closable="false"
:footer="modalState !== MODAL_STATE.LOADING"
@close="close"
wrapClassName="reauthorize-account-modal"
:maskClosable="false"
:footer="modalState === MODAL_STATE.LOADING ? null : footer"
@cancel="close"
>
<div class="flex flex-col items-center">
<!-- 加载中状态 -->
<template v-if="modalState === MODAL_STATE.LOADING">
<a-progress
<Progress
:percent="progress"
color="#6D4CFE"
trackColor="#E6E6E8"
size="large"
:stroke-width="4"
strokeColor="#6D4CFE"
trailColor="#E6E6E8"
size="default"
:strokeWidth="4"
type="circle"
/>
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
@ -54,7 +55,7 @@
<!-- 二维码加载中或失败 -->
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
<div class="relative w-160px h-160px">
<a-image :src="icon1" width="160" height="160" />
<Image :src="icon1" :width="160" :height="160" />
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
<img
v-if="modalState === MODAL_STATE.QR_FAILED"
@ -77,7 +78,7 @@
</template>
<!-- 正常二维码 -->
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
<!-- 二维码失效遮罩 -->
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
@ -92,28 +93,26 @@
</div>
<template #footer>
<a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
重新生成
</a-button>
<a-button
<Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode"> 重新生成 </Button>
<Button
v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
size="large"
@click="close"
>
取消
</a-button>
<a-button type="primary" size="large" @click="handleOk">
</Button>
<Button type="primary" size="large" @click="handleOk">
{{ confirmBtnText }}
</a-button>
</Button>
</template>
</a-modal>
</Modal>
<SyncDataModal ref="syncDataModalRef" />
</template>
<script setup>
import { defineExpose, ref, computed } from 'vue';
import { Message as AMessage } from '@arco-design/web-vue';
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
import SyncDataModal from '../sync-data-modal';
@ -260,12 +259,12 @@ const getAuthorizedStatus = async () => {
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
const step = Math.random() * 4 + 1;
progress.value = Math.min(progress.value + step, 99);
progress.value = Number(progress.value.toFixed(2));
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
progress.value = 99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
@ -297,14 +296,14 @@ const handleRefreshQrCode = () => {
const handleOk = () => {
// 二维码已过期
if (modalState.value === MODAL_STATE.QR_EXPIRED) {
AMessage.error('二维码已失效，请重新扫码');
message.error('二维码已失效，请重新扫码');
handleRefreshQrCode();
return;
}
// 二维码还在加载中
if (modalState.value === MODAL_STATE.QR_LOADING) {
AMessage.warning('二维码生成中，请稍等');
message.warning('二维码生成中，请稍等');
return;
}

18
src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
View File

@ -3,13 +3,14 @@
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="480px"
title="更新数据"
modal-class="sync-data-modal"
:mask-closable="false"
@close="close"
centered
wrapClassName="sync-data-modal"
:maskClosable="false"
@cancel="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
@ -20,14 +21,15 @@
</div>
</div>
<template #footer>
<a-button size="large" @click="close">稍后再说</a-button>
<a-button type="primary" size="large" @click="handleOk"> 更新数据 </a-button>
<Button size="large" @click="close">稍后再说</Button>
<Button type="primary" size="large" @click="handleOk"> 更新数据 </Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import { Button, Modal } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

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

@ -1,7 +1,7 @@
@import "@/views/property-marketing/component.scss";
.sync-data-modal {
border-radius: 8px;
.arco-modal-body {
.ant-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;

35
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
View File

@ -1,25 +1,27 @@
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
:title="isEdit ? '编辑标签' : '添加新标签'"
modal-class="tags-manage-modal"
wrapClassName="tags-manage-modal"
width="400px"
@close="onClose"
centered
@cancel="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
</a-form>
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<FormItem :label="isEdit ? '标签名称' : '新标签名称'" name="name" required>
<Input v-model:value="form.name" placeholder="请输入…" />
</FormItem>
</Form>
<template #footer>
<a-button @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import { Button, Modal, Form, FormItem, Input, message } from 'ant-design-vue';
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
@ -57,18 +59,17 @@ 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);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
message.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
}
});
})
}
defineExpose({ open });

20
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
View File

@ -3,22 +3,28 @@
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
<Modal
v-model:open="visible"
title="删除标签"
centered
width="400px"
wrapClassName="account-manage-modal"
@cancel="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ tagName }}" 这个标签吗？</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
>确认删除</a-button
>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, message } from 'ant-design-vue';
import { deleteTag } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@ -46,7 +52,7 @@ const open = (record) => {
async function onDelete() {
const { code } = await deleteTag(tagId.value);
if (code === 200) {
AMessage.success('删除成功');
message.success('删除成功');
emits('success');
onClose();
}

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

@ -3,65 +3,71 @@
* @Date: 2025-06-25 17:58:28
-->
<template>
<a-modal
v-model:visible="visible"
<Modal
v-model:open="visible"
width="800px"
modal-class="tags-manage-modal"
:footer="false"
wrapClassName="tags-manage-modal"
:footer="null"
centered
title="标签管理"
:mask-closable="false"
@close="close"
:maskClosable="false"
@cancel="close"
>
<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>
<Input
v-model:value="query.name"
placeholder="请搜索..."
class="w-240px"
size="medium"
allowClear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</Input>
</div>
<a-button type="primary" size="medium" @click="openAdd">
<Button type="primary" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加新标签</template>
</a-button>
</Button>
</div>
<div class="h-300px">
<div v-if="showDataSource.length" class="tag-list">
<a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
<Tooltip v-for="tag in showDataSource" :key="tag.id" title="双击修改标签名">
<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>
</Tooltip>
</div>
<template v-else>
<NoData>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<Button type="primary" class="mb-16px" @click="openAdd">
<template #icon>
<icon-plus size="16" />
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>去添加</template>
</a-button>
</Button>
</NoData>
</template>
</div>
<AddTag ref="addTagRef" @success="update" />
<DeleteTag ref="deleteTagRef" @success="update" />
</a-modal>
</Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button, Modal, Input, Tooltip } from 'ant-design-vue';
import { getTagsList } from '@/api/all/propertyMarketing';
import AddTag from './add-tag.vue';
import DeleteTag from './delete-tag.vue';

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

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

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

@ -4,9 +4,9 @@
*/
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
status: undefined,
platform: undefined,
operator_id: undefined,
group_ids: [],
tag_ids: [],
project_ids: [],

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

@ -4,28 +4,28 @@
-->
<template>
<div class="account-manage-wrap">
<div class="filter-wrap bg-#fff rounded-8px ">
<div class="filter-wrap bg-#fff rounded-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
<div class="flex items-center">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
<Button class="w-112px mr-12px" type="primary" ghost size="middle" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
<img :src="icon3" width="16" height="16" class="mr-8px" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
标签管理
</Button>
<Button class="w-112px mr-12px" type="outline" size="middle" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
<img :src="icon2" width="16" height="16" class="mr-8px" />
</template>
<template #default>分组管理</template>
</a-button>
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
分组管理
</Button>
<Button type="primary" class="w-112px" size="middle" @click="handleOpenAccountModal">
<template #icon>
<icon-plus size="16"/>
<icon-plus size="16" class="mr-8px" />
</template>
<template #default>添加账号</template>
</a-button>
</Button>
</div>
</div>
<FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
@ -33,17 +33,17 @@
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
class="tip-row flex justify-between items-center px-16px py-10px w-100% my-12px h-48px"
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
<template v-if="selectedItems.length > 0">
<a-checkbox
:model-value="checkedAll"
<Checkbox
:checked="checkedAll"
:indeterminate="indeterminate"
class="mr-8px"
@change="handleChangeAll"
@change="(e) => handleChangeAll(e.target.checked)"
/>
<span class="label mr-24px">
已选
@ -69,11 +69,11 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
<Space v-if="isAbNormalStatus" class="flex items-center">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</Button>
</Space>
</div>
</div>
<div class="card-wrap">
@ -92,17 +92,16 @@
<NoData v-else />
<div v-if="pageInfo.total > 0" class="pagination-row">
<a-pagination
<Pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:page-size-options="[8, 16, 20, 32, 64]"
size="small"
:showTotal="(total, range) => `共 ${total} 条`"
showSizeChanger
showQuickJumper
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
:pageSize="pageInfo.pageSize"
:pageSizeOptions="['8', '16', '20', '32', '64']"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
@ -119,7 +118,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
@ -240,8 +239,10 @@ const handleReset = () => {
reload();
};
const onPageChange = (current) => {
const onPageChange = (current, pageSize) => {
pageInfo.value.page = current;
pageInfo.value.pageSize = pageSize;
getData();
};
const onPageSizeChange = (pageSize) => {
@ -355,7 +356,7 @@ const getSyncTaskStatus = async (id, notificationId) => {
if (code === 200) {
if (data?.status !== 0) {
clearQueryTaskTimer();
notificationId && Notification.remove(notificationId);
notificationId && notification.close(notificationId);
showImportResultNotification(data);
getData();
}