Tmr-Admin-BeefCattle/.svn/pristine/d0/d0478857db8c9f0cd27e9ccca6cd47d37d9e6624.svn-base

<template>
  <div style="width:800px">
    <el-table
      id="table1"
      :data="table2.list"
      border
      row-key="id"
      align="left"
    >
      <el-table-column label="饲料组" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.groud }}</span>
        </template>
      </el-table-column>
      <el-table-column label="饲料名称" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重量（KG）" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.weight }}</span>
        </template>
      </el-table-column>
      <el-table-column label="搅拌延时（min）" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.hour }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否锁定牛头数比例" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.proportion }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顺序" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.order }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import { GetDataByName } from '@/api/common'
export default {
  name: 'MaterialIssuancePlan',
  data() {
    return {
      table: {
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      table2: {
        list: [
          {
            id: '0',
            groud: '饲料组1',
            name: '饲料名称1',
            weight: '重量1',
            'hour': '搅拌延时1',
            'proportion': '是否锁定牛头数比例1',
            'order': '0'
          },
          {
            id: '1',
            groud: '饲料组2',
            name: '饲料名称2',
            weight: '重量2',
            'hour': '搅拌延时2',
            'proportion': '是否锁定牛头数比例2',
            'order': '1'
          },
          {
            id: '2',
            groud: '饲料组3',
            name: '饲料名称3',
            weight: '重量3',
            'hour': '搅拌延时3',
            'proportion': '是否锁定牛头数比例3',
            'order': '2'
          },
          {
            id: '3',
            groud: '饲料组3',
            name: '饲料名称4',
            weight: '重量4',
            'hour': '搅拌延时4',
            'proportion': '是否锁定牛头数比例4',
            'order': '2'
          },
          {
            id: '4',
            groud: '饲料组4',
            name: '饲料名称5',
            weight: '重量5',
            'hour': '搅拌延时5',
            'proportion': '是否锁定牛头数比例5',
            'order': '3'
          },
          {
            id: '5',
            groud: '饲料组4',
            name: '饲料名称6',
            weight: '重量6',
            'hour': '搅拌延时6',
            'proportion': '是否锁定牛头数比例6',
            'order': '3'
          },
          {
            id: '6',
            groud: '饲料组4',
            name: '饲料名称7',
            weight: '重量7',
            'hour': '搅拌延时7',
            'proportion': '是否锁定牛头数比例7',
            'order': '3'
          },
          {
            id: '7',
            groud: '饲料组6',
            name: '饲料名称8',
            weight: '重量8',
            'hour': '搅拌延时8',
            'proportion': '是否锁定牛头数比例8',
            'order': '5'
          }
        ]
      }
    }
  },
  mounted() {
    // this.rowDrop()
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'Edit', false) // 编辑
            this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
            this.$set(response.data.list[i], 'isCreate', false) // 新增操作
            this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
            this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
          }
          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
            this.table.total = response.data.total
          this.rowDrop()
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    // 行拖拽
    rowDrop() {
      console.log(123)
      const tbody = document.querySelector('#table1 .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = that.table2.list.splice(oldIndex, 1)[0]
          that.table2.list.splice(newIndex, 0, currRow)
          console.log('索引', newIndex)
          console.log('拖动数据', currRow)
          console.log('上', that.table2.list[newIndex - 1])
          console.log('下', that.table2.list[newIndex + 1])

          if (that.table2.list[newIndex - 1] === undefined) { // 拖动至最上方无值 // 顺序等于0，其他+1 // 饲料组等于饲料名称
            for (let i = 0; i < that.table2.list.length; i++) {
              that.table2.list[i].order = parseInt(that.table2.list[i].order) + 1 // 其他的顺序＋1
            }
            currRow.order = 0
            currRow.groud = currRow.name
            console.log('拖动至最上方无值')
          } else if (currRow.order == that.table2.list[newIndex - 1].order) { // 拖动值顺序等于上值顺序
            currRow.order = that.table2.list[newIndex - 1].order
            console.log('拖动值顺序等于上值顺序')
          } else if (that.table2.list[newIndex + 1] == undefined) { // 拖动至最下方无值 // 顺序等于上方顺序+1 // 饲料组等于饲料名称
            currRow.order = parseInt(that.table2.list[newIndex - 1].order) + 1
            currRow.groud = currRow.name
            console.log('拖动至最下方无值')
          } else if (currRow.order == that.table2.list[newIndex + 1].order) { // 拖动值顺序等于下值顺序
            currRow.order == that.table2.list[newIndex + 1].order
            console.log('拖动值顺序等于下值顺序')
          } else if (that.table2.list[newIndex - 1].order == that.table2.list[newIndex + 1].order) { // 拖动至上下顺序一致，顺序/饲料组与上下保持一致
            currRow.order = that.table2.list[newIndex - 1].order
            currRow.groud = that.table2.list[newIndex - 1].groud
            console.log('拖动至上下顺序一致')
          } else if (that.table2.list[newIndex - 1].order !== undefined && that.table2.list[newIndex + 1].order !== undefined) { // 拖动至上下都有值
            console.log('上下')
            if (parseInt(that.table2.list[newIndex - 1].order) + 1 == that.table2.list[newIndex + 1].order) {
              console.log(newIndex)
              for (let i = newIndex; i < that.table2.list.length; i++) {
                that.table2.list[i].order = parseInt(that.table2.list[i].order) + 1
              }
            }
            currRow.order = parseInt(that.table2.list[newIndex - 1].order) + 1
            currRow.groud = currRow.name
            console.log(that.table2.list[newIndex + 1].order)
          }
        }
      })
    }

  }
}
</script>
<style scoped>
</style>