选择仓库的组件:el-tooltip

接触到了一个选择仓库的组件，来学习下里面都用到了什么知识吧，看看他的来龙去脉。

目标实现效果

• 这个目标组件放在页面的右下角，绿色的按钮；
• 当鼠标悬浮时，会出现选择仓库的字样；

• 点击进来是一个弹框
• 里面是一个下拉框，有很多仓库；

单独创个文件夹放这个文件

• src/views/components>selectDepot>index.vue,文件地址和名称弄好了，接下来看看怎么写内容吧；

需要实现的效果

• hover时，出现选择仓库,点击时出现弹框；需要用到el-tooltip;

el-tooltip的作用

• el-tooltip可以理解为，一个文字提示，当鼠标悬浮的时候，会出现文字提示；

<el-tooltip class="item" effect="dark" content="选择仓库" placement="top-start">
    <el-button 
     icon="el-icon-office-building" 
     type="success" 
     circle 
     @click="onClick"
     >
    </el-button>
</el-tooltip>

• 解析一下el-tooltip;
  • effect,默认提供的主题：有黑色dark和白色light,如果不写effect，默认是dark;
  • content,是鼠标悬浮显示的文字；
  • placement,Tooltip出现的位置;
  • 当然还有其他的属性，我们现在需要的就是这么多；
• 这么看来，这个的功能也很简单，并没有那么复杂；

el-tooltip里面的按钮

• 当悬浮时，会出现文字提示，当按钮点击时触发onClick按钮，出现一个弹框；

onClick() {
	 this.showSelect = true  //控制弹框是否显示
	 this.getAll()
	},

• 下面则是一个对话框；

 <el-dialog  title="选择仓库" 
        :visible.sync="showSelect"   //是否显示弹框
        width="20%" append-to-body
	:close-on-click-modal="false"
	:before-close="onClose"
	:show-close="false"
		>
                
      <el-select style="width: 100%" v-model="selectId" @change="onChangeSelect">
	<el-option :value="item.id" v-for="item of list" :key="item.id" :label="item.depotName"></el-option>
     </el-select>
     
       //这个是一个选择框
     
	 <span slot="footer" class="dialog-footer">
	  <el-button @click="onClickQx">取 消</el-button>
	  <el-button type="primary" @click="onCLickSure" :loading="loading">确 定</el-button>
	 </span>
	 </el-dialog>

• @change="onChangeSelect",当选中时，发生变化时，触发这个函数onChangeSelect

onChangeSelect(e) {
		 console.log(e)  //选中值的编码
		 this.nowSelectId = e //赋值给nowSelectId，就是现在选中的值；
		},

• 是因为el-option里面，对选择的value,进行处理了，value是值，label是显示；

<el-option 
   :value="item.id"        //选中的值
   v-for="item of list"    //遍历list数组
   :key="item.id" 
   :label="item.depotName"  //页面上显示
></el-option>

• 看看这个List是怎么获取的;

  • 是从接口里面，获取的，学习下，如何调用这个接口吧；

    • 先引入接口名称:import { depotlistByUserId} from '@/api/wms/menus';
    • 给这个接口外面套一个名字:getAll;
    • 这里面有一个ansyc 和await的应用，还搞不明白，空了好好研究，这里面真的好多内容，我的天啊，挺难得；
    • 现在先把流程打通；

    	async getAll() {
    	let { data } = await depotlistByUserId({})
    		console.log('data1111',data)
    		this.list = data.listDetailARespList //这就是list
    		this.selectId = data.lastDepot.id
    		this.nowSelectId = data.lastDepot.id
    		this.selectName = data.lastDepot.depotName
    		this.depotCode = data.lastDepot.depotCode
    		this.$store.dispatch('setDepotCode', this.depotCode)
    	},
    
    

    • 从接口里拿到数据data,data是一个对象，在提取相应的值给list;
    • 目的是为了拿到选中框的那个值this.nowSelected;
    • 接下来看看这个值，是传给谁了吧，怎么用的；

    获取下拉框里面的值，确认提交的时候用

    • 确认和取消按钮;

  <span slot="footer" class="dialog-footer">
    <el-button @click="onClickQx">取 消</el-button>
    <el-button type="primary" @click="onCLickSure" :loading="loading">确 定</el-button>
</span>

• 当点击确认按钮，触发onCLickSure事件，主要是传这个选中值this.nowSelected，看他怎么操作的；

onCLickSure() {
   		this.loading = true
   		let list = this.list 
   		let find = list.find(item => item.id === this.nowSelectId)
   		saveLastWarehouseCode({
   			depotCode: find.depotCode,
   		})
   			.then(res => {
   				this.selectId = find.id
   				this.selectName = find.depotName
   				this.depotCode = find.depotCode
   				this.$store.dispatch('setDepotCode', find.depotCode)
   				this.$modal.msgSuccess('切换成功')
   				this.$emit('reload')
   			})
   			.finally(() => {
   				this.showSelect = false
   				this.loading = false
   			})
   	},

• 大概就是这么个情况，代码我也都可以看懂了。