<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组件库 - 穿梭栏设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。