Merge remote-tracking branch 'origin/main' into feature/v1.2灵机空间-项目管理_rxd
# Conflicts: # src/api/all/common.ts # src/components/_base/navbar/index.vue # src/hooks/useTableSelectionWithPagination.ts # src/router/routes/modules/propertyMarketing.ts # src/stores/modules/side-bar/constants.ts # src/views/property-marketing/media-account/account-manage/components/account-table/index.vue # src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue # src/views/property-marketing/put-account/account-data/components/filter-block/index.vue # src/views/property-marketing/put-account/account-manage/components/account-table/index.vue # src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue # src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue # src/views/property-marketing/put-account/components/status-select/constants.ts
This commit is contained in:
rd
83
src/components/_base/navbar/components/navbar-menu/index.vue
Normal file
83
src/components/_base/navbar/components/navbar-menu/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="navbar-menu h-100%">
|
||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||
<template v-if="item.children">
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button>
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)">
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
|
||||
<span class="menu-item-text"> {{ item.name }}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import router from '@/router';
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
const handleDropdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
196
src/components/_base/navbar/components/right-side/index.vue
Normal file
196
src/components/_base/navbar/components/right-side/index.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="right-wrap">
|
||||
<div class="relative mr-12px" @click="setUnread">
|
||||
<SvgIcon
|
||||
name="svg-taskCenter"
|
||||
size="16"
|
||||
class="cursor-pointer color-#737478 hover:color-#6D4CFE"
|
||||
@click="openDownloadCenter"
|
||||
/>
|
||||
<div class="w-4px h-4px rounded-50% bg-#F64B31 absolute top-1px right-1px" v-if="hasUnreadInfo"></div>
|
||||
</div>
|
||||
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
|
||||
<a-doption class="enterprises-doption">
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon3" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(item, index) in enterprises"
|
||||
:key="index"
|
||||
class="rounded-8px hover:bg-#F2F3F5"
|
||||
@click="onEnterpriseItemClick(item)"
|
||||
>
|
||||
<div
|
||||
class="flex items-center w-100% justify-between"
|
||||
:class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
|
||||
</div>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dsubmenu>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon2" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<ExitAccountModal ref="exitAccountModalRef" />
|
||||
<DownloadCenterModal ref="downloadCenterModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import router from '@/router';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal';
|
||||
import DownloadCenterModal from '../task-center-modal';
|
||||
|
||||
import icon1 from '@/assets/option.svg';
|
||||
import icon2 from '@/assets/exit.svg';
|
||||
import icon3 from '@/assets/change.svg';
|
||||
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const userStore = useUserStore();
|
||||
const sideBarStore = useSidebarStore();
|
||||
|
||||
const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
|
||||
|
||||
const exitAccountModalRef = ref(null);
|
||||
const downloadCenterModalRef = ref(null);
|
||||
|
||||
const enterprises = computed(() => {
|
||||
return userStore.userInfo?.enterprises ?? [];
|
||||
});
|
||||
const enterpriseInfo = computed(() => {
|
||||
return enterpriseStore?.enterpriseInfo ?? {};
|
||||
});
|
||||
|
||||
const openDownloadCenter = () => {
|
||||
downloadCenterModalRef.value.open();
|
||||
};
|
||||
const onEnterpriseItemClick = async (item) => {
|
||||
enterpriseStore.setEnterpriseInfo(item);
|
||||
window.location.reload();
|
||||
};
|
||||
const clickExit = async () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const setServerMenu = () => {
|
||||
router.push('/management/person');
|
||||
};
|
||||
const setUnread = () => {
|
||||
if (sideBarStore.unreadInfo.length) {
|
||||
sideBarStore.removeTaskUnreadInfo();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-wrap {
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 !important;
|
||||
&-content {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
}
|
||||
.enterprises-doption {
|
||||
.arco-dropdown-option-content {
|
||||
padding: 0 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
export const INITIAL_FORM = {
|
||||
type: 1,
|
||||
operator_name: '',
|
||||
module: '',
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
dataIndex: 'module',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isBatch ? '批量删除下载记录' : '删除下载记录'"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ accountName }} 这条记录吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteTask, deleteBatchTasks } from '@/api/all/common';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['update', 'close', 'batchUpdate']);
|
||||
|
||||
const visible = ref(false);
|
||||
const taskId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(taskId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
taskId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
taskId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
|
||||
const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
|
||||
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -0,0 +1,386 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime, genRandomId } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
let queryTaskTimer = null;
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
const deleteTaskModalRef = ref(null);
|
||||
const downloadTaskInfos = ref([]);
|
||||
|
||||
const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
query.value = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
downloadTaskInfos.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getTask({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data?.total;
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const clearSelectedRows = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = async (record) => {
|
||||
if (record.status === enumTaskStatus.Failed) {
|
||||
const { code } = await postRedoTask(record.id);
|
||||
if (code === 200) {
|
||||
showExportNotification(`正在下载“${record.name}”，请稍后...`);
|
||||
getData();
|
||||
}
|
||||
} else {
|
||||
record.file && downloadByUrl(record.file);
|
||||
}
|
||||
};
|
||||
|
||||
// 批量下载
|
||||
const handleBatchDownload = debounce(async () => {
|
||||
const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
|
||||
if (code === 200) {
|
||||
startBatchDownload(data.id);
|
||||
}
|
||||
}, 500);
|
||||
const startBatchDownload = (id) => {
|
||||
const randomId = genRandomId();
|
||||
showExportNotification(
|
||||
`正在批量下载“${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件，请稍后...`,
|
||||
{
|
||||
duration: 0,
|
||||
id: randomId,
|
||||
},
|
||||
);
|
||||
downloadTaskInfos.value.push({
|
||||
id,
|
||||
randomId,
|
||||
});
|
||||
|
||||
if (!queryTaskTimer) {
|
||||
queryTaskTimer = setInterval(() => getSyncTaskStatus(), 3000);
|
||||
}
|
||||
};
|
||||
const getSyncTaskStatus = async () => {
|
||||
const { code, data } = await batchQueryTaskStatus({ ids: downloadTaskInfos.value.map((v) => v.id) });
|
||||
if (code === 200) {
|
||||
let completeTaskNum = 0;
|
||||
data.forEach((item) => {
|
||||
const { status, file, id } = item;
|
||||
if (status !== 0) {
|
||||
completeTaskNum++;
|
||||
|
||||
const notificationId = downloadTaskInfos.value.find((v) => v.id === id)?.randomId;
|
||||
notificationId && Notification.remove(notificationId);
|
||||
|
||||
if (status === 1) {
|
||||
AMessage.success('批量下载已完成，正在下载文件...');
|
||||
downloadByUrl(file);
|
||||
} else if (status === 2) {
|
||||
const onReDownload = () => {
|
||||
startBatchDownload(id);
|
||||
};
|
||||
showFailExportNotification(
|
||||
`${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件下载失败`,
|
||||
{ onReDownload },
|
||||
);
|
||||
}
|
||||
|
||||
// 结束的任务过滤掉
|
||||
downloadTaskInfos.value = downloadTaskInfos.value.filter((v) => v.id !== id);
|
||||
}
|
||||
});
|
||||
|
||||
// 全部完成了
|
||||
if (completeTaskNum === data.length) {
|
||||
clearQueryTaskTimer();
|
||||
clearSelectedRows();
|
||||
downloadTaskInfos.value = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${name || '-'}”`,
|
||||
});
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedRows.value.map((item) => item.id);
|
||||
const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
|
||||
|
||||
deleteTaskModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
const clearQueryTaskTimer = () => {
|
||||
if (queryTaskTimer) {
|
||||
clearInterval(queryTaskTimer);
|
||||
queryTaskTimer = null;
|
||||
}
|
||||
};
|
||||
const unloadComp = () => {
|
||||
clearQueryTaskTimer();
|
||||
};
|
||||
onUnmounted(() => {
|
||||
clearQueryTaskTimer;
|
||||
});
|
||||
|
||||
expose({ init, reset, unloadComp });
|
||||
|
||||
return () => (
|
||||
<div class="export-task-wrap">
|
||||
{/* 筛选行 */}
|
||||
<div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<Input
|
||||
v-model={query.value.operator_name}
|
||||
class="w-240px"
|
||||
placeholder="请输入操作人员"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<Input
|
||||
v-model={query.value.module}
|
||||
class="w-240px"
|
||||
placeholder="请输入所属模块"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 已选提示行 */}
|
||||
{dataSource.value.length > 0 && selectedRows.value.length > 0 && (
|
||||
<div
|
||||
class={[
|
||||
'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
|
||||
selectedRows.value.length > 0 ? ' selected' : '',
|
||||
].join('')}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
modelValue={checkedAll.value}
|
||||
indeterminate={indeterminate.value}
|
||||
class="mr-8px"
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{selectedRows.value.length}</span>
|
||||
个文件
|
||||
</span>
|
||||
<span class="operation-btn" onClick={handleBatchDownload}>
|
||||
批量下载
|
||||
</span>
|
||||
<span class="operation-btn red" onClick={handleBatchDelete}>
|
||||
批量删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<IconClose size={16} class="cursor-pointer color-#737478" onClick={clearSelectedRows} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
row-selection={rowSelection.value}
|
||||
selected-keys={selectedRowKeys.value}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
key={column.dataIndex}
|
||||
data-index={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
min-width={column.minWidth}
|
||||
sortable={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
tooltip
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return record.operator?.name || record.operator?.mobile;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status !== enumTaskStatus.Exporting && (
|
||||
<Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
{record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 删除弹窗 */}
|
||||
<DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
.export-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.normal {
|
||||
background: #ebf7f2;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
background: #ffe7e4;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
.err-btn {
|
||||
background-color: #f64b31 !important;
|
||||
color: var(--BG-white, #fff);
|
||||
font-family: 'PingFang SC';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
export const INITIAL_FORM = {
|
||||
type: 0,
|
||||
operator_name: '',
|
||||
module: '',
|
||||
sort_column: undefined,
|
||||
sort_order: undefined,
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '任务名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '所属模块',
|
||||
dataIndex: 'module',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '共导入',
|
||||
dataIndex: 'total_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入成功',
|
||||
dataIndex: 'success_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入失败',
|
||||
dataIndex: 'fail_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '导入时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isBatch ? '批量删除导入记录' : '删除导入记录'"
|
||||
width="400px"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span>确认删除 {{ accountName }} 这条记录吗？</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteTask, deleteBatchTasks } from '@/api/all/common';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['update', 'close', 'batchUpdate']);
|
||||
|
||||
const visible = ref(false);
|
||||
const taskId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(taskId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
taskId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
taskId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
|
||||
const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
isBatch.value ? emits('batchUpdate') : emits('update');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -0,0 +1,300 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
|
||||
import { IMPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
import { downloadByUrl } from '@/utils/tools';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
// import { showExportNotification } from '@/utils/arcoD';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
DEFAULT_PAGE_INFO,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref({ ...INITIAL_FORM });
|
||||
const deleteTaskModalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
query.value = { ...INITIAL_FORM };
|
||||
pageInfo.value = { ...DEFAULT_PAGE_INFO };
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { page, page_size } = pageInfo.value;
|
||||
const { code, data } = await getTask({
|
||||
...query.value,
|
||||
page,
|
||||
page_size,
|
||||
});
|
||||
if (code === 200) {
|
||||
dataSource.value = data?.data ?? [];
|
||||
pageInfo.value.total = data?.total;
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.sort_column = column;
|
||||
query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = (record) => {
|
||||
downloadByUrl(record.file);
|
||||
// showExportNotification(`正在下载“${record.name}”，请稍后...`)
|
||||
};
|
||||
const handleBatchDownload = () => {
|
||||
// 批量下载逻辑
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${name || '-'}”`,
|
||||
});
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedRows.value.map((item) => item.id);
|
||||
const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
|
||||
deleteTaskModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedRows.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
expose({ init, reset });
|
||||
|
||||
return () => (
|
||||
<div class="import-task-wrap">
|
||||
{/* 筛选行 */}
|
||||
{/* <div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<Input
|
||||
v-model={query.value.operator_name}
|
||||
class="w-240px"
|
||||
placeholder="请输入操作人员"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<Input
|
||||
v-model={query.value.module}
|
||||
class="w-240px"
|
||||
placeholder="请输入所属模块"
|
||||
size="medium"
|
||||
allow-clear
|
||||
onChange={handleSearch}
|
||||
v-slots={{
|
||||
prefix: () => <IconSearch />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 已选提示行 */}
|
||||
{/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
|
||||
<div
|
||||
class={[
|
||||
'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
|
||||
selectedRows.value.length > 0 ? ' selected' : '',
|
||||
].join('')}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
modelValue={checkedAll.value}
|
||||
indeterminate={indeterminate.value}
|
||||
class="mr-8px"
|
||||
onChange={handleSelectAll}
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{selectedRows.value.length}</span>
|
||||
个文件
|
||||
</span>
|
||||
<span class="operation-btn" onClick={handleBatchDownload}>
|
||||
批量下载
|
||||
</span>
|
||||
<span class="operation-btn red" onClick={handleBatchDelete}>
|
||||
批量删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
ref="tableRef"
|
||||
data={dataSource.value}
|
||||
column-resizable
|
||||
row-key="id"
|
||||
selected-keys={selectedRowKeys.value}
|
||||
pagination={false}
|
||||
scroll={{ x: '100%', y: '100%' }}
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
onSorterChange={handleSorterChange}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
v-slots={{
|
||||
empty: () => <NoData />,
|
||||
columns: () => (
|
||||
<>
|
||||
{TABLE_COLUMNS.map((column) => (
|
||||
<TableColumn
|
||||
key={column.dataIndex}
|
||||
data-index={column.dataIndex}
|
||||
fixed={column.fixed}
|
||||
width={column.width}
|
||||
min-width={column.minWidth}
|
||||
sortable={column.sortable}
|
||||
align={column.align}
|
||||
ellipsis
|
||||
tooltip
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
cell: ({ record }) => {
|
||||
if (column.dataIndex === 'status') {
|
||||
return (
|
||||
<div class={['status-box', `status-box-${record.status}`]}>
|
||||
<span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'operator.name') {
|
||||
return <span>{record.operator?.name || record.operator?.mobile}</span>;
|
||||
} else if (column.dataIndex === 'created_at') {
|
||||
return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<TableColumn
|
||||
data-index="operation"
|
||||
width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
|
||||
fixed="right"
|
||||
title="操作"
|
||||
v-slots={{
|
||||
cell: ({ record }) => (
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src={icon1}
|
||||
width="14"
|
||||
height="14"
|
||||
class="mr-8px cursor-pointer"
|
||||
onClick={() => handleDelete(record)}
|
||||
/>
|
||||
{record.status === enumTaskStatus.Failed && (
|
||||
<Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
|
||||
下载问题表格
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
{pageInfo.value.total > 0 && (
|
||||
<div class="flex justify-end my-16px">
|
||||
<Pagination
|
||||
total={pageInfo.value.total}
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
current={pageInfo.value.page}
|
||||
page-size={pageInfo.value.page_size}
|
||||
onChange={onPageChange}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 删除弹窗 */}
|
||||
<DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
.import-task-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip-row {
|
||||
border-radius: 2px;
|
||||
background: #f0edff;
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.normal {
|
||||
background: #ebf7f2;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
background: #ffe7e4;
|
||||
.label {
|
||||
color: #211f24;
|
||||
}
|
||||
}
|
||||
.err-btn {
|
||||
background-color: #f64b31 !important;
|
||||
color: var(--BG-white, #fff);
|
||||
font-family: 'PingFang SC';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-box {
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
span {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&-0 {
|
||||
background: var(--Functional-yellow-1, #fff7e5);
|
||||
span {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
span {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
span {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
export enum enumTaskStatus {
|
||||
Exporting = 0, // 导出中
|
||||
Finished = 1, // 已完成
|
||||
Failed = 2, // 导出失败
|
||||
}
|
||||
|
||||
export const EXPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导出中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: enumTaskStatus.Finished,
|
||||
},
|
||||
{
|
||||
label: '导出失败',
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
export const IMPORT_TASK_STATUS = [
|
||||
{
|
||||
label: '导入中',
|
||||
value: enumTaskStatus.Exporting,
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: enumTaskStatus.Finished,
|
||||
},
|
||||
{
|
||||
label: '导入失败',
|
||||
value: enumTaskStatus.Failed,
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="任务中心"
|
||||
modal-class="task-center-modal"
|
||||
width="860px"
|
||||
:mask-closable="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-tabs :active-key="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="0" title="导入"> </a-tab-pane>
|
||||
<a-tab-pane key="1" title="导出"> </a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="content">
|
||||
<component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Notification } from '@arco-design/web-vue';
|
||||
|
||||
import ExportTask from './components/export-task';
|
||||
import ImportTask from './components/import-task';
|
||||
|
||||
const visible = ref(false);
|
||||
const componentRef = ref(null);
|
||||
const activeTab = ref('0');
|
||||
|
||||
let timer = null;
|
||||
|
||||
const handleTabClick = (key) => {
|
||||
activeTab.value = key;
|
||||
nextTick(() => {
|
||||
getData();
|
||||
});
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
componentRef.value?.init();
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
getData();
|
||||
|
||||
timer = setInterval(() => {
|
||||
getData();
|
||||
}, 10000);
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
const onClose = () => {
|
||||
activeTab.value = '0';
|
||||
|
||||
clearTimer();
|
||||
componentRef.value?.unloadComp?.();
|
||||
Notification.clear();
|
||||
visible.value = false;
|
||||
};
|
||||
const clearTimer = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
.task-center-modal {
|
||||
.arco-modal-header {
|
||||
border-bottom: none !important;
|
||||
.arco-modal-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 650px;
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 12px;
|
||||
color: #211f24;
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-tabs {
|
||||
.arco-tabs-nav-top {
|
||||
.arco-tabs-tab {
|
||||
margin: 0 20px;
|
||||
.arco-tabs-tab-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
&.arco-tabs-tab-active {
|
||||
.arco-tabs-tab-title {
|
||||
color: #6D4CFE;
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-tabs-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@ -1,288 +1,34 @@
|
||||
<script setup>
|
||||
import { useAppStore } from '@/stores';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
||||
// import { handleUserLogout } from '@/utils/user';
|
||||
// import { fetchLogOut } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
import router from '@/router';
|
||||
// import { useRoute } from 'vue-router';
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
||||
// import { appRoutes } from '@/router/routes';
|
||||
// import { MENU_LIST } from './constants';
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// const route = useRoute();
|
||||
const exitAccountModalRef = ref(null);
|
||||
// const selectedKey = ref([]);
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
const enterprises = computed(() => {
|
||||
return userStore.userInfo?.enterprises ?? [];
|
||||
});
|
||||
|
||||
const clickExit = async () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
|
||||
// const appStore = useAppStore();
|
||||
|
||||
const setServerMenu = () => {
|
||||
router.push('/management/person');
|
||||
};
|
||||
|
||||
const handleDopdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
};
|
||||
const onEnterpriseItemClick = async (item) => {
|
||||
enterpriseStore.setEnterpriseInfo(item);
|
||||
window.location.reload();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<div class="navbar-wrap">
|
||||
<div class="left-wrap">
|
||||
<a-space class="cursor-pointer" @click="router.push('/')">
|
||||
<img src="@/assets/logo.svg" alt="" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="center-side">
|
||||
<div class="menu-demo h-100%">
|
||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||
<template v-if="item.children">
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button type="text">
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
|
||||
<span class="menu-item-text"> {{ item.name }}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<NavbarMenu />
|
||||
</div>
|
||||
<ul class="right-side">
|
||||
<li>
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
|
||||
<a-doption class="enterprises-doption">
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(item, index) in enterprises"
|
||||
:key="index"
|
||||
class="rounded-8px hover:bg-#F2F3F5"
|
||||
:class="enterpriseStore.enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
|
||||
@click="onEnterpriseItemClick(item)"
|
||||
>
|
||||
<div class="flex items-center w-100% justify-between">
|
||||
<span>{{ item.name }}</span>
|
||||
<icon-check v-if="enterpriseStore.enterpriseInfo?.id === item.id" size="16" />
|
||||
</div>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dsubmenu>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
<ExitAccountModal ref="exitAccountModalRef" />
|
||||
<RightSide />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavbarMenu from './components/navbar-menu';
|
||||
import RightSide from './components/right-side';
|
||||
|
||||
import router from '@/router';
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.navbar {
|
||||
.navbar-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.left-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.center-side {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.cneter-tip {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.menu-demo {
|
||||
flex: 1;
|
||||
}
|
||||
.right-side {
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
list-style: none;
|
||||
li {
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-text-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-btn {
|
||||
border-color: rgb(var(--gray-2));
|
||||
color: rgb(var(--gray-8));
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown,
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
// border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 !important;
|
||||
&-content {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
padding-left: 20px;
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
|
||||
35
src/components/svg-icon/index.vue
Normal file
35
src/components/svg-icon/index.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-icon"
|
||||
:width="props.size"
|
||||
:height="props.size"
|
||||
>
|
||||
<use :xlink:href="symbolId" :fill="props.color" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
const props = defineProps({
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "icon",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#333",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "12",
|
||||
},
|
||||
});
|
||||
|
||||
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user