aiot-app/pages/maintenance/sparepart/sparepart.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="申请备品备件"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="sparepart-container">
      <view class="infos">
        <u-form
          labelPosition="left"
          :model="formData"
          ref="formRef"
          labelWidth="250"
          labelAlign="left"
          class="baseForm"
        >
          <u-form-item
            label="仓库："
            prop="warehouseId"
            style="height: 120rpx"
            required
          >
            <picker
              @change="bindPickerChange"
              :value="warehosueVal"
              :range="warehouseList"
              range-key="name"
            >
              <input
                disabled
                class="uni-input"
                v-model="warehosueName"
                placeholder="请选择"
              />
            </picker>
          </u-form-item>
          <!-- <u-form-item
            label="期望完成时间："
            prop="approvalUserId"
            style="height: 120rpx"
          >
            <text class="content" @click="timeShow = true">{{
              formData.expectedPerformanceTime | timeFilter
            }}</text>
          </u-form-item> -->
        </u-form>
      </view>
      <view class="detail-title">
        申请明细
        <u-button @click="addGoods" type="success" size="small">
          添加物品
        </u-button>
        <u-button @click="addCurrGoods" type="success" size="small">
          绑定备件
        </u-button>
        </view
      >
      <view class="detail-content">
        <uni-collapse
          :key="forceUpdate"
          ref="collapseRef"
          v-model="collapseVal"
          accordion
        >
          <uni-collapse-item
            :typeOpen="1"
            :name="item.informationCode"
            :show-animation="true"
            v-for="(item, index) in registerlist"
            :key="item.informationCode"
          >
            <template slot="title">
              <view class="row">
                <view class="col">
                  <view class="col-item">
                    {{ item.informationName }}({{ item.informationCode }})
                  </view>
                </view>
                <view class="col">
                  <view class="col-item">
                    规格/型号：{{ item.specification }}/{{ item.modelType }}
                  </view>
                  <view class="col-item">
                    {{ item.isUnpack ? '包装单位' : '单位' }}：{{
                      item.isUnpack
                        ? `${item.minPackUnit || ''}`
                        : item.measuringUnit
                    }}
                  </view>
                </view>
                <view class="col">
                  <view class="col-item">
                    所需数量：{{ item.selectNum || 0
                    }}{{ item.measuringUnit }}/{{ item.num
                    }}{{ item.measuringUnit }}
                  </view>
                  <view
                    class="col-item text-primary"
                    @click.stop="openPlus(item)"
                  >
                    添加备品备件
                  </view>
                </view>
              </view>
            </template>

            <view class="instance-list">
              <view class="" v-for="(itm, index) in item.tableData">
                <view class="row">
                  <uni-icons
                    type="trash"
                    size="27"
                    color="red"
                    @click="handleDelete(item, itm, index)"
                  ></uni-icons>
                  <view class="col">
                    <view class="col-item">
                      {{ itm.onlyCode }}
                    </view>
                  </view>
                  <view class="col">
                    <view class="col-item"> 批次号：{{ itm.batchNum }} </view>
                    <view class="col-item"> 包装编码：{{ itm.num }} </view>
                  </view>
                  <view class="col">
                    <view class="col-item">
                      {{ itm.manufactureTime ? '生产日期' : '采购日期' }}：{{
                        itm.manufactureTime || itm.procurementTime
                      }}
                    </view>
                  </view>
                  <view class="col" v-if="!itm.isUnpack">
                    <view class="col-item">
                      最小包装单元：{{ itm.measurementUnit }}{{ itm.unit }}/{{
                        itm.minPackUnit
                      }}
                    </view>
                  </view>
                  <view class="col">
                    <view class="col-item">
                      货位：{{ itm.warehouseName }}-{{ itm.areaName }}-{{
                        itm.shelfCode
                      }}-{{ itm.cargoSpaceCode }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>

        <!-- <view class="col" v-for="(item, index) in registerlist" :key="item.id">
          <view>
            <view>{{ item.informationName }}</view>
            <view style="color: #aaaaaa"
              >({{ item.informationCode }}/{{ item.modelType }})</view
            >
          </view>
          <u-number-box
            v-model="item.num"
            :step="1"
            :min="0"
            :name="index"
            :disabledInput="true"
            @change="numChange"
          ></u-number-box>
        </view>
        <view class="plus" @click="openPlus">+</view> -->
      </view>
    </view>
    <view class="sparepart-footer">
      <button class="primary" @click="toSubmit">提交</button>
      <button class="defualt" @click="back">返回</button>
    </view>
    <u-datetime-picker
      @confirm="timeConfirm"
      @cancel="timeCancel"
      :show="timeShow"
      v-model="formData.expectedPerformanceTime"
      mode="datetime"
    ></u-datetime-picker>

    <u-popup :show="popShow" @close="close" @open="open">
      <view class="select-container" v-if="popShow">
        <view class="title"
          >添加备件
          <view class="btn-box">
            <text class="btn cancel" @click="close">取消</text>
            <text class="btn confirm" @click="popConfirm">确定</text>
          </view>
        </view>
        <!-- <input
          type="text"
          :value="curClassification.name"
          placeholder="选择分类"
          @click="openPicker"
        /> -->
        <input
          type="text"
          @input="nameFilter"
          v-model="searchKey"
          placeholder="搜索编号"
        />
        <view class="self-table-header">
          <view class="table-code">备品备件编码</view>
          <view class="table-batch">批次号</view>
        </view>
        <view class="table-wrapper">
          <view class="listContent">
            <checkbox-group @change="selectionChange">
              <view
                class="listBox"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <label>
                  <view class="self-table-tr">
                    <view class="table-code">{{ item.onlyCode }}</view>
                    <view class="table-batch">{{ item.batchNum }}</view>
                    <view class="table-date"></view>
                    <view class="other-info">
                      <view>包装编码：{{ item.num }}</view>
                      <view v-if="!currentRow.isUnpack"
                        >最小包装单元：{{ item.measurementUnit
                        }}{{ item.unit }}/{{ item.minPackUnit }}</view
                      >
                      <view v-if="item.manufactureTime || item.procurementTime"
                        >{{
                          item.procurementTime ? '采购日期' : '生产日期'
                        }}：{{
                          item.manufactureTime || item.procurementTime
                        }}</view
                      >

                      <view style="width: 100%"
                        >货位：{{ item.warehouseName }}-{{ item.areaName }}-{{
                          item.shelfCode
                        }}-{{ item.cargoSpaceCode }}</view
                      >
                    </view>
                    <view class="checked">
                      <checkbox
                        :value="item.onlyCode"
                        :checked="selectList.includes(item.onlyCode)"
                      ></checkbox>
                    </view>
                  </view>
                </label>
              </view>
            </checkbox-group>
            <u-empty style="margin-top: 20vh" v-if="!tableData.length" />
          </view>
        </view>
      </view>
    </u-popup>
    <!-- <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="confirm"
      title="选择分类"
      :localdata="listData"
      valueKey="id"
      textKey="name"
      childrenKey="children"
    /> -->

    <ba-tree-picker
      ref="verifyTreePicker"
      key="verify"
      :multiple="false"
      @select-change="verifyDeptConfirm"
      title="选择部门"
      :localdata="deptList"
      valueKey="code"
      textKey="name"
      childrenKey="children"
    />
    <u-modal
      :show="showConfirm"
      title="提示"
      @confirm="warehosueConfirm"
      @cancel="warehosueCancel"
      :showCancelButton="true"
      content="仓库修改后，已添加的备品备件信息将会被清空，是否要继续修改仓库？"
    ></u-modal>
  </view>
</template>

<script>
import { get, postJ, post } from '@/utils/api.js'
import dayjs from 'dayjs'
import { debounce } from 'lodash'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {},
  filters: {
    timeFilter (inp) {
      return inp && dayjs(inp).format('YYYY-MM-DD HH:mm')
    }
  },

  data () {
    return {
      workOrderId: '',
      planFinishTime: '',
      workOrderCode: '',
      showConfirm: false,
      popShow: false,
      timeShow: false,
      time: '',

      pageId: '',
      pickerDeptShow: false,
      list: [],
      treeList: [],
      classificationId: '',
      // formData: {
      //   applyOrder: getRuleNo('BJ'),
      //   expectedPerformanceTime: new Date().getTime()
      // },
      registerlist: [],
      listData: [],
      curClassification: {
        id: '',
        name: ''
      },

      planCode: '',
      formData: {
        approvalUserId: '',
        approvalUserName: '',
        verifyDeptCode: '',
        verifyDeptName: ''
        // expectedPerformanceTime: new Date().getTime()
      },
      pickerIndex: 0,
      userList: [],
      deptList: [], //部门
      searchKey: '',
      tableData: [],
      selectIndex: [],
      chooseItem: {},
      sourceCode: null,
      sourceId: null,
      // 关键词搜索
      nameFilter: debounce(this.getTableData, 500),
      chooseIndex: null,
      warehouseId: '',
      warehosueName: '',
      warehouseList: [],
      memo: [],
      planList: [],
      selectList: [],
      currentRow: {},
      forceUpdate: false,
      warehosueVal: 0,
      collapseVal: ''
    }
  },
  onLoad (options) {
    this.planCode = options.planCode
    this.sourceCode = options.sourceCode
    this.sourceId = options.sourceId
    this.getDept()
    this._getPlanInfo()
    this.getwarehouseList()
    // this.workOrderId = workOrderId
    // this.workOrderCode = workOrderCode
    // this.planFinishTime = planFinishTime
    // this._getClassification()
  },
  computed: {
    selectAll: {
      set (val) {
        if (val) {
          this.selectList = this.tableData.map(i => i.onlyCode)
        } else {
          this.selectList = []
        }
      },
      get () {
        return (
          this.selectList.length &&
          this.selectList.length == this.tableData.length
        )
      }
    }
  },
  onShow () {
    uni.$off('setSelectList')
    uni.$on('setSelectList', selectList => {
      if (selectList?.length) {
        this.registerlist = this.registerlist.filter(item => {
          const index = selectList.findIndex(i => i.curId === item.curId)

          if (index > -1) {
            selectList.splice(index, 1)
          }

          return index > -1
        })

        this.registerlist.push(
          ...selectList.map(item => {
            return {
              curId: item.curId,
              isUnpack: item.isUnpack,
              informationCode: item.assetCode || item.informationCode,
              informationName: item.assetName || item.informationName,
              specification: item.specification,
              minPackUnit: item.minPackUnit,
              modelType: item.modelType,
              measuringUnit: item.unit || item.measuringUnit,
              tableData: item.tableData || [],
              num: 0,
              selectNum: 0
            }
          })
        )
      }
    })
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    // 选择审核人确定
    handlePicker (e, list, idKey, nameKey) {
      if (idKey) {
        this.formData[idKey] = list[e?.detail.value]?.id
      }
      if (nameKey) {
        this.formData[nameKey] = list[e?.detail.value]?.name
      }
      this.$nextTick(() => {
        if (idKey === 'assetType' || idKey === 'bizScene') {
          this.$refs.formRef.validateField(idKey)
        }
      })
    },
    // 部门确认
    verifyDeptConfirm (data, name) {
      this.formData.verifyDeptCode = data[0]
      this.formData.verifyDeptName = name
      this.formData.approvalUserId = ''
      this.formData.approvalUserName = ''

      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.name = item.trueName
            item.id = item.userId
            return item
          })
        }
      })
    },

    numChange (val) {
      if (val?.value === 0) {
        this.registerlist.splice(val.name, 1)
      }
    },
    back () {
      uni.navigateBack({
        delta: 1
      })
    },
    selectionChange ({ detail }) {
      this.selectList = detail.value
    },
    // 点击提交
    toSubmit () {
      // if (!this.formData.expectedPerformanceTime) {
      //   uni.showToast({
      //     icon: 'error',
      //     title: '请选择期望完成时间'
      //   })
      //   return
      // }
      // if (!this.formData.approvalUserName) {
      //   uni.showToast({
      //     icon: 'error',
      //     title: '请选择审核人'
      //   })
      //   return
      // }
      const stockOutApplyDetailList = this.registerlist.filter(
        i => i.tableData.length
      )
      if (!stockOutApplyDetailList.length) {
        uni.showToast({
          icon: 'error',
          title: '请添加申请备件'
        })
        return
      }
      const params = {
        ...this.formData,
        sparePartsApplyDetailList: this.registerlist
          .filter(i => i.tableData.length)
          .map(i => i.tableData)
          .flat()
          .map(i => {
            delete i.id
            return {
              informationCode: i.assetCode,
              informationName: i.assetName,
              assetCode: i.onlyCode
            }
          }),
        sourceCode: this.sourceCode,
        sourceId: this.sourceId,
        sourceType: 1
      }
      params.expectedPerformanceTime = dayjs(
        params.expectedPerformanceTime
      ).format('YYYY-MM-DD HH:mm:ss')

      postJ(this.apiUrl + '/sparePartsApply/save', params).then(res => {
        if (res?.success) {
          this.back()
        }
      })
    },
    addGoods () {
      if (!this.warehouseId) {
        uni.showToast({
          title: '请选择仓库！',
          icon: 'none'
        })
        return
      }
      const storageKey = Date.now() + ''
      uni.setStorageSync(storageKey, this.registerlist)
      uni.navigateTo({
        url:
          '/pages/warehouse/outHouse/selectOutType?warehousingType=7&warehousingName=备品备件' +
          '&storageKey=' +
          storageKey +
          '&warehouseId=' +
          this.warehouseId
      })
    },
    addCurrGoods () {
      const storageKey = Date.now() + ''
      uni.setStorageSync(storageKey, this.registerlist)
      uni.navigateTo({
        url:
          '/pages/warehouse/outHouse/selectCurSarepart?workOrderCode=' +this.sourceCode +
          '&storageKey=' +
          storageKey +
          '&warehouseId=' +
          this.warehouseId
      })
    },
    handleDelete (item, row, index) {
      uni.showModal({
        title: `确定删除${row.onlyCode}？`,
        content: '',
        confirmText: '确认',
        success: function (res) {
          if (res.confirm) {
            item.tableData.splice(index, 1)

            const obj = this.planList.find(i => i.curId === item.curId)

            item.selectNum = item.tableData.reduce((next, pre) => {
              next += pre.isUnpack ? 1 : pre.measurementUnit || 0

              return next
            }, 0)
            if (!obj) {
              // 非计划
              item.num = item.selectNum
            }
          }
        }
      })
    },

    // 选择备品备件
    openPicker () {
      this.$refs.treePicker._show()
    },

    handleSelectionChange (val) {
      console.log('handleSelectionChangeval', val)
      this.selectIndex = val.detail.index
    },
    //获取备品备件分类
    _getClassification () {
      postJ(this.apiUrl + '/classificationTree/list', [4]).then(res => {
        if (res?.success) {
          this.listData = res.data
        }
      })
    },
    // 查询计划备件明细
    _getPlanInfo () {
      postJ(this.apiUrl + '/sparePartsApply/getSparePartsApplyDetail', {
        planCode: this.planCode
      }).then(res => {
        if (res?.success) {
          this.registerlist = res.data.map(item => {
            item.tableData = []
            item.selectNum = 0
            item.curId = item.informationCode
            delete item.equipmentCode
            return item
          })

          this.planList = uni.$u.deepClone(this.registerlist)
        }
      })
    },
    close () {
      this.selectIndex = []
      // this.$refs.tableRef.clearSelection()
      this.popShow = false
      this.chooseItem = {}
      this.currentRow = {}
    },
    // 确定选择的备品备件
    popConfirm () {
      const selectList = [
        ...this.memo,
        ...this.tableData.filter(item =>
          this.selectList.includes(item.onlyCode)
        )
      ]
      if (!selectList.length) {
        uni.showToast({
          icon: 'none',
          title: '请选择需添加的备品备件'
        })
        return
      }
      // this.registerlist.push(this.chooseItem)
      this.currentRow.tableData = selectList

      const obj = this.planList.find(i => i.curId === this.currentRow.curId)

      let selectNum = 0

      this.currentRow.tableData.forEach(item => {
        selectNum += item.isUnpack ? 1 : item.measurementUnit || 0
      })

      this.currentRow.selectNum = selectNum
      if (!obj) {
        // 非计划
        this.currentRow.num = this.currentRow.selectNum
      }

      this.collapseVal = this.currentRow.informationCode

      console.log(this.collapseVal)
      this.close()
    },
    open (...args) {
      // this.getTableData()
    },
    //获取仓库
    getwarehouseList () {
      post(this.apiUrl + '/warehouseGoodsshelves/select/warehouseList').then(
        res => {
          if (res.success) {
            this.warehouseList = res.data
              .filter(i => !i.isDelete && !!i.status)
              .map(n => {
                return {
                  name: n.name,
                  id: n.id
                }
              })
          }
        }
      )
    },
    warehosueConfirm () {
      const obj = this.warehouseList[this.warehouseInfo?.detail?.value] || {}
      this.warehosueName = obj.name
      this.warehouseId = obj.id
      this.registerlist = uni.$u.deepClone(this.planList)

      this.showConfirm = false
    },
    warehosueCancel () {
      this.warehosueVal = this.warehouseList.findIndex(
        i => i.id === this.warehouseId
      )

      this.showConfirm = false
    },
    bindPickerChange (val) {
      this.warehosueVal = val?.detail?.value
      if (
        this.warehouseId &&
        (this.registerlist.length > this.planList.length ||
          this.registerlist.some(i => i.tableData.length))
      ) {
        this.showConfirm = true
        this.warehouseInfo = val
      } else {
        const obj = this.warehouseList[val?.detail?.value] || {}
        this.warehosueName = obj.name
        this.warehouseId = obj.id
        this.registerlist = uni.$u.deepClone(this.planList)
      }
    },
    getTableData () {
      const params = {
        assetCode: this.currentRow.informationCode,
        searchKey: this.searchKey,
        warehouseId: this.warehouseId
      }
      this.memo.push(
        ...this.tableData.filter(item =>
          this.selectList.includes(item.onlyCode)
        )
      )
      this.selectList = []
      get(
        this.apiUrl + '/outInWarehouse/getWarehouseActualDetail',
        params
      ).then(res => {
        if (res?.success) {
          this.tableData = res.data
          this.$nextTick(() => {
            this.tableData.map((i, idx) => {
              const index = this.memo.findIndex(
                itm => i.onlyCode === itm.onlyCode
              )
              if (index > -1) {
                // this.$refs.tableRef.toggleRowSelection(idx, true)
                this.selectList.push(i.onlyCode)
                this.memo.splice(index, 1)
              }
            })
          })
        }
      })
    },
    // 备品备件行选中事件
    rowclick (item, index) {
      this.chooseIndex = index
      this.selectIndex = [index]
      this.chooseItem = item
    },
    openPlus (item) {
      if (!this.warehouseId) {
        uni.showToast({
          title: '请选择仓库！',
          icon: 'none'
        })
        return
      }
      this.selectList = []
      this.memo = uni.$u.deepClone(item.tableData)
      this.currentRow = item
      this.popShow = true
      this.getTableData()
    },
    timeConfirm () {
      this.timeShow = false
    },
    timeCancel () {
      this.timeShow = false
    },
    resetEqui () {
      this.pickerDeptShow = true
      this.$refs.pickerDeptName.show()
    },
    handleChange (e) {
      let data = e.detail.value[e.detail.value.length - 1]
      this.classificationId = data.value
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    getTreeList () {
      postJ(this.apiUrl + '/classificationTree/list', [4]).then(res => {
        // console.log(res)
        if (res.success) {
          this.treeList = res.data
          this.pickerDeptShow = true
          this.$refs.pickerDeptName.show()
        }
      })
    },
    getFirstList: function () {
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList()
    },
    getMoreLists: function () {
      //获取更多数据
      page++
      this.getList()
    },
    //获取列表数据
    getList () {
      post(this.apiUrl + '/classificationSpareParts/classificationSpare/list', {
        page,
        size,
        code: '',
        classificationId: this.classificationId
      })
        .then(res => {
          // console.log(res)
          let data = res.data.records
          let pageTotal = res.data.pages
          if (page === 1) {
            data.forEach(el => {
              el.num = 0
            })
            this.list = data
          } else {
            data.forEach(element => {
              element.num = 0
              this.list.push(element)
            })
          }
          page < pageTotal ? (isEnd = false) : (isEnd = true)
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    submit (data) {
      let list = data
      let pickData = list.filter(item => {
        return item.checked && !item.disabled && item.num > 0
      })

      if (pickData.length == 0) {
        uni.showToast({
          title: '请选择备品备件数量',
          icon: 'none',
          duration: 2000
        })
        return
      }
      this.$store.dispatch('maintenance/setSparepartIndex', this.index)
      this.$store.dispatch('maintenance/setSparepart', pickData)
      this.$store.dispatch('maintenance/setEquiIndex', this.equiIndex)
      this.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.instance-list {
  background-color: #fff;
  font-size: 28rpx;
  .row {
    position: relative;
    padding: 10rpx 20rpx;

    & + .row {
      margin-top: 10rpx;
    }
    .uni-icons {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
    }
  }
}
/deep/.uni-data-tree-input {
  display: none;
}
.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .center {
    text-align: center;
    color: #555;
    font-size: $uni-font-size-base;
  }
}
.footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  border-top: 1rpx solid #eeecec;
  background-color: #ffffff;

  .bottom {
    font-size: $uni-font-size-lg;
    margin-left: 20rpx;

    .select-all {
      color: $j-primary-green;
    }
  }

  .footer-span-btn {
    height: 30rpx;
    line-height: 30rpx;
    font-size: $uni-font-size-lg;
    color: #ffffff;
    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    text-align: center;
    background-color: $j-primary-green;
    border-radius: 40rpx;
  }
}

.footer-right {
  justify-content: flex-end;
}
.sparepart-container {
  padding: 40rpx 20rpx;
  margin-bottom: 120rpx;
  .infos {
    border: 1rpx solid rgba(242, 242, 242, 1);
    padding: 0 20rpx;
    .col {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      align-items: stretch;
      font-size: 28rpx;
      & + .col {
        margin-top: 4rpx;
      }
      .label {
        display: inline-block;
        width: 200rpx;
        padding-right: 20rpx;
        text-align: right;
        background-color: rgba(215, 215, 215, 1);
      }
      .content {
        flex: 1;
        background-color: rgba(242, 242, 242, 1);
        padding-left: 8rpx;
        border: 1rpx solid rgba(215, 215, 215, 1);
      }
    }
  }
  .detail-title {
    font-size: 34rpx;
    padding: 20rpx 0;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;

    .u-button {
      width: 180rpx;
      margin: 0;
    }
  }
  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);
    min-height: 50vh;
    padding-bottom: 100rpx;
    .col {
      font-size: 30rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      display: flex;
      padding: 10rpx;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
    }

    .plus {
      width: 40rpx;
      height: 40rpx;
      line-height: 38rpx;
      text-align: center;
      background-color: $j-primary-border-green;
      color: #fff;
      margin: 16rpx 0 0 16rpx;
    }
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }
    .u-number-box__input {
      width: 2em !important;
    }
    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}

.select-container {
  // height:60vh;

  .title {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background-color: $j-primary-border-green;
    font-weight: bold;
    position: relative;
    font-size: 28rpx;
    color: #fff;
    .btn-box {
      position: absolute;
      top: 50%;
      right: 10rpx;
      transform: translateY(-50%);
    }
    .btn {
      width: 60rpx;
      height: 32rpx;
      display: inline-block;
      font-size: 28rpx;
      border: 1px solid #fff;
      text-align: center;
      line-height: 30rpx;
    }
  }
  input {
    display: block;
    margin: 8rpx auto;
    width: 720rpx;
    height: 72rpx;
    border: 1rpx solid rgb(153, 153, 153);
    padding-left: 8rpx;
  }
  /deep/.uni-table {
    margin-top: 10rpx;
    // min-width: 100% !important;
    // max-width: 100%;
  }
  .uni-table-th-row {
    padding: 24rpx 0 !important;
  }
  .uni-table-td,
  .uni-table-th {
    font-size: 28rpx;
  }
  .uni-table-th {
    background-color: rgba(242, 242, 242, 1);
    padding: 24rpx 0 !important;
  }

  .table-wrapper {
    height: 75vh;
    overflow: auto;
    padding: 20rpx;
  }
}
.sparepart-footer {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #fff;
  button {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    &.primary {
      background-color: $j-primary-border-green;
      color: #fff;
    }
  }
}

.listContent {
  flex: 1;
  overflow: auto;
  padding-bottom: 125rpx;
  .self-table-tr {
    border-bottom: 1rpx solid #ccc;
  }
}
.self-table-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.self-table-tr,
.self-table-header {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .table-date,
  .table-batch,
  .table-code {
    box-sizing: border-box;
    width: 27%;
    padding: 0 5rpx;
    word-break: break-all;
  }
  .table-code {
    width: 50%;
  }
  .table-date {
    width: 37%;
  }

  .other-info {
    color: #aaa;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    flex-wrap: wrap;

    > view {
      margin-bottom: 10rpx;
    }
  }

  .checked {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>