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");});});},

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247857.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247857.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247857.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如何優雅地使用Sublime Text3

Sublime Text&#xff1a;一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件&#xff0c;不僅具有華麗的界面&#xff0c;還支持插件擴展機制&#xff0c;用她來寫代碼&#xff0c;絕對是一種享受。相比于難于上手的Vim&#xff0c;浮腫沉重的Eclipse&#xff0c;VS…

題目:有一分數序列:2/1,3/2,5/3,8/5,13/8,21/13... 求出這個數列的前20項之和。...

題目&#xff1a;有一分數序列&#xff1a;2/1&#xff0c;3/2&#xff0c;5/3&#xff0c;8/5&#xff0c;13/8&#xff0c;21/13... 求出這個數列的前20項之和。 程序分析&#xff1a;請抓住分子與分母的變化規律。 public class 第二十題求數列之和 {public static void mai…

iview 組件 設置頭像更換

基于iview 組件 設置頭像更換 <!-- 頭像更換 --><div style"width: 100%;height:100%;"><div style"height: 100%;"><Upload :on-success"uploadSuccess" :show-upload-list"false" accept"image/png, i…

HTML的target屬性中_blank、_self、_parent、_top含義

_blank 瀏覽器會另開一個新窗口顯示鏈接_self&#xff0c;在同一框架或窗口中打開所鏈接的文檔。 此參數為默認值&#xff0c;通常不用指定。 _parent&#xff0c;將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。 如果含有該鏈接的框架不是嵌套的&#xff0c;則在瀏覽…

Windows 聚焦的鎖屏壁紙設置為桌面壁紙

需求&#xff1a; Windows的鎖屏壁紙偶爾遇到非常喜歡的壁紙&#xff0c;想設置為桌面壁紙。 步驟如下&#xff1a; 1. “Windows 聚焦”的鎖屏壁紙都保存在隱藏文件夾 --- Assets里。 a. 打開“資源管理器 b. 在地址欄復制粘貼下方路徑后按回車鍵&#xff0c;即可快速跳轉至這…

VUE藥監碼掃描

<!-- 藥監碼 --><div class"divContent"><div class"headDiv"><div class"spanA">請掃描相關藥監碼</div></div><button class"scanBtn" clickscan_img()>掃描藥監碼</button><bu…

Chrome 控制臺的console用法收集

Chrome 控制臺console的用法 大家都有用過各種類型的瀏覽器&#xff0c;每種瀏覽器都有自己的特色&#xff0c;本人拙見&#xff0c;在我用過的瀏覽器當中&#xff0c;我是最喜歡Chrome的&#xff0c;因為它對于調試腳本及前端設計調試都有它比其它瀏覽器有過之而無不及的地方。…

面向對象思想封裝狙擊手狙擊敵人

需求&#xff1a;狙擊手xxx使用xx槍&#xff0c;射擊敵人xxx,敵人生命值歸0&#xff0c;應聲倒下分析設計類&#xff1a; 封裝狙擊手類 屬性&#xff1a; 名字 行為&#xff1a;撿槍   裝彈   射擊封裝槍類 屬性&#xff1a; 型號 行為&#xff1a;射擊封裝彈夾類 屬性&…

JavaScript 字符串處理方法總結

變量從字符串轉換成int和float型 var weightincrease "2.5kg";undefinedparseInt(weightincrease);2parseFloat(weightincrease);2.5 字符串處理方法var words "魚神是個帥哥";undefinedwords.length6words.charAt(0);"魚"words.charAt(words.…

【js】vue 2.5.1 源碼學習(二) 策略合并

一、 整體思路1 首先是代碼的大體構造&#xff0c;先判斷引入代碼的環境&#xff0c;即對應amd 和cmd的處理2 vue_init 需要借助 initMinxin >>> // 初始化選項1: 規范 2: 合并策略。3 mergeOptions 選項合并 一個或者多個對象合并&#xff0c;并且生成一個…

解決公眾號的加載問題

相關組件內設置的方法&#xff08;方法可以多處組件運用&#xff09; <x-input on-change"changeinp" on-blur"temporaryRepair();" on-enter"temporaryRepair();" name"mobile" :show-clear"false" placeholder"…

JavaScript 數組處理方法總結

數組處理方法//定義數組var array [];undefined//查看類型typeof(array);"object"//往數組里添加數據array [first,second,third]["first", "second", "third"]//數組長度array.length3//索引array[0]"first"//添加數組新…

今天第一次開通blog

紀念第一次開通轉載于:https://www.cnblogs.com/struggle-star/p/10960491.html

前端設置,驗證碼登錄

<group class"shadow" gutter"0"><x-input v-model"mobileCaptcha" placeholder"請輸入手機驗證碼" class"weui-vcode" keyboard"number" :max"6"></x-input><button click"…

JQuery實現頁面跳轉

$(function(){ var pn $("#gotopagenum").val();//#gotopagenum是文本框的id屬性 location.href "NewList.aspx?pagenum"pn;//location.href實現客戶端頁面的跳轉 }); 今天我們就來說一說如何在jQuery中跳轉到另外一個網頁HTML。其實下面我列舉的幾…

pycharm安裝lxml

今天下午剛學爬蟲&#xff0c;要安好多庫的感覺&#xff0c;崩潰 requests 首先我們用pip安裝完成后&#xff0c;在pycharm里面還要導入進去&#xff0c;沒有的話是會報錯的 文件--設置--Project Interpreter 然后點擊pip進去&#xff0c;搜索requests&#xff0c;再安裝進去就…

JS生成動態表格并為每個單元格添加單擊事件的方法

<html><head><title>Demo</title><script>function getColumnDetail(column) {column.style.color "blue"; //將被點擊的單元格設置為藍色 alert(column.innerHTML); //彈出被點單元格里的內容 }<!--trLineNumber為動態表格行數&a…

6.1團隊第二階段沖刺(七)

燃盡圖&#xff1a; 任務板: 會議照片&#xff1a; 昨天完成了管理員對發布人的查詢功能&#xff0c;條件查詢功能以及一系列常用小功能 今天完成了功能說明部分及其那部分界面美化&#xff0c;所有界面的退出以及回到首頁的功能及首頁美化等 明天打算做信息分頁顯示&#xff0…

Jquery 獲取日期date()對象,jquerydate

Jquery 獲取日期date()對象&#xff0c;jquerydate 獲取JavaScript 的時間使用內置的Date函數完成 var mydate new Date(); mydate.getYear(); //獲取當前年份(2位) mydate.getFullYear(); //獲取完整的年份(4位,1970-????) mydate.getMonth(); //獲取當前月份(0-11,0代表…

redis的安裝和使用【2】redis的java操作

1、前提約束熟悉redis的命令行操作 https://www.jianshu.com/p/26f6e85e600f修改redis.conf# 配置綁定ip&#xff0c;作者機子為192.168.100.192&#xff0c;請讀者根據實際情況設置bind 192.168.100.192#非保護模式protected-mode no保存重啟 2、操作2.1 使用idea創建一個mave…