feat: 账号健康状态、统一组件逻辑
This commit is contained in:
rd
@ -98,7 +98,8 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed } from 'vue';
|
||||
import { STATUS_LIST, EnumStatus } from '../../constants';
|
||||
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
|
||||
|
||||
import PauseAccountPatchModal from './pause-account-patch';
|
||||
import StatusBox from '../status-box';
|
||||
import ReauthorizeAccountModal from '../reauthorize-account-modal';
|
||||
|
||||
@ -123,8 +123,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import TagSelect from '../tag-select';
|
||||
import GroupSelect from '../group-select';
|
||||
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
|
||||
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
import ImportPromptModal from '../import-prompt-modal';
|
||||
import StatusBox from '../status-box';
|
||||
@ -205,25 +205,17 @@ const confirmBtnText = computed(() => {
|
||||
|
||||
// 获取分组数据
|
||||
const getGroups = async () => {
|
||||
try {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groupOptions.value = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分组列表失败:', error);
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groupOptions.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取标签数据
|
||||
const getTags = async () => {
|
||||
try {
|
||||
const { code, data } = await fetchAccountTags();
|
||||
if (code === 200) {
|
||||
tagOptions.value = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取标签列表失败:', error);
|
||||
const { code, data } = await fetchAccountTags();
|
||||
if (code === 200) {
|
||||
tagOptions.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<a-table-column title="选择分组" data-index="group_id">
|
||||
<template #cell="{ record }">
|
||||
<div class="flex items-center w-100%">
|
||||
<a-select v-model="record.group_id" :options="groupOptions" placeholder="请选择..." />
|
||||
<GroupSelect v-model="record.group_id" :options="groupOptions" />
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
@ -65,6 +65,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
|
||||
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
|
||||
@ -26,11 +26,7 @@
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
<StatusSelect v-model="query.status" @change="handleSearch" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
@ -46,11 +42,7 @@
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
<OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,13 +50,13 @@
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">分组</span>
|
||||
<a-space class="w-200px">
|
||||
<group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
<GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">标签</span>
|
||||
<a-space class="w-320px">
|
||||
<tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
|
||||
<TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
@ -86,13 +78,12 @@
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import TagSelect from '../tag-select/index.vue';
|
||||
import GroupSelect from '../group-select/index.vue';
|
||||
import {
|
||||
INITIAL_QUERY,
|
||||
PLATFORM_LIST,
|
||||
STATUS_LIST,
|
||||
} from '@/views/property-marketing/media-account/account-manage/constants';
|
||||
import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
|
||||
import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
|
||||
import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
|
||||
import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
|
||||
|
||||
import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedGroups"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default: () => [],
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '全部',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const selectedGroups = ref(props.multiple ? [] : '');
|
||||
|
||||
// 监听外部传入的值变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedGroups.value = newVal;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 监听内部值变化，向外部发送更新
|
||||
watch(selectedGroups, (newVal) => {
|
||||
emits('update:modelValue', newVal);
|
||||
});
|
||||
|
||||
const handleChange = (value) => {
|
||||
selectedGroups.value = value;
|
||||
emits('change', value);
|
||||
};
|
||||
</script>
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { STATUS_LIST, EnumStatus } from '../../constants';
|
||||
import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
|
||||
|
||||
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<a-select
|
||||
v-model="selectedTags"
|
||||
:multiple="multiple"
|
||||
size="medium"
|
||||
:placeholder="placeholder"
|
||||
allow-clear
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default: () => [],
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '全部',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const selectedTags = ref(props.multiple ? [] : '');
|
||||
|
||||
// 监听外部传入的值变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedTags.value = newVal;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 监听内部值变化，向外部发送更新
|
||||
watch(selectedTags, (newVal) => {
|
||||
emits('update:modelValue', newVal);
|
||||
});
|
||||
|
||||
const handleChange = (value) => {
|
||||
selectedTags.value = value;
|
||||
emits('change', value);
|
||||
};
|
||||
</script>
|
||||
@ -27,60 +27,3 @@ export const PLATFORM_LIST = [
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export enum EnumStatus {
|
||||
UNAUTHORIZED = 0,
|
||||
NORMAL = 1,
|
||||
ABNORMAL = 2,
|
||||
PAUSE = 3,
|
||||
ABNORMAL_LOGIN = 4,
|
||||
ABNORMAL_REQUEST = 5,
|
||||
ABNORMAL_FREEZE = 6,
|
||||
ABNORMAL_MISSING = 7,
|
||||
}
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '数据缺失',
|
||||
label: '数据缺失',
|
||||
value: EnumStatus.ABNORMAL_MISSING,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
},
|
||||
];
|
||||
|
||||
@ -32,8 +32,9 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dataSource.length > 0"
|
||||
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
|
||||
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
|
||||
:class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
@ -55,14 +56,8 @@
|
||||
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
|
||||
<span class="label">
|
||||
{{
|
||||
isNormalStatus
|
||||
? '太棒啦！所有账号都在正常运行。'
|
||||
: `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
|
||||
}}
|
||||
</span>
|
||||
<img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
|
||||
<span class="label"> {{ tipLabel }} </span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,7 +66,7 @@
|
||||
<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-space v-if="isAbNormalStatus" class="flex items-center">
|
||||
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
|
||||
<template #default>查看异常账号</template>
|
||||
</a-button>
|
||||
@ -126,7 +121,7 @@ import BatchTagModal from './components/batch-tag-modal';
|
||||
import BatchGroupModal from './components/batch-group-modal';
|
||||
|
||||
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
|
||||
import { getMediaAccounts } from '@/api/all/propertyMarketing';
|
||||
import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-add.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-group.png';
|
||||
@ -143,24 +138,61 @@ const batchTagModalRef = ref(null);
|
||||
const batchGroupModalRef = ref(null);
|
||||
const filterBlockRef = ref(null);
|
||||
|
||||
const tipStatus = ref(2);
|
||||
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const dataSource = ref([]);
|
||||
const selectedItems = ref([]);
|
||||
const healthData = ref({});
|
||||
|
||||
const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
|
||||
|
||||
const isNormalStatus = computed(() => tipStatus.value === 1);
|
||||
const isAbnormalStatus = computed(() => tipStatus.value === 2);
|
||||
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const tipLabel = computed(() => {
|
||||
if (!isAbNormalStatus.value) {
|
||||
return '太棒啦！所有账号都在正常运行。';
|
||||
}
|
||||
|
||||
const {
|
||||
abnormal_number = 0,
|
||||
login_invalid_number = 0,
|
||||
too_many_requests_number = 0,
|
||||
account_frozen_number = 0,
|
||||
} = healthData.value;
|
||||
|
||||
// 定义异常类型映射
|
||||
const abnormalTypes = [
|
||||
{ count: login_invalid_number, label: 'cookie过期' },
|
||||
{ count: too_many_requests_number, label: '已请求频繁' },
|
||||
{ count: account_frozen_number, label: '账号被封' },
|
||||
];
|
||||
|
||||
// 过滤出有异常的项并格式化
|
||||
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
|
||||
|
||||
return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
const getData = () => {
|
||||
getHealthData();
|
||||
getAccountData();
|
||||
};
|
||||
|
||||
const getHealthData = async () => {
|
||||
const { code, data } = await getMediaAccountsHealth();
|
||||
if (code === 200) {
|
||||
healthData.value = data;
|
||||
console.log(healthData.value);
|
||||
}
|
||||
};
|
||||
const getAccountData = async () => {
|
||||
const { page, pageSize } = pageInfo.value;
|
||||
const { code, data } = await getMediaAccounts({
|
||||
page,
|
||||
@ -217,12 +249,12 @@ const handleChangeAll = (checked) => {
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedItems.value.map((item) => item.id);
|
||||
const names = selectedItems.value.map((item) => `“${item.name || '-'}”`).join('，');
|
||||
const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
|
||||
deleteAccountRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
const handleDelete = (item) => {
|
||||
const { id, name } = item;
|
||||
deleteAccountRef.value?.open({ id, name: `“${name || '-'}”` });
|
||||
deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
|
||||
};
|
||||
const handleCloseTip = () => {
|
||||
selectedItems.value = [];
|
||||
|
||||
Reference in New Issue
Block a user