aiot-app/pages/warehouse/inventoryAllocation copy/edit.vue

<template>
  <view class="mainBox" :class="{ isOut: activeName === 'output' }">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="调拨明细"
      @clickLeft="back"
      v-if="navShow"
    >
      <template slot="right"
        ><text class="text-danger" @click="handleDelete" v-if="id"
          >删除调拨</text
        ></template
      >
    </uni-nav-bar>
    <view class="tool-wrapper">
      <view class="flex-center">
        <!-- <text>调拨单号 {{ formData.dialNumber }}</text> -->
        <view class="flex-center">
          <text>调拨条数 {{ assetsList.length + preAssetsList.length }}</text>
        </view>
        <text class="btn required" @click="$refs.typeSettingRef.open(formData)"
          >调拨类型设置</text
        ></view
      >
      <view class="flex-center info">
        <text class=""
          >调拨类型：{{
            formData.dialType == 1 ? '库内调拨' : '库外调拨'
          }}</text
        >
      </view>
      <view class="flex-center info">
        <text>调出仓库：{{ formData.warehouseName }}</text>
        <text>调入仓库：{{ formData.inWarehouseName }}</text>
      </view>
      <view class="tabs">
        <view
          class="tab-item"
          :class="{ active: activeName === 'output' }"
          @click="activeName = 'output'"
          >待调出（{{ assetsList.length }}）</view
        >
        <view
          class="tab-item"
          :class="{ active: activeName === 'input' }"
          @click="activeName = 'input'"
          >预调入（{{ preAssetsList.length }}）</view
        >
      </view>
      <template v-if="activeName === 'output'">
        <view class="operations flex-center">
          <text @click="handleScan">扫码添加</text>
          <text @click="handleWarehouseChoose('output')">手动添加</text>
          <text @click="handleWarehouseChoose('input')">调入货位</text>
          <!-- <text @click="deleteMaterial">删除选中</text> -->
        </view>
        <view class="search-box">
          <uni-easyinput
            prefixIcon="search"
            v-model="outputFilter"
            placeholder="编码、名称、货位"
          >
          </uni-easyinput>
        </view>
        <!-- <view class="select-box flex-center">
          <text
            >已选{{ assetsList.filter(i => i.checked).length }}/{{
              assetsList.length
            }}</text
          >
          <text class="btn" @click="assetsSelectAll = !assetsSelectAll"
            >全选</text
          >
        </view> -->
      </template>
      <template v-else>
        <view class="operations">
          <text @click="removeOutput" style="margin-right: 20rpx"
            >移除选中</text
          >
          <text @click="deleteOutput">删除选中</text>
        </view>
        <view class="search-box">
          <uni-easyinput
            prefixIcon="search"
            v-model="inputFilter"
            placeholder="编码、名称、货位"
          >
          </uni-easyinput>
        </view>
        <view class="select-box flex-center">
          <text
            >已选 {{ preAssetsList.filter(i => i.inputChecked).length }}/{{
              preAssetsList.length
            }}</text
          >
          <text class="btn" @click="preAssetsSelectAll = !preAssetsSelectAll"
            >全选</text
          >
        </view>
      </template>
    </view>
    <view class="list-container" v-if="activeName === 'output'">
      <AssetsCard
        v-for="(item, index) in assetsListRender"
        :key="index"
        :item="item"
        @deleteItem="deleteItem(item)"
        type="output"
      ></AssetsCard>
    </view>
    <view class="list-container" v-if="activeName === 'input'">
      <AssetsCard
        v-for="(item, index) in preAssetsListRender"
        :key="index"
        :item="item"
        type="input"
      ></AssetsCard>
    </view>

    <u-button
      type="success"
      class="preview-box"
      :plain="true"
      @click="handlePreview"
      >预览</u-button
    >
    <WarehouseChoose ref="warehouseChooseRef" :selfClose="true" />
    <CargoSpaceInfoDialog
      ref="cargoSpaceInfoDialogRef"
      @cancel="navShow = true"
      @success="cargoSpaceInfoConfirm"
      :assetsList="assetsList"
      :preAssetsList="preAssetsList"
    />

    <TypeSetting ref="typeSettingRef" @getPopupInfo="getPopupInfo" />
    <PreInventory ref="preInventoryRef" />
    <!-- <ScanCode @scancodedate="scancodedate"></ScanCode> -->
  </view>
</template>

<script>
import ScanCode from '@/components/ScanCode.vue'
import PreInventory from './components/PreInventory'
import AssetsCard from './components/AssetsCard'
import TypeSetting from './components/TypeSetting'
import WarehouseChoose from '@/components/WarehouseChoose'
import CargoSpaceInfoDialog from './components/CargoSpaceInfoDialog'
import { get, postJ } from '@/utils/api.js'
export default {
  components: {
    TypeSetting,
    ScanCode,
    PreInventory,
    AssetsCard,
    WarehouseChoose,
    CargoSpaceInfoDialog
  },
  data () {
    return {
      searchVal: '',
      activeName: 'output',
      formData: {
        // dialNumber: getRuleNo('ALLOT'),
        dialType: 1,
        warehouseId: '',
        warehouseName: '',
        inWarehouseId: '',
        inWarehouseName: '',
        deptCode: '',
        deptName: '',
        verifyId: '',
        verifyName: ''
      },
      assetsList: [], //已选资产列表
      preAssetsList: [], //预调入资产列表
      inputFilter: '',
      outputFilter: '',
      navShow: true,
      isCamera: false,
      id: ''
    }
  },
  onLoad (options) {
    if (options.id) {
      this.id = options.id
      this._getDetail(options.id)
    }
  },
  onShow () {
    const _this = this

    uni.$off('inventoryAllocationScanView') // 每次进来先 移除全局自定义事件监听器
    uni.$on('inventoryAllocationScanView', function (data) {
      _this.setScanMaterial(data)
    })
    console.log('onShow')
    uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
    uni.$on('scancodedate', function (data) {
      _this.scancodedate(data)
    })
  },
  onUnload () {
    uni.$off('scancodedate')
  },
  onHide () {
    uni.$off('scancodedate')
  },
  computed: {
    assetsSelectAll: {
      set (val) {
        this.assetsList.forEach(item => {
          item.checked = val
        })
        return val
      },
      get () {
        return !this.assetsList.some(item => !item.checked)
      }
    },
    preAssetsSelectAll: {
      set (val) {
        this.preAssetsList.forEach(item => {
          item.inputChecked = val
        })
        return val
      },
      get () {
        return !this.preAssetsList.some(item => !item.inputChecked)
      }
    },
    // 做前端过滤  编码areaName、名称assetCode、货位shelfCode、批次
    assetsListRender () {
      return this.assetsList.filter(
        ({
          assetName = '',
          assetCode = '',
          outWarehouseAreaName = '',
          outWarehouseAreaGoodsCode = '',
          outGoodsAllocationCode = ''
        }) => {
          if (this.outputFilter) {
            if (
              assetName.indexOf(this.outputFilter) !== -1 ||
              assetCode.indexOf(this.outputFilter) !== -1 ||
              outWarehouseAreaName.indexOf(this.outputFilter) !== -1 ||
              outWarehouseAreaGoodsCode.indexOf(this.outputFilter) !== -1 ||
              outGoodsAllocationCode.indexOf(this.outputFilter) !== -1
            ) {
              return true
            }
            return false
          }
          return true
        }
      )
    },
    // 做前端过滤 编码、名称、货位、批次
    preAssetsListRender () {
      return this.preAssetsList.filter(
        ({
          areaName = '',
          assetCode = '',
          inWarehouseAreaName = '',
          inWarehouseAreaGoodsCode = '',
          inGoodsAllocationCode = ''
        }) => {
          if (this.inputFilter) {
            if (
              areaName.indexOf(this.inputFilter) !== -1 ||
              assetCode.indexOf(this.inputFilter) !== -1 ||
              inWarehouseAreaName.indexOf(this.inputFilter) !== -1 ||
              inWarehouseAreaGoodsCode.indexOf(this.inputFilter) !== -1 ||
              inGoodsAllocationCode.indexOf(this.inputFilter) !== -1
            ) {
              return true
            }
            return false
          }
          return true
        }
      )
    }
  },
  methods: {
    scancodedate (data) {
      this.qrContent = data.code.trim()
      this.getData()
    },

    handleScan () {
      const _this = this
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType)
          console.log('条码内容：' + res.result)
          _this.isCamera = true
          _this.qrContent = res.result.trim()
          _this.getData()
        }
      })
    },
    // 根据条码请求设备数据 @_@
    getData () {
      if (!this.formData.warehouseId) {
        uni.showToast({
          title: '请设置调拨类型！',
          icon: 'none'
        })
        return
      }
      let par = {
        barType: this.qrContent.split('@_@')[1] || 0,
        qrContent: this.qrContent
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      postJ(this.apiUrl + '/scan/getAssetInfo', par)
        .then(res => {
          let data = res.data
          console.log(data, 'qrContent')
          if (data.assetType === undefined) {
            uni.showToast({
              title: '请扫码物品码',
              icon: 'none'
            })
            return
          } else if (data?.warehouseDetail?.bizStatus != 1) {
            uni.showModal({
              title: '提示',
              content: `当前物品不在仓库内`,
              success: async res => {}
            })
            return
          } else if (data.underApproval) {
            uni.showModal({
              title: '提示',
              content: `【${data.assetCode}】正在待审批单据中`,
              success: async res => {}
            })

            return
          } else if (data.information.takeStockPattern) {
            uni.showModal({
              title: '提示',
              content:
                '该物品为批量盘点模式，不可扫码。如需扫码，请将该物品类型在物品信息表中修改为逐个模式。',
              success: async res => {}
            })
            return
          } else if (
            data.warehouseDetail?.warehouseId !== this.formData.warehouseId
          ) {
            uni.showToast({
              title: `请选择${this.formData.warehouseName}仓库下的物品`,
              icon: 'none'
            })
            return
          }

          uni.setStorageSync('inventoryAllocationScan', data)
          uni.navigateTo({
            url: '/pages/warehouse/inventoryAllocation/scanView?emitName=inventoryAllocationScanView&key=inventoryAllocationScan'
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
    setScanMaterial (data) {
      console.log(data, '--------------------')
      const curMap = {
        assetId: 'id',
        assetCode: 'informationCode', //编码
        assetName: 'informationName', //名称
        materialId: 'id',
        materialName: 'informationName',
        batchNo: 'batchNum', //批次号
        unit: 'measuringUnit', //单位
        minPackUnit: 'packingUnit' //最小包装单位
      }
      let detail = {}

      for (const key in curMap) {
        detail[key] = (curMap[key] && data.information[curMap[key]]) || ''
      }
      const obj = {
        ...data.information,
        ...data.warehouseDetail,
        specification:
          data.information?.specification ||
          data.warehouseDetail?.specification,
        detailReqList: [
          {
            ...data.warehouseDetail,
            ...detail,
            onlyCode: data.assetCode,
            batchNo: data.warehouseDetail?.batchNum
          }
        ],
        amount: 1,
        curId:
          data.warehouseDetail?.cargoSpaceId + data.warehouseDetail?.assetCode
      }

      const item = this.assetsList.find(itm => itm.curId === obj.curId)
      const preItem = this.preAssetsList.find(itm => itm.curId === obj.curId)

      const detailReqList = item?.detailReqList || []
      const preDetailReqList = preItem?.detailReqList || []
      if (item && detailReqList.find(i => i.onlyCode === data.assetCode)) {
        uni.showModal({
          title: '提示',
          content: '该物品已添加至待调入，请勿重复添加',
          success: async res => {}
        })
        return
      }

      if (
        preItem &&
        preDetailReqList.find(i => i.onlyCode === data.assetCode)
      ) {
        uni.showModal({
          title: '提示',
          content: '该物品已添加至预调入，请勿重复添加',
          success: async res => {}
        })
        return
      }
      console.log('this.obj-----------', obj)

      // if (item) {
      //   if (obj.takeStockPattern) {
      //     obj.amount = 1
      //   } else {
      //     obj.detailReqList.push(...detailReqList)
      //     obj.amount = 1
      //   }
      // }

      this.cargoSpaceInfoConfirm([obj])
    },
    // 带调出删除
    deleteItem (item) {
      uni.showModal({
        title: '提示',
        content: '确定删除当前数据？',
        success: async res => {
          if (res.confirm) {
            const index = this.assetsList.findIndex(i => i.curId === item.curId)

            if (index > -1) {
              this.assetsList.splice(index, 1)
            }
          }
        }
      })
    },
    handleDelete () {
      uni.showModal({
        title: '提示',
        content: '确定删除当前调拨？',
        success: async res => {
          if (res.confirm) {
            const res = await get(
              this.apiUrl + `/conventionalStockTransfer/delete/${this.id}`,
              {},
              true
            )
            if (res.success) {
              uni.showToast({
                title: '删除成功！',
                mask: true
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1500)
            }
          }
        }
      })
    },
    async _getDetail (id) {
      const res = await get(
        this.apiUrl +
          `/conventionalStockTransfer/details/conventionalStockTransfer/${id}`
      )
      if (res?.success) {
        this.formData = res.data.conventionalStockTransfer

        const assetsList = [],
          preAssetsList = []

        res.data.stockTransferInfoList.forEach(item => {
          let obj = {
            batchNum: item.batchNo,
            curId: item.outGoodsAllocationId + item.assetCode,
            ...item
          }

          if (obj.inGoodsAllocationId) {
            obj.inputChecked = false
            preAssetsList.push(obj)
          } else {
            if (!obj.takeStockPattern) {
              obj.curDetailReqList = uni.$u.deepClone(obj.detailReqList)
            }
            assetsList.push(obj)
          }
        })
        this.assetsList = assetsList
        this.preAssetsList = preAssetsList
      }
    },

    handleDetail (item) {
      this.$refs.detailRef.open(item, this.cargoSpaceId, res => {
        if (this.type === 'output') {
          this.$set(item, 'curDetailReqList', res)
        } else {
          this.$set(
            item,
            'detailReqList',
            res.filter(i => i.checked)
          )
        }
      })
    },
    //退回待调出
    removeOutput () {
      if (!this.preAssetsList.some(i => i.inputChecked)) {
        uni.showToast({
          title: '请选择数据',
          icon: 'none'
        })
        return
      }
      uni.showModal({
        title: '提示',
        content: '确定移除当前选中？',
        success: res => {
          if (res.confirm) {
            for (let i = 0; i < this.preAssetsList.length; i++) {
              console.log(this.preAssetsList[i])
              if (this.preAssetsList[i].inputChecked) {
                const index = this.assetsList.findIndex(
                  itm => itm.curId == this.preAssetsList[i].curId
                )
                if (index > -1) {
                  if (this.preAssetsList[i].takeStockPattern) {
                    this.assetsList[index].amount +=
                      this.preAssetsList[i].amount
                  } else {
                    this.assetsList[index].detailReqList.push(
                      ...this.preAssetsList[i].detailReqList.map(itm => {
                        itm.checked = false
                        return itm
                      })
                    )
                    this.assetsList[index].curDetailReqList = uni.$u.deepClone(
                      this.assetsList[index].detailReqList
                    )
                    this.assetsList[index].amount =
                      this.assetsList[index].detailReqList.length
                  }
                } else {
                  const obj = uni.$u.deepClone(this.preAssetsList[i])
                  if (obj.takeStockPattern) {
                    obj.curAmount = obj.amount
                  } else {
                    obj.curDetailReqList = obj.detailReqList
                    obj.amount = obj.curDetailReqList.length
                  }
                  this.assetsList.push(obj)
                }

                this.preAssetsList.splice(i, 1)
                i--
              }
            }
          }
        }
      })
    },
    // 删除数据
    deleteOutput () {
      if (!this.preAssetsList.some(i => i.inputChecked)) {
        uni.showToast({
          title: '请选择数据',
          icon: 'none'
        })
        return
      }
      uni.showModal({
        title: '提示',
        content: '确定删除当前选中？',
        success: res => {
          if (res.confirm) {
            this.preAssetsList = this.preAssetsList.filter(i => !i.inputChecked)
          }
        }
      })
    },
    // 删除物料
    deleteMaterial () {
      this.assetsList = this.assetsList.filter(i => !i.checked)
    },
    // 预览
    handlePreview () {
      if (!this.preAssetsList.length) {
        uni.showToast({
          title: '请选择调拨资产',
          icon: 'none'
        })
        return
      }

      if (!this.formData.createUserName) {
        const userInfo = uni.getStorageSync('userInfo')
        ;(this.formData.createUserId = userInfo.id),
          (this.formData.createUserName = userInfo.name)
      }
      const params = {
        conventionalStockTransferReq: this.formData,
        infoReqList: this.preAssetsList.map(i => {
          delete i.curDetailReqList
          if (!i.takeStockPattern) {
            i.detailReqList = i.detailReqList.map(itm => {
              itm.dialType = this.formData.dialType
              let obj = {
                ...i,
                ...itm,
                produceId: itm.id
              }
              delete obj.detailReqList
              return obj
            })
          }
          return {
            batchNo: i.batchNum,
            ...i
          }
        })
      }
      delete params.conventionalStockTransferReq.createTime

      const storageKey = Date.now() + ''

      uni.removeStorageSync('inventoryAllocation_preview')

      uni.setStorageSync('inventoryAllocation_preview', {
        [storageKey]: { params, assetsList: this.assetsList }
      })

      if (!this.preAssetsList.length) {
        return this.$message.error('请选择调拨资产')
      }

      uni.navigateTo({
        url: '/pages/warehouse/inventoryAllocation/preview?id=' + storageKey
      })
    },
    //获取仓库信息
    handleWarehouseChoose (type) {
      if (!this.formData.warehouseId) {
        uni.showToast({
          title: '请设置调拨类型！',
          icon: 'none'
        })
        return
      }
      if (
        type == 'input' &&
        !this.assetsList.filter(item => {
          return (
            (item.takeStockPattern && item.curAmount > 0) ||
            (!item.takeStockPattern &&
              item.curDetailReqList?.filter(p => p.checked).length > 0)
          )
        }).length
      ) {
        uni.showToast({
          title: '请选择待调入资产！',
          icon: 'none'
        })
        return
      }
      let warehouse = {}
      if (this.formData.dialType === 1) {
        warehouse.id = this.formData.warehouseId
        warehouse.name = this.formData.warehouseName
        this.$refs.warehouseChooseRef.open({ ...warehouse, type }, res => {
          if (type === 'output') {
            this.navShow = false
            this.$refs.cargoSpaceInfoDialogRef.open(res)
          } else {
            this.inputConfirm(res)
          }
        })
      } else if (this.formData.dialType === 2) {
        if (type == 'output') {
          warehouse.id = this.formData.warehouseId
          warehouse.name = this.formData.warehouseName
        } else {
          warehouse.id = this.formData.inWarehouseId
          warehouse.name = this.formData.inWarehouseName
        }
        this.$refs.warehouseChooseRef.open({ ...warehouse, type }, res => {
          if (type === 'output') {
            this.navShow = false
            this.$refs.cargoSpaceInfoDialogRef.open(res)
          } else {
            this.inputConfirm(res)
          }
        })
      }
    },

    // 选中调入库区
    inputConfirm (data) {
      this.$refs.warehouseChooseRef.cancel()
      this.navShow = false
      this.$refs.preInventoryRef
        .open(this.assetsList, data)
        .then(() => {
          for (let i = 0; i < this.assetsList.length; i++) {
            const item = this.assetsList[i]
            let obj = uni.$u.deepClone(item)
            if (item.takeStockPattern && item.curAmount > 0) {
              obj.amount = obj.curAmount
              delete obj.curAmount

              if (item.curAmount == item.amount) {
                this.assetsList.splice(i, 1)
                i--
              } else {
                item.amount -= item.curAmount
                item.curAmount = 0
              }
              this.preAssetsList.push({
                ...obj,
                inGoodsAllocationCode: data.cargoSpaceCode,
                inGoodsAllocationId: data.cargoSpaceId,
                inWarehouseAreaGoodsCode: data.shelfCode,
                inWarehouseAreaGoodsId: data.shelfId,
                inWarehouseAreaId: data.areaId,
                inWarehouseAreaName: data.areaName,
                inWarehouseId: data.warehouseId,
                inWarehouseName: data.warehouseName,
                inputChecked: false
              })
            }

            if (
              !item.takeStockPattern &&
              item.curDetailReqList.filter(p => p.checked)?.length
            ) {
              obj.detailReqList = obj.curDetailReqList.filter(p => p.checked)
              obj.amount = obj.detailReqList.length

              if (obj.amount === item.detailReqList.length) {
                this.assetsList.splice(i, 1)
                i--
              } else {
                item.curDetailReqList = item.curDetailReqList.filter(
                  p => !p.checked
                )
                item.detailReqList = uni.$u.deepClone(item.curDetailReqList)
                item.amount = item.detailReqList.length
              }

              this.preAssetsList.push({
                ...obj,
                inGoodsAllocationCode: data.cargoSpaceCode,
                inGoodsAllocationId: data.cargoSpaceId,
                inWarehouseAreaGoodsCode: data.shelfCode,
                inWarehouseAreaGoodsId: data.shelfId,
                inWarehouseAreaId: data.areaId,
                inWarehouseAreaName: data.areaName,
                inWarehouseId: data.warehouseId,
                inWarehouseName: data.warehouseName,
                inputChecked: false
              })
            }
          }
          this.activeName = 'input'
        })
        .finally(() => (this.navShow = true))
    },
    //调出资产
    cargoSpaceInfoConfirm (assetsList) {
      this.$refs.warehouseChooseRef.cancel()
      // 已添加物品
      this.assetsList.forEach(item => {
        const index = assetsList.findIndex(i => i.curId === item.curId)
        if (index > -1) {
          let obj = assetsList.splice(index, 1)[0]
          item.amount += obj.amount
          if (obj.takeStockPattern) {
            item.curAmount += obj.amount
          } else {
            const list = obj.detailReqList.filter(i =>
              item.detailReqList.find(itm => i.onlyCode !== itm.onlyCode)
            )
            if (list.length > 0) {
              item.detailReqList.push(...list)
              item.curDetailReqList.push(
                ...uni.$u.deepClone(list).map(i => ({ ...i, checked: true }))
              )
            }
          }
        }
      })
      // 未添加
      this.assetsList.push(
        ...assetsList.map(i => {
          if (!i.takeStockPattern) {
            i.curDetailReqList = uni.$u
              .deepClone(i.detailReqList)
              .map(i => ({ ...i, checked: true }))
          } else {
            i.curAmount = i.amount
          }
          return {
            ...i,
            outGoodsAllocationCode: i.cargoSpaceCode,
            outGoodsAllocationId: i.cargoSpaceId,
            outWarehouseAreaGoodsCode: i.shelfCode,
            outWarehouseAreaGoodsId: i.shelfId,
            outWarehouseAreaId: i.areaId,
            outWarehouseAreaName: i.areaName,
            outWarehouseId: i.warehouseId,
            outWarehouseName: i.warehouseName
          }
        })
      )

      console.log('this.assetsList-----------', this.assetsList)
    },
    getPopupInfo (warehouse) {
      if (warehouse.warehouseName !== this.formData.warehouseName) {
        this.assetsList = []
        this.preAssetsList = []
      }

      Object.assign(this.formData, warehouse)
    }
  }
}
</script>

<style lang="scss" scoped>
$fixedHeight: 560rpx;
$fixedHeightOut: 450rpx;
.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 5rpx;
}

.btn {
  color: #70b603;
  font-size: 32rpx;
}

.isOut .tool-wrapper {
  height: $fixedHeightOut;
}
.tool-wrapper {
  position: fixed;
  left: 0;
  height: $fixedHeight;
  width: 100vw;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  z-index: 1;

  .required::before {
    content: '*';
    color: red;
  }
  .info {
    background-color: rgba(242, 242, 242, 0.792156862745098);
    margin: 8rpx 0;
  }

  .tabs {
    background-color: rgba(242, 242, 242, 0.792156862745098);
    padding-top: 20rpx;

    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .tab-item {
      padding-top: 20rpx;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        background: linear-gradient(
          180deg,
          rgba(75, 121, 2, 1) 0%,
          rgba(255, 255, 255, 1) 12%
        );
      }
    }
  }

  .operations {
    font-size: 32rpx;
    padding: 10rpx 40rpx;
    color: rgba(75, 121, 2, 1);
  }
  .search-box {
    padding: 10rpx;
  }
  .select-box {
    border-bottom: 1rpx solid #d7d7d7;
    white-space: nowrap;
  }
}

.isOut .list-container {
  padding-top: $fixedHeightOut;
}
.list-container {
  padding-top: $fixedHeight;
  padding-bottom: 80rpx;
}
.preview-box {
  position: fixed;
  bottom: 0;
  width: 100vw !important;
}
</style>