iview组件库 - 穿梭栏设置

      <Modalv-model="modal1"title="项目药品上下架维护"width="1020":mask-closable="false"@on-ok="addOk()"><Col span="36"><Selectfilterable@on-change="onChangeProject"placeholder="请先选择药店"><Optionv-for="(item, index) in dictCodesList":value="item":key="index">{{ item.pharmacyName }}</Option></Select></Col><transfer:titles="titles"filterable:operations="['下架', '上架']":list-style="listStyle":data="data_":target-keys="targetKeys1"@on-change="handleChange"></transfer></Modal>

 // 穿梭框弹框dictCodesList: [], //主数据projectSelect: "", //项目选择下拉modal1: false,titles: ["项目未上架列表", "项目已上架列表"],listStyle: {width: "440px",height: "400px",marginTop: "20px",},data_: this.getMockData(),targetKeys1: this.getTargetKeys(),mainDataPharmacyListt: [],originalPharmacyList: [],// =========================   弹框内的穿梭栏onChangeProject(projectSelect) {this.projectSelect = projectSelect.pharmacyId;this.yaopinlists();},open() {this.modal1 = true;this.mainDataPharmacyList();},addOk() {this.$Modal.confirm({title: "确认执行上下架?",content: "执行上下架",// loading: true,onOk: () => {console.log("左边",this.originalPharmacyList,"右边",this.mainDataPharmacySelect);let id = this.$route.query.id || Number(localStorage.getItem("id"));let data = {newCommodityIdList: this.mainDataPharmacySelect,pharmacyId: this.projectSelect,projectId: id,};new Promise((resolve, reject) => {PeopelManagement.yaopinDownShelves(data).then((response) => {this.$Message.success("添加成功!");this.mainDataPharmacyList();this.financeQueryList();}).catch((error) => {reject(error);});});},});},getMockData() {//源列表数据this.mockData = [];if (this.mainDataPharmacyListt != undefined) {for (let i = 0; i < this.mainDataPharmacyListt.length; i++) {this.mockData.push({key: this.mainDataPharmacyListt[i].commodityId,label:this.mainDataPharmacyListt[i].commodityName +`<span  style="float:right;">` +this.mainDataPharmacyListt[i].commoditySpec +`</span>`,falg: this.mainDataPharmacyListt[i].falg,});}}return this.mockData;},getTargetKeys() {//目的列表数据,根据key筛选;return this.getMockData().filter((item) => item.falg == true) //随机设定条件，根据实际业务进行筛选.map((item) => item.key);},handleChange(newTargetKeys, direction, moveKeys) {//移动元素key,目的列表key,移动方向;  important:根据key获得移动的元素，目的列表数据；if (this.mainDataPharmacyListt != undefined) {let originalEle = [];let targetEle = [];function arr_dive(aArr, bArr) {//第一个数组减去第二个数组if (bArr.length == 0) {return aArr;}var diff = [];var str = bArr.join("&quot;&quot;");for (var e in aArr) {if (str.indexOf(aArr[e]) == -1) {diff.push(aArr[e]);}}return diff;}this.data_ = this.getMockData();console.log("555555555555555", this.getMockData());for (let i = 0; i < this.data_.length; i++) {originalEle.push(this.data_[i].label);//移动元素if (this.data_[i].key == moveKeys) {console.log("移动元素：", this.data_[i].label);}//目标列表数据for (var j = 0; j < newTargetKeys.length; j++) {if (this.data_[i].key == newTargetKeys[j]) {targetEle.push(this.data_[i].label);}}}originalEle = arr_dive(originalEle, targetEle);console.log("源列表元素：", originalEle);console.log("目标列表元素：", targetEle);this.targetKeys1 = newTargetKeys;this.mainDataPharmacySelect = this.targetKeys1;}},// 主数据列表yaopinlists() {let id = this.$route.query.id || Number(localStorage.getItem("id"));new Promise((resolve, reject) => {PeopelManagement.yaopinquerytest(JSON.stringify(id), this.projectSelect).then((response) => {this.mainDataPharmacyListt = response.result;console.log("主数据", this.mainDataPharmacyListt);this.mainDataPharmacyListt.forEach((element) => {if (element.falg == true) {this.originalPharmacyList.push(element.commodityId);}});// console.log('拉取原始已经添加的id', this.originalPharmacyList)this.getMockData();this.getTargetKeys();// console.log('++++++++++++++++++1234', this.getTargetKeys())// // this.render(item);this.handleChange(this.getTargetKeys());}).catch((error) => {console.log(error);reject("error");});});},// 主数据列表mainDataPharmacyList() {let id = this.$route.query.id || Number(localStorage.getItem("id"));new Promise((resolve, reject) => {PeopelManagement.queryList(JSON.stringify(id)).then((response) => {this.dictCodesList = response.result;console.log("主数据", this.dictCodesList);}).catch((error) => {console.log(error);reject("error");});});},

iview组件库 - 穿梭栏设置相关推荐

Vue使用iview组件库
Vue使用iview组件库步骤一.使用npm下载ivew组件库 npm install --save iview 步骤二.在main.js中配置iview //导入iView组件库 import i ...
微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选
先上效果图: 打印选中的结果: 代码如下: <template><div> <div class="listfile&qu ...
And design vue组件库table列设置最小宽度
在配置列中加入 customCell: () => {return {style: {'min-width': '100px',},}; },
iview图表_Vue高效UI组件库—iView开发实践
前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨. 关于 iView 开发历程和命名 Talk ...
使用cdn和npm引入的区别_在npm上发布自己的vue组件库（使用npm install 或者 CDN的方式引用）...
一.npm publish 发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm ...
Vue.js_04_组件_Element组件库_组件通信_PropsDown_EventsUp
Vue.js 四天课程学习笔记_第4天课程内容概要: 1. 前情回顾 2. 通过demo再次复习一下计算属性是如何生成过滤后的数组 3. Vue实例的生命周期(11个钩子) 4. 介绍组件化思 ...
mathcal 对应于什么库_如何快速构建React组件库
前言俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
构建Vue前端组件库
在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...

iview组件库 - 穿梭栏设置

iview组件库 - 穿梭栏设置相关推荐

最新文章

热门文章