feat: 媒体账号/投放账户增加【所属项目】相关逻辑

2025-07-23 14:30:44 +08:00
parent 9ffe5be94e
commit b90d0aba26
18 changed files with 174 additions and 186 deletions
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -32,7 +32,7 @@
          <div class="filter-row-item flex items-center">
            <span class="label">运营人员</span>
            <a-space class="w-160px">
-              <OperatorSelect v-model="query.operator_id" :options="operators" />
+              <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
            </a-space>
          </div>
        </div>
@ -80,7 +80,7 @@ import {
  getPlacementAccountProjectsTrend,
  fetchAccountOperators,
 } from '@/api/all/propertyMarketing';
-import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
+import CommonSelect from '@/components/common-select';
 import AccountSelect from '@/views/components/common/AccountSelect.vue';
 import PlanSelect from '@/views/components/common/PlanSelect.vue';

--- a/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
@ -19,7 +19,7 @@
      <div v-if="!isAccountTab" 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" />
+          <CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
        </a-space>
      </div>
      <div class="filter-row-item flex items-center">
@ -31,7 +31,7 @@
      <div class="filter-row-item flex items-center">
        <span class="label">运营人员</span>
        <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
        </a-space>
      </div>
    </div>
@ -78,9 +78,8 @@ import {
  getPlacementAccountsList,
  getPlacementAccountOperators,
 } from '@/api/all/propertyMarketing';
-import GroupSelect from '../group-select';

-import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
+import CommonSelect from '@/components/common-select';
 import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
 import AccountSelect from '@/views/property-marketing/put-account/components/account-select';

--- a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
@ -41,6 +41,30 @@
          <span class="label">运营人员</span>
          <span class="cts">{{ item.operator?.name }}</span>
        </div>
+        <div class="field-row">
+          <span class="label">所属项目</span>
+          <span v-if="!item.projects.length" class="cts">-</span>
+          <div v-else class="flex items-center">
+            <a-tooltip
+              v-if="item.projects.length > 2"
+              position="bottom"
+              :content="
+                item.projects
+                  .slice(2)
+                  .map((v) => v.name)
+                  .join(',')
+              "
+            >
+              <div class="tag-box">
+                <span class="text">{{ `+${item.projects.length - 2}` }}</span>
+              </div>
+            </a-tooltip>
+
+            <div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
+              <span class="text">{{ project.name }}</span>
+            </div>
+          </div>
+        </div>
        <div class="field-row">
          <span class="label">账户总消耗</span>
          <span class="cts">{{ `￥${formatNumberShow({ value: item.total_use_amount, showExactValue: true })}` }}</span>
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
@ -1,9 +1,3 @@
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .card-container {
  flex: 1;
  display: grid;
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@ -111,6 +111,9 @@
            </a-radio>
          </a-radio-group>
        </a-form-item>
+        <a-form-item label="所属项目" field="project_ids">
+          <CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
+        </a-form-item>
        <template v-if="isEdit">
          <a-form-item label="账户总消耗" field="total_use_amount">
            <a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
@ -148,6 +151,8 @@ import { ref, defineEmits } from 'vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
+import CommonSelect from '@/components/common-select';
+
 import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';

 import {
@ -156,6 +161,7 @@ import {
  putPlacementAccounts,
  getPlacementAccountsTemplateUrl,
  batchPlacementAccounts,
+  getProjectList,
 } from '@/api/all/propertyMarketing';

 import icon1 from '@/assets/img/media-account/icon-download.png';
@ -174,6 +180,7 @@ const INITIAL_FORM = {
  holder_name: '',
  platform: 0,
  is_sync_project: 1,
+  project_ids: [],
 };

 const visible = ref(false);
@ -188,6 +195,7 @@ const authorizedAccountModalRef = ref(null);
 const uploadRef = ref(null);
 const file = ref(null);
 const form = ref(cloneDeep(INITIAL_FORM));
+const projects = ref([]);

 const rules = {
  mobile: [
@ -240,6 +248,7 @@ const reset = () => {
  fileName.value = '';
  file.value = null;
  isEdit.value = false;
+  projects.value = [];
  uploadStatus.value = UploadStatus.DEFAULT;
  uploadType.value = 'manual';
 };
@ -252,12 +261,19 @@ const open = (accountId = '') => {
  id.value = accountId;
  isEdit.value = !!accountId;

+  getProjects();
  if (accountId) {
    getAccountDetail();
  }

  visible.value = true;
 };
+const getProjects = async () => {
+  const { code, data } = await getProjectList();
+  if (code === 200) {
+    projects.value = data;
+  }
+};

 const getAccountDetail = async () => {
  const { code, data } = await getPlacementAccountsDetail(id.value);
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
@ -42,11 +42,17 @@
      <div class="filter-row-item flex items-center">
        <span class="label">运营人员</span>
        <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
        </a-space>
      </div>
    </div>
    <div class="filter-row flex">
+      <div class="filter-row-item flex items-center">
+        <span class="label">所属项目</span>
+        <a-space class="w-200px">
+          <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
+        </a-space>
+      </div>
      <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
        <template #icon>
          <icon-search />
@ -65,10 +71,10 @@

 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
+import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
 import { PLATFORM_LIST } from '@/utils/platform';
 import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
-import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
+import CommonSelect from '@/components/common-select';

 const props = defineProps({
  query: {
@ -80,6 +86,7 @@ const props = defineProps({
 const emits = defineEmits('onSearch', 'onReset', 'update:query');

 const operators = ref([]);
+const projects = ref([]);

 const handleSearch = () => {
  emits('update:query', props.query);
@ -97,9 +104,16 @@ const getOperators = async () => {
    operators.value = data;
  }
 };
+const getProjects = async () => {
+  const { code, data } = await getProjectList();
+  if (code === 200) {
+    projects.value = data;
+  }
+};

 onMounted(() => {
  getOperators();
+  getProjects();
 });
 </script>

--- a/src/views/property-marketing/put-account/account-manage/constants.ts
+++ b/src/views/property-marketing/put-account/account-manage/constants.ts
@ -8,4 +8,5 @@ export const INITIAL_QUERY = {
  status: '',
  platform: '',
  operator_id: '',
+  project_ids: [],
 };
--- a/src/views/property-marketing/put-account/components/operator-select/index.vue
+++ b/src/views/property-marketing/put-account/components/operator-select/index.vue
@ -1,64 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 14:02:40
-->
-<template>
-  <a-select
-    v-model="selectedOperators"
-    :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: false,
-  },
-  placeholder: {
-    type: String,
-    default: '全部',
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['update:modelValue', 'change']);
-
-const selectedOperators = ref(props.multiple ? [] : '');
-
-// 监听外部传入的值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    selectedOperators.value = newVal;
-  },
-  { immediate: true },
-);
-
-// 监听内部值变化，向外部发送更新
-watch(selectedOperators, (newVal) => {
-  emits('update:modelValue', newVal);
-});
-
-const handleChange = (value) => {
-  selectedOperators.value = value;
-  emits('change', value);
-};
-</script>