perf: 统一导出文件交互、自定义列交互
This commit is contained in:
@ -160,7 +160,7 @@ const onSubmit = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function setDefaultCheckColumns(groups, selected_columns) {
|
const setDefaultCheckColumns = (groups, selected_columns) => {
|
||||||
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
||||||
const requiredValues = requiredGroups
|
const requiredValues = requiredGroups
|
||||||
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
||||||
@ -170,7 +170,7 @@ function setDefaultCheckColumns(groups, selected_columns) {
|
|||||||
|
|
||||||
checkColumns.value = merged;
|
checkColumns.value = merged;
|
||||||
requiredGroupNames.value = requiredGroups.map((group) => group.label);
|
requiredGroupNames.value = requiredGroups.map((group) => group.label);
|
||||||
}
|
};
|
||||||
|
|
||||||
// 暴露方法
|
// 暴露方法
|
||||||
defineExpose({ open });
|
defineExpose({ open });
|
||||||
|
|||||||
@ -93,3 +93,16 @@ export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYe
|
|||||||
const fmt = diff === 0 ? curYearFmt : otherYearFmt;
|
const fmt = diff === 0 ? curYearFmt : otherYearFmt;
|
||||||
return dayjs(val * 1000).format(fmt);
|
return dayjs(val * 1000).format(fmt);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 导出文件
|
||||||
|
export function downloadByUrl(url: string, filename?: string) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
if (filename) {
|
||||||
|
a.download = filename;
|
||||||
|
}
|
||||||
|
a.style.display = 'none';
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
}
|
||||||
|
|||||||
@ -235,11 +235,24 @@ const getSelectedColumns = () => {
|
|||||||
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
selectedColumns.value = data.selected_columns;
|
const { selected_columns, groups } = data;
|
||||||
|
|
||||||
|
setDefaultCheckColumns(groups, selected_columns);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const setDefaultCheckColumns = (groups, selected_columns) => {
|
||||||
|
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
||||||
|
const requiredValues = requiredGroups
|
||||||
|
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
||||||
|
.map((col) => col.value);
|
||||||
|
|
||||||
|
const merged = union(requiredValues, selected_columns);
|
||||||
|
|
||||||
|
selectedColumns.value = merged;
|
||||||
|
};
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
resetTable,
|
resetTable,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -28,7 +28,7 @@ export const CARD_FIELDS = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '近7日观看数',
|
label: '近7日观看数',
|
||||||
prop: 'in_the_past_seven_days_view_number',
|
prop: 'seven_view_number',
|
||||||
icon: icon4,
|
icon: icon4,
|
||||||
tooltip: '近7日观看数',
|
tooltip: '近7日观看数',
|
||||||
},
|
},
|
||||||
|
|||||||
@ -17,17 +17,13 @@
|
|||||||
<div class="overview-row flex">
|
<div class="overview-row flex">
|
||||||
<div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
|
<div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
|
||||||
<div class="flex items-center mb-8px">
|
<div class="flex items-center mb-8px">
|
||||||
<img :src="item.icon" width="24" height="24" class="mr-8px" />
|
<img :src="item.icon" width="20" height="20" class="mr-8px" />
|
||||||
<p class="s2 color-#211F24">{{ item.label }}</p>
|
<p class="label color-#211F24">{{ item.label }}</p>
|
||||||
<a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
|
<a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
|
||||||
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<span class="s1 color-#211F24 ml-32px">{{
|
<span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
|
||||||
item.prop === 'total_like_number'
|
|
||||||
? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
|
|
||||||
: formatNumberShow(overviewData[item.prop])
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -68,6 +64,7 @@ import AccountTable from './components/account-table';
|
|||||||
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
|
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
|
||||||
import { formatNumberShow } from '@/utils/tools';
|
import { formatNumberShow } from '@/utils/tools';
|
||||||
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
|
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
|
||||||
|
import { downloadByUrl } from '@/utils/tools';
|
||||||
|
|
||||||
import icon1 from '@/assets/img/icon-question.png';
|
import icon1 from '@/assets/img/icon-question.png';
|
||||||
|
|
||||||
@ -136,7 +133,7 @@ const handleExport = () => {
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
window.open(data.download_url, '_blank');
|
downloadByUrl(data.download_url);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@ -35,6 +35,22 @@
|
|||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
.label {
|
||||||
|
color: var(--Text-3, #737478);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: var(--Text-1, #211f24);
|
||||||
|
font-family: 'HarmonyOS Sans SC';
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -234,11 +234,24 @@ const getSelectedColumns = () => {
|
|||||||
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
selectedColumns.value = data.selected_columns;
|
const { selected_columns, groups } = data;
|
||||||
|
|
||||||
|
setDefaultCheckColumns(groups, selected_columns);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const setDefaultCheckColumns = (groups, selected_columns) => {
|
||||||
|
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
||||||
|
const requiredValues = requiredGroups
|
||||||
|
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
||||||
|
.map((col) => col.value);
|
||||||
|
|
||||||
|
const merged = union(requiredValues, selected_columns);
|
||||||
|
|
||||||
|
selectedColumns.value = merged;
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getSelectedColumns();
|
getSelectedColumns();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -234,11 +234,24 @@ const getSelectedColumns = () => {
|
|||||||
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
selectedColumns.value = data.selected_columns;
|
const { selected_columns, groups } = data;
|
||||||
|
|
||||||
|
setDefaultCheckColumns(groups, selected_columns);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const setDefaultCheckColumns = (groups, selected_columns) => {
|
||||||
|
const requiredGroups = groups.filter((group) => group.is_require === 1);
|
||||||
|
const requiredValues = requiredGroups
|
||||||
|
.flatMap((group) => (group.columns || []).filter((col) => col.is_require === 1))
|
||||||
|
.map((col) => col.value);
|
||||||
|
|
||||||
|
const merged = union(requiredValues, selected_columns);
|
||||||
|
|
||||||
|
selectedColumns.value = merged;
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getSelectedColumns();
|
getSelectedColumns();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -69,6 +69,7 @@ import {
|
|||||||
} from '@/api/all/propertyMarketing';
|
} from '@/api/all/propertyMarketing';
|
||||||
|
|
||||||
import { INITIAL_QUERY } from './constants';
|
import { INITIAL_QUERY } from './constants';
|
||||||
|
import { downloadByUrl } from '@/utils/tools';
|
||||||
|
|
||||||
import icon2 from '@/assets/img/media-account/icon-group.png';
|
import icon2 from '@/assets/img/media-account/icon-group.png';
|
||||||
|
|
||||||
@ -132,6 +133,7 @@ const handleSelectionChange = (selectedRows) => {
|
|||||||
|
|
||||||
const handleTabClick = (key) => {
|
const handleTabClick = (key) => {
|
||||||
activeTab.value = key;
|
activeTab.value = key;
|
||||||
|
dataSource.value = [];
|
||||||
handleReset();
|
handleReset();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -142,7 +144,7 @@ const handleExport = () => {
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
const { code, data } = res;
|
const { code, data } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
window.open(data.download_url, '_blank');
|
downloadByUrl(data.download_url);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user