context-menu-drag.vue

<template>
  <Drawer class-name="sider-drawer" placement="left" :closable="false" :mask="false" width="200" v-model="leftDrawerVisiable">
    <div class="context-menu-drag">
      <div class="menu-list">
        <div class="menu-header" @click="rightDrawerVisiable=!rightDrawerVisiable">
          <div class="menuicon">
            <Icon type="md-apps" />
          </div>
          <div class="content">
            <span>{{$t('components.contextMenuDrag.allApp')}}</span>
          </div>
          <div class="forward">
            <Icon type="ios-arrow-forward" />
          </div>
        </div>
        <div style="padding:8px 0px;" class="col-6">
          <draggable class="list-group" tag="ul" v-model="selectlist" v-bind="dragOptionsVal" @start="drag=true" @end="drag=false" :animation="250" handle=".handle" ghost-class="ghost">
            <transition-group type="transition" :name="!drag ? 'flip-list' : null">
              <li @click="skipTo(item)" class="list-group-item" v-for="(item,index) in selectlist" :key="item.id">
                <el-row>
                  <el-col class="menuicon" :span="4">
                    <span>
                      <Icon v-if="item.icon" :type="item.icon" />
                      <Icon v-else type="md-menu" />
                    </span>
                  </el-col>
                  <el-col :span="14">
                    <span>{{ item.fullName ? item.fullName:item.label }}</span>
                  </el-col>
                  <el-col :span="6">
                    <div class="bar">
                      <div>
                        <Icon type="ios-close" @click.stop="removeAt(index)" />
                      </div>
                      <div>
                        <Icon type="ios-move handle" />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </li>
            </transition-group>
          </draggable>
        </div>
      </div>
      <Drawer class-name="menu-drawer" width="60" :closable="true" :mask="false" placement="left" v-model="rightDrawerVisiable">
        <div class="menuItems">
          <div @click="skipTo(item)" class="item" v-for="(item) in list" :key="item.id">
            <span class="title">{{ item.fullName ? item.fullName:item.label }}</span>
            <span v-if="isStar(item.id)" class="star" @click.stop="outStar(item)">
              <Icon type="ios-star" />
            </span>
            <span v-else class="star" @click.stop="onStar(item)">
              <Icon type="ios-star-outline" />
            </span>
          </div>
        </div>
      </Drawer>
    </div>
  </Drawer>
</template>

<script lang="ts">
import draggable from "vuedraggable";
import EntityService from '@/service/entity-service';
import { Vue,Component,Provide,Watch,Prop,Model } from "vue-property-decorator";

// tslint:disable-next-line:max-classes-per-file
@Component({
  components: {
    draggable
  }
})
export default class ContextMenuDrag extends Vue {

  public panelShow: boolean = true;

  /**
   * 抽屉菜单状态
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  @Prop() public contextMenuDragVisiable?: boolean;

  /**
   * 拖拽列表配置对象
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  @Model("change") public dragOptions: any;

  /**
   * 右侧飘窗状态
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public rightDrawerVisiable: boolean = false;

  /**
   * 左侧飘窗状态
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public leftDrawerVisiable: boolean = false;

  /**
   * 全部应用数据
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public list: Array<any> = [];

  /**
   * 已选择的应用数据
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public selectlist: Array<any> = [];

  /**
   * 拖拽列表
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public drag: boolean = false;

  /**
   * 拖拽列表配置项
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  get dragOptionsVal() {
    return {
      animation: 200,
      group: "description",
      disabled: false,
      ghostClass: "ghost"
    };
  }
  
  /**
   * 实体服务对象
   *
   * @protected
   * @type {EntityService}
   * @memberof ContextMenuDrag
   */
  protected entityService: EntityService = new EntityService();

  /**
   * 监听抽屉菜单状态
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  @Watch("contextMenuDragVisiable")
  public onVisiableChange(newVal: any, oldVal: any) {
    if (newVal) {
      this.leftDrawerVisiable = newVal;
    } else {
      let that: any = this;
      let params: any = {};
      params.model = this.selectlist;
      const put: Promise<any> = this.entityService.updateChooseApp(null,params);
      this.rightDrawerVisiable = false;
      setTimeout(() => {
        that.leftDrawerVisiable = false;
      }, 300);
    }
  }

  /**
   * 鼠标移入服务时显示右侧飘窗
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public showMenuDrawer() {
    let that: any = this;
    if(this.contextMenuDragVisiable){
      setTimeout(() => {
        that.rightDrawerVisiable = true;
      }, 300);
    }
  }

  /**
   * 判断是否已选择该应用
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public isStar(id: any) {
    let istar: boolean = false;
    this.selectlist.forEach((item: any) => {
      if (Object.is(item.id, id)) {
        istar = true;
      }
    });
    return istar;
  }

  /**
   * 跳转到应用
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
   public skipTo(item: any){
     if(item.addr){
      let params: any = {};
      params.model = this.selectlist;
      const put: Promise<any> = this.entityService.updateChooseApp(null,params);
      window.location.href = item.addr;
     }else{
       this.$message.info((this.$t('components.contextMenuDrag.noFind') as string));
     }
   }

  /**
   * 加入列表
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public onStar(item: any) {
    item.visabled = 1;
    this.selectlist.push(item);
  }

  /**
   * 从列表中删除
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  public outStar(item: any) {
    item.visabled = 0;
    let index: number = 0;
    let that: any = this;
    this.selectlist.forEach((select: any, index: number) => {
      if (Object.is(item.id, select.id)) {
        that.selectlist.splice(index,1);
      }
    });
  }
  /**
   * 删除已选择应用
   *
   * @returns
   * @memberof ContextMenuDrag
   */
  removeAt(index: any) {
    this.selectlist.splice(index, 1);
  }

  /**
   * 拖拽列表排序
   */
  sort() {
    this.selectlist = this.selectlist.sort((a, b) => a.order - b.order);
  }

  /**
   * 过滤已选择的应用
   * 
   * @returns
   * @memberof ContextMenuDrag
   */
  listFilter() {
    let that: any = this;
    that.selectlist = [];
    this.list.forEach((item: any) => {
      if (item.visabled === 1) {
        that.selectlist.push(item);
      }
    });
  }
  /**
   * vue 生命周期
   *
   * @returns
   * @memberof ContextMenuDrag
   */
  mounted() {
    let that: any = this;
    const get: Promise<any> = this.entityService.getAllApp(null,{});
    get.then((response: any) => {
        if (response) {
          that.list = response.data.model;
          that.listFilter();
        }
      }).catch((error:any) =>{
        console.warn("加载数据错误")
      });
  }
}
</script>

<style lang='less'>
@import './context-menu-drag.less';
</style>