feat: 账号管理-授权、添加、分组管理、标签管理

src/api/all/propertyMarketing.ts

@@ -56,7 +56,12 @@ export const getTemplateUrl = (params = {}) => {
 };
 
 // 媒体账号分组-分页
-export const getGroupList = (params = {}) => {
+export const getAccountGroup = (data: any) => {
+  return Http.get('/v1/media-account-groups', data);
+};
+
+// 媒体账号分组-列表
+export const getAccountGroupList = (params = {}) => {
   return Http.get('/v1/media-account-groups/list', params);
 };
 
@@ -124,7 +129,7 @@ export const startPatchAccount = (id: string) => {
 
 // 媒体账号-获取授权图片
 export const getAuthorizedImage = (id: string) => {
-  return Http.get(`/v1/media-accounts/${id}/authorized-image`);
+  return Http.get(`/v1/media-accounts/${id}/authorize/image`);
 };
 
 // 账号看板-数据总览
@@ -259,3 +264,13 @@ export const getPlacementAccountDataList = (params = {}) => {
 export const postPlacementAccountDataListExport = (params = {}) => {
   return Http.post('/v1/placement-account-projects/export', params);
 };
+
+// 媒体账号-批量添加
+export const batchMediaAccounts = (params = {}, config = {}) => {
+  return Http.post('/v1/media-accounts/batch', params, config);
+};
+
+// 媒体账号-查询授权状态
+export const getMediaAccountsAuthorizedStatus = (id: string) => {
+  return Http.get(`/v1/media-accounts/${id}/status`);
+};

src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue

@@ -16,7 +16,7 @@
   >
     <div class="flex items-center">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
-      <span>确认删除 {{ accountName }} 这个账号吗？</span>
+      <span>确认删除 {{ accountName || '-' }} 这个账号吗？</span>
     </div>
     <template #footer>
       <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>

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

@@ -14,7 +14,7 @@
     >
       <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
-        <p class="name">{{ item.name }}</p>
+        <p class="name">{{ item.name || '-' }}</p>
         <div class="field-row">
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
@@ -25,19 +25,19 @@
         </div>
         <div class="field-row">
           <span class="label">账号ID</span>
-          <span class="cts">{{ item.account_id }}</span>
+          <span class="cts">{{ item.account_id || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">手机号码</span>
-          <span class="cts">{{ item.mobile }}</span>
+          <span class="cts">{{ item.mobile || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">运营人员</span>
-          <span class="cts">{{ item.operator?.name }}</span>
+          <span class="cts">{{ item.operator?.name || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">分组</span>
-          <span class="cts">{{ item.group?.name }}</span>
+          <span class="cts">{{ item.group?.name || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">标签</span>
@@ -148,7 +148,8 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  const isUnauthorized = isUnauthorizedStatus(item.status);
+  // const isUnauthorized = isUnauthorizedStatus(item.status);
+  const isUnauthorized = false;
   if (isUnauthorized) {
     authorizedAccountModalRef.value?.open(item.id);
   } else {

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

@@ -21,32 +21,45 @@
 
       <!-- 批量导入账号模式下的内容 -->
       <template v-if="isBatchImport">
-        <a-form-item label="账号文件" required>
+        <a-form-item label="账户文件" required>
           <!-- 默认状态 -->
           <div class="upload-block">
-            <template v-if="uploadStatus === 'default'">
+            <template v-if="uploadStatus === UploadStatus.DEFAULT">
-              <a-upload draggable :custom-request="handleUpload" />
+              <a-upload
+                ref="uploadRef"
+                action="/"
+                draggable
+                :custom-request="handleUpload"
+                accept=".xlsx,.xls,.docx,.doc"
+                :show-file-list="false"
+              />
             </template>
             <template v-else>
               <div class="flex items-center">
                 <div
                   class="flex items-center justify-between py-9px px-12px flex-1 import-row"
                   :class="{
-                    error: uploadStatus === 'error',
+                    error: uploadStatus === UploadStatus.ERROR,
                   }"
                 >
                   <div class="flex items-center">
                     <icon-file size="16" />
                     <span class="name ml-8px">{{ fileName }}</span>
                   </div>
-                  <span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
+                  <span
+                    v-if="uploadStatus === UploadStatus.ERROR"
+                    class="upload-error flex-shrink-0"
+                    @click="handleBatchImport"
+                  >
+                    点击重试
+                  </span>
                 </div>
                 <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
               </div>
             </template>
             <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
               <img :src="icon1" width="16" height="16" class="mr-4px" />
-              <span class="dt">下载账号导入模板.xlsx</span>
+              <span class="dt">下载账户导入模板.xlsx</span>
             </div>
           </div>
         </a-form-item>
@@ -123,6 +136,7 @@ import {
   getMediaAccountsDetail,
   putMediaAccounts,
   getTemplateUrl,
+  batchMediaAccounts,
 } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-download.png';
@@ -130,31 +144,36 @@ import icon2 from '@/assets/img/media-account/icon-delete.png';
 import icon3 from '@/assets/img/media-account/icon-dy.png';
 import icon4 from '@/assets/img/media-account/icon-xhs.png';
 
-const groupOptions = ref([]);
+const emits = defineEmits(['update']);
-const tagOptions = ref([]);
+
-const visible = ref(false);
+const UploadStatus = {
-const uploadType = ref('manual');
+  DEFAULT: 'default',
-const uploadStatus = ref('default');
+  WAITING: 'waiting',
-const id = ref('');
+  ERROR: 'error',
-const isEdit = ref(false);
+};
-const fileName = ref('账号导入模板.xlsx');
+const INITIAL_FORM = {
-const formRef = ref();
-const authorizedAccountModalRef = ref(null);
-const importPromptModalRef = ref(null);
-const form = ref({
   mobile: '',
   operator_name: '',
   holder_name: '',
   platform: 0,
-  group_id: '',
+  group_id: undefined,
   tag_ids: [],
-});
+};
 
-const isBatchImport = computed(() => uploadType.value === 'batch');
+const groupOptions = ref([]);
-const confirmBtnText = computed(() => {
+const tagOptions = ref([]);
-  if (isBatchImport.value) return '确定导入';
+const visible = ref(false);
-  return isEdit.value ? '确定' : '生成授权码';
+const uploadType = ref('manual');
-});
+const uploadStatus = ref(UploadStatus.DEFAULT);
+const id = ref('');
+const isEdit = ref(false);
+const fileName = ref('');
+const formRef = ref();
+const file = ref(null);
+const authorizedAccountModalRef = ref(null);
+const importPromptModalRef = ref(null);
+const uploadRef = ref(null);
+const form = ref(cloneDeep(INITIAL_FORM));
 
 const rules = {
   mobile: [
@@ -178,6 +197,12 @@ const rules = {
   holder_name: [{ required: true, message: '请输入号码持有人' }],
 };
 
+const isBatchImport = computed(() => uploadType.value === 'batch');
+const confirmBtnText = computed(() => {
+  if (isBatchImport.value) return '确定导入';
+  return isEdit.value ? '确定' : '生成授权码';
+});
+
 // 获取分组数据
 const getGroups = async () => {
   try {
@@ -202,39 +227,41 @@ const getTags = async () => {
   }
 };
 
-function handleUpload({ file, onSuccess, onError }) {
+function handleUpload(option) {
-  // 模拟上传
+  const { fileItem } = option;
-  uploadStatus.value = 'error';
+
+  uploadStatus.value = UploadStatus.WAITING;
+
+  file.value = fileItem.file;
+  fileName.value = fileItem.name;
 }
 
 function removeFile() {
   fileName.value = '';
-  uploadStatus.value = 'default';
+  file.value = null;
+  uploadStatus.value = UploadStatus.DEFAULT;
 }
 
-function retryUpload() {
-  handleUpload();
-  // uploadStatus.value = 'default';
-}
 const reset = () => {
   formRef.value.resetFields();
   formRef.value.clearValidate();
 
+  form.value = cloneDeep(INITIAL_FORM);
   fileName.value = '';
+  file.value = null;
   isEdit.value = false;
-  uploadStatus.value = 'default';
+  uploadStatus.value = UploadStatus.DEFAULT;
   uploadType.value = 'manual';
 };
-function onClose() {
+const onClose = () => {
   reset();
   visible.value = false;
-}
+};
 
 const open = (accountId = '') => {
   id.value = accountId;
   isEdit.value = !!accountId;
 
-  console.log({ accountId });
   if (accountId) {
     getAccountDetail();
   }
@@ -251,9 +278,27 @@ const getAccountDetail = async () => {
   }
 };
 
-const handleBatchImport = () => {
+const handleBatchImport = async () => {
-  onClose();
+  try {
-  importPromptModalRef.value.open();
+    const formData = new FormData();
+    formData.append('file', file.value);
+
+    const { code } = await batchMediaAccounts(formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    if (code === 200) {
+      AMessage.success('导入成功');
+      emits('update');
+      onClose();
+      importPromptModalRef.value.open();
+    } else {
+      uploadStatus.value = UploadStatus.ERROR;
+    }
+  } catch (error) {
+    uploadStatus.value = UploadStatus.ERROR;
+  }
 };
 
 async function onSubmit() {
@@ -262,27 +307,26 @@ async function onSubmit() {
     return;
   }
 
-  handleSuccess();
-
   formRef.value.validate(async (errors) => {
     if (!errors) {
       const _fn = id.value ? putMediaAccounts : postMediaAccounts;
-      const _params = id.value ? { id: id.value, ...form.value } : form;
+      const _params = id.value ? { id: id.value, ...form.value } : form.value;
       const { code, data } = await _fn(_params);
       if (code === 200) {
-        AMessage.success(isEdit.value ? '修改成功' : '生成授权码成功');
+        isEdit.value && AMessage.success('修改成功');
+        emits('update');
 
         if (isEdit.value) {
-          visible.value = false;
+          onClose();
         } else {
-          handleSuccess(data?.id);
+          startAuthorized(data?.id);
         }
       }
     }
   });
 }
 
-const handleSuccess = (id) => {
+const startAuthorized = (id) => {
   authorizedAccountModalRef.value.open(id);
 };
 

src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss

@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Medium';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: 'PuHuiTi-Regular';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

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

@@ -31,19 +31,15 @@
           <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
         <template v-else>
-          <!-- <div class="flex items-center mb-16px">
-            <img :src="icon1" width="16" height="16" />
-            <span class="ml-8px red-text">未识别到有效二维码。</span>
-          </div> -->
           <div class="img-box">
-            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+            <img :src="imgUrl" width="160" height="160" />
-            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
+            <div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
               <p class="s1">请点击刷新</p>
             </div>
           </div>
-          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+          <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
         </template>
       </template>
     </div>
@@ -55,15 +51,17 @@
 </template>
 
 <script setup>
-import { defineExpose, ref, onUnmounted } from 'vue';
+import { defineExpose, ref } from 'vue';
-import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
+import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 
-import icon1 from '@/assets/img/media-account/icon-warn.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 
-const OVERDUE_TIME = 30000; // 失效时间
+// 失效时间
 
+const emits = defineEmits(['update']);
+
+const OVERDUE_TIME = 30000;
 const visible = ref(false);
 const isOverdue = ref(false); // 二维码失效
 const isLoading = ref(false);
@@ -76,12 +74,10 @@ const imgUrl = ref('');
 
 let progressTimer = null;
 let overdueTimer = null;
+let statusPollingTimer = null;
 
-const notCompleted = computed(() => {
-  return !isCompleted.value;
-});
 const confirmBtnText = computed(() => {
-  if (notCompleted.value) return '完成扫码';
+  if (!isCompleted.value) return '完成扫码';
   return isSuccess.value ? '继续添加' : '重新扫码';
 });
 
@@ -90,15 +86,20 @@ const open = (accountId) => {
   getAuthorizedQrCode();
   visible.value = true;
 };
-const close = () => {
+const resetTaskFields = () => {
   isOverdue.value = false;
   isLoading.value = false;
   isCompleted.value = false;
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
+  imgUrl.value = '';
+};
+const close = () => {
+  resetTaskFields();
   id.value = '';
   clearFakeProgressTimer();
+  clearStatusPollingTimer();
   clearOverdueTimer();
   visible.value = false;
 };
@@ -106,8 +107,9 @@ const close = () => {
 const getAuthorizedQrCode = async () => {
   const { code, data } = await getAuthorizedImage(id.value);
   if (code === 200) {
-    imgUrl.value = data.url;
+    imgUrl.value = data.image;
     overdueTimer = null;
+    isOverdue.value = false;
 
     // 约定：后端限制40s内必须扫码，前端定30s后失效
     overdueTimer = setTimeout(() => {
@@ -115,27 +117,62 @@ const getAuthorizedQrCode = async () => {
     }, OVERDUE_TIME);
   }
 };
+
+const clearStatusPollingTimer = () => {
+  if (statusPollingTimer) {
+    clearInterval(statusPollingTimer);
+    statusPollingTimer = null;
+  }
+};
+
+const startStatusPolling = () => {
+  clearStatusPollingTimer();
+  statusPollingTimer = setInterval(async () => {
+    if (!isCompleted.value) {
+      await getAuthorizedStatus();
+      if (isCompleted.value) {
+        progress.value = 1;
+        clearFakeProgressTimer();
+        clearStatusPollingTimer();
+        isLoading.value = false;
+      }
+    }
+  }, 2000);
+};
+
 const startLoading = async () => {
   isLoading.value = true;
+  isCompleted.value = false;
   progress.value = 0;
   startFakeProgressPolling();
-  // const { code } = await startPatchAccount(id.value);
+  startStatusPolling();
-  // if (code === 200) {
+};
-  //   isLoading.value = true;
+
-  //   progress.value = 0;
+const getAuthorizedStatus = async () => {
-  //   startFakeProgressPolling();
+  const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
-  // }
+  if (code === 200) {
+    const { status, message } = data;
+    if (status !== 0) {
+      isCompleted.value = true;
+      isSuccess.value = status === 1;
+      failReason.value = status === 2 ? message : '';
+      isOverdue.value = false;
+    }
+  }
 };
 
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (progress.value < 0.99) {
+    if (!isCompleted.value && progress.value < 0.99) {
       const step = Math.random() * 0.04 + 0.01;
       progress.value = Math.min(progress.value + step, 0.99);
       progress.value = Number(progress.value.toFixed(2));
+    } else if (!isCompleted.value && progress.value >= 0.99) {
+      progress.value = 0.99; // 卡在99%
     } else {
       clearFakeProgressTimer();
+      clearStatusPollingTimer();
     }
   }, 1000);
 };
@@ -154,16 +191,27 @@ const clearOverdueTimer = () => {
 };
 
 const handleOk = () => {
-  if (notCompleted.value) {
+  if (!imgUrl.value) {
+    AMessage.error('二维码获取中，请稍等');
+    return;
+  }
+
+  if (isOverdue.value) {
+    AMessage.error('二维码已失效，请重新扫码');
+    return;
+  }
+
+  if (isCompleted.value) {
     clearOverdueTimer();
 
-    if (isOverdue.value) {
+    if (isSuccess.value) {
-      AMessage.error('二维码已失效，请重新扫码');
+      close();
-      return;
+    } else {
+      resetTaskFields();
+      getAuthorizedQrCode();
     }
-
+  } else {
     startLoading();
-    return;
   }
 };
 

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: 'PuHuiTi-Regular';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: 'PuHuiTi-Regular';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue

@@ -135,9 +135,15 @@ const getOperators = async () => {
 };
 
 onMounted(() => {
-  // getTags();
+  getTags();
-  // getGroups();
+  getGroups();
-  // getOperators();
+  getOperators();
+});
+
+defineExpose({
+  getGroups,
+  getOperators,
+  getTags,
 });
 </script>
 

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue

@@ -12,79 +12,75 @@
     :mask-closable="false"
     @close="close"
   >
-    <template v-if="!list.length">
+    <div class="flex items-center justify-between mb-16px">
-      <div class="flex items-center justify-center flex-col">
+      <div class="filter-row-item flex items-center">
-        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+        <span class="s1 !color-#211F24 mr-12px">分组名称</span>
-          <img :src="icon2" width="106" height="72" />
+        <a-space size="medium" class="w-240px">
-        </div>
+          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-        <span class="s1 mb-16px">暂无分组</span>
+            <template #prefix>
-        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+              <icon-search />
-          ><template #icon>
+            </template>
-            <img :src="icon3" width="16" height="16" />
+          </a-input>
-          </template>
+        </a-space>
-          <template #default>去添加</template>
-        </a-button>
       </div>
-    </template>
+      <a-button type="primary" size="medium" @click="openAdd"
-    <template v-else>
+        ><template #icon>
-      <div class="flex items-center justify-between mb-16px">
+          <img :src="icon3" width="16" height="16" />
-        <div class="filter-row-item flex items-center">
-          <span class="s1 !color-#211F24 mr-12px">分组名称</span>
-          <a-space size="medium" class="w-240px">
-            <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-              <template #prefix>
-                <icon-search />
-              </template>
-            </a-input>
-          </a-space>
-        </div>
-        <a-button type="primary" size="medium" @click="openAdd"
-          ><template #icon>
-            <img :src="icon3" width="16" height="16" />
-          </template>
-          <template #default>添加新分组</template>
-        </a-button>
-      </div>
-      <a-table
-        :columns="columns"
-        :data="list"
-        row-key="id"
-        :loading="loading"
-        :scroll="{ y: 500 }"
-        class="h-500px"
-        :pagination="false"
-        @sorter-change="handleSorterChange"
-      >
-        <template #action="{ record }">
-          <div class="flex items-center">
-            <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
-            <a-button type="primary" @click="openEdit(record)">编辑</a-button>
-          </div>
         </template>
-      </a-table>
+        <template #default>添加新分组</template>
-      <div class="pagination-box flex justify-end">
+      </a-button>
-        <a-pagination
+    </div>
-          :total="pageInfo.total"
-          size="mini"
-          show-total
-          show-jumper
-          show-page-size
-          :current="pageInfo.page"
-          :page-size="pageInfo.pageSize"
-          @change="onPageChange"
-          @page-size-change="onPageSizeChange"
-        />
-      </div>
-    </template>
 
-    <AddGroup ref="addGroupRef" @success="getData" />
+    <a-table
-    <DeleteGroup ref="deleteGroupRef" @success="getData" />
+      :columns="columns"
+      :data="list"
+      row-key="id"
+      :loading="loading"
+      :scroll="{ y: 500 }"
+      class="h-500px"
+      :pagination="false"
+      @sorter-change="handleSorterChange"
+    >
+      <template #empty>
+        <NoData>
+          <span class="s1 mb-16px">暂无分组</span>
+          <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+            ><template #icon>
+              <img :src="icon3" width="16" height="16" />
+            </template>
+            <template #default>去添加</template>
+          </a-button>
+        </NoData>
+      </template>
+      <template #action="{ record }">
+        <div class="flex items-center">
+          <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+          <a-button type="primary" @click="openEdit(record)">编辑</a-button>
+        </div>
+      </template>
+    </a-table>
+    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.pageSize"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+
+    <AddGroup ref="addGroupRef" @success="update" />
+    <DeleteGroup ref="deleteGroupRef" @success="update" />
   </a-modal>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { getGroupList } from '@/api/all/propertyMarketing';
+import { getAccountGroup } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
 
 import AddGroup from './add-group.vue';
@@ -94,6 +90,8 @@ import icon1 from '@/assets/img/media-account/icon-delete.png';
 import icon2 from '@/assets/img/media-account/icon-empty.png';
 import icon3 from '@/assets/img/media-account/icon-add.png';
 
+const emit = defineEmits(['update']);
+
 const visible = ref(false);
 const isEdit = ref(false);
 const addGroupRef = ref(null);
@@ -105,8 +103,8 @@ const list = ref([]);
 const loading = ref(false);
 const query = ref({
   name: '',
-  column: '',
+  sort_column: '',
-  order: '',
+  sort_order: '',
 });
 const pageInfo = ref({
   page: 1,
@@ -114,11 +112,6 @@ const pageInfo = ref({
   total: 0,
 });
 
-const sortInfo = ref({
-  field: '',
-  direction: '',
-});
-
 const columns = [
   { title: '分组名称', dataIndex: 'name' },
   {
@@ -145,11 +138,11 @@ function open() {
 
 const close = () => {
   query.value.name = '';
+  query.value.sort_column = '';
+  query.value.sort_order = '';
   pageInfo.value.page = 1;
   pageInfo.value.pageSize = 20;
   pageInfo.value.total = 0;
-  query.value.column = '';
-  query.value.order = '';
   list.value = [];
   visible.value = false;
 };
@@ -167,8 +160,8 @@ function openDelete(record) {
 }
 
 const handleSorterChange = (column, order) => {
-  query.value.column = column;
+  query.value.sort_column = column;
-  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
   getData();
 };
 
@@ -181,7 +174,7 @@ async function getData() {
       pageSize,
       ...query.value,
     };
-    const { code, data } = await getGroupList(params);
+    const { code, data } = await getAccountGroup(params);
     if (code === 200) {
       list.value = data?.data ?? [];
       pageInfo.value.total = data.total;
@@ -204,6 +197,10 @@ const onPageSizeChange = (pageSize) => {
   pageInfo.value.pageSize = pageSize;
   reload();
 };
+const update = () => {
+  getData();
+  emit('update');
+};
 
 defineExpose({ open });
 </script>

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss

@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: 'PuHuiTi-Regular';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Medium';
+          font-family: 'PuHuiTi-Regular';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue

@@ -14,11 +14,14 @@
     <div class="flex flex-col items-center">
       <div class="flex items-center">
         <img :src="icon1" width="20" height="20" class="mr-12px" />
-        <span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
+        <div class="flex flex-col">
+          <p class="tip">账号已导入成功，当前状态为“未授权”。</p>
+          <p class="tip">请前往卡片列表手动完成授权，完成后账号即可正常使用。</p>
+        </div>
       </div>
     </div>
     <template #footer>
-      <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+      <a-button size="large" class="cancel-btn" @click="close">取消</a-button>
       <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
     </template>
   </a-modal>

src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss

@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: 'PuHuiTi-Regular';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue

@@ -14,7 +14,7 @@
   >
     <div class="flex flex-col items-center">
       <template v-if="taskStep === TASK_STEP.default">
-        <template v-if="hasUnsyncData">
+        <!-- <template v-if="hasUnsyncData">
           <div class="flex items-center mb-20px">
             <img :src="icon4" width="16" height="16" class="mr-16px" />
             <span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
@@ -29,19 +29,19 @@
               ><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
             >
           </a-radio-group>
-        </template>
+        </template> -->
-        <template v-else>
+        <!-- <template v-else> -->
-          <div class="img-box">
+        <div class="img-box">
-            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+          <img :src="imgUrl" width="160" height="160" />
-            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
+          <div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
-              <icon-refresh size="24" class="mb-13px" />
+            <icon-refresh size="24" class="mb-13px" />
-              <p class="s1">二维码失效</p>
+            <p class="s1">二维码失效</p>
-              <p class="s1">请点击刷新</p>
+            <p class="s1">请点击刷新</p>
-            </div>
           </div>
-          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+        </div>
-        </template>
+        <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
       </template>
+      <!-- </template> -->
       <template v-else-if="taskStep === TASK_STEP.loading">
         <a-progress
           :percent="progress"
@@ -75,7 +75,7 @@
     </div>
     <template #footer>
       <a-button
-        v-if="(taskStep === TASK_STEP.default && hasUnsyncData) || taskStep === TASK_STEP.end"
+        v-if="taskStep === TASK_STEP.default || taskStep === TASK_STEP.end"
         size="large"
         class="cancel-btn"
         @click="close"
@@ -88,7 +88,7 @@
 
 <script setup>
 import { defineExpose, ref, onUnmounted } from 'vue';
-import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
+import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-warn.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@@ -111,16 +111,18 @@ const id = ref('');
 const imgUrl = ref('');
 
 const taskStep = ref(TASK_STEP.default);
-const hasUnsyncData = ref(false); // 含有未同步数据
+// const hasUnsyncData = ref(false); // 含有未同步数据
 const isNicknameChanged = ref(false); // 昵称发生变化
 const actionType = ref(1);
 
 let progressTimer = null;
 let overdueTimer = null;
+let statusPollingTimer = null;
 
 const confirmBtnText = computed(() => {
   if (taskStep.value === TASK_STEP.default) {
-    return hasUnsyncData.value ? '确定' : '完成扫码';
+    // return hasUnsyncData.value ? '确定' : '完成扫码';
+    return '完成扫码';
   }
 
   if (taskStep.value === TASK_STEP.end) {
@@ -136,26 +138,57 @@ const open = (accountId) => {
   getAuthorizedQrCode();
   visible.value = true;
 };
-const close = () => {
+const resetTaskFields = () => {
   isOverdue.value = false;
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
-  taskStep.value = TASK_STEP.default;
+  imgUrl.value = '';
-  actionType.value = 1;
-  hasUnsyncData.value = false;
   isNicknameChanged.value = false;
+  actionType.value = 1;
+  taskStep.value = TASK_STEP.default;
+};
+const close = () => {
+  resetTaskFields();
   id.value = '';
   clearFakeProgressTimer();
   clearOverdueTimer();
   visible.value = false;
 };
 
+const getAuthorizedStatus = async () => {
+  const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
+  if (code === 200) {
+    const { status, message } = data;
+    if (status !== 0) {
+      taskStep.value = TASK_STEP.end;
+      isSuccess.value = status === 1;
+      failReason.value = status === 2 ? message : '';
+      isOverdue.value = false;
+    }
+  }
+};
+
+const startStatusPolling = () => {
+  clearStatusPollingTimer();
+  statusPollingTimer = setInterval(async () => {
+    if (taskStep.value === TASK_STEP.loading) {
+      await getAuthorizedStatus();
+      if (taskStep.value === TASK_STEP.end) {
+        progress.value = 1;
+        clearFakeProgressTimer();
+        clearStatusPollingTimer();
+      }
+    }
+  }, 2000);
+};
+
 const getAuthorizedQrCode = async () => {
   const { code, data } = await getAuthorizedImage(id.value);
   if (code === 200) {
-    imgUrl.value = data.url;
+    imgUrl.value = data.image;
     overdueTimer = null;
+    isOverdue.value = false;
 
     // 约定：后端限制40s内必须扫码，前端定30s后失效
     overdueTimer = setTimeout(() => {
@@ -163,28 +196,28 @@ const getAuthorizedQrCode = async () => {
     }, OVERDUE_TIME);
   }
 };
+
 const startLoading = async () => {
   taskStep.value = TASK_STEP.loading;
   progress.value = 0;
   startFakeProgressPolling();
-  // const { code } = await startPatchAccount(id.value);
+  startStatusPolling();
-  // if (code === 200) {
-  //   taskStep.value = TASK_STEP.loading;
-  //   progress.value = 0;
-  //   startFakeProgressPolling();
-  // }
 };
 
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (progress.value < 0.99) {
+    if (taskStep.value === TASK_STEP.loading) {
-      const step = Math.random() * 0.04 + 0.01;
+      if (progress.value < 0.99) {
-      progress.value = Math.min(progress.value + step, 0.99);
+        const step = Math.random() * 0.04 + 0.01;
-      progress.value = Number(progress.value.toFixed(2));
+        progress.value = Math.min(progress.value + step, 0.99);
+        progress.value = Number(progress.value.toFixed(2));
+      } else if (progress.value >= 0.99) {
+        progress.value = 0.99; // 卡在99%
+      }
     } else {
-      taskStep.value = TASK_STEP.end;
       clearFakeProgressTimer();
+      clearStatusPollingTimer();
     }
   }, 1000);
 };
@@ -202,22 +235,23 @@ const clearOverdueTimer = () => {
   }
 };
 
-const getSyncDataStatus = () => {
+const clearStatusPollingTimer = () => {
-  return hasUnsyncData.value;
+  if (statusPollingTimer) {
+    clearInterval(statusPollingTimer);
+    statusPollingTimer = null;
+  }
 };
 
 const handleOk = () => {
   if (taskStep.value === TASK_STEP.default) {
     clearOverdueTimer();
 
-    if (isOverdue.value) {
+    if (!imgUrl.value) {
-      AMessage.error('二维码已失效，请重新扫码');
+      AMessage.error('二维码获取中，请稍等');
       return;
     }
-
+    if (isOverdue.value) {
-    const _hasUnsyncData = getSyncDataStatus();
+      AMessage.error('二维码已失效，请重新扫码');
-    if (!_hasUnsyncData) {
-      hasUnsyncData.value = true;
       return;
     }
 
@@ -231,9 +265,10 @@ const handleOk = () => {
       console.log('确定覆盖');
     } else {
       if (isSuccess.value) {
-        console.log('继续添加');
+        close();
       } else {
-        console.log('重新扫码');
+        resetTaskFields();
+        getAuthorizedQrCode();
       }
     }
   }

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue

@@ -8,42 +8,53 @@
     width="800px"
     modal-class="tags-manage-modal"
     :footer="false"
+    title="标签管理"
     :mask-closable="false"
     @close="close"
   >
-    <template #title>标签管理</template>
+    <div class="flex items-center justify-between mb-16px">
-    <template v-if="!list.length">
+      <div class="filter-row-item flex items-center">
-      <div class="flex items-center justify-center flex-col">
+        <span class="s1 !color-#211F24 mr-12px">分组名称</span>
-        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+        <a-space size="medium" class="w-240px">
-          <img :src="iconEmpty" width="106" height="72" />
+          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-        </div>
+            <template #prefix>
-        <span class="s1 mb-16px">暂无标签</span>
+              <icon-search />
-        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
+            </template>
-          <template #icon>
+          </a-input>
-            <img :src="iconAdd" width="16" height="16" />
+        </a-space>
-          </template>
-          <template #default>去添加</template>
-        </a-button>
       </div>
-    </template>
-    <template v-else>
       <a-button type="primary" size="medium" @click="openAdd">
         <template #icon>
           <img :src="iconAdd" width="16" height="16" />
         </template>
         <template #default>添加新标签</template>
       </a-button>
-      <div class="tag-list">
+    </div>
-        <a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
+
+    <div class="h-300px">
+      <div v-if="showDataSource.length" class="tag-list">
+        <a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
           <div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
             <span>{{ tag.name }}</span>
             <img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
           </div>
         </a-tooltip>
       </div>
-    </template>
+      <template v-else>
-    <AddTag ref="addTagRef" @success="getData" />
+        <NoData>
-    <DeleteTag ref="deleteTagRef" @success="getData" />
+          <span class="s1 mb-16px">暂无标签</span>
+          <a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
+            <template #icon>
+              <img :src="iconAdd" width="16" height="16" class="relative top-2px" />
+            </template>
+            <template #default>去添加</template>
+          </a-button>
+        </NoData>
+      </template>
+    </div>
+
+    <AddTag ref="addTagRef" @success="update" />
+    <DeleteTag ref="deleteTagRef" @success="update" />
   </a-modal>
 </template>
 
@@ -55,29 +66,29 @@ import AddTag from './add-tag.vue';
 import DeleteTag from './delete-tag.vue';
 
 import iconAdd from '@/assets/img/media-account/icon-add.png';
-import iconEmpty from '@/assets/img/media-account/icon-empty.png';
 import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
 
+const emit = defineEmits(['update']);
+
 const visible = ref(false);
-const list = ref([]);
+const allDataSource = ref([]);
+const showDataSource = ref([]);
 const addTagRef = ref(null);
 const deleteTagRef = ref(null);
+const query = ref({
+  name: '',
+});
 
 const getData = async () => {
-  list.value = [
+  const { code, data } = await getTagsList();
-    { id: 1, name: '测试1' },
+  if (code === 200) {
-    { id: 2, name: '测试2' },
+    allDataSource.value = data ?? [];
-    { id: 3, name: '测试3' },
+    showDataSource.value = allDataSource.value;
-    { id: 4, name: '测试4' },
+  }
-    { id: 5, name: '测试5' },
+};
-    { id: 6, name: '测试6' },
+
-    { id: 7, name: '测试7' },
+const handleSearch = () => {
-    { id: 8, name: '测试8' },
+  showDataSource.value = allDataSource.value.filter((item) => item.name.includes(query.value.name));
-    { id: 9, name: '测试9' },
-    { id: 10, name: '测试10' },
-  ];
-  // const { code, data } = await getTagsList();
-  // if (code === 200) list.value = data.list;
 };
 
 const open = () => {
@@ -85,6 +96,9 @@ const open = () => {
   getData();
 };
 const close = () => {
+  showDataSource.value = [];
+  allDataSource.value = [];
+  query.value.name = '';
   visible.value = false;
 };
 const openAdd = () => {
@@ -99,39 +113,14 @@ function openEdit(record) {
 function openDelete(record) {
   deleteTagRef.value.open(record);
 }
+const update = () => {
+  getData();
+  emit('update');
+};
 
 defineExpose({ open });
 </script>
 
 <style lang="scss">
 @import './style.scss';
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding-top: 16px;
-  .tag-item {
-    display: flex;
-    align-items: center;
-    background: #f5f5f5;
-    border-radius: 4px;
-    padding: 4px 12px;
-    position: relative;
-    .delete-icon {
-      position: absolute;
-      z-index: 1;
-      top: -6px;
-      right: -6px;
-      cursor: pointer;
-      width: 12px;
-      height: 12px;
-      display: none;
-    }
-    &:hover {
-      .delete-icon {
-        display: block;
-      }
-    }
-  }
-}
 </style>

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss

@@ -5,7 +5,6 @@
 
   .arco-modal-body {
     padding: 24px 24px 44px !important;
-    max-height: 304px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -16,25 +15,31 @@
       }
     }
     .tag-list {
-      flex: 1;
-      overflow-y: auto;
       display: flex;
       flex-wrap: wrap;
+      gap: 12px;
       .tag-item {
+        height: 24px;
         display: flex;
-        height: 32px;
-        padding: 0px 8px;
         align-items: center;
-        border-radius: 2px;
+        background: #f5f5f5;
-        background: var(--BG-200, #f2f3f5);
+        border-radius: 4px;
-        gap: 12px;
+        padding: 4px 12px;
-        .text {
+        position: relative;
-          color: var(--Text-2, #3c4043);
+        .delete-icon {
-          font-family: 'PuHuiTi-Medium';
+          position: absolute;
-          font-size: 14px;
+          z-index: 1;
-          font-style: normal;
+          top: -6px;
-          font-weight: 400;
+          right: -6px;
-          line-height: 22px; /* 157.143% */
+          cursor: pointer;
+          width: 12px;
+          height: 12px;
+          display: none;
+        }
+        &:hover {
+          .delete-icon {
+            display: block;
+          }
         }
       }
     }

src/views/property-marketing/media-account/account-manage/constants.ts

@@ -11,6 +11,12 @@ export const INITIAL_QUERY = {
   tag_ids: [],
 };
 
+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  pageSize: 8,
+  total: 0,
+};
+
 export const PLATFORM_LIST = [
   {
     label: '抖音',
@@ -23,10 +29,10 @@ export const PLATFORM_LIST = [
 ];
 
 export enum EnumStatus {
-  NORMAL = 1,
-  PAUSE = 3,
   UNAUTHORIZED = 0,
+  NORMAL = 1,
   ABNORMAL = 2,
+  PAUSE = 3,
   ABNORMAL_LOGIN = 4,
   ABNORMAL_REQUEST = 5,
   ABNORMAL_FREEZE = 6,

src/views/property-marketing/media-account/account-manage/index.vue

@@ -28,7 +28,7 @@
           </a-button>
         </div>
       </div>
-      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
 
     <div
@@ -80,13 +80,16 @@
     </div>
     <div class="card-wrap">
       <AccountTable
+        v-if="dataSource.length > 0"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
       />
-      <div class="pagination-box">
+      <NoData v-else />
+
+      <div v-if="pageInfo.total > 0" class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -101,9 +104,9 @@
       </div>
     </div>
 
-    <GroupManageModal ref="groupManageModalRef" />
+    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
-    <TagsManageModal ref="tagsManageModalRef" />
+    <TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
-    <AddAccountModal ref="addAccountModalRef" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" />
     <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
     <BatchTagModal ref="batchTagModalRef" @update="getData" />
     <BatchGroupModal ref="batchGroupModalRef" @update="getData" />
@@ -122,7 +125,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 } from './constants';
+import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { getMediaAccounts } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
@@ -138,13 +141,10 @@ const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
 const batchTagModalRef = ref(null);
 const batchGroupModalRef = ref(null);
+const filterBlockRef = ref(null);
 
 const tipStatus = ref(2);
-const pageInfo = reactive({
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
-  page: 1,
-  pageSize: 8,
-  total: 0,
-});
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
@@ -161,95 +161,37 @@ onMounted(() => {
 });
 
 const getData = async () => {
-  console.log('getData');
+  const { page, pageSize } = pageInfo.value;
-  // const { page, pageSize } = pageInfo;
+  const { code, data } = await getMediaAccounts({
-  // const { code, data, total } = await getMediaAccounts({
+    page,
-  //   page,
+    page_size: pageSize,
-  //   page_size: pageSize,
+    ...query.value,
-  //   ...query.value,
+  });
-  // });
+  if (code === 200) {
-  // if (code === 200) {
+    dataSource.value = data?.data ?? [];
-  //   dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data?.total ?? 0;
-  //   pageInfo.total = data?.total ?? 0;
+  }
-  // }
-  dataSource.value = [
-    {
-      id: 1,
-      name: '全球',
-      account_id: 1,
-      mobile: 1777777,
-      status: 0,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-        {
-          name: '标签3',
-        },
-        {
-          name: '标签4',
-        },
-        {
-          name: '标签5',
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: '全球2',
-      account_id: 1,
-      mobile: 1777777,
-      status: 4,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-      ],
-    },
-  ];
 };
 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
   getData();
 };
 const handleSearch = () => {
   getData();
 };
 const handleReset = () => {
-  pageInfo.page = 1;
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
   selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
   reload();
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
   reload();
 };
 

src/views/property-marketing/put-account/account-data/components/filter-block/index.vue

@@ -7,7 +7,7 @@
   <div class="container px-24px">
     <div class="filter-row flex mb-20px">
       <div class="filter-row-item flex items-center">
-        <span class="label">账号名称</span>
+        <span class="label">账户名称</span>
         <a-space size="medium" class="w-240px">
           <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
             <template #prefix>
@@ -17,7 +17,7 @@
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
-        <span class="label">项目分组</span>
+        <span class="label">计划分组</span>
         <a-space class="w-200px">
           <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>

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

@@ -12,74 +12,65 @@
     :mask-closable="false"
     @close="close"
   >
-    <template v-if="!list.length">
+    <div class="flex items-center justify-between mb-16px">
-      <div class="flex items-center justify-center flex-col">
+      <div class="filter-row-item flex items-center">
-        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+        <span class="s1 !color-#211F24 mr-12px">分组名称</span>
-          <img :src="icon2" width="106" height="72" />
+        <a-space size="medium" class="w-240px">
-        </div>
+          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-        <span class="s1 mb-16px">暂无分组</span>
+            <template #prefix>
-        <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+              <icon-search />
-          ><template #icon>
+            </template>
-            <img :src="icon3" width="16" height="16" class="relative top-3px" />
+          </a-input>
-          </template>
+        </a-space>
-          <template #default>去添加</template>
-        </a-button>
       </div>
-    </template>
+      <a-button type="primary" size="medium" @click="openAdd"
-    <template v-else>
+        ><template #icon>
-      <div class="flex items-center justify-between mb-16px">
+          <img :src="icon3" width="16" height="16" />
-        <div class="filter-row-item flex items-center">
-          <span class="s1 !color-#211F24 mr-12px">分组名称</span>
-          <a-space size="medium" class="w-240px">
-            <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-              <template #prefix>
-                <icon-search />
-              </template>
-            </a-input>
-          </a-space>
-        </div>
-        <a-button type="primary" size="medium" @click="openAdd"
-          ><template #icon>
-            <img :src="icon3" width="16" height="16" />
-          </template>
-          <template #default>添加新分组</template>
-        </a-button>
-      </div>
-
-      <a-table
-        :columns="columns"
-        :data="list"
-        row-key="id"
-        :loading="loading"
-        :scroll="{ y: 500 }"
-        class="h-500px"
-        :pagination="false"
-        @sorter-change="handleSorterChange"
-      >
-        <template #empty>
-          <NoData />
         </template>
-        <template #action="{ record }">
+        <template #default>添加新分组</template>
-          <div class="flex items-center">
+      </a-button>
-            <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+    </div>
-            <a-button type="primary" @click="openEdit(record)">编辑</a-button>
+    <a-table
-          </div>
+      :columns="columns"
-        </template>
+      :data="list"
-      </a-table>
+      row-key="id"
-      <div class="pagination-box flex justify-end">
+      :loading="loading"
-        <a-pagination
+      :scroll="{ y: 500 }"
-          :total="pageInfo.total"
+      class="h-500px"
-          size="mini"
+      :pagination="false"
-          show-total
+      @sorter-change="handleSorterChange"
-          show-jumper
+    >
-          show-page-size
+      <template #empty>
-          :current="pageInfo.page"
+        <NoData>
-          :page-size="pageInfo.pageSize"
+          <span class="s1 mb-16px">暂无分组</span>
-          @change="onPageChange"
+          <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
-          @page-size-change="onPageSizeChange"
+            ><template #icon>
-        />
+              <img :src="icon3" width="16" height="16" class="relative top-3px" />
-      </div>
+            </template>
-    </template>
+            <template #default>去添加</template>
+          </a-button>
+        </NoData>
+      </template>
+      <template #action="{ record }">
+        <div class="flex items-center">
+          <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+          <a-button type="primary" @click="openEdit(record)">编辑</a-button>
+        </div>
+      </template>
+    </a-table>
+    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.pageSize"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
 
     <AddGroup ref="addGroupRef" @success="update" />
     <DeleteGroup ref="deleteGroupRef" @success="update" />
@@ -107,8 +98,8 @@ const list = ref([]);
 const loading = ref(false);
 const query = ref({
   name: '',
-  column: '',
+  sort_column: '',
-  order: '',
+  sort_order: '',
 });
 const pageInfo = ref({
   page: 1,
@@ -148,8 +139,8 @@ const close = () => {
   pageInfo.value.page = 1;
   pageInfo.value.pageSize = 20;
   pageInfo.value.total = 0;
-  query.value.column = '';
+  query.value.sort_column = '';
-  query.value.order = '';
+  query.value.sort_order = '';
   list.value = [];
   visible.value = false;
 };
@@ -167,8 +158,8 @@ function openDelete(record) {
 }
 
 const handleSorterChange = (column, order) => {
-  query.value.column = column;
+  query.value.sort_column = column;
-  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
   getData();
 };
 async function getData() {

src/views/property-marketing/put-account/account-data/index.vue

@@ -7,7 +7,7 @@
     <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
       <a-tabs v-model="activeTab" @tab-click="handleTabClick">
         <a-tab-pane key="1" title="账户"></a-tab-pane>
-        <a-tab-pane key="2" title="项目"></a-tab-pane>
+        <a-tab-pane key="2" title="计划"></a-tab-pane>
         <template v-if="!isAccountTab" #extra>
           <a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
             <template #icon>
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <GroupManageModal ref="groupManageModalRef" @update="() => filterBlockRef?.getGroups()" />
+    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
   </div>
 </template>
 

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

@@ -160,6 +160,13 @@ const UploadStatus = {
   WAITING: 'waiting',
   ERROR: 'error',
 };
+const INITIAL_FORM = {
+  mobile: '',
+  operator_name: '',
+  holder_name: '',
+  platform: 0,
+  is_sync: 0,
+};
 
 const visible = ref(false);
 const uploadType = ref('manual');
@@ -172,13 +179,7 @@ const authorizedAccountModalRef = ref(null);
 // const importPromptModalRef = ref(null);
 const uploadRef = ref(null);
 const file = ref(null);
-const form = ref({
+const form = ref(cloneDeep(INITIAL_FORM));
-  mobile: '',
-  operator_name: '',
-  holder_name: '',
-  platform: 0,
-  is_sync: 0,
-});
 
 const rules = {
   mobile: [
@@ -227,6 +228,7 @@ const reset = () => {
   formRef.value.resetFields();
   formRef.value.clearValidate();
 
+  form.value = cloneDeep(INITIAL_FORM);
   fileName.value = '';
   file.value = null;
   isEdit.value = false;
@@ -268,6 +270,7 @@ const handleBatchImport = async () => {
     });
     if (code === 200) {
       AMessage.success('导入成功');
+      emits('update');
       onClose();
     } else {
       uploadStatus.value = UploadStatus.ERROR;

vite.config.ts

@@ -40,7 +40,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'http://192.168.40.7/api',
+          target: 'http://192.168.40.22/api',
           // target: 'https://lingjiapi.lvfunai.com/api',
         },
       },