client-base-v5/src/customer/TabDataSort.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 updown">
        <button
          type="button"
          class="btn btn-default"
          @click="back"
        >
          返回
        </button>
        <button
          type="button"
          class="btn btn-info"
          @click="up"
        >
          上移
        </button>
        <button
          type="button"
          class="btn btn-info"
          @click="down"
        >
          下移
        </button>
        <button
          type="button"
          class="btn btn-primary"
          @click="save"
        >
          保存
        </button>
      </div>
    </div>
    <div
      class="row"
      style="margin-top: 30px;"
    >
      <div class="col-sm-6">
        <div
          id="sortMenu"
          class="list-group"
        >
          <a
            v-for="(item, index) in gridData.dataList"
            :key="'a-' + item.id"
            
            class="list-group-item"
            :class="{'active': selectItemIndex == index}"
            @click="selectNode(index)"
          >
            {{ item.data.name.displayValue[0] }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';

import UserStorageResource from '../api/base/UserStorageResource.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  components: {
    
  },
  data: function () {
    return {
      parentColumnId: null,
      tabId: null,
      gridData: {},
      selectItemIndex: null,
    };
  },

  mounted: function () {
    this.initData();
  },

  methods: {
    /**
         * 初始化数据
         */
    initData: function () {
      var uuid = this.$route.params.uuid;
      var modelData = localStorage.getItem(uuid);
      if (modelData != null && modelData != '') {
        modelData = JSON.parse(modelData).modelData;
        this.parentColumnId = modelData.id;
      }
      var key = uuid + '_tab';
      UserStorageResource.uniqueByKey(key).then(tabStr => {
        // if(tabStr.errorCode != 0) {
        //   Notify.error('提示', tabStr.errorMessage, false);
        //   return;
        // }
        if (tabStr.data != null && tabStr.data != '') {
          let tab = JSON.parse(tabStr.data);
          if (tab.subTabs != undefined && tab.subTabs.length > 0) {
            this.tabId = tab.subTabs[0].id;
          }
          this.getTabData();
        }
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 获取页签数据
         */
    getTabData: function () {
      var _self = this;
      var tabQueryParam = {
        tabId: _self.tabId,
        parentColumnId: _self.parentColumnId,
      };

      $.ajax({
        url: Common.getApiURL('CurdWindowResource/tabData'),
        dataType: 'json',
        type: 'post',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(tabQueryParam),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          if (data != undefined) {
            data.dataList.sort(function (a, b) {
              var index1 = a.data.sortNo.displayValue;
              var index2 = b.data.sortNo.displayValue;
              if (index1 != undefined && index2 != undefined) {
                return index1[0] - index2[0];
              }
            });
          }
          _self.gridData = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 选择某个菜单
         * @param  {Number} index 选中列当前下标
         * @return {void}       
         */
    selectNode: function (index) {
      var _self = this;
      _self.selectItemIndex = index;
    },

    /**
         * 交换数组位置
         * @param  {number} index1 数组下标1
         * @param  {number} index2 数组下标2
         */
    swapItems: function (index1, index2) {
      var _self = this;
      var arr = _self.gridData.dataList;
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      _self.gridData.dataList = arr;
    },

    /**
         * 向上移动
         */
    up: function () {
      var _self = this;
      if (_self.selectItemIndex != null) {
        if (_self.selectItemIndex > 0) {
          _self.swapItems(_self.selectItemIndex, _self.selectItemIndex - 1);
          _self.selectItemIndex -= 1;
        }
      }
    },

    /**
         * 向下移动
         */
    down: function () {
      var _self = this;
      if (_self.selectItemIndex != null) {
        if (_self.selectItemIndex < _self.gridData.dataList.length - 1) {
          _self.swapItems(_self.selectItemIndex, _self.selectItemIndex + 1);
          _self.selectItemIndex += 1;
        }
      }
    },

    /**
        * 保存数据
        */
    save: function () {
      var _self = this;
      var tabSaveDatas = new Array();
      _self.gridData.dataList.forEach(function (item, index) {
        item.changed = true;
        item.data.sortNo.displayValue = [index + 1];
        var tabSaveData = {
          persistenceData: item,
        };
        tabSaveDatas.push(tabSaveData);
      });

      $.ajax({
        url: Common.getApiURL('CurdWindowResource/saveOrUpdateDatas'),
        dataType: 'json',
        type: 'post',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(tabSaveDatas),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          Notify.success('成功', '保存成功', true);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    back: function () {
      window.history.back();
    },
  },
};

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