feat: 巨量/b站平台添加子账户

src/views/property-marketing/put-account/account-manage/components/account-table/index.vue

@@ -121,7 +121,7 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  authorizedAccountModalRef.value?.open(item.id, item.last_synced_at);
+  authorizedAccountModalRef.value?.open({ accountId: item.id, last_synced_at: item.last_synced_at });
 };
 
 const handlePause = (item) => {

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -148,7 +148,7 @@ import { ref, defineEmits } from 'vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST, ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
 
 import {
   postPlacementAccounts,
@@ -290,6 +290,27 @@ const handleBatchImport = async () => {
   // importPromptModalRef.value.open();
 };
 
+const handleAdd = async () => {
+  // 聚光无子账号
+  if (form.value.platform === ENUM_PLATFORM.jg) {
+    const { code, data } = await postPlacementAccounts(form.value);
+    if (code === 200) {
+      update();
+      authorizedAccountModalRef.value.open({ accountId: data?.id });
+    }
+  } else {
+    authorizedAccountModalRef.value.open({ form: form.value });
+  }
+};
+const handleEdit = async () => {
+  const { code } = await putPlacementAccounts({ id: id.value, ...form.value });
+  if (code === 200) {
+    isEdit.value && AMessage.success('修改成功');
+    update();
+    onClose();
+  }
+};
+
 async function onSubmit() {
   if (isBatchImport.value) {
     handleBatchImport();
@@ -298,27 +319,11 @@ async function onSubmit() {
 
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const _fn = id.value ? putPlacementAccounts : postPlacementAccounts;
-      const _params = id.value ? { id: id.value, ...form.value } : form.value;
-      const { code, data } = await _fn(_params);
-      if (code === 200) {
-        isEdit.value && AMessage.success('修改成功');
-        update();
-
-        if (isEdit.value) {
-          onClose();
-        } else {
-          handleSuccess(data?.id);
-        }
-      }
+      isEdit.value ? handleEdit() : handleAdd();
     }
   });
 }
 
-const handleSuccess = (id) => {
-  authorizedAccountModalRef.value.open(id);
-};
-
 const handleDownloadTemplate = async () => {
   const { code, data } = await getPlacementAccountsTemplateUrl();
   if (code === 200) {
@@ -326,6 +331,7 @@ const handleDownloadTemplate = async () => {
   }
 };
 
+provide('closeAddAccountModal', onClose);
 // 对外暴露打开弹窗方法
 defineExpose({ open });
 </script>

src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue

@@ -60,13 +60,14 @@
     </template>
   </a-modal>
 
-  <SelectSubAccountModal ref="selectSubAccountModalRef" @confirm="onSelectSubAccounts" />
+  <SelectSubAccountModal ref="selectSubAccountModalRef" />
 </template>
 
 <script setup>
 import dayjs from 'dayjs';
 import { defineExpose, ref, computed, defineEmits } from 'vue';
 import { exactFormatTime } from '@/utils/tools';
+import { ENUM_PLATFORM } from '@/views/property-marketing/put-account/common_constants';
 import {
   putPlacementAccountsAuthorized,
   getPlacementAccountsAuthorizedStatus,
@@ -94,6 +95,7 @@ const selectSubAccountModalRef = ref(null);
 const lastSyncedAt = ref(null); // 上次同步时间戳
 const showSyncTip = ref(false);
 const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
+const addAccountFormData = ref(null); // 添加账户表单数据
 
 const INITIAL_FORM = {
   account: '',
@@ -130,11 +132,12 @@ const getDaysDiffText = (lastSyncedAt) => {
   return `${daysDiff}天`;
 };
 
-const open = (accountId, last_synced_at = null) => {
+const open = ({ accountId, last_synced_at = null, form = null }) => {
   reset();
 
   id.value = accountId;
   lastSyncedAt.value = last_synced_at;
+  addAccountFormData.value = form;
   visible.value = true;
 };
 
@@ -152,6 +155,7 @@ const reset = () => {
   lastSyncedAt.value = null;
   syncType.value = INITIAL_SYNC_TYPE;
   showSyncTip.value = false;
+  addAccountFormData.value = null;
   clearFakeProgressTimer();
   clearStatusPollingTimer();
 };
@@ -251,27 +255,14 @@ const handleSyncData = () => {
   }
 };
 
-const onSelectSubAccounts = (selectedItems) => {
-  console.log({ selectedItems });
-
-  visible.value = true;
-  isLoading.value = true;
-  isCompleted.value = false;
-  progress.value = 0;
-  startFakeProgressPolling();
-  startStatusPolling();
-};
-
 const handleOk = () => {
-  // visible.value = false;
-  // selectSubAccountModalRef.value.open();
-  // return;
   // n天未同步更新
   if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
     handleSyncData();
     return;
   }
 
+  // 已完成
   if (isCompleted.value) {
     if (isSuccess.value) {
       update();
@@ -279,15 +270,25 @@ const handleOk = () => {
     } else {
       startLoading();
     }
-  } else {
-    formRef.value.validate(async (errors) => {
-      if (!errors) {
-        startLoading();
-      }
-    });
+    return;
   }
+
+  // 未完成，校验表单
+  formRef.value.validate(async (errors) => {
+    if (errors) return;
+    if (form.value.platform === ENUM_PLATFORM.jg) {
+      startLoading();
+    } else {
+      visible.value = false;
+      selectSubAccountModalRef.value.open({
+        ...addAccountFormData.value,
+        ...form.value,
+      });
+    }
+  });
 };
 
+provide('closeAuthorizeAccountModal', close);
 defineExpose({
   open,
 });

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts

@@ -1,20 +1,23 @@
 export const INITIAL_FORM = {
-  search: '',
-  id: '',
+  platform: '',
+  account: '',
+  password: '',
+  account_name: '',
+  account_id: '',
 };
 export const INITIAL_PAGE_INFO = {
   page: 1,
-  pageSize: 20,
+  page_size: 20,
   total: 0,
 };
 
 export const TABLE_COLUMNS = [
   {
     title: '账户名称',
-    dataIndex: 'name',
+    dataIndex: 'account_name',
   },
   {
     title: '账户ID',
-    dataIndex: 'id',
+    dataIndex: 'account_id',
   },
 ];

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue

@@ -11,12 +11,12 @@
       <div class="filter-row-item flex items-center">
         <span class="label">账户名称</span>
         <a-input
-          v-model="query.search"
+          v-model="query.account_name"
           class="w-240px"
           placeholder="请搜索..."
           size="medium"
           allow-clear
-          @change="handleSearch"
+          @change="reload"
         >
           <template #prefix>
             <icon-search />
@@ -26,12 +26,12 @@
       <div class="filter-row-item flex items-center">
         <span class="label">账户ID</span>
         <a-input
-          v-model="query.id"
+          v-model="query.account_id"
           class="w-240px"
           placeholder="请搜索..."
           size="medium"
           allow-clear
-          @change="handleSearch"
+          @change="reload"
         >
           <template #prefix>
             <icon-search />
@@ -44,16 +44,16 @@
       ref="tableRef"
       :data="dataSource"
       column-resizable
-      row-key="id"
       :row-selection="{
         type: 'checkbox',
         showCheckedAll: true,
         width: 48,
       }"
-      :selected-keys="selectedItems"
+      row-key="account_id"
+      :selected-keys="selectedRowKeys"
       :pagination="false"
-      :scroll="{ x: '100%' }"
-      class="w-100% flex-1"
+      :scroll="{ x: '100%', y: '100%' }"
+      class="w-100% flex-1 overflow-hidden"
       bordered
       @select="handleSelect"
       @select-all="handleSelectAll"
@@ -76,7 +76,6 @@
         >
           <template #title>
             <div class="flex items-center">
-              <img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
               <span class="cts mr-4px">{{ column.title }}</span>
               <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
                 <icon-question-circle class="tooltip-icon color-#737478" size="16" />
@@ -84,14 +83,7 @@
             </div>
           </template>
 
-          <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
-            {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
-          </template>
-          <template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
-            {{ exactFormatTime(record.time) }}
-          </template>
-
-          <template v-else #cell="{ record }">
+          <template #cell="{ record }">
             {{ formatTableField(column, record, true) }}
           </template>
         </a-table-column>
@@ -112,11 +104,19 @@
     </div>
     <template #footer>
       <span class="cts color-#3C4043 s1"
-        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedItems.length }}个</span>账户</span
+        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedAccounts.length }}个</span>账户</span
       >
       <div class="flex items-center">
         <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
-        <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onConfirm">添加已选账户</a-button>
+        <a-button
+          type="primary"
+          class="ml-16px"
+          status="danger"
+          size="large"
+          :disabled="!selectedAccounts.length"
+          @click="onConfirm"
+          >添加已选账户</a-button
+        >
       </div>
     </template>
   </a-modal>
@@ -124,69 +124,106 @@
 
 <script setup>
 import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
-import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
+import { formatTableField } from '@/utils/tools';
+import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
 
 const emits = defineEmits('confirm');
 const update = inject('update');
+const closeAddAccountModal = inject('closeAddAccountModal');
+const closeAuthorizeAccountModal = inject('closeAuthorizeAccountModal');
 
 const visible = ref(false);
 const dataSource = ref([]);
 const query = ref(cloneDeep(INITIAL_FORM));
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
-const selectedItems = ref([]);
+const form = ref(null);
 
-const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
-const indeterminate = computed(
-  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
-);
+const selectedAccounts = ref([]);
+const selectedRowKeys = ref([]);
+
+const open = (formData) => {
+  const { platform, account, password } = formData;
+  form.value = formData;
+  query.value = {
+    ...query.value,
+    platform,
+    account,
+    password,
+  };
 
-const open = () => {
   getData();
 
   visible.value = true;
 };
 const onClose = () => {
+  form.value = null;
+  selectedAccounts.value = [];
+  selectedRowKeys.value = [];
   query.value = cloneDeep(INITIAL_FORM);
   pageInfo.value = cloneDeep(INITIAL_FORM);
 
   visible.value = false;
 };
 
-const onConfirm = () => {
-  onClose();
-  emits('confirm', selectedItems);
+const onConfirm = async () => {
+  const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedAccounts.value });
+  if (code === 200) {
+    visible.value = false;
+    update();
+    closeAuthorizeAccountModal();
+    closeAddAccountModal();
+  }
 };
 
-const getData = () => {
-  dataSource.value = [
-    {
-      id: '1832880547948105',
-      name: '美团-人设组YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题-3',
-    },
-    {
-      id: '1832880548441993',
-      name: 'YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题',
-    },
-  ];
-  pageInfo.value.total = 2;
+const getData = async () => {
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await postSubAccount({
+    ...query.value,
+    page,
+    page_size,
+    // platform: 0,
+    // account: '543366265@qq.com',
+    // password: 'Xiaoti2025@',
+    // // page: 1,
+    // // page_size: 10,
+    // account_id: '',
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
 };
+
 const reload = () => {
   pageInfo.value.page = 1;
   getData();
 };
 
-const handleSearch = () => {
-  reload();
-};
-const handleSelect = (selectedRowKeys, selectedRows) => {
-  selectedItems.value = selectedRowKeys;
+const handleSelect = (selectedKeys, rowKey, record) => {
+  const select = selectedKeys.includes(rowKey);
+  selectedRowKeys.value = selectedKeys;
+
+  if (select) {
+    selectedAccounts.value.push(record);
+  } else {
+    selectedAccounts.value = selectedAccounts.value.filter((v) => v.account_id !== record.account_id);
+  }
 };
 
 const handleSelectAll = (checked) => {
+  const currentPageAccounts = dataSource.value;
+  const currentPageKeys = currentPageAccounts.map((v) => v.account_id);
+
   if (checked) {
-    selectedItems.value = dataSource.value.map((item) => item.id);
+    selectedRowKeys.value = Array.from(new Set([...selectedRowKeys.value, ...currentPageKeys]));
+
+    const allAccounts = [...selectedAccounts.value, ...currentPageAccounts];
+    const map = new Map();
+    allAccounts.forEach((acc) => map.set(acc.account_id, acc));
+    selectedAccounts.value = Array.from(map.values());
   } else {
-    selectedItems.value = [];
+    selectedRowKeys.value = selectedRowKeys.value.filter((key) => !currentPageKeys.includes(key));
+    selectedAccounts.value = selectedAccounts.value.filter((acc) => !currentPageKeys.includes(acc.account_id));
   }
 };
 
@@ -195,7 +232,7 @@ const onPageChange = (current) => {
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.value.pageSize = pageSize;
+  pageInfo.value.page_size = pageSize;
   reload();
 };
 

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss

@@ -11,6 +11,7 @@
   }
   .arco-modal-body {
     height: 536px;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     .filter-row {

src/views/property-marketing/put-account/common_constants.ts

@@ -2,6 +2,12 @@ import icon1 from '@/assets/img/media-account/icon-jl.png';
 import icon2 from '@/assets/img/media-account/icon-jg.png';
 import icon3 from '@/assets/img/media-account/icon-bili.png';
 
+export const ENUM_PLATFORM = {
+  jl: 0,
+  jg: 1,
+  bili: 2,
+};
+
 export const PLATFORM_LIST = [
   {
     label: '巨量',