count-pass-app/subpages/spare/batchAdd.vue

<template>
  <view class="picker-card">
    <view class="picker-btn">
      <view class="btn">
        <button type="primary" @click="sureChooseSpare">
          {{$t('settings.confirmText')}}
        </button>
      </view>
    </view>
    <view class="choose-wrap">
      <!-- 选择大类 -->
      <view class="item">
        <view class="search-wrap">
          <u-input v-model="keyword" @change="getOptions" :placeholder="$t('base.search.keySearch')" />
        </view>
      </view>
      <view class="step" @click="parentlist.length?stepBack():''">
        <u-icon name="arrow-left" color="#008cff" size="15" v-if="parentlist.length"></u-icon>
        {{parentlist.length?'返回上一层':'根层级'}}
      </view>
      <template v-if="currentTreeData.length || spareList.length">
        <view class="tree" v-if="currentTreeData.length">
          <view class="tree-item" v-for="item in currentTreeData" :key="item.id" @click="getSpare(item)">
            <view class="icon">
              <uni-icons custom-prefix="elicon" type="el-icon-folder-opened" size="18" color="#fff"></uni-icons>
            </view>
            {{item.name}}
          </view>
        </view>
        <view class="tree">
          <u-checkbox-group v-model="detailList" placement="column" iconPlacement="right">
            <u-checkbox :customStyle="{padding: '8px 0'}" v-for="(item, index) in spareList" :key="index" :label="`${item.code}_${item.name}_${item.spec}_${getLabel(item.unit,unitList)}`" :name="item.content">
            </u-checkbox>
          </u-checkbox-group>
        </view>
      </template>
      <template v-else>
        <u-empty mode="list" :text="$t('base.common.noData')" icon="https://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </template>
    </view>
    <view class="card-oper">
      <!-- <view class="btn">
            <u-button @click="showPicker = false">{{$t('settings.cancelText')}}</u-button>
          </view>
          <view class="btn">
            <u-button type='primary' @click="spareConfirm">{{$t('settings.confirmText')}}</u-button>
          </view> -->
    </view>
  </view>
</template>

<script>
import { getLabel } from "../../utils/util";
import { request } from "../../utils/request";
import { fetchTree, getSpareOption } from "../../api/stock";
export default {
  data() {
    return {
      getLabel,
      spareList: [], //备件列表
      treeData: [], //备件大类树
      currentTreeData: [],
      detailList: [], //选择的备件
      spareKeyword: "",
      keyword: "",
      unitList: [],
      parentlist:[],
      fullCodeList:[],
      index:0,
    };
  },
  onLoad(options) {
    this.getSpareTree();
  },
  methods: {
    //确定选择备件
    sureChooseSpare(){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; //上一个页面
      console.log(prevPage,'======');
      prevPage.$vm.detailList = this.detailList;
      prevPage.$vm.spareConfirm()
      uni.navigateBack();
    },
    //返回上一层
    stepBack(){
      this.currentTreeData = JSON.parse(JSON.stringify(this.parentlist[this.index-1]))
      this.parentlist.splice(this.index-1,1)
      let data = {
        fullCode: this.fullCodeList[this.index-2],
      };
      this.fullCodeList.splice(this.index-1,1)
      if(this.fullCodeList.length){
        getSpareOption(data, this.spareKeyword).then((res) => {
          if (res.data.code == 0) {
            this.spareList = res.data.data;
            this.spareList.forEach((item) => {
              item.content = JSON.stringify(item);
            });
          }
        });
      }else{
        this.spareList = []
      }
      console.log(this.parentlist,this.fullCodeList);
      this.index-=1
    },
    //备件大类
    getSpareTree() {
      fetchTree().then((res) => {
        if (res.data.code == 0) {
          this.treeData = res.data.data;
          this.currentTreeData = res.data.data;
        }
      });
      //获取单位
      request({
        url: "/admin/dict/type/spare_unit",
        method: "get",
      }).then((res) => {
        if (res.data.code == 0) {
          this.unitList = res.data.data;
        }
      });
    },
    //获取产品选项
    getSpare(item) {
      this.index+=1
      this.parentlist.push(JSON.parse(JSON.stringify(this.currentTreeData)))
      this.currentTreeData = item.children;
      this.fullCodeList.push(item.fullCode)
      console.log(this.parentlist,this.fullCodeList);
      let data = {
        fullCode: item.fullCode,
      };
      getSpareOption(data, this.spareKeyword).then((res) => {
        if (res.data.code == 0) {
          this.spareList = res.data.data;
          this.spareList.forEach((item) => {
            item.content = JSON.stringify(item);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

page {
  background-color: #f8f8f8;
}
.picker-card {
  // padding: 32rpx;
  background-color: #fff;
   .picker-btn{
    padding: 32rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 100;
    .btn{
      width: 100%;
    }
  }
  .item{
    padding: 32rpx;
  }
  .step{
    padding:0 32rpx;
    flex-direction: row;
    background-color: #f2f2f2;
    line-height: 80rpx;
    font-size: 15px;
    color: rgb(0, 140, 255);
  }
  .tree {
    padding: 0 32rpx;
    .tree-item {
      padding: 6px 0;
      font-size: 15px;
      color: rgb(96, 98, 102);
      flex-direction: row;
      line-height: 60rpx;
      .icon {
        width: 60rpx;
        height: 60rpx;
        background-color: rgb(0, 140, 255);
        border-radius: 10rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 10rpx;
      }
    }
  }
}
</style>