zy-wechat/pages/searchMuti/searchMuti.vue

<template>
  <view class="content">
    <view class="search-keyword">
      <scroll-view class="keyword-list-box" scroll-y>
        <checkbox-group @change="checkboxChange">
          <label v-for="(row, index) in dataList" :key="row.id">
            <view class="keyword-entry" hover-class="keyword-entry-tap">
              <view class="keyword-text">
                <checkbox color="#42b983" :value="row.id" :checked="row.checked" />
                <rich-text :nodes="row.buildingName"></rich-text>
              </view>
              <view class="keyword-img">
                <image src="/static/HM-search/back.png"></image>
              </view>
            </view>
          </label>
        </checkbox-group>
      </scroll-view>
    </view>
    <view class="toolbar" @click="determine()" hover-class="seimin-btn-hover">
      <text class="toolbar-sao">确定</text>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content" @know="know" :operate="models.operate"></showModel>
  </view>
</template>

<script>
  import {
    post,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        type: "", //进入该页面的类型
        configName: "", //快速组合名称
        id: "", //快速组合id
        changedept: 0, //是否从列表过来的切换负责科室
        hosId: "",
        dataList: [],
        //系统设置的科室类型
        sysDeptType: 0,
        // 弹窗model
        models: {
          disjunctor: false,
        },
      };
    },
    onLoad(options) {
      this.hosId = uni.getStorageSync("userData").user.currentHospital.id;
      console.log(options, 'options');
      this.type = options.type;
      if (this.type == "setBuilding") {
        this.configName = options.configName;
        this.id = options.id;
        this.changedept = options.changedept;
        this.getSysDeptType();
      } else {
        this.getSysDeptType();
      }
      // this.init();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    methods: {
      //知道了
      know() {
        this.models.disjunctor = false;
      },
      // 确认
      determine() {
        console.log(this.dataList);
        const dataList = this.dataList.filter(v => v.checked);
        if (dataList.length === 0) {
          this.models = {
            disjunctor: true,
            title: "提示",
            content: "请选择至少一个楼栋",
            icon: "warn",
            operate: {
              know: "知道了",
            },
          };
        } else {
          let postData = {
            "idx": 0,
            "sum": 1000,
            department: {
              hospital: {id: this.hosId},
              type: {id: this.sysDeptType},
              buildIds: dataList.map(v => v.id).toString()
            }
          }
          uni.showLoading({
            title: "加载中",
          });
          post("/data/fetchDataList/department", postData).then((res) => {
            uni.hideLoading();
            if (res.status == 200) {
              let obj = uni.getStorageSync("setDepts");
              console.log(res.list,obj)
              if (obj) {
                let list = [...res.list, ...obj];
                let newArr = [];
                let obj1 = {};
                for (let i = 0; i < list.length; i++) {
                  if (!obj1[list[i].id]) {
                    newArr.push(list[i]);
                    obj1[list[i].id] = true;
                  }
                }
                console.log(newArr);
                uni.setStorageSync("setDepts", newArr);
              } else {
                uni.setStorageSync("setDepts", res.list);
              }
              uni.navigateTo({
                url: `../setDept/setDept?configName=${this.configName}&id=${this.id}&changedept=${this.changedept}`,//不知道
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "请求失败！",
              });
            }
          })
        }
      },
      // 选择楼栋
      checkboxChange: function(e) {
        var dataList = this.dataList,
            values = e.detail.value;
        for (var i = 0, lenI = dataList.length; i < lenI; ++i) {
          const item = dataList[i]
          if (values.includes(item.id)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
      },
      //获取系统设置的科室类型
      getSysDeptType() {
        uni.showLoading({
          title: "加载中",
        });
        let postData = {
          "idx": 0,
          "sum": 1,
          systemConfiguration: {
            keyconfig: "busiViewDeptId"
          }
        }
        post("/simple/data/fetchDataList/systemConfiguration", postData).then((res) => {
          this.getBuildings();
          if (res.status == 200) {
            this.sysDeptType = res.list[0].valueconfig
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
      //获取楼栋列表
      getBuildings() {
        let postData = {
          "idx": 0,
          "sum": 100,
          building: {
            hosId: this.hosId
          }
        }
        post("/simple/data/fetchDataList/building", postData).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.dataList = res.list || [];
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
    },
  };
</script>
<style scoped lang="less">
  view {
    display: block;
  }
  // 底部
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.24);
    background-color: #e5e9ed;
  
    .toolbar-sao {
      font-size: 36rpx;
      color: #49b856;
    }
  }

  .search-box {
    width: 95%;
    background-color: rgb(242, 242, 242);
    padding: 15upx 2.5%;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
  }

  .search-box .mSearch-input-box {
    width: 100%;
  }

  .search-box .input-box {
    width: 85%;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-box .search-btn {
    width: 15%;
    margin: 0 0 0 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 28upx;
    color: #fff;
    background: linear-gradient(to right, #ff9801, #ff570a);
    border-radius: 60upx;
  }

  .search-box .input-box>input {
    width: 100%;
    height: 60upx;
    font-size: 32upx;
    border: 0;
    border-radius: 60upx;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 3%;
    margin: 0;
    background-color: #ffffff;
  }

  .placeholder-class {
    color: #9e9e9e;
  }

  .search-keyword {
    width: 100%;
    background-color: rgb(242, 242, 242);
  }

  .keyword-list-box {
    height: calc(100vh - 110upx);
    padding-top: 10upx;
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
  }

  .keyword-entry-tap {
    background-color: #eee;
  }

  .keyword-entry {
    width: 94%;
    height: 80upx;
    margin: 0 3%;
    font-size: 30upx;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1upx #e7e7e7;
  }

  .keyword-entry image {
    width: 60upx;
    height: 60upx;
  }

  .keyword-entry .keyword-text,
  .keyword-entry .keyword-img {
    height: 80upx;
    display: flex;
    align-items: center;
  }

  .keyword-entry .keyword-text {
    width: 90%;
  }

  .keyword-entry .keyword-img {
    width: 10%;
    justify-content: center;
  }

  .keyword-box {
    height: calc(100vh - 110upx);
    border-radius: 20upx 20upx 0 0;
    background-color: #fff;
  }

  .keyword-box .keyword-block {
    padding: 10upx 0;
  }

  .keyword-box .keyword-block .keyword-list-header {
    width: 94%;
    padding: 10upx 3%;
    font-size: 27upx;
    color: #333;
    display: flex;
    justify-content: space-between;
  }

  .keyword-box .keyword-block .keyword-list-header image {
    width: 40upx;
    height: 40upx;
  }

  .keyword-box .keyword-block .keyword {
    width: 94%;
    padding: 3px 3%;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
  }

  .keyword-box .keyword-block .hide-hot-tis {
    display: flex;
    justify-content: center;
    font-size: 28upx;
    color: #6b6b6b;
  }

  .keyword-box .keyword-block .keyword>view {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60upx;
    padding: 0 20upx;
    margin: 10upx 20upx 10upx 0;
    height: 60upx;
    font-size: 28upx;
    background-color: rgb(242, 242, 242);
    color: #6b6b6b;
  }
</style>