@ -1,12 +1,264 @@
< template >
< div > 步骤4 < / div >
< 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 >
< script setup >
const props = defineProps ( {
< 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 , # 3 c4043 ) ;
font - family : font - family - regular ;
font - size : 16 px ;
font - style : normal ;
font - weight : 400 ;
line - height : 24 px ;
}
. left {
border - right : 1 px solid var ( -- Border - 2 , # e6e6e8 ) ;
: deep ( . arco - table ) {
}
}
. right {
. tag - item {
max - width : 100 % ;
width : fit - content ;
overflow : hidden ;
display : flex ;
height : 24 px ;
padding : 0 px 8 px ;
align - items : center ;
border - radius : 2 px ;
background : var ( -- BG - 200 , # f2f3f5 ) ;
. name {
color : var ( -- Text - 2 , # 3 c4043 ) ;
font - family : font - family - regular ;
font - size : 14 px ;
font - style : normal ;
font - weight : 400 ;
line - height : 22 px ; /* 157.143% */
flex : 1 ;
@ include ellipsis ;
}
}
}
}
< / style >
rd