阅读 115

vue 拖拽效果

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>

复制代码
文章分类
前端
文章标签