vue手打穿梭框 + Ant Design Vue

vue手打穿梭框 + Ant Design Vue

父组件

<template>
  <div class="transfer SF_removed_move">
    <div class="left">
      <toAddCamera ref="clickToCamera" :cameraTo="cameraToAdd">toAddCamera>
    div>
    <div class="center">
      <a-button class="removed" @click="removed"
        ><img src="@assets/newUi/img/removed.png" width="14px" height="12px" class="imgTop" /> 移出
      a-button>
      <a-button class="move" @click="move">
        移入 <img src="@assets/newUi/img/move.png" width="14px" height="12px" class="imgBottom"
      />a-button>
    div>
    <div class="right">
      <hasAddCamera ref="clickHasCamera" :cameraHas="cameraHasAdd">hasAddCamera>
    div>
  div>
template>

 //移出
    removed() {
      let oldRighttData = this.$refs.clickHasCamera.dataSource
      if (oldRighttData && oldRighttData.length) {
        let rightChooseData = this.$refs.clickHasCamera.clickdata()
        if (rightChooseData && rightChooseData.length) {
          this.$refs.clickToCamera.getRightData(rightChooseData)
        }
        console.log('rightChooseData---', rightChooseData)
      }
    },
    //移入
    move() {
      let oldLeftData = this.$refs.clickToCamera.dataSource
      if (oldLeftData && oldLeftData.length) {
        let leftChooseData = this.$refs.clickToCamera.clickdata()
        if (leftChooseData && leftChooseData.length) {
          this.$refs.clickHasCamera.getLeftData(leftChooseData)
        }
        console.log('leftChooseData---', leftChooseData)
      }
    },

子组件 toAddCamera hasAddCamera 内容一致

<template>
  <div class="SF_transfer SF_ipagination">
    <div class="title_sb">
      <span class="one">span>
      <span class="one two">span>
      <span class="four">待添加相机： {{ this.dataSource.length }}span>
    div>
    <div class="leftTable">
      <div class="searchBlock">
        <a-input placeholder="请输入项目名称" v-model="queryParam.name" />
        <a-button class="ST_search search_btn" @click="searchQuery"> 查询 a-button>
      div>
      <div class="ST_table SF_table">
        <a-table rowKey="id" :columns="columns" :data-source="dataSource" :pagination="ipagination">
          <span slot="checkbox"><a-checkbox v-model="checkAll" @change="onCheckAllChange" />span>
          <span slot="checkboxgroup" slot-scope="text, record">
            <a-checkbox :checked="record && record.isSelected === '1' ? true : false" @change="onChange(record)" />
          span>
          <span slot="time" slot-scope="time">{{ time | filterTime(time) }}span>
        a-table>
        
      div>
    div>
  div>
template>

import { arraySort } from '@/utils/validate'
import moment from 'moment'
export default {
  props: {
    cameraTo: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      mockData: [],
      selectedRowKeys: [],
      checkAll: false,
      ckeckData: null,
      allDataSource: null,
      queryParam: {
        name: '',
      },
      ipagination: {
        pageSize: 4,
        showQuickJumper: false,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
      },
      dataSource: [],
      delDataSource: null,
      columns: [
        {
          key: 'id',
          title: '序号',
          dataIndex: 'id',
        },
        {
          key: 'name',
          title: '相机',
          dataIndex: 'name',
        },
        {
          key: 'time',
          title: '加入时间',
          dataIndex: 'time',
          scopedSlots: { customRender: 'time' },
        },
        {
          key: 'isSelected',
          // title: 'checkbox',
          dataIndex: 'isSelected',
          slots: { title: 'checkbox' },
          scopedSlots: { customRender: 'checkboxgroup' },
          align: 'left',
        },
      ],
    }
  },
  watch: {
    cameraTo: {
      handler(newoval, oldval) {
        this.dataSource = newoval
        this.delDataSource = newoval
        console.log('this.delDataSource', this.delDataSource)
        this.getAllDataSource()
        this.getCheckAll()
        console.log(this.dataSource, 'to待添加相机')
      },
    },
  },
  computed: {},
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
  },
  methods: {
    searchQuery() {
      let allData = []
      if (this.allDataSource && this.allDataSource.length) {
        if (this.queryParam.name) {
          for (let i = 0; i < this.dataSource.length; i++) {
            if (this.dataSource[i].name.indexOf(this.queryParam.name) != -1) {
              allData.push(this.dataSource[i])
            }
          }
          this.dataSource = allData
        } else {
          this.dataSource = this.allDataSource
        }
      }
    },
    getRightData(data) {
      let newData = JSON.parse(JSON.stringify(data))
      console.log('newDatanewData', newData)
      newData.map((item, index) => {
        item.isSelected = '0'
      })
      let rightData = [...this.allDataSource, ...newData]
      rightData.sort(arraySort)
      this.dataSource = rightData
      this.delDataSource = this.dataSource
      console.log('leftthis.dataSource-left-new', this.dataSource)
      this.getAllDataSource()
      this.getCheckAll()
    },
    getAllDataSource() {
      this.allDataSource = this.dataSource
    },

    getdelData(data) {
      //点击移入去除查询id的对象
      if (data && data.length) {
        data.map((v) => {
          console.log(v.id, 'v')
          this.delDataSource = this.delDataSource.filter((item) => {
            return item.id !== v.id
          })
        })
      this.dataSource = this.delDataSource
      this.getAllDataSource()
      }
    },
    getCheckAll() {
      let dataSource = this.dataSource.filter((item) => {
        return item.isSelected == '1'
      })
      if (dataSource && dataSource.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      if (!this.dataSource || !this.dataSource.length) {
        this.checkAll = false
      }
    },
    //全选，非全选
    onCheckAllChange() {
      console.log('checkAllcheckAllcheckAll', this.checkAll)
      let isSelected = '0'
      if (this.checkAll) {
        isSelected = '1'
      }
      let data = JSON.parse(JSON.stringify(this.dataSource))
      data.map((item, index) => {
        item.isSelected = isSelected
      })
      this.$nextTick(() => {
        this.dataSource = data
        this.$forceUpdate()
      })
    },
    //每行数据选中状态
    onChange(record) {
      console.log('record---', record)
      let index = this.dataSource.findIndex((v) => v.id === record.id)
      let newData = JSON.parse(JSON.stringify(this.dataSource))
      newData[index].isSelected = newData[index].isSelected && newData[index].isSelected === '1' ? '0' : '1'
      this.$nextTick(() => {
        this.dataSource = newData
        this.getCheckAll()
        this.$forceUpdate()
      })
      console.log('indexindexindex--', index)
    },
    //选中相机返回选中数据
    clickdata() {
      let chooseData = this.dataSource.filter((v) => v.isSelected === '1')
      this.dataSource = this.dataSource.filter((v) => v.isSelected != '1')
      this.getdelData(chooseData)
      this.getAllDataSource()
      this.getCheckAll()
      return chooseData
    },
  },
}