index.vue

<template>
	<div class="dustbin">
		<div class="eibs-dustbin">
			<div class="dustbin-core" slot="reference" @click="dustbinDialogShow">
				<i class="el-icon-delete"></i>
			</div>
		</div>
		<!-- <el-dialog :visible.sync="dialogVisible" title="垃圾桶" width="90%" > -->
       	<m-infsea :model="model"  ref="infsea" />
		<!-- </el-dialog> -->

    	<nodeStatusDialog ref="nodeStatus"  :activities="activities"/>
	</div>
</template>
<script>
import infsea from './infsea.vue'
import commonFunctions from "~/mixin/commonFunctions.js";
import Api from '~/service/Api';
import nodeStatusDialog from './nodeStatusDialog.vue'
export default {
  components: {
    "m-infsea": infsea,
    nodeStatusDialog,
  },
  provide() {
    return {
      root: this
    };
	},
  data() {
    return {
      model:{
          trncorco: {
            ownref: '', //  Reference		.trncorco.ownref
            inidatfro: new Date(), //  Date of entry of Transaction		.trncorco.inidatfro
            inidattil: new Date(), //  Date of entry of Transaction until		.trncorco.inidattil
            trnstm: '', //  List of transaction sfor display		.trncorco.trnstm
            dflg: '', //  国内证标志		.trncorco.dflg
            selinr: {},
          },
          atp: {
            cod: '', //  Transaction Type 		.atp.cod
          },
          atptxt: '', //  Transaction Text		.atptxt
          usrcon: '', //  User		.usrcon
          bchcon: '', //  Branch		.bchcon
          channel: [], // .channel
          relflg: [],
          relflg2: '',
          orderntf:'',
          yptntf:'',
          remark:'',
          confirmType:'',
          codeLev:'',
      },
          activities:[],
          nodeStatusVisible:false,
       dialogVisible: true
    };
  },
  methods: {
    dustbinDialogShow() {
        this.dialogVisible = true;
        if(this.$refs.infsea){
          this.$refs.infsea.handleSearch();
        }   
    },
    async onNodeStatus(index, row) {
			this.$refs.nodeStatus.nodeStatusVisible = true;
			let params = {
				queinr: row.inr
			}
			let res = await Api.post("/public/quesel/getAllOreList", params);
			if (res.respCode == SUCCESS) {
				this.activities = res.data;
      }
		},
  },

  mounted() {
   const that = this;
		const dom = this.$el.querySelector('.eibs-dustbin');
    const minTop = 60,
      maxTop = document.body.clientHeight - dom.offsetHeight - 40;
    dom.onmousedown = e => {
      const disY = e.clientY - dom.offsetTop;
      document.onmousemove = function(e) {
        let top = e.clientY - disY;
        if (top > maxTop) {
          top = maxTop;
        } else if (top < minTop) {
          top = minTop;
        }
        dom.style.top = top + "px";
      };
      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
};
</script>
<style scoped lang="less">
.eibs-dustbin {
  z-index: 1000;
  user-select: auto;
  width: 32px;
  height: 68px;
  position: fixed;
  bottom: 10px;
  right: 0;
}
.dustbin-core {
  background: var(--error-color);
  border-radius: 4px;
  width: 28px;
  padding: 6px;
  color: #fff;
  cursor: pointer;
}
</style>