vue 拖拽效果
<template>
<a-card>
<div class="default-content">
<a-spin :spinning="contLoading">
<div class="cont-block cont_card">
<a-row>
<a-col :lg="24">
<w-cont-operate @refresh="getCommunityDynamicList">
<w-space slot="itemRender" :size="10">
<a-button class="tv-btn" slot="itemRender" type="primary" @click="batchReviewItem(selectItems)">
批量审核
</a-button>
<a-button v-if='!batchSort' class="tv-btn" slot="itemRender" @click="changeSortStatus"> 批量排序 </a-button>
<template v-if='batchSort'>
<a-button class="tv-btn" slot="itemRender" @click='handleSort'> 确定 </a-button>
<a-button class="tv-btn" slot="itemRender" @click='cancleSort'> 取消 </a-button>
</template>
</w-space>
</w-cont-operate>
</a-col>
</a-row>
<a-divider />
<a-form-model class="search-handle" layout="vertical" :model="tableParams" ref="formSearch">
<div class="search-handle-block">
<a-form-model-item class="search-handle-item">
<a-select
v-model="tableParams.zoneId"
style="width: 100%"
placeholder="请选择圈子"
allow-clear
@change="changeSearch"
>
<a-select-option :value="item.zoneId" v-for="(item,index) in selectOption.circle" :key="index"> {{item.zoneName}} </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item class="search-handle-item">
<a-select
v-model="tableParams.topicId"
style="width: 100%"
placeholder="请选择话题"
allow-clear
@change="changeSearch"
>
<a-select-option :value="item.topicId" v-for="(item,index) in selectOption.topic" :key="index"> {{item.topicName}} </a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item class="search-handle-item">
<a-input-search
style="width: 100%"
v-model="tableParams.dynamicContent"
placeholder="请输入关键字"
@search="changeSearch"
>
<a-button slot="enterButton">
<a-icon type="search" />
</a-button>
</a-input-search>
</a-form-model-item>
</div>
</a-form-model>
<!-- table组件 -->
<template
v-if="!batchSort">
<w-table
style="margin-top: 10px"
:loading="tbloading"
:columns="columns"
:data-source="tableData"
rowKey="topicId"
draggabled
:row-selection="{
selectedRowKeys: selectRows,
onChange: (keys, items) => handleSelectionChange(keys, items),
}"
:pagination="pagetion"
@change="(page) => changePages(page)"
>
<a slot="dynamicContent" slot-scope="text, record"
@click="$refs.operationModal.editForm('审核', record.dynamicId,true)">
{{ record.dynamicContent }}
</a>
<span slot="status" slot-scope="text, record">
{{ record.status === '1' ? '已审核' : record.status === '2' ? '已拒绝' : '待审核' }}
</span>
<span slot="action" slot-scope="text, record" class="table-page-action">
<a v-if="record.status === '0' || !record.status" @click="moreOperation(1, record)"> 审核 </a>
<a v-if="record.status === '1'" @click="moreOperation(2, record)">
{{ record.topStatus == 0 ? '置顶' : '取消置顶' }}
</a>
<a v-if="record.status === '1'" @click="moreOperation(3, record)"> 指定 </a>
<a v-if="record.status === '2'" @click="moreOperation(4, record)"> 删除 </a>
</span>
</w-table>
</template>
<template
v-if="batchSort"
>
<w-table
class='section-content'
style="margin-top: 10px"
:loading="tbloading"
:columns="tableSortcolumns"
:data-source="tableData"
rowKey="topicId"
draggabled
:row-selection="{
selectedRowKeys: selectRows,
onChange: (keys, items) => handleSelectionChange(keys, items),
}"
:pagination="pagetion"
@change="(page) => changePages(page)"
>
<span slot="sortIndex" slot-scope="text">
<i
v-if="batchSort"
class="tb-sort-icon iconfont icon-tuozhuai"
style="margin-right: 10px"
/>
{{ text }}
</span>
<a slot="dynamicContent" slot-scope="text, record"
@click="$refs.operationModal.editForm('审核', record.dynamicId,true)">
{{ record.dynamicContent }}
</a>
<span slot="status" slot-scope="text, record">
{{ record.status === '1' ? '已审核' : record.status === '2' ? '已拒绝' : '待审核' }}
</span>
<span slot="action" slot-scope="text, record" class="table-page-action">
<a v-if="record.status === '0' || !record.status" @click="moreOperation(1, record)"> 审核 </a>
<a v-if="record.status === '1'" @click="moreOperation(2, record)">
{{ record.topStatus == 0 ? '置顶' : '取消置顶' }}
</a>
<a v-if="record.status === '1'" @click="moreOperation(3, record)"> 指定 </a>
<a v-if="record.status === '2'" @click="moreOperation(4, record)"> 删除 </a>
</span>
</w-table>
</template>
<OperationModal ref="operationModal" @handleOk="handleOk" />
<SpecifyModal ref="specifyModal" @handleOk="handleOk" />
</div>
</a-spin>
</div>
</a-card>
</template>
<script>
import {
getCommunityDynamicList,
removeCommunityDynamic,
changeCommunityTopStatus,
approveCommunityBatch,
approveCommunitySort
} from '@/api/system/cmsCommunityDynamic'
import { getCommunityGridList } from '@/api/system/cmsCommunityGrid'
import { getCommunityTopicList } from '@/api/system/cmsCommunityTopic'
import Sortable from 'sortablejs'
import OperationModal from './components/OperationModal'
import SpecifyModal from './components/SpecifyModal'
import { deepCopy,getSortIndex } from '@/utils/util'
import columns from './utils/colums'
import config from './utils/config'
export default {
components: {
OperationModal,
SpecifyModal,
},
data() {
return {
columns: columns.index,
reviewRow: {},
contLoading: false,
tbloading: false,
tableSortcolumns: columns.index,
sortTableData: [],
sectionAddType: config.sectionAddType,
sectionMoveType: config.sectionMoveType,
sectionTableType: config.sectionTableType,
sectionTableSelectType: config.sectionTableSelectType,
sectionConfigType: config.sectionType,
batchSort: false,
tableData: [],
tableParams: {
dynamicContent: '',
zoneId: undefined,
topicId: undefined,
},
pagetion: {
current: 1,
pageSize: 10,
total: 0,
...this.global.pageConfig,
},
tableAvtive: {
sectionType: '',
sectionId: '',
},
selectRows: [],
selectItems: [],
selectOption:{
circle:[],
topic:[]
}
}
},
mounted() {
this.getCommunityDynamicList()
},
methods: {
async getCommunityDynamicList() {
this.tbloading = true
const response = await getCommunityDynamicList({
pageSize: this.pagetion.pageSize,
pageNum: this.pagetion.current,
...this.tableParams,
})
if (response && response.code === 0) {
this.getCommunityList()
this.topicCommunityList()
this.tableData = getSortIndex(response.rows)
this.pagetion.total = response.total
} else {
this.$antdmessage.error('系统错误，请稍后再试')
}
this.tbloading = false
},
async changePages(pagination) {
this.tbloading = true
const pager = { ...this.pagetion }
pager.current = pagination.current
pager.pageSize = pagination.pageSize
this.pagetion = pager
const response = await getCommunityDynamicList({
pageSize: pagination.pageSize,
pageNum: pagination.current,
...this.tableParams,
})
if (response && response.code === 0) {
this.tableData = getSortIndex(response.rows)
this.pagetion.total = response.total
} else {
this.$antdmessage.error('系统错误，请稍后再试')
}
this.tbloading = false
},
async changeSearch() {
this.pagetion.current = 1
this.pagetion.pageSize = 10
this.getCommunityDynamicList()
},
handleSelectionChange(keys, items) {
this.selectRows = keys
this.selectItems = items
},
handleOk() {
this.getCommunityDynamicList()
},
//圈子下拉列表
async getCommunityList(){
const response = await getCommunityGridList({
pageSize: 1000,
pageNum: 1,
zoneName:'',
})
if (response && response.code === 0) {
this.selectOption.circle = response.rows
}
},
//话题下拉列表
async topicCommunityList(){
const response = await getCommunityTopicList({
pageSize: 1000,
pageNum: 1,
zoneName:'',
})
if (response && response.code === 0) {
this.selectOption.topic = response.rows
}
},
//批量审核
async batchReviewItem(idList) {
if (idList.length === 0) {
this.$antdmessage.error('请先选择选项，在操作！')
} else {
let ids = idList.map((item) => {
return {
approveContent: item.approveContent,
status: item.status,
dynamicId: item.dynamicId,
}
})
const response = await approveCommunityBatch(ids)
if (response && response.code === 0) {
this.$antdmessage.success('操作成功！')
this.selectRows = this.selectRows.filter((item) => !idList.includes(item))
this.selectItems = this.selectItems.filter((item) => !idList.includes(item.categoryId))
this.getCommunityDynamicList()
} else {
this.$antdmessage.error('系统错误，请稍后再试！')
}
}
},
//批量排序
/**
* @Author gaoxiang
* @DateTime 2020/9/27
* @lastTime 2020/9/27
* @description 批量排序
*/
changeSortStatus() {
const tableSortcolumns = deepCopy(this.columns).filter(item =>
item.dataIndex !== 'action')
this.tableSortcolumns = tableSortcolumns
this.sortTableData = deepCopy(this.tableData)
this.batchSort = true;
setTimeout(() => {
const el = document.querySelectorAll(`.section-content .ant-table-tbody`)[0]
const _this = this
Sortable.create(el, {
handle: '.tb-sort-icon',
onEnd({ newIndex, oldIndex }) {
let sortTableData = deepCopy(_this.sortTableData)
const currSelectRow = sortTableData.splice(oldIndex, 1)[0]
sortTableData.splice(newIndex, 0, currSelectRow)
_this.sortTableData = sortTableData
}
})
}, 200)
},
/**
* @Author gaoxiang
* @DateTime 2020/9/27
* @lastTime 2020/9/27
* @description 排序确定
*/
async handleSort(status) {
const params = {
dynamicIds: [],
featSorts: []
}
const sortTableData = deepCopy(this.sortTableData)
const fixedItems = []
this.tableData.map((item, index) => {
if (item.isFixed === 1) {
fixedItems.push({
...item,
fixedIndex: index
})
}
return item
})
fixedItems.map(item => {
const oldIndex = sortTableData.findIndex(el => el.dynamicId === item.dynamicId)
const currSelectRow = sortTableData.splice(oldIndex, 1)[0]
sortTableData.splice(item.fixedIndex, 0, currSelectRow)
})
let ids = sortTableData.map((item, index) => {
return {
sort:(this.pagetion.current - 1) * this.pagetion.pageSize + index + 1,
dynamicId:item.dynamicId,
isFixed:item.isFixed
}
// params.dynamicIds.push(item.dynamicId)
// params.featSorts.push((this.pagetion.current - 1) * this.pagetion.pageSize + index + 1)
// return item
})
// params.dynamicIds = params.dynamicIds.join()
// params.featSorts = params.featSorts.join()
const response = await approveCommunitySort(ids)
if (response && response.code === 0) {
this.$antdmessage.success('操作成功！')
this.sortTableData = []
this.batchSort = false
this.$forceUpdate()
this.getCommunityDynamicList()
} else {
this.$antdmessage.error('系统错误，请稍后再试！');
}
},
/**
* @Author gaoxiang
* @DateTime 2020/9/27
* @lastTime 2020/9/27
* @description 取消排序
*/
cancleSort() {
this.batchSort = false
this.sortTableData = []
this.$forceUpdate()
},
//操作
async moreOperation(key, record) {
let response = null
let message = ''
let isResponse = false
switch (key) {
case 1:
//审核处理
this.$refs.operationModal.editForm('审核', record.dynamicId)
break
case 2:
//置顶
response = await changeCommunityTopStatus({
dynamicId: record.dynamicId,
})
isResponse = true
message = '操作成功！'
break
case 3:
//指定
this.$refs.specifyModal.open(record.sort,record.dynamicId) //弹窗方法
break
case 4:
//删除
response = await removeCommunityDynamic({
dynamicId: record.dynamicId,
})
isResponse = true
message = '操作成功！'
break
default:
break
}
if (isResponse && response && response.code === 0) {
this.$antdmessage.success(message)
this.getCommunityDynamicList()
} else {
if (response) {
this.$antdmessage.error(response.msg)
}
}
},
},
}
</script>
