背景

在重构中遇到了一个比较复杂的排序功能，里面有同组项，拖动时要考虑同组项拖动其中一个时其他同组项的排序处理问题，且有同组项拖动到另外一个同组项之间等问题的处理，整个排序处理逻辑比较复杂，因此研究了一下小清的写法后，值得分享

访问地址

http://192.168.3.103:8099/#/login
线上访问地址为：crm.mytijian.com -> 维护后台 -> 单项管理 -> 排序

页面展示

核心功能概述

  1. 当拖动非同组项到同组项A中间时，采用置换方式将此非同组项依次向上或向下置换，直至挪出此同组项A之间
  2. 当拖动同组项A的其中一个小项A1移动到非同组项位置时，首先把同组项A全部找到并放入一个数组，然后以A1为分界线，将A1上下两层中除去同组项A后剩下的数据分别放入start和end两个数组，然后以start + A + end方式重新组装并排序
  3. 当拖动同组项A的其中一个小项A1移动到同组项B中间时，首先把同组项A和同组项B分别放入A、B两个数组，然后以A1为分界线，将A1上下两层中除去同组项A和同组项B的数据分别放入start和end两个数组，然后以start + A + B + end 或者start + B + A + end方式重新组装并排序

代码

  1. <template>
  2.   <div class="p10">
  3.     <div class="lh30">
  4.       <div class="dib">
  5.         项目名称：<i-input v-model.trim="filterWord" icon="ios-search-strong" placeholder="请输入项目名称" style="width: 260px" class="fr" @on-enter="filterItem" @on-click="filterItem" @on-change="filterItem">
  6.         </i-input>
  7.       </div>
  8.       <span class="c-rd ml10">鼠标拖动可排序，双击单项可单个排序(注：当输入搜索条件时不可拖动)</span>
  9.     </div>
  10.     <div>
  11.       <div class="df">
  12.         <div>
  13.           <div class="mt10 vertical-table overflow" v-bind:style="{'max-height': height, 'min-height': '300px', 'max-width': '900px'}">
  14.             <table class="mt-table">
  15.               <tr>
  16.                 <th class="w60">序号</th>
  17.                 <th class="w300">项目名称</th>
  18.                 <th class="w150">所有类别</th>
  19.               </tr>
  20.               <draggable element="tbody" id="dragList" v-model="itemList" @end="end" @change="change" :options="{disabled: !!filterWord}">
  21.                 <tr v-for="(item, index) in itemList" :key="item.id" :class="{'c-fail': !item.show}" v-show="!item.hide" @dblclick="openSingleSort(item, index)">
  22.                   <td>{{item.sequence}}</td>
  23.                   <td><span v-if="item.groupId"> {{item.groupId}} <i class="iconfont icon-fenzu c-primary"></i></span> {{item.name}}</td>
  24.                   <td>{{item.speciesName}}</td>
  25.                 </tr>
  26.               </draggable>
  28.             </table>
  30.             <mt-none class="pt20" :show="itemList.length == 0" />
  31.           </div>
  32.           <div class="mt10">
  33.             <Button type="ghost" class="fr" @click="cancel">取消</Button>
  34.             <Button type="primary" class="fr mr10" @click="ok">保存</Button>
  35.           </div>
  36.         </div>
  37.         <div class="mt10 ml10">
  38.           <table class="mt-table w200 table-radius">
  39.             <tr>
  40.               <th>类别顺序</th>
  41.             </tr>
  42.             <tr class="pointer" v-for="(species, index) in speciesList" :key="index">
  43.               <td>{{species.name}}</td>
  44.             </tr>
  46.           </table>
  47.           <Button type="primary" class="mt15" @click="sortBySpecies">按以上类别排序</Button>
  48.         </div>
  49.       </div>
  50.     </div>
  52.     <!-- 弹窗 -->
  53.     <Modal v-model="isShowModal" width="400px" title="修改" :mask-closable="false">
  54.       <div v-if="isShowModal">
  55.         <Form :label-width="100">
  56.           <FormItem label="修改">
  57.             <div class="c-or">{{selectItem.name}}</div>
  58.           </FormItem>
  59.           <FormItem label="序号为：">
  60.             <div class="rel">
  61.               <InputNumber class="w150" v-model.trim="newSequence" @on-change="filterInput" :precision="0" :step="1"></InputNumber>
  62.             </div>
  63.           </FormItem>
  65.         </Form>
  66.       </div>
  67.       <div slot="footer">
  68.         <span class="c-gr" v-if="successMsg">{{successMsg}}</span>
  69.         <Button type="text" @click="clearModalData">取消</Button>
  70.         <Button type="primary" @click="changeSequence">确定</Button>
  71.       </div>
  72.     </Modal>
  74.   </div>
  75. </template>
  76. <script>
  77. import { mapState } from 'vuex'
  78. import api from '@/api/m-itemmanage'
  79. import _cloneDeep from 'lodash/cloneDeep'
  80. import Draggable from 'vuedraggable'
  81. import { fullTohalf, arrayToHash, contains } from '@/common/utils'
  83. export default {
  84.   name: 'manage-itemmanage-sort',
  85.   data() {
  86.     return {
  87.       filterWord: '',
  88.       itemList: [],
  89.       itemListBak: [],
  90.       itemListBak2: [],
  91.       oldItemList: [],
  92.       speciesList: [],
  93.       height: '',
  94.       startGroupItem: [],
  95.       endGroupItem: [],
  96.       isShowModal: false,
  97.       selectItem: [],
  98.       selectIndex: '',
  99.       newSequence: null,
  100.       successMsg: ''
  101.     }
  102.   },
  103.   computed: {
  104.     ...mapState({
  105.       hospitalId: state => state.user.hospital.id
  106.     })
  107.   },
  108.   components: {
  109.     draggable: Draggable
  110.   },
  111.   methods: {
  112.     filterInput() {
  113.       this.newSequence = parseInt(this.newSequence)
  114.     },
  115.     changeSequence() {
  116.       if (this.newSequence || this.newSequence === 0) {
  117.         let newIndex = parseInt(this.newSequence)
  118.         if (newIndex < 0) {
  119.           newIndex = 0
  120.         }
  121.         if (newIndex >= this.itemList.length - 1) {
  122.           newIndex = this.itemList.length - 1
  123.         }
  124.         console.log(this.selectIndex, newIndex)
  125.         if (newIndex != this.selectIndex) {
  126.           this.singleSort(newIndex, this.selectIndex)
  127.         } else {
  128.           this.clearModalData()
  129.         }
  130.       } else {
  131.         this.clearModalData()
  132.       }
  133.     },
  134.     clearModalData() {
  135.       this.isShowModal = false
  136.       this.newSequence = null
  137.       this.successMsg = ''
  138.     },
  139.     singleSort(newIndex, index) {
  140.       let sorted = []
  141.       let startGroupItem = this.getWholeGroup(index)
  142.       let endGroupItem = this.getWholeGroup(newIndex)
  144.       let insertArray = []
  145.       let selectItem = this.itemList[index]
  146.       let dropItem = this.itemList[newIndex]
  147.       if (selectItem.groupId && dropItem.groupId && selectItem.groupId == dropItem.groupId) {
  148.         //如果是组内移动，不做处理
  149.         return
  150.       }
  151.       if (selectItem.groupId) {
  152.         insertArray = insertArray.concat(startGroupItem)
  153.       } else {
  154.         insertArray.push(selectItem)
  155.       }
  157.       if (dropItem.groupId) {
  158.         insertArray = insertArray.concat(endGroupItem)
  159.       } else {
  160.         insertArray.push(dropItem)
  161.       }
  163.       let beforeGroupItems = []
  164.       let afterGroupItems = []
  165.       for (let i = 0; i < newIndex; i++) {
  166.         if (!this.containsItem(insertArray, this.itemList[i])) {
  167.           beforeGroupItems.push(this.itemList[i])
  168.         }
  169.       }
  170.       for (let i = newIndex; i < this.itemList.length; i++) {
  171.         if (!this.containsItem(insertArray, this.itemList[i])) {
  172.           afterGroupItems.push(this.itemList[i])
  173.         }
  174.       }
  176.       sorted = sorted
  177.         .concat(beforeGroupItems)
  178.         .concat(insertArray)
  179.         .concat(afterGroupItems)
  181.       this.itemList = sorted
  182.       for (let i = 0; i < this.itemList.length; i++) {
  183.         this.itemList[i].sequence = i
  184.       }
  185.       this.ok('single')
  186.     },
  187.     containsItem(array, item) {
  188.       for (let i = 0; i < array.length; i++) {
  189.         if (array[i].id == item.id) {
  190.           return true
  191.         }
  192.       }
  193.       return false
  194.     },
  196.     ok(type) {
  197.       this.newItemList = arrayToHash(this.itemList)
  198.       let changedItem = [] //排序后，sequence发生变化的项目
  199.       for (let index in this.newItemList) {
  200.         if (this.oldItemList[index].sequence != this.newItemList[index].sequence) {
  201.           changedItem.push({ id: this.oldItemList[index].id, sequence: this.newItemList[index].sequence, hisItemId: this.newItemList[index].hisItemId })
  202.         }
  203.       }
  204.       console.log(5, changedItem)
  205.       if (changedItem.length > 0) {
  207.         api.updateSequence({ data: changedItem }).then(data => {
  208.           if (type === 'single') {
  209.              this.successMsg = '保存成功'
  211.             let timer = setTimeout(() => {
  212.               this.clearModalData()
  213.               clearTimeout(timer)
  214.             }, 1000)
  215.           } else {
  216.             this.$Message.success('保存成功！')
  217.           }
  218.           this.getItem()
  219.         })
  220.       } else {
  221.         this.clearModalData()
  222.       }
  223.     },
  224.     cancel() {
  225.       this.itemList = _cloneDeep(this.itemListBak2)
  226.     },
  228.     openSingleSort(item, index) {
  229.       this.selectItem = item
  230.       this.selectIndex = index
  231.       this.isShowModal = true
  232.     },
  233.     // step1
  234.     change(evt) {
  235.       // 对应原来老版crm中的sort方法的 update 方法
  236.       this.startGroupItem = this.getWholeGroup(evt.moved.oldIndex)
  237.       this.endGroupItem = this.getWholeGroup(evt.moved.newIndex)
  238.     },
  239.     end(evt) {
  240.       evt.oldIndex // 可以知道拖动前的位置
  241.       evt.newIndex // 可以知道拖动后的位置
  242.       this.sort(evt.newIndex, evt.oldIndex)
  243.     },
  244.     getWholeGroup(index) {
  245.       let len = this.itemList.length
  246.       let groupItems = []
  247.       if (this.itemListBak[index].groupId) {
  248.         for (let i = -index; i < len - index; i++) {
  249.           // console.log(i, len, len-index, index+i, index)
  250.           /*
  251.           *-73 267 194 0 73
  252.           *-72 267 194 1 73
  253.           *...
  254.           *192 267 194 265 73
  255.           *193 267 194 266 73
  256.           */
  257.           // 整个遍历一遍数组并将同组项全部挑选出来
  258.           if (this.itemListBak[index + i] && this.itemListBak[index + i].groupId == this.itemListBak[index].groupId) {
  259.             groupItems.push(this.itemListBak[index + i])
  260.           }
  261.         }
  262.       }
  263.       return groupItems
  264.     },
  265.     sort(currIndex, oldIndex) {
  266.       if (currIndex == undefined) {
  267.         return
  268.       }
  269.       if (this.inOneGroup(currIndex) || !this.itemList[currIndex].groupId) {
  270.         // 1：同组项组内拖动 || 不是同组项拖动
  271.         console.log(-1)
  272.         this.isSortMiddleOfGroup(currIndex, oldIndex)
  273.       } else {
  274.         // 同组项拖动且非组内拖动
  275.         console.log(-2)
  276.         this.sortGroupItem(currIndex, oldIndex)
  277.       }
  279.       for (let i = 0; i < this.itemList.length; i++) {
  280.         this.itemList[i].sequence = i
  281.       }
  282.       // 重新排序后保存当前快照,为了之后在拖动时准确找出牵连的同组项
  283.       this.itemListBak = _cloneDeep(this.itemList)
  284.     },
  286.     sortGroupItem(currIndex, oldIndex) {
  287.       console.log(this.startGroupItem, this.endGroupItem)
  288.       let currItem = this.itemList[currIndex]
  289.       let beforeGroupItems = []
  290.       let afterGroupItems = []
  292.       let endGroupId
  293.       if (this.endGroupItem.length > 0) {
  294.         endGroupId = this.endGroupItem[0].groupId
  295.       }
  297.       let sorted = []
  298.       // 以被拖动的项目为分界线，从上下两层中分别剔除与拖动相关的同组项并分为上下两个大集合
  299.       for (let i = 0; i < currIndex; i++) {
  300.         if (this.itemList[i].groupId != currItem.groupId) {
  301.           if (endGroupId) {
  302.             if (this.itemList[i].groupId != endGroupId) {
  303.               beforeGroupItems.push(this.itemList[i])
  304.             }
  305.           } else {
  306.             beforeGroupItems.push(this.itemList[i])
  307.           }
  308.         }
  309.       }
  310.       for (let i = currIndex + 1; i < this.itemList.length; i++) {
  311.         if (this.itemList[i].groupId != currItem.groupId) {
  312.           if (endGroupId) {
  313.             if (this.itemList[i].groupId != endGroupId) {
  314.               afterGroupItems.push(this.itemList[i])
  315.             }
  316.           } else {
  317.             afterGroupItems.push(this.itemList[i])
  318.           }
  319.         }
  320.       }
  321.       // 若有A同组项向下拖动到B同组项之间，则在重新排序时B在A之上
  322.       // 若有A同组项向上拖动到B同组项之间，则在重新排序时A在B之上
  323.       if (currIndex > oldIndex) {
  324.         sorted = sorted
  325.           .concat(beforeGroupItems)
  326.           .concat(this.endGroupItem)
  327.           .concat(this.startGroupItem)
  328.           .concat(afterGroupItems)
  329.       } else {
  330.         sorted = sorted
  331.           .concat(beforeGroupItems)
  332.           .concat(this.startGroupItem)
  333.           .concat(this.endGroupItem)
  334.           .concat(afterGroupItems)
  335.       }
  336.       this.itemList = sorted
  337.     },
  339.     inOneGroup(dropIndex) {
  340.       let maxInd = this.itemList.length - 1
  341.       if (dropIndex == 0 && this.itemList[0].groupId && this.itemList[1].groupId && this.itemList[0].groupId == this.itemList[1].groupId) {
  342.         console.log(1, true, '被拖动到第一个，整个组被拖动到最上方且是组内拖动')
  343.         return true
  344.       }
  345.       if (dropIndex == maxInd && this.itemList[maxInd].groupId && this.itemList[maxInd - 1].groupId && this.itemList[maxInd].groupId == this.itemList[maxInd - 1].groupId) {
  346.         console.log(2, true, '被拖动到最后一个，整个组被拖动到最后一个且是组内拖动')
  347.         return true
  348.       }
  349.       if (dropIndex == maxInd) {
  350.         console.log(3, false, '拖动到最后一个')
  351.         return false
  352.       }
  353.       if (dropIndex == 0) {
  354.         console.log(4, false, '拖动到第一个')
  355.         return false
  356.       }
  357.       if (this.itemList[dropIndex].groupId && (this.itemList[dropIndex].groupId == this.itemList[dropIndex + 1].groupId || this.itemList[dropIndex].groupId == this.itemList[dropIndex - 1].groupId)) {
  358.         console.log(5, true, '被拖动项目是同组项，且拖动后的位置紧挨着一个id相同的同组项，简称组内拖动')
  359.       } else {
  360.         console.log(6, '非被拖动到第一个且最后一个，且非组内拖动')
  361.       }
  362.       return this.itemList[dropIndex].groupId && (this.itemList[dropIndex].groupId == this.itemList[dropIndex + 1].groupId || this.itemList[dropIndex].groupId == this.itemList[dropIndex - 1].groupId)
  363.     },
  364.     isSortMiddleOfGroup(dropIndex, oldIndex) {
  365.       if (this.inOneGroup(dropIndex)) {
  366.         //组内拖动除外（组内拖动不需要再次重新排序）
  367.         console.log(7, '组内拖动')
  368.         return
  369.       }
  370.       if (!this.itemList[dropIndex - 1] || !this.itemList[dropIndex + 1]) {
  371.         console.log(8, '非同组项 且 被拖动到第一个或最后一个')
  372.         return
  373.       }
  374.       if (!(this.itemList[dropIndex - 1].groupId && this.itemList[dropIndex + 1].groupId && this.itemList[dropIndex - 1].groupId == this.itemList[dropIndex + 1].groupId)) {
  375.         console.log(9, '非同组项之间拖动')
  376.         return
  377.       }
  378.       console.log(10, '非同组项被拖动到同组项之间')
  379.       if (oldIndex < dropIndex) {
  380.         //向下拖
  381.         // 当前被拖动项目 与 下方第一个元素互换位置 并继续循环执行此步骤
  382.         this.exchangeIndex(dropIndex, dropIndex + 1)
  383.         dropIndex = dropIndex + 1
  384.         this.isSortMiddleOfGroup(dropIndex, dropIndex - 1)
  385.       } else if (oldIndex > dropIndex) {
  386.         //向上拖
  387.         this.exchangeIndex(dropIndex, dropIndex - 1)
  388.         dropIndex = dropIndex - 1
  389.         this.isSortMiddleOfGroup(dropIndex, dropIndex + 1)
  390.       }
  391.     },
  393.     exchangeIndex(index1, index2) {
  394.       let temp = this.itemList[index1]
  395.       this.itemList[index1] = this.itemList[index2]
  396.       this.itemList[index2] = temp
  397.     },
  399.     getItem() {
  400.       api.getExamItemInSort({ data: { hospitalId: this.hospitalId } }).then(res => {
  401.         this.itemList = res
  402.         this.itemListBak = _cloneDeep(this.itemList)
  403.         this.itemListBak2 = _cloneDeep(this.itemList)
  404.         this.oldItemList = arrayToHash(_cloneDeep(this.itemList))
  405.         this.filterItem()
  406.       })
  407.     },
  409.     filterItem() {
  410.       this.filterWord = this.filterWord.trim()
  411.       this.filterItemByQianDuan()
  413.       this.srollTo()
  414.     },
  416.     filterItemByQianDuan() {
  417.       let word = fullTohalf(this.filterWord)
  418.       this.itemList.forEach((item, index) => {
  419.         if (contains(item.name, word) || contains(item.pinyin, word) || contains(item.hisItemId, word)) {
  420.           item.hide = false
  421.         } else {
  422.           item.hide = true
  423.         }
  424.       })
  425.     },
  427.     srollTo() {
  428.       for (let i = 0; i < this.itemList.length; i++) {
  429.         if (this.itemList[i].foc) {
  430.           document.getElementById('dragList').scrollTop = 40 * i - 350
  431.           return
  432.         }
  433.       }
  434.       document.getElementById('dragList').scrollTop = 0
  435.     },
  436.     sortBySpecies() {
  437.       this.$Modal.confirm({
  438.         title: '提示',
  439.         content: '你确定按类别重新排序？排序后不可撤销！',
  440.         onOk: () => {
  441.           this.speciesSort()
  442.         }
  443.       })
  444.     },
  445.     speciesSort() {
  446.       let noSpeciesList = []
  447.       let perSpeciesItems = {}
  448.       for (let j = 0; j < this.speciesList.length; j++) {
  449.         perSpeciesItems[this.speciesList[j].id] = []
  450.       }
  451.       for (let i = 0; i < this.itemList.length; i++) {
  452.         let hasSpecies = false
  453.         for (let j = 0; j < this.speciesList.length; j++) {
  454.           let speId = this.speciesList[j].id
  455.           if (speId == this.itemList[i].speciesId) {
  456.             perSpeciesItems[speId].push(this.itemList[i])
  457.             hasSpecies = true
  458.             break
  459.           }
  460.         }
  461.         if (!hasSpecies) {
  462.           noSpeciesList.push(this.itemList[i])
  463.         }
  464.       }
  466.       let sortedItems = []
  467.       for (let i in perSpeciesItems) {
  468.         sortedItems = sortedItems.concat(perSpeciesItems[i])
  469.       }
  470.       sortedItems = sortedItems.concat(noSpeciesList)
  471.       this.itemList = sortedItems
  472.       for (let i = 0; i < this.itemList.length; i++) {
  473.         this.itemList[i].sequence = i
  474.       }
  475.       this.ok()
  476.     }
  477.   },
  478.   mounted() {
  479.     this.height = window.innerHeight - 350 + 'px'
  480.     this.getItem()
  481.     api.getSpeciesList({ data: { hospitalId: this.hospitalId, type: 1 } }).then(res => {
  482.       this.speciesList = res
  483.     })
  484.   }
  485. }
  486. </script>
  487. <style lang="less" scoped  src="../style/index.less">
  488. </style>
文档更新时间: 2019-05-10 14:29