feat: 走查-交互逻辑调整

2025-07-05 14:27:07 +08:00
parent 12f81cdfc4
commit 9b8e96a2e5
15 changed files with 141 additions and 71 deletions
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
@ -2,10 +2,6 @@
 * @Author: RenXiaoDong
 * @Date: 2025-06-26 17:44:16
 -->
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-26 17:23:52
-->
 <template>
  <a-modal
    v-model:visible="visible"
@ -32,7 +28,7 @@ import { ref } from 'vue';
 import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

-const emits = defineEmits(['update', 'close']);
+const emits = defineEmits(['update', 'close', 'batchUpdate']);

 const visible = ref(false);
 const accountId = ref(null);
@ -51,7 +47,7 @@ const open = (record) => {
  const { id = null, name = '' } = record;
  accountId.value = id;
  accountName.value = name;
-  console.log({ name });
+
  visible.value = true;
 };

@ -61,7 +57,7 @@ async function onDelete() {
  const { code } = await _fn(_params);
  if (code === 200) {
    AMessage.success('删除成功');
-    emits('update');
+    isBatch.value ? emits('batchUpdate') : emits('update');
    onClose();
  }
 }
--- 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
@ -30,9 +30,17 @@
                action="/"
                draggable
                :custom-request="handleUpload"
-                accept=".xlsx,.xls,.docx,.doc"
+                accept=".xlsx,.xls"
                :show-file-list="false"
-              />
+              >
+                <template #upload-button>
+                  <div class="upload-box">
+                    <icon-plus size="14" class="mb-16px" />
+                    <span class="text mb-4px">点击或拖拽文件到此处上传</span>
+                    <span class="tip">支持 xls, xlsx格式</span>
+                  </div>
+                </template>
+              </a-upload>
            </template>
            <template v-else>
              <div class="flex items-center">
@ -43,7 +51,7 @@
                  }"
                >
                  <div class="flex items-center">
-                    <icon-file size="16" />
+                    <icon-file size="16" class="flex-shrink-0" />
                    <span class="name ml-8px">{{ fileName }}</span>
                  </div>
                  <span
@ -266,7 +274,10 @@ const open = (accountId = '') => {
 const getAccountDetail = async () => {
  const { code, data } = await getMediaAccountsDetail(id.value);
  if (code === 200) {
-    form.value = data;
+    form.value = {
+      ...data,
+      group_id: data.group_id === 0 ? undefined : data.group_id,
+    };
  }
 };

--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
@ -1,4 +1,4 @@
-@import "@/views/property-marketing/component.scss";
+@import '@/views/property-marketing/component.scss';
 .add-account-modal {
  border-radius: 8px;
  .w-240px {
@ -46,6 +46,36 @@
          margin-bottom: 16px;
        }
      }
+      .upload-box {
+        display: flex;
+        height: 120px;
+        padding: 0 16px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-radius: 2px;
+        border: 1px dashed var(--Border-1, #d7d7d9);
+        background: var(--BG-200, #f2f3f5);
+        .text {
+          color: var(--Text-1, #211f24);
+          text-align: center;
+
+          font-family: 'PingFang SC';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+        }
+        .tip {
+          color: var(--Text-3, #737478);
+          text-align: center;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px; 
+        }
+      }
    }
    .upload-dragger {
      border: 1px dashed #d9d9d9;
--- 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
@ -30,7 +30,7 @@
      <a-form-item label="选择分组" required>
        <template v-if="editType === 'all'">
          <div class="flex items-center w-100%">
-            <a-select v-model="form.group_id" :options="groupOptions" placeholder="请选择..." class="flex-1" />
+            <GroupSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
          </div>
        </template>
      </a-form-item>
@ -47,7 +47,7 @@
            <a-table-column title="选择分组" data-index="group_id">
              <template #cell="{ record }">
                <div class="flex items-center w-100%">
-                  <GroupSelect v-model="record.group_id" :options="groupOptions" />
+                  <GroupSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
                </div>
              </template>
            </a-table-column>
@ -96,10 +96,7 @@ const open = (accountList = []) => {
 const getTags = async () => {
  const { code, data } = await fetchAccountGroups();
  if (code === 200) {
-    groupOptions.value = data.map((item) => ({
-      label: item.name,
-      value: item.id,
-    }));
+    groupOptions.value = data;
  }
 };

--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -16,7 +16,7 @@
      <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">
+          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="reload">
            <template #prefix>
              <icon-search />
            </template>
@ -92,8 +92,19 @@ import icon3 from '@/assets/img/media-account/icon-add.png';

 const emit = defineEmits(['update']);

+const INITIAL_QUERY = {
+  name: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
+const INITIAL_PAGE_INFO = {
+  page: 1,
+  pageSize: 20,
+  total: 0,
+};
+
 const visible = ref(false);
-const isEdit = ref(false);
+// const isEdit = ref(false);
 const addGroupRef = ref(null);
 const deleteGroupRef = ref(null);

@ -101,16 +112,8 @@ const deleteGroupRef = ref(null);

 const list = ref([]);
 const loading = ref(false);
-const query = ref({
-  name: '',
-  sort_column: undefined,
-  sort_order: undefined,
-});
-const pageInfo = ref({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-});
+const query = ref(cloneDeep(INITIAL_QUERY));
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));

 const columns = [
  { title: '分组名称', dataIndex: 'name' },
@ -137,12 +140,8 @@ function open() {
 }

 const close = () => {
-  query.value.name = '';
-  query.value.sort_column = undefined;
-  query.value.sort_order = undefined;
-  pageInfo.value.page = 1;
-  pageInfo.value.pageSize = 20;
-  pageInfo.value.total = 0;
+  query.value = cloneDeep(INITIAL_QUERY);
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
  list.value = [];
  visible.value = false;
 };
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
@ -8,18 +8,17 @@
    :title="isEdit ? '编辑标签' : '添加新标签'"
    modal-class="tags-manage-modal"
    width="400px"
-    :footer="false"
    @close="onClose"
  >
    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
      <a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
        <a-input v-model="form.name" placeholder="请输入…" />
      </a-form-item>
-      <div class="text-right">
-        <a-button class="cancel-btn" @click="onClose">取消</a-button>
-        <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
-      </div>
    </a-form>
+    <template #footer>
+      <a-button class="cancel-btn" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+    </template>
  </a-modal>
 </template>

--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
@ -3,24 +3,17 @@
 * @Date: 2025-06-26 17:23:52
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
-    title="删除标签"
-    width="400px"
-    :footer="false"
-    modal-class="account-manage-modal"
-    @close="onClose"
-  >
-    <div class="flex items-center mb-24px">
+  <a-modal v-model:visible="visible" title="删除标签" width="400px" modal-class="account-manage-modal" @close="onClose">
+    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
    </div>
-    <div class="text-right">
+    <template #footer>
      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
        >确认删除</a-button
      >
-    </div>
+    </template>
  </a-modal>
 </template>

--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
@ -4,7 +4,7 @@
  border-radius: 8px;

  .arco-modal-body {
-    padding: 24px 24px 44px !important;
+    // padding: 24px 24px 44px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@ -103,9 +103,10 @@
    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
    <TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
    <AddAccountModal ref="addAccountModalRef" @update="getData" />
-    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
-    <BatchTagModal ref="batchTagModalRef" @update="getData" />
-    <BatchGroupModal ref="batchGroupModalRef" @update="getData" />
+
+    <DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
+    <BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
+    <BatchGroupModal ref="batchGroupModalRef" @update="onBatchSuccess" />
  </div>
 </template>

@ -267,6 +268,10 @@ const handleBatchTag = () => {
 const handleBatchGroup = () => {
  batchGroupModalRef.value?.open(selectedItems.value);
 };
+const onBatchSuccess = () => {
+  selectedItems.value = [];
+  getData();
+};
 const handleOpenAbnormalAccount = () => {
  query.value.status = 2;
  reload();