feat: 投放账户分组

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

@@ -27,20 +27,33 @@
       </div>
     </template>
     <template v-else>
-      <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>
+      <div class="flex items-center justify-between mb-16px">
+        <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"
-        @change="onTableChange"
+        @sorter-change="handleSorterChange"
       >
         <template #action="{ record }">
           <div class="flex items-center">
@@ -49,7 +62,7 @@
           </div>
         </template>
       </a-table>
-      <div class="pagination-box">
+      <div class="pagination-box flex justify-end">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -72,6 +85,8 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 import { getGroupList } from '@/api/all/propertyMarketing';
+import { exactFormatTime } from '@/utils/tools';
+
 import AddGroup from './add-group.vue';
 import DeleteGroup from './delete-group.vue';
 
@@ -88,7 +103,12 @@ const currentGroup = ref(null);
 
 const list = ref([]);
 const loading = ref(false);
-const pageInfo = reactive({
+const query = ref({
+  name: '',
+  column: '',
+  order: '',
+});
+const pageInfo = ref({
   page: 1,
   pageSize: 20,
   total: 0,
@@ -110,6 +130,7 @@ const columns = [
     title: '创建日期',
     dataIndex: 'created_at',
     width: 160,
+    render: ({ record }) => exactFormatTime(record.created_at),
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
@@ -122,6 +143,17 @@ function open() {
   getData();
 }
 
+const close = () => {
+  query.value.name = '';
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
+  query.value.column = '';
+  query.value.order = '';
+  list.value = [];
+  visible.value = false;
+};
+
 function openAdd() {
   addGroupRef.value.open();
 }
@@ -134,47 +166,43 @@ function openDelete(record) {
   deleteGroupRef.value.open(record);
 }
 
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  getData();
+};
+
 async function getData() {
   try {
     loading.value = true;
-    const { page, pageSize } = pageInfo;
+    const { page, pageSize } = pageInfo.value;
     const params = {
       page,
       pageSize,
+      ...query.value,
     };
-    if (sortInfo.value.field && sortInfo.value.direction) {
-      params.orderField = sortInfo.value.field;
-      params.orderType = sortInfo.value.direction === 'ascend' ? 'asc' : 'desc';
-    }
     const { code, data } = await getGroupList(params);
     if (code === 200) {
-      list.value = data.list;
-      pageInfo.total = data.total;
+      list.value = data?.data ?? [];
+      pageInfo.value.total = data.total;
     }
   } finally {
     loading.value = false;
   }
 }
 
-const onTableChange = (pagination, filters, sorter) => {
-  if (sorter && sorter.field) {
-    sortInfo.value.field = sorter.field;
-    sortInfo.value.direction = sorter.order;
-  } else {
-    sortInfo.value.field = '';
-    sortInfo.value.direction = '';
-  }
+const reload = () => {
+  pageInfo.value.page = 1;
   getData();
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
-  pageInfo.page = 1;
-  getData();
+  pageInfo.value.pageSize = pageSize;
+  reload();
 };
 
 defineExpose({ open });

src/views/property-marketing/put-account/account-data/components/account-table/constants.ts

@@ -4,7 +4,7 @@
  */
 export const TABLE_COLUMNS = [
   {
-    title: '账号名称',
+    title: '账户名称',
     dataIndex: 'name',
     width: 180,
     fixed: 'left',

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

@@ -195,10 +195,10 @@ const handleExport = () => {
 };
 const getColumns = () => {
   const columns = cloneDeep(TABLE_COLUMNS);
-  if (!props.isAccountTab) {
-    const _target = columns.find((item) => item.dataIndex === 'name');
-    _target.title = '项目名称';
-  }
+  // if (!props.isAccountTab) {
+  //   const _target = columns.find((item) => item.dataIndex === 'name');
+  //   _target.title = '项目名称';
+  // }
   return columns;
 };
 

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

@@ -74,7 +74,7 @@
 
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
-import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
+import { getPlacementAccountProjectGroupsList, getPlacementAccountOperators } from '@/api/all/propertyMarketing';
 import GroupSelect from '../group-select/index.vue';
 import { STATUS_LIST } from '../../constants';
 
@@ -100,21 +100,26 @@ const handleReset = () => {
 };
 
 const getGroups = async () => {
-  const { code, data } = await fetchAccountGroups();
+  const { code, data } = await getPlacementAccountProjectGroupsList();
   if (code === 200) {
     groups.value = data;
   }
 };
 const getOperators = async () => {
-  const { code, data } = await fetchAccountOperators();
+  const { code, data } = await getPlacementAccountOperators();
   if (code === 200) {
     operators.value = data;
   }
 };
 
 onMounted(() => {
-  // getGroups();
-  // getOperators();
+  getGroups();
+  getOperators();
+});
+
+defineExpose({
+  getGroups,
+  getOperators,
 });
 </script>
 

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

@@ -0,0 +1,79 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 11:44:17
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑分组' : '添加新分组'"
+    modal-class="account-manage-modal"
+    width="400px"
+    @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>
+    </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>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import { postPlacementAccountProjectGroups, putPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const isEdit = ref(false);
+const formRef = ref();
+const form = ref({ name: '' });
+const groupId = ref('');
+
+const rules = {
+  name: [{ required: true, message: '请输入分组名称' }],
+};
+
+function resetForm() {
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+}
+
+function onClose() {
+  visible.value = false;
+  form.value.name = '';
+  groupId.value = '';
+  isEdit.value = false;
+  resetForm();
+}
+
+const open = (record = {}) => {
+  const { id = '', name = '' } = record;
+  groupId.value = id;
+  isEdit.value = !!id;
+  form.value.name = name;
+  visible.value = true;
+};
+
+async function onSubmit() {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = isEdit.value ? putPlacementAccountProjectGroups : postPlacementAccountProjectGroups;
+      const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
+        emits('success');
+        onClose();
+      }
+    }
+  });
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,56 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 11:45:05
+-->
+<template>
+  <a-modal v-model:visible="visible" title="删除分组" width="400px" modal-class="account-manage-modal" @close="onClose">
+    <div class="flex items-center mb-24px">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
+    </div>
+    <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
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deletePlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const groupId = ref('');
+const groupName = ref('');
+
+function onClose() {
+  visible.value = false;
+  groupId.value = '';
+  groupName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = '', name = '' } = record;
+  groupId.value = id;
+  groupName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deletePlacementAccountProjectGroups(groupId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,212 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="900px"
+    modal-class="put-account-group-manage-modal"
+    :footer="false"
+    title="分组管理"
+    :mask-closable="false"
+    @close="close"
+  >
+    <template v-if="!list.length">
+      <div class="flex items-center justify-center flex-col">
+        <div class="w-120px h-120px flex items-center justify-center mb-32px">
+          <img :src="icon2" width="106" height="72" />
+        </div>
+        <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" class="relative top-3px" />
+          </template>
+          <template #default>去添加</template>
+        </a-button>
+      </div>
+    </template>
+    <template v-else>
+      <div class="flex items-center justify-between mb-16px">
+        <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 }">
+          <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 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>
+    </template>
+
+    <AddGroup ref="addGroupRef" @success="getData" />
+    <DeleteGroup ref="deleteGroupRef" @success="getData" />
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
+import { exactFormatTime } from '@/utils/tools';
+
+import AddGroup from './add-group.vue';
+import DeleteGroup from './delete-group.vue';
+
+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 visible = ref(false);
+const addGroupRef = ref(null);
+const deleteGroupRef = ref(null);
+
+const list = ref([]);
+const loading = ref(false);
+const query = ref({
+  name: '',
+  column: '',
+  order: '',
+});
+const pageInfo = ref({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+});
+
+const columns = [
+  { title: '分组名称', dataIndex: 'name' },
+  {
+    title: '创建人',
+    dataIndex: 'creator',
+    render: ({ record }) => record.creator?.name || '-',
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'created_at',
+    width: 160,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+    render: ({ record }) => exactFormatTime(record.created_at),
+  },
+  { title: '操作', slotName: 'action', align: 'center', width: 120 },
+];
+
+function open() {
+  visible.value = true;
+  getData();
+}
+
+const close = () => {
+  query.value.name = '';
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
+  query.value.column = '';
+  query.value.order = '';
+  list.value = [];
+  visible.value = false;
+};
+
+function openAdd() {
+  addGroupRef.value.open();
+}
+
+function openEdit(record) {
+  addGroupRef.value.open(record);
+}
+
+function openDelete(record) {
+  deleteGroupRef.value.open(record);
+}
+
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  getData();
+};
+async function getData() {
+  try {
+    loading.value = true;
+    const { page, pageSize } = pageInfo.value;
+    const params = {
+      page,
+      pageSize,
+      ...query.value,
+    };
+    const { code, data } = await getPlacementAccountProjectGroups(params);
+    if (code === 200) {
+      list.value = data?.data ?? [];
+      pageInfo.value.total = data.total;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+const reload = () => {
+  pageInfo.value.page = 1;
+  getData();
+};
+
+const handleSearch = () => {
+  reload();
+};
+
+const onPageChange = (current) => {
+  pageInfo.value.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.value.pageSize = pageSize;
+  reload();
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,62 @@
+@import '@/views/property-marketing/component.scss';
+
+.account-manage-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    .arco-btn {
+      .arco-btn-icon {
+        line-height: 16px;
+      }
+    }
+    .s1 {
+      color: var(--Text-3, #737478);
+      font-family: 'PuHuiTi-Medium';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+      .arco-pagination {
+        .arco-pagination-list {
+          .arco-pagination-item {
+            border-radius: 4px;
+            border: 1px solid var(--BG-300, #e6e6e8);
+            &.arco-pagination-item-ellipsis {
+              border: none;
+            }
+
+            &.arco-pagination-item-active {
+              background-color: transparent;
+              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+            }
+          }
+        }
+        .arco-pagination-jumper-prepend {
+          color: var(--Text-2, #3c4043);
+          text-align: right;
+          font-family: 'PuHuiTi-Medium';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        .arco-select-view-single,
+        .arco-pagination-jumper-input {
+          border-radius: 4px;
+          border: 1px solid var(--BG-300, #e6e6e8);
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  .danger-btn {
+    border: none !important;
+    background-color: #f64b31 !important;
+  }
+}

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

@@ -8,8 +8,16 @@
       <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>
+        <template v-if="!isAccountTab" #extra>
+          <a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
+            <template #icon>
+              <img :src="icon2" width="16" height="16" />
+            </template>
+            <template #default>分组管理</template>
+          </a-button>
+        </template>
       </a-tabs>
-      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
     <div
       class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
@@ -36,14 +44,19 @@
         />
       </div>
     </div>
+
+    <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups()" />
   </div>
 </template>
 
 <script setup>
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
+import GroupManageModal from './components/group-manage-modal';
 import { INITIAL_QUERY } from './constants';
 
+import icon2 from '@/assets/img/media-account/icon-group.png';
+
 const query = ref({});
 const dataSource = ref([]);
 const pageInfo = reactive({
@@ -54,6 +67,8 @@ const pageInfo = reactive({
 const selectedRowKeys = ref([]);
 const activeTab = ref(1);
 const accountTableRef = ref(null);
+const groupManageModalRef = ref(null);
+const filterBlockRef = ref(null);
 
 const isAccountTab = computed(() => activeTab.value === 1);
 
@@ -235,6 +250,10 @@ const handleTabClick = (tab) => {
   handleReset();
 };
 
+const handleOpenGroupModal = () => {
+  groupManageModalRef.value?.open();
+};
+
 onMounted(() => {
   getData();
 });

src/views/property-marketing/put-account/account-data/style.scss

@@ -21,16 +21,17 @@
         padding: 0 8px;
       }
     }
+    :deep(.arco-btn) {
+      .arco-btn-icon {
+        line-height: 14px;
+      }
+    }
     .top {
       .title {
         font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
-      :deep(.arco-btn) {
-        .arco-btn-icon {
-          line-height: 14px;
-        }
-      }
+      
     }
     .overview-row {
       .overview-item {