feat: 下载中心
This commit is contained in:
rd
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="export-task-wrap">
|
||||
<div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<a-input
|
||||
v-model="query.search"
|
||||
class="w-240px"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<a-select v-model="query.module" size="medium" placeholder="全部" allow-clear @change="handleChange">
|
||||
<a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dataSource.length > 0 && selectedRows.length > 0"
|
||||
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
|
||||
:class="selectedRows.length > 0 ? 'selected' : ''"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<a-checkbox
|
||||
:model-value="checkedAll"
|
||||
:indeterminate="indeterminate"
|
||||
class="mr-8px"
|
||||
@change="handleSelectAll"
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{{ selectedRows.length }}</span>
|
||||
个文件
|
||||
</span>
|
||||
|
||||
<span class="operation-btn" @click="handleBatchDownload">批量下载</span>
|
||||
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<icon-close size="16" class="cursor-pointer color-#737478" @click="handleCloseTip" />
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
column-resizable
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
:selected-keys="selectedRowKeys"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%', y: '100%' }"
|
||||
class="w-100% flex-1 overflow-hidden"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
: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
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
|
||||
{{ exactFormatTime(record.time) }}
|
||||
</template>
|
||||
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column data-index="operation" width="100" title="操作">
|
||||
<template #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="handleDelete(record)" />
|
||||
<a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">下载</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="flex justify-end my-16px">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.page_size"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DeleteTaskModal ref="deleteTaskModalRef" @batchUpdate="onBatchSuccess" @update="getData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fetchAccountGroups } from '@/api/all/propertyMarketing';
|
||||
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
|
||||
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
rowSelection,
|
||||
handleSelect,
|
||||
handleSelectAll,
|
||||
} = useTableSelectionWithPagination({
|
||||
onPageChange: () => {
|
||||
getData();
|
||||
},
|
||||
onPageSizeChange: () => {
|
||||
getData();
|
||||
},
|
||||
});
|
||||
|
||||
const visible = ref(false);
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
const groups = ref([]);
|
||||
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 = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
getGroups();
|
||||
getData();
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
];
|
||||
pageInfo.value.total = 9;
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.column = column;
|
||||
query.value.order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedRows.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
console.log('handleDownload');
|
||||
};
|
||||
const handleBatchDownload = () => {
|
||||
console.log('handleBatchDownload', selectedRows);
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
const { id, file_name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${file_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 = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
defineExpose({ init, reset });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,50 @@
|
||||
.export-task-wrap {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,271 +1,29 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="下载中心"
|
||||
title="任务中心"
|
||||
modal-class="download-center-modal"
|
||||
width="860px"
|
||||
:mask-closable="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="filter-row flex mb-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">操作人员</span>
|
||||
<a-input
|
||||
v-model="query.search"
|
||||
class="w-240px"
|
||||
placeholder="请搜索..."
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">所属模块</span>
|
||||
<a-select v-model="query.module" size="medium" placeholder="全部" allow-clear @change="handleChange">
|
||||
<a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dataSource.length > 0 && selectedItems.length > 0"
|
||||
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
|
||||
:class="selectedItems.length > 0 ? 'selected' : ''"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<a-checkbox
|
||||
:model-value="checkedAll"
|
||||
:indeterminate="indeterminate"
|
||||
class="mr-8px"
|
||||
@change="handleSelectAll"
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{{ selectedItems.length }}</span>
|
||||
个文件
|
||||
</span>
|
||||
|
||||
<span class="operation-btn" @click="handleBatchDownload">批量下载</span>
|
||||
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<icon-close size="16" class="cursor-pointer color-#737478" @click="handleCloseTip" />
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
column-resizable
|
||||
row-key="id"
|
||||
:row-selection="{
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
width: 48,
|
||||
}"
|
||||
:selected-keys="selectedItems"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="file-table w-100% flex-1"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
: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
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
|
||||
{{ exactFormatTime(record.time) }}
|
||||
</template>
|
||||
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column data-index="operation" width="100" title="操作">
|
||||
<template #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="handleDelete(record)" />
|
||||
<a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">下载</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="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>
|
||||
|
||||
<DeleteTaskModal ref="deleteTaskModalRef" @batchUpdate="onBatchSuccess" @update="getData" />
|
||||
<ExportTask />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fetchAccountGroups } from '@/api/all/propertyMarketing';
|
||||
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
|
||||
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
|
||||
import DeleteTaskModal from './delete-task-modal.vue';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-delete.png';
|
||||
import ExportTask from './components/export-task';
|
||||
|
||||
const visible = ref(false);
|
||||
const dataSource = ref([]);
|
||||
const query = ref(cloneDeep(INITIAL_FORM));
|
||||
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
|
||||
const selectedItems = ref([]);
|
||||
const groups = ref([]);
|
||||
const deleteTaskModalRef = ref(null);
|
||||
|
||||
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
|
||||
const indeterminate = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
|
||||
);
|
||||
|
||||
const open = () => {
|
||||
getGroups();
|
||||
getData();
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
const onClose = () => {
|
||||
query.value = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(INITIAL_FORM);
|
||||
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
file_name: '投放指南20150701',
|
||||
module: '营销资产平台',
|
||||
time: 1752130053,
|
||||
name: '张三三张三三张三三张三三张三三',
|
||||
},
|
||||
];
|
||||
};
|
||||
const reload = () => {
|
||||
pageInfo.value.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.column = column;
|
||||
query.value.order = order === 'ascend' ? 'asc' : 'desc';
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
reload();
|
||||
};
|
||||
const handleDelete = (record) => {
|
||||
const { id, file_name } = record;
|
||||
deleteTaskModalRef.value.open({
|
||||
id,
|
||||
name: `“${file_name || '-'}”`,
|
||||
});
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedItems.value.map((item) => item.id);
|
||||
const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
|
||||
deleteTaskModalRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
}
|
||||
};
|
||||
const handleSelect = (selectedRowKeys, selectedRows) => {
|
||||
selectedItems.value = selectedRowKeys;
|
||||
};
|
||||
|
||||
const handleSelectAll = (checked) => {
|
||||
if (checked) {
|
||||
selectedItems.value = dataSource.value.map((item) => item.id);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseTip = () => {
|
||||
selectedItems.value = [];
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
console.log('handleDownload');
|
||||
};
|
||||
const handleBatchDownload = () => {
|
||||
console.log('handleBatchDownload');
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.value.page = current;
|
||||
getData();
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.value.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const onBatchSuccess = () => {
|
||||
selectedItems.value = [];
|
||||
getData();
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,18 +1,4 @@
|
||||
.download-center-modal {
|
||||
.arco-input-wrapper,
|
||||
.arco-select-view-single,
|
||||
.arco-select-view-multiple {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
&:focus-within,
|
||||
&.arco-input-focus,
|
||||
&.arco-textarea-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
.arco-modal-header {
|
||||
.arco-modal-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
@ -25,7 +11,9 @@
|
||||
}
|
||||
.arco-modal-body {
|
||||
height: 536px;
|
||||
padding: 24px 20px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
@ -46,55 +34,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.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; /* 166.667% */
|
||||
}
|
||||
.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; /* 157.143% */
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #F64B31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-table {
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
@ -104,5 +43,3 @@
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,6 +71,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
|
||||
const rowSelection = computed(() => ({
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
width: 48,
|
||||
}));
|
||||
|
||||
return {
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="cts color-#3C4043 s1"
|
||||
>已选<span class="color-#6D4CFE num mx-3px">{{ selectedAccounts.length }}个</span>账户</span
|
||||
>已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}个</span>账户</span
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
|
||||
@ -109,7 +109,7 @@
|
||||
class="ml-16px"
|
||||
status="danger"
|
||||
size="large"
|
||||
:disabled="!selectedAccounts.length"
|
||||
:disabled="!selectedRows.length"
|
||||
@click="onConfirm"
|
||||
>添加已选账户</a-button
|
||||
>
|
||||
@ -136,7 +136,7 @@ const form = ref(null);
|
||||
const ROW_KEY = 'account_id';
|
||||
const {
|
||||
selectedRowKeys,
|
||||
selectedRows: selectedAccounts,
|
||||
selectedRows,
|
||||
dataSource,
|
||||
pageInfo,
|
||||
onPageChange,
|
||||
@ -170,7 +170,8 @@ const open = (formData) => {
|
||||
|
||||
const onClose = () => {
|
||||
form.value = null;
|
||||
selectedAccounts.value = [];
|
||||
selectedRows.value = [];
|
||||
dataSource.value = [];
|
||||
selectedRowKeys.value = [];
|
||||
query.value = cloneDeep(INITIAL_FORM);
|
||||
pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
|
||||
@ -178,7 +179,7 @@ const onClose = () => {
|
||||
};
|
||||
|
||||
const onConfirm = async () => {
|
||||
const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedAccounts.value });
|
||||
const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedRows.value });
|
||||
if (code === 200) {
|
||||
visible.value = false;
|
||||
update();
|
||||
|
||||
Reference in New Issue
Block a user