diff --git a/src/assets/svg/icon-projectManagement.svg b/src/assets/svg/icon-projectManagement.svg new file mode 100644 index 0000000..8266f40 --- /dev/null +++ b/src/assets/svg/icon-projectManagement.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts index ac13d17..32b9e52 100644 --- a/src/hooks/useTableSelectionWithPagination.ts +++ b/src/hooks/useTableSelectionWithPagination.ts @@ -67,6 +67,9 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa pageInfo.value.page = 1; options.onPageSizeChange?.(size); }; + const resetPageInfo = () => { + pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO) + } const rowSelection = computed(() => ({ type: 'checkbox', @@ -83,5 +86,6 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa rowSelection, handleSelect, handleSelectAll, + resetPageInfo }; } diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts index 58e5ed4..c4ddff2 100644 --- a/src/router/routes/modules/propertyMarketing.ts +++ b/src/router/routes/modules/propertyMarketing.ts @@ -9,6 +9,7 @@ import IconRepository from '@/assets/svg/icon-repository.svg'; import IconMediaAccount from '@/assets/svg/icon-mediaAccount.svg'; import IconPutAccount from '@/assets/svg/icon-putAccount.svg'; import IconIntelligentSolution from '@/assets/svg/icon-intelligentSolution.svg'; +import IconProjectManagement from '@/assets/svg/icon-projectManagement.svg'; const COMPONENTS: AppRouteRecordRaw[] = [ { @@ -195,6 +196,32 @@ const COMPONENTS: AppRouteRecordRaw[] = [ }, ], }, + { + path: '/project-manage', + name: 'ProjectManagement', + redirect: 'project-manage/project-list', + meta: { + locale: '项目管理', + icon: IconProjectManagement, + requiresAuth: true, + requireLogin: true, + roles: ['*'], + id: MENU_GROUP_IDS.PROPERTY_ID, + }, + children: [ + { + path: 'project-list', + name: 'ProjectList', + meta: { + locale: '项目列表', + requiresAuth: true, + requireLogin: true, + roles: ['*'], + }, + component: () => import('@/views/property-marketing/project-manage/project-list'), + }, + ], + }, ]; export default COMPONENTS; diff --git a/src/stores/modules/side-bar/constants.ts b/src/stores/modules/side-bar/constants.ts index 30c732f..cacd25c 100644 --- a/src/stores/modules/side-bar/constants.ts +++ b/src/stores/modules/side-bar/constants.ts @@ -85,6 +85,13 @@ export const MENU_LIST = [ 'IntelligentSolutionCompetitiveProductAnalysisReport', ], }, + { + name: '项目管理', + routeName: 'ProjectList', + includeRouteNames: [ + 'ProjectList', + ], + }, ], }, ]; diff --git a/src/utils/tools.ts b/src/utils/tools.ts index e2093fc..ed82cb7 100644 --- a/src/utils/tools.ts +++ b/src/utils/tools.ts @@ -85,7 +85,7 @@ export function formatTableField(fieldItem: any, rowValue: any, showExactValue = return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`; } -export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYearFmt = 'YYYY-MM-DD HH:mm') { +export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm:ss', otherYearFmt = 'YYYY-MM-DD HH:mm:ss') { if (!val) return '-'; const year = dayjs(val * 1000).year(); const currYear = dayjs().year(); diff --git a/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue b/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue new file mode 100644 index 0000000..b22abea --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue @@ -0,0 +1,70 @@ + + + + + + + diff --git a/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss b/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss new file mode 100644 index 0000000..48e2115 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss @@ -0,0 +1,23 @@ +.container { + .filter-row { + .filter-row-item { + &:not(:last-child) { + margin-right: 24px; + } + .label { + margin-right: 8px; + color: #211f24; + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + flex-shrink: 0; + line-height: 22px; /* 157.143% */ + } + :deep(.arco-space-item) { + width: 100%; + } + } + } + +} diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts b/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts new file mode 100644 index 0000000..ae9a58f --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts @@ -0,0 +1,45 @@ +/* + * @Author: RenXiaoDong + * @Date: 2025-06-28 10:33:06 + */ +export const TABLE_COLUMNS = [ + { + title: '项目名称', + dataIndex: 'name', + width: 240, + fixed: 'left', + }, + { + title: '项目预算', + dataIndex: 'key1', + width: 180, + }, + { + title: '关联平台账号', + dataIndex: 'key2', + width: 180, + }, + { + title: '关联渠道账户', + dataIndex: 'key3', + width: 180, + }, + { + title: '关联内容稿件', + dataIndex: 'key4', + width: 180, + }, + { + title: '创建时间', + dataIndex: 'create_at', + width: 180, + sortable: { + sortDirections: ['ascend', 'descend'], + }, + }, + { + title: '操作', + dataIndex: 'operation', + width: 100, + }, +]; diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue b/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue new file mode 100644 index 0000000..dc8e325 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss b/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss new file mode 100644 index 0000000..38fb392 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss @@ -0,0 +1,10 @@ +.project-table { + .cts { + color: var(--Text-1, #211f24); + font-family: $font-family-medium; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } +} diff --git a/src/views/property-marketing/project-manage/project-list/constants.ts b/src/views/property-marketing/project-manage/project-list/constants.ts new file mode 100644 index 0000000..7f13ca2 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/constants.ts @@ -0,0 +1,5 @@ +export const INITIAL_QUERY = { + search: '', + column: '', + order: '', +}; diff --git a/src/views/property-marketing/project-manage/project-list/index.vue b/src/views/property-marketing/project-manage/project-list/index.vue new file mode 100644 index 0000000..88ddc92 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/index.vue @@ -0,0 +1,138 @@ + + + + + diff --git a/src/views/property-marketing/project-manage/project-list/style.scss b/src/views/property-marketing/project-manage/project-list/style.scss new file mode 100644 index 0000000..dda7199 --- /dev/null +++ b/src/views/property-marketing/project-manage/project-list/style.scss @@ -0,0 +1,39 @@ +.project-list-wrap { + height: 100%; + display: flex; + flex-direction: column; + :deep(.search-btn) { + border-radius: 4px; + border: 1px solid var(--Brand-Brand-6, #6d4cfe); + color: #6d4cfe; + } + :deep(.reset-btn) { + border-radius: 4px; + border: 1px solid var(--BG-500, #b1b2b5); + background: var(--BG-white, #fff); + } + .filter-wrap { + .top { + .title { + font-family: $font-family-medium; + font-style: normal; + } + :deep(.arco-btn) { + .arco-btn-icon { + line-height: 16px; + } + } + } + } + .table-wrap { + display: flex; + flex-direction: column; + .pagination-box { + display: flex; + width: 100%; + padding: 16px 24px; + justify-content: flex-end; + align-items: center; + } + } +} diff --git a/src/views/property-marketing/put-account/account-manage/index.vue b/src/views/property-marketing/put-account/account-manage/index.vue index 3279b16..aa50bcd 100644 --- a/src/views/property-marketing/put-account/account-manage/index.vue +++ b/src/views/property-marketing/put-account/account-manage/index.vue @@ -79,7 +79,7 @@ show-page-size :page-size-options="[8, 16, 20, 32, 64]" :current="pageInfo.page" - :page-size="pageInfo.pageSize" + :page-size="pageInfo.page_size" @change="onPageChange" @page-size-change="onPageSizeChange" /> @@ -114,7 +114,7 @@ const deleteAccountRef = ref(null); const pageInfo = ref({ page: 1, - pageSize: 20, + page_size: 20, total: 0, }); const query = ref(cloneDeep(INITIAL_QUERY)); @@ -174,10 +174,10 @@ const getHealthData = async () => { } }; const getAccountData = async () => { - const { page, pageSize } = pageInfo.value; + const { page, page_size } = pageInfo.value; const { code, data, total } = await getPlacementAccounts({ page, - page_size: pageSize, + page_size, ...query.value, }); if (code === 200) { @@ -190,11 +190,11 @@ const reload = () => { getData(); }; const handleSearch = () => { - getData(); + reload(); }; const handleReset = () => { pageInfo.value.page = 1; - pageInfo.value.pageSize = 20; + pageInfo.value.page_size = 20; pageInfo.value.total = 0; selectedItems.value = []; query.value = cloneDeep(INITIAL_QUERY); @@ -206,7 +206,7 @@ const onPageChange = (current) => { getData(); }; const onPageSizeChange = (pageSize) => { - pageInfo.value.pageSize = pageSize; + pageInfo.value.page_size = pageSize; reload(); };