iview组件库 - 穿梭栏设置

超、凢脫俗 2023-01-07 03:40 221阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

<Modal v-model="modal1" title="项目药品上下架维护" width="1020" :mask-closable="false" @on-ok="addOk()" >
            <Col span="36">
              <Select filterable @on-change="onChangeProject" placeholder="请先选择药店" >
                <Option v-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("""");
              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");
              });
          });
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20221119/312877d2781344369d510c95aff09153.png