aiot-app/pages/maintain_service/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">
				<!-- <view class="col">
          <text class="label">申领单号</text>
          <text class="content">{{ formData.applyOrder }}</text>
        </view>
        <view class="col">
          <text class="label">期望完成时间</text>
          <text class="content" @click="timeShow = true">{{
            formData.expectedPerformanceTime | timeFilter
          }}</text>
        </view> -->
				<u-form labelPosition="left" :model="formData" ref="formRef" labelWidth="250" labelAlign="left" class="baseForm">
					<!-- <u-form-item label="审核人部门" prop="verifyDeptName" borderBottom>
            <u-input
              :value="formData.verifyDeptName"
              disableColor="#ffffff"
              placeholder="请选择"
              disabled
              type="select"
              clearable
              @click.native="$refs.verifyTreePicker._show()"
            />
            <view slot="right" style="display: flex; align-item: center">
              <u-icon
                v-show="formData.verifyDeptName"
                name="close-circle-fill"
                @click="verifyDeptConfirm([], '')"
              ></u-icon>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-form-item>
          <u-form-item label="审核人" prop="approvalUserId" borderBottom>
            <picker
              @change="
                e =>
                  handlePicker(
                    e,
                    userList,
                    'approvalUserId',
                    'approvalUserName'
                  )
              "
              :value="pickerIndex"
              :range="userList"
              range-key="name"
            >
              <u-input
                :value="formData.approvalUserName"
                disableColor="#ffffff"
                placeholder="请选择"
                disabled
                type="select"
              />
            </picker>
            <view slot="right" style="display: flex; align-item: center">
              <u-icon
                v-show="formData.approvalUserName"
                name="close-circle-fill"
                @click="
                  handlePicker(null, [], 'approvalUserId', 'approvalUserName')
                "
              ></u-icon>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-form-item> -->
					<u-form-item label="仓库：" prop="warehouseId" style="height: 120rpx" required>
						<!-- <uni-datetime-picker type="datetime" v-model="formData.datetime" @change="changeLog" /> -->
						<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>
			</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.measuringUnit}/${item.minPackUnit}` : item.measuringUnit }}</view>
								</view>
								<view class="col">
									<view class="col-item">所需数量：{{ item.selectNum || 0 }}{{ 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: [],
				warehosueVal: 0,
				memo: [],
				selectList: [],
				currentRow: {},
				forceUpdate: false,
				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: {
			showPopu() {
				this.popShow = true
			},
			changeLog(e) {
				console.log('change事件:', e)
			},
			// 选择审核人确定
			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: 2
				}
				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
				})
			},
			handleDelete(item, row, index) {
				uni.showModal({
					title: `确定删除${row.onlyCode}？`,
					content: '',
					confirmText: '确认',
					success: function (res) {
						if (res.confirm) {
							item.tableData.splice(index, 1)

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

								return next
							}, 0)
						}
					}
				})
			},

			// 选择备品备件
			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.curId = item.informationCode
							delete item.equipmentCode
							return item
						})
					}
				})
			},
			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

				let selectNum = 0

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

				this.currentRow.selectNum = 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 = []

				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 > 0 || this.registerlist.some(i => i.tableData.length))) {
					this.warehouseInfo = val
					this.showConfirm = true
				} else {
					const obj = this.warehouseList[val?.detail?.value] || {}
					this.warehosueName = obj.name
					this.warehouseId = obj.id
					this.registerlist = []
				}
			},
			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.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 {
			padding: 5rpx 0;
			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>