feat: 账号健康状态、统一组件逻辑

2025-07-04 14:05:01 +08:00
parent 954e4bc308
commit 1d52fda0cd
37 changed files with 1362 additions and 571 deletions
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@ -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';
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@ -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;
  }
 };

--- a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
@ -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';

--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@ -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: {
--- a/src/views/property-marketing/media-account/account-manage/components/group-select/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-select/index.vue
@ -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>
--- a/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
@ -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';
--- a/src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue
@ -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>