feat: 关联内容稿件
This commit is contained in:
rd
@ -1,12 +1,264 @@
|
||||
<template>
|
||||
<div>步骤4</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formQuery: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
<div class="table-wrap flex h-448px">
|
||||
<div class="left flex-1 pr-12px flex flex-col">
|
||||
<div class="flex items-center mb-16px">
|
||||
<a-input
|
||||
v-model="query.uid"
|
||||
class="w-160px mr-16px"
|
||||
placeholder="搜索序号"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
v-model="query.title"
|
||||
class="w-220px mr-16px"
|
||||
placeholder="搜索内容稿件标题"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<a-select
|
||||
v-model="query.uploader_id"
|
||||
size="medium"
|
||||
placeholder="选择上传人员"
|
||||
class="w-160px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
|
||||
{{ item.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
column-resizable
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%', y: '100%' }"
|
||||
class="flex-1 overflow-hidden"
|
||||
:selected-keys="selectedRowKeys"
|
||||
bordered
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData text="暂无账户" />
|
||||
</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">
|
||||
<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 #cell="{ record }">
|
||||
<template v-if="column.dataIndex === 'created_at'">
|
||||
{{ exactFormatTime(record.created_at) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="right w-320px px-12px flex flex-col">
|
||||
<div class="flex justify-between">
|
||||
<p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
|
||||
<a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<template v-if="selectedRows?.length">
|
||||
<div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
|
||||
<a-tooltip :content="item.name">
|
||||
<p class="name mr-4px">{{ item.name || '-' }}</p>
|
||||
</a-tooltip>
|
||||
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<NoData v-else text="暂无账户" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
|
||||
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
|
||||
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
|
||||
|
||||
const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'uid',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '内容稿件标题',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'created_at',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '上传人员',
|
||||
dataIndex: 'uploader.name',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
const emit = defineEmits(['update:formQuery']);
|
||||
|
||||
const props = defineProps({
|
||||
formQuery: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
|
||||
useTableSelectionWithPagination({
|
||||
onSelectChange: () => {
|
||||
updateFormQuery();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
const query = ref({
|
||||
uid: '',
|
||||
uploader_id: '',
|
||||
title: '',
|
||||
});
|
||||
const uploaders = ref([]);
|
||||
const allData = ref([]);
|
||||
|
||||
const updateFormQuery = () => {
|
||||
emit('update:formQuery', {
|
||||
...props.formQuery,
|
||||
work_ids: selectedRowKeys.value,
|
||||
});
|
||||
};
|
||||
const handleSearch = () => {
|
||||
const { uid, title, uploader_id } = query.value;
|
||||
dataSource.value = allData.value.filter((item) => {
|
||||
const uinMatch = uid === '' ? true : item.uid.includes(uid);
|
||||
const titleMatch = title === '' ? true : item.title === title;
|
||||
const operatorIdMatch = uploader_id === '' ? true : item.uploader?.id === uploader_id;
|
||||
return uinMatch && titleMatch && operatorIdMatch;
|
||||
});
|
||||
};
|
||||
|
||||
// const getOperators = async () => {
|
||||
// const { code, data } = await getPlacementAccountOperators();
|
||||
// if (code === 200) {
|
||||
// uploaders.value = data;
|
||||
// }
|
||||
// };
|
||||
const getTableData = async () => {
|
||||
const { code, data } = await getWorksList();
|
||||
if (code === 200) {
|
||||
allData.value = data ?? [];
|
||||
dataSource.value = data ?? [];
|
||||
uploaders.value = data.map( v => ({
|
||||
id: v.uploader?.id,
|
||||
name: v.uploader?.name,
|
||||
}))
|
||||
initSelect();
|
||||
}
|
||||
};
|
||||
const initSelect = () => {
|
||||
if (props.formQuery.work_ids?.length) {
|
||||
selectedRowKeys.value = props.formQuery.work_ids;
|
||||
selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
|
||||
}
|
||||
};
|
||||
|
||||
const onClearSelect = () => {
|
||||
selectedRowKeys.value = [];
|
||||
selectedRows.value = [];
|
||||
updateFormQuery();
|
||||
};
|
||||
|
||||
const onDelete = (item) => {
|
||||
const { id } = item;
|
||||
selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
|
||||
selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
|
||||
updateFormQuery();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getOperators();
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrap {
|
||||
.s1 {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
.left {
|
||||
border-right: 1px solid var(--Border-2, #e6e6e8);
|
||||
:deep(.arco-table) {
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.tag-item {
|
||||
max-width: 100%;
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
.name {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
flex: 1;
|
||||
@include ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
<NoData text="暂无账户"/>
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
@ -108,7 +108,7 @@
|
||||
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<NoData v-else text="暂无账号" />
|
||||
<NoData v-else text="暂无账户" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData />
|
||||
<NoData text="暂无账号"/>
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
|
||||
Reference in New Issue
Block a user