aiot-app/pages/warehouse/reportLoss copy/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="报损报溢"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view class="tab-wrapper">
      <tabs @change="handleTabChange" @handleSearch="handleTabSearch" />
    </view>
    <view class="tab-title__placeholder"></view>

    <CardList :list="tableData" />

    <view class="footBox">
      <view class="reg" @click="addStock">
        <uni-icons
          custom-prefix="iconfont"
          type="icon-shixiangxinzeng"
          size="20"
          color="#fff"
        ></uni-icons>
        新增报损报溢
      </view>
    </view>
    <!-- 搜索组件 -->
    <u-popup :show="searchVisible" mode="right" @close="searchVisible = false">
      <view class="search-container">
        <view class="title">筛选</view>
        <uni-forms
          ref="customForm"
          :modelValue="popupInfo"
          label-position="top"
          label-width="200"
        >
          <uni-forms-item label="单号" name="code">
            <uni-easyinput
              v-model="popupInfo.code"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="名称" name="name">
            <uni-easyinput
              v-model="popupInfo.name"
              :inputBorder="false"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item
            label="报损报溢部门"
            name="deliveryreportDeptNameName"
          >
            <uni-easyinput
              :value="popupInfo.reportDeptName"
              disabled
              @click.native="$refs.treePicker._show()"
              :inputBorder="false"
              placeholder="请选择"
            />
          </uni-forms-item>
          <uni-forms-item label="报损报溢人" name="reportName">
            <uni-data-select
              v-model="popupInfo.reportId"
              :localdata="userList"
            ></uni-data-select>
          </uni-forms-item>
        </uni-forms>
        <view class="footer">
          <view class="btn reset" @click="handleReset"> 重置 </view>
          <view class="btn search" @click="handleSearch"> 搜索 </view>
        </view>
      </view>
    </u-popup>
    <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="deptConfirm"
      key="dept"
      title="选择部门"
      :localdata="deptList"
      valueKey="code"
      textKey="name"
      childrenKey="children"
    />
  </view>
</template>

<script>
import { post, postJ, get } from '@/utils/api.js'
import tabs from '../components/tabs.vue'
import CardList from './components/CardList.vue'
import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
let [page, size, isEnd] = [1, 10, true]

export default {
  components: {
    tabs,
    CardList,
    baTreePicker
  },
  data () {
    return {
      searchVisible: false,
      status: '',
      pickerIndex: 0,
      pickTabIndex: 0,
      popupInfo: {
        code: '',
        name: '',
        reportDeptName: '',
        reportDeptId: '',
        reportName: '',
        reportId: ''
      }, //筛选数据
      userList: [],
      deptList: [],
      tableData: []
    }
  },
  onLoad () {
    this.getFirstList()
    this.getDept()
  },
  //触底加载
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    // 抬头下拉信息保存
    handlePicker (e, list, idKey, nameKey) {
      if (idKey) {
        this.popupInfo[idKey] = list[e.detail.value].id
      }
      if (nameKey) {
        this.popupInfo[nameKey] = list[e.detail.value].name
      }
    },
    handleSearch () {
      this.getFirstList()
    },
    getFirstList () {
      this.searchVisible = false
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    getMoreLists () {
      //获取更多数据
      page++
      this.getList()
    },
    //获取列表信息
    getList () {
      uni.showLoading({
        title: '加载中'
      })
      let data = {
        page,
        size,
        ...this.popupInfo
      }

      if (this.status) {
        data.status = this.status.value
      }
      postJ(this.apiUrl + '/breakag/getlist', data)
        .then(res => {
          if (page === 1) {
            this.tableData = res.data.records
          } else {
            this.tableData.push(...res.data.records)
          }
          isEnd = this.tableData.length >= res.data.total
        })
        .then(() => {
          uni.hideLoading()
        })
    },

    // 部门确认
    deptConfirm (data, name) {
      this.popupInfo.reportDeptId = data[0]
      this.popupInfo.reportDeptName = name
      this.popupInfo.reportId = ''

      this.getUser(data[0])
    },
    // 获取部门
    getDept () {
      get(this.apiUrl + '/main/org/dept/effectiveTree').then(res => {
        if (res?.success) {
          this.deptList = res.data
        }
      })
    },

    // 获取人员
    getUser (deptCode) {
      post(this.apiUrl + '/main/user/list', {
        deptCode,
        page: 1,
        size: 9999
      }).then(res => {
        if (res?.success) {
          this.userList = res.data.items.map(item => {
            item.text = item.trueName
            item.value = item.userId
            return item
          })
        }
      })
    },
    //切换tab
    handleTabChange (status) {
      this.status = status
      this.getFirstList()
    },
    //筛选
    handleTabSearch () {
      // this.getFirstList()
      this.searchVisible = true
    },
    handleReset () {
      this.popupInfo = {
        code: '',
        name: '',
        reportDeptName: '',
        reportDeptId: '',
        reportName: '',
        reportId: ''
      }
      this.getFirstList()
    },
    //新增
    addStock () {
      uni.navigateTo({
        url: '/pages/warehouse/reportLoss/edit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  padding-bottom: 120rpx;
}

.tab-wrapper {
  position: fixed;
  z-index: 99;
  width: 100%;
}

.footBox {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  view {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add {
    background: $uni-color-primary;
  }

  .reg {
    background: $u-success-dark;
  }

  .uni-icons {
    margin-right: 8rpx !important;
    font-weight: bold;
  }
}

.search-container {
  width: 70vw;
  padding: 30rpx 36rpx;
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-shadow: 0 10rpx 30rpx 0 #000;
    .btn {
      width: 50%;
      height: 80rpx;
      border-radius: 0 !important;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      &.reset {
        color: $j-primary-border-green;
      }
      &.search {
        color: #fff;
        background-color: $j-primary-border-green;
      }
    }
  }
  .title {
    font-weight: bold;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }
  /deep/.uni-date__x-input,
  /deep/.uni-easyinput__content,
  /deep/.uni-easyinput__content-input {
    height: 60rpx;
    border-radius: 30rpx;
    overflow: hidden;
    background-color: rgba(242, 242, 242, 1);
  }
}
</style>