+
-
- ![]()
-
-
账号管理
@@ -31,65 +31,71 @@
+
-
- ![]()
- {{ tipLabel }}
-
+ ![]()
+ {{ tipLabel }}
-
-
+
+
+
+
+
+ 全选
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
-
import { ref, provide } from 'vue';
-import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+import { Checkbox, Button, Pagination, notification, RadioButton, RadioGroup } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
-import AccountTable from './components/account-table';
+import AccountTable from './components/account-table/card.vue';
import GroupManageModal from './components/group-manage-modal';
import TagsManageModal from './components/tags-manage-modal';
import AddAccountModal from './components/add-account-modal';
@@ -129,7 +135,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, INITIAL_PAGE_INFO } from './constants';
+import { INITIAL_QUERY, INITIAL_PAGE_INFO, SHOW_TYPES } from './constants';
import { showImportResultNotification } from '@/utils/arcoD';
import { getTaskStatus } from '@/api/all/common';
import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
@@ -143,9 +149,9 @@ import {
import icon2 from '@/assets/img/media-account/icon-group.png';
import icon3 from '@/assets/img/media-account/icon-tag.png';
-import icon4 from '@/assets/img/media-account/icon-success.png';
+// import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon-warn.png';
-import icon6 from '@/assets/img/media-account/icon-close.png';
+// import icon6 from '@/assets/img/media-account/icon-close.png';
let syncDataTimer = null;
let queryTaskTimer = null;
@@ -165,17 +171,20 @@ const selectedItems = ref([]);
const healthData = ref({});
const syncMediaAccounts = ref([]);
const isLoadingTaskStatus = ref(false); // 正在查询状态中
+const showType = ref('card');
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+const hasAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
-const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
+const checkedAll = computed(
+ () => dataSource.value.length > 0 && 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) {
+ if (!hasAbNormalStatus.value) {
return '太棒啦！所有账号都在正常运行。';
}
@@ -279,9 +288,7 @@ const handleDelete = (item) => {
const { id, name } = item;
deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
};
-const handleCloseTip = () => {
- selectedItems.value = [];
-};
+
// 先立即执行一次
const getAsyncStatus = async () => {
const { code, data } = await getMediaAccountSyncStatus();
diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss
index 09fd9e5..22ecf41 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -17,46 +17,52 @@
}
.tip-row {
border-radius: 2px;
- background: #f0edff;
+ background: #fff;
.label {
- font-family: $font-family-medium;
+ font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
- &.normal {
- background: #ebf7f2;
- .label {
- color: #211f24;
- }
- }
&.abnormal {
- background: #ffe7e4;
+ background: #FFE9E7;
.label {
color: #211f24;
}
}
- .operation-btn {
- padding: 0;
- cursor: pointer;
- color: var(--Brand-Brand-6, #6d4cfe);
- font-family: $font-family-regular;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 22px; /* 157.143% */
- &:not(:last-child) {
- margin-right: 16px;
- }
- &.red {
- color: #f64b31;
- }
- &.disabled {
- color: #c5b7ff;
- cursor: not-allowed;
+
+ :deep(.ant-checkbox) {
+ + span {
+ font-family: $font-family-medium;
}
}
+
+ :deep(.ant-radio-group) {
+ .ant-radio-button-wrapper {
+ color: #737478;
+
+ &:first-child {
+ border-radius: 4px 0 0 4px;
+ }
+
+ &:last-child {
+ border-radius: 0 4px 4px 0;
+ }
+
+ &:hover {
+ color: #6D4CFE;
+ border-color: #6D4CFE;
+ }
+
+ &-checked {
+ border-color: #6D4CFE;
+ background: #F0EDFF;
+ color: #6D4CFE;
+ }
+ }
+ }
+
}
.card-wrap {
display: flex;