修改申请备品备件页面

pages/maintenanceWorkorder/sparepart/sparepartList.vue

@@ -1,8 +1,120 @@
 <template slot-scope="scope">
-	<view>
-		<view class="sparepartList">
+	<view class="content-box">
+		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="搜索" @clickLeft="back">
+			<!--右菜单-->
+			<template slot="right">
+				<u-button type="success" size="small" class="u-reset-button" @click="openTreePicker" text="选择分类"></u-button>
+			</template>
+		</uni-nav-bar>
+		<view class="top-wrapper">
+			<view class="searchBox rx-bc">
+				<input v-model="assetName" placeholder="请输入物品名称" class="searchInput" />
+
+				<view class="rx-sc">
+					<image class="menu_icon" src="~@/static/pda/menu.svg" @click="handleSearch"></image>
+					<u-button @click="search" type="success" size="small" class="u-reset-button" text="搜索"></u-button>
+				</view>
+			</view>
+		</view>
+		<view class="list_box">
+			<u-list @scrolltolower="scrolltolower">
+				<checkbox-group v-for="(item, index) in tableData" :key="index" @change="e => selectVal(e, item, index)">
+					<label class="listBox rx-bs">
+						<view class="listBox-sel">
+							<checkbox :value="item.code" color="#fff" :disabled="item.disabled" :checked="item.checked" />
+						</view>
+
+						<view class="listBox-con">
+							<view class="listBox-top rx-bc">
+								<view>{{ item.name }}</view>
+							</view>
+
+							<view class="listBox-bottom rx">
+								<view class="items">
+									<text>编码</text>
+									{{ item.code }}
+								</view>
+
+								<view class="items">
+									<text>物料代号</text>
+									{{ item.materielCode }}
+								</view>
+
+								<view class="items">
+									<text>客户代号</text>
+									{{ item.clientCode }}
+								</view>
+
+								<view class="items">
+									<text>质检状态</text>
+									{{ stateList[Number(item.runStatus)] }}
+								</view>
+
+								<view class="items">
+									<text>包装库存</text>
+									{{ item.packingCountBase }} {{ item.minUnit }}
+								</view>
+
+								<view class="items">
+									<text>计量库存数量</text>
+									{{ item.availableCountBase }} {{ item.measuringUnit }}
+								</view>
+							</view>
+						</view>
+					</label>
+				</checkbox-group>
+
+				<view v-if="tableData.length == 0" style="margin-top: 20vh">
+					<u-empty iconSize="150" textSize="32" text="暂无数据"></u-empty>
+				</view>
+			</u-list>
+		</view>
+
+		<view class="bottom-wrapper rx-bc">
+			<view>
+				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
+				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选</checkbox>
+			</view>
+			<view>
+				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen" @click="config">
+					<view>选择( {{ checkListLen }} )</view>
+				</u-button>
+			</view>
+		</view>
+		<ba-tree-picker
+			ref="treePicker"
+			key="verify"
+			:multiple="false"
+			@select-change="confirm"
+			title="选择分类"
+			:selectedData="selectedData"
+			:localdata="classificationList"
+			valueKey="id"
+			textKey="name"
+			childrenKey="children" />
+		<SearchPopup mode="top" v-if="searchShow">
+			<template v-slot:list>
+				<view class="search_list">
+					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">
+						<u-form-item label="维度:" class="required-form" borderBottom prop="warehouseId">
+							<zxz-uni-data-select :localdata="dimensionList" v-model="dimension" dataValue="id" format="{name}" dataKey="name" filterable></zxz-uni-data-select>
+						</u-form-item>
+					</u-form>
+				</view>
+			</template>
+
+			<template v-slot:operate>
+				<view class="operate_box rx-bc">
+					<u-button size="small" class="u-reset-button" @click="searchShow = false">取消</u-button>
+					<u-button type="success" size="small" class="u-reset-button" @click="doSearch">确定</u-button>
+				</view>
+			</template>
+		</SearchPopup>
+		<!-- <view class="sparepartList">
 			<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="申请备品备件" @clickLeft="back">
-				<view slot="right" @click="confirm">确定</view>
+				<view slot="right" @click="confirm">
+					<u-button class="confingBtn" size="normal" type="primary">确定{{ checkboxList.length }}</u-button>
+				</view>
 			</uni-nav-bar>
 			<view class="searchBar">
 				<u-icon class="icon" :size="50" name="list" @click="show = true"></u-icon>
@@ -13,10 +125,9 @@
 					<u-list-item v-for="(item, index) in tableData" :key="index">
 						<u-cell value="内容">
 							<view slot="title" class="u-slot-title">{{ item.name }}</view>
-							<!-- <view slot="label" class="u-slot-title">{{ item.modelType }}/{{ item.specification }}</view> -->
 							<view slot="value" class="u-cell-value">
 								<u-checkbox-group size="30" iconPlacement="right" placement="column" @change="selectItem($event, index)">
-									<u-checkbox size="30" :labelSize="30" :customStyle="{ marginBottom: '8px' }" :key="index" :label="item.availableCountBase" :name="item"></u-checkbox>
+									<u-checkbox size="30" :iconSize="30" :labelSize="30" :customStyle="{ marginBottom: '8px' }" :key="index" :label="item.availableCountBase" :name="item"></u-checkbox>
 								</u-checkbox-group>
 							</view>
 						</u-cell>
@@ -25,34 +136,49 @@
 				<view v-else class="no-data">暂无数据</view>
 			</view>
 			<u-picker v-if="show" :show="show" :columns="columns" keyName="label" @cancel="close" @confirm="config" :defaultIndex="dimensionIndex"></u-picker>
-		</view>
+		</view> -->
 	</view>
 </template>
 <script>
+	import { treeByPid } from '@/api/pda/workOrder.js'
+	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
+	import SearchPopup from '@/pages/pda/components/searchPopup.vue'
 	import { getDetailById, getBatchDetails, applySpareParts, saveNew, getInventoryDetails, getMaterielDetails } from '@/api/repair'
 	export default {
+		components: {
+			baTreePicker,
+			SearchPopup
+		},
 		data() {
 			return {
+				assetName: '',
+				searchShow: false,
+				formData: {},
 				checkboxList: [],
 				tableData: [],
-				dimensionIndex: [0],
 				dimension: 4,
 				show: false,
-				columns: [
-					[
-						{
-							label: '物料维度',
-							value: '4'
-						},
-						{
-							label: '包装维度',
-							value: '3'
-						},
-						{
-							label: '批次维度',
-							value: '2'
-						}
-					]
+				categoryLevelId: 6,
+				rootCategoryLevelId: '',
+				classificationList: [],
+				selectedData: ['6'],
+				stateList: {
+					0: '未质检',
+					1: '已质检'
+				},
+				dimensionList: [
+					{
+						name: '物料维度',
+						id: 4
+					},
+					{
+						name: '包装维度',
+						id: 3
+					},
+					{
+						name: '批次维度',
+						id: 2
+					}
 				],
 				searchForm: {
 					assetName: ''
@@ -74,28 +200,94 @@
 				selectionList: [],
 				wlParams: {},
 				materialObj: {},
-				total: 0
+				total: 0,
+				seletedAll: false
 			}
 		},
 		onLoad(options) {
 			this.id = options.id
 		},
 		onShow() {
-			this.getList()
+			// this.getList()
+			this.getTreeList()
+		},
+		//选择的列表长度
+		computed: {
+			checkListLen() {
+				return this.checkboxList.length
+			}
 		},
 		methods: {
+			doSearch() {
+				this.searchShow = false
+				this.search()
+			},
+			handleSearch() {
+				this.searchShow = true
+			},
+			getTreeList() {
+				treeByPid({ ids: [6, 14] }).then(res => {
+					this.classificationList = res
+					this.confirm(res[0].id, res[0].name, res[0].rootCategoryLevelId)
+				})
+			},
+			_seletedAll() {
+				if (!this.seletedAll) {
+					this.seletedAll = true
+					this.tableData.map(item => {
+						this.$set(item, 'checked', true)
+						const idx = this.checkboxList.findIndex(itm => itm.id === item.id)
+						if (idx === -1) {
+							this.checkboxList.push(item)
+						}
+					})
+				} else {
+					this.seletedAll = false
+					this.tableData.map(item => {
+						this.$set(item, 'checked', false)
+						const idx = this.checkboxList.findIndex(itm => itm.id === item.id)
+						if (idx > -1) {
+							this.checkboxList.splice(idx, 1)
+						}
+					})
+				}
+			},
+			//勾选
+			selectVal(e, val, index) {
+				this.tableData[index].checked = !this.tableData[index].checked
+				this.seletedAll = !this.tableData.some(item => !item.checked)
+				const idx = this.checkboxList.findIndex(item => item.id === this.tableData[index].id)
+
+				if (this.tableData[index].checked) {
+					if (idx === -1) {
+						this.checkboxList.push(this.tableData[index])
+					}
+				} else {
+					if (idx > -1) {
+						this.checkboxList.splice(idx, 1)
+					}
+				}
+			},
+			openTreePicker() {
+				this.$refs.treePicker._show()
+			},
 			search() {
 				this.pageNum = 1
 				this.tableData = []
 				this.getList()
 			},
+			scrolltolower() {
+				if (this.isEnd) return
+				this.pageNum++
+				this.getList()
+			},
 			getList() {
 				uni.showLoading({
 					title: '加载中'
 				})
 				return new Promise(async (resolve, reject) => {
 					try {
-						let params = { assetName: this.searchForm.assetName, dimension: this.dimension, pageNum: this.pageNum, size: 15, categoryLevelId: 6 }
+						let params = { assetName: this.assetName, dimension: this.dimension, pageNum: this.pageNum, size: 30, categoryLevelId: this.categoryLevelId }
 						if (this.dimension == 2) {
 							let res = await getBatchDetails(params)
 							this.total = res.count
@@ -134,11 +326,13 @@
 										availableCountBase: 1,
 										packingCountBase: 1,
 										minUnit: item.packingUnit,
-										oid: item.id + this.pages.pageNum + (index + 1)
+										oid: item.id + this.pageNum + (index + 1)
 									}
 								})
 							)
+							console.log(this.tableData)
 						}
+						this.isEnd = this.tableData.length >= this.total
 						uni.hideLoading()
 						resolve()
 					} catch (error) {
@@ -148,28 +342,12 @@
 					}
 				})
 			},
-			selectItem(data, index) {
-				if (data[0]) {
-					this.checkboxList[index] = data[0]
-				} else {
-					this.checkboxList[index] = ''
-				}
-			},
-			config(data) {
-				console.log(data)
-				this.dimension = data.value[0].value
-				this.dimensionIndex = data.indexs
-				this.show = false
-				this.pageNum = 1
+			confirm(id, name, rootCategoryLevelId) {
+				this.rootCategoryLevelId = rootCategoryLevelId
+				this.categoryLevelId = id
 				this.tableData = []
 				this.getList()
 			},
-			close() {
-				this.show = false
-			},
-			scrolltolower(e) {
-				console.log(e)
-			},
 			back() {
 				uni.navigateBack({
 					delta: 1
@@ -213,7 +391,7 @@
 					return item.outInDetailId
 				})
 				const parmas = {
-					categoryLevelId: 6,
+					categoryLevelId: this.categoryLevelId,
 					type: this.dimension,
 					categoryIds,
 					batchNos,
@@ -225,8 +403,9 @@
 				const data = await getDetailById(parmas)
 				return data
 			},
-			async confirm() {
+			async config() {
 				let checkboxList = this.checkboxList.filter(item => !!item)
+				console.log(checkboxList)
 				if (!checkboxList.length) {
 					uni.showToast({
 						icon: 'error',
@@ -242,6 +421,7 @@
 						return { ...item, assetName: item.name }
 					})
 				}
+				console.log(data)
 				this.detailData({ ...data, wlList: arr }, this.dimension)
 			},
 
@@ -433,51 +613,117 @@
 				} catch (error) {
 					console.log(error)
 				}
-			},
-			// 触底加载
-			scrolltolower() {
-				this.loadmore()
-			},
-			loadmore() {
-				if (this.tableData.length < this.total) {
-					this.pageNum += 1
-					this.getList()
-				}
 			}
 		}
 	}
 </script>
 <style lang="scss" scoped>
-	.sparepartList {
+	.content-box {
 		height: 100vh;
-		width: 100%;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
-		.searchBar {
-			padding: 20rpx;
-			display: flex;
-			.icon {
-				margin-right: 20rpx;
-			}
+		background-color: $page-bg;
+	}
+
+	.searchBox {
+		background-color: #dedede;
+		height: 90rpx;
+		padding: 0 20rpx;
+
+		.menu_icon {
+			width: 60rpx;
+			height: 60rpx;
+			margin-right: 20rpx;
 		}
-		.listBox {
-			flex: 1;
-			height: 0;
-			.list {
-				height: 100% !important;
-			}
-			.u-cell-value {
-				width: 70rpx;
-			}
-			.no-data {
-				height: 100%;
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 30rpx;
+
+		input {
+			height: 70rpx;
+			width: 480rpx;
+			background: #f9f9f9 !important;
+			padding-left: 10rpx;
+			border-radius: 5rpx;
+		}
+	}
+
+	.list_box {
+		flex: 1;
+		overflow: hidden;
+		padding: 6rpx 0;
+
+		.u-list {
+			height: 100% !important;
+		}
+	}
+
+	.bottom-wrapper {
+		height: 80rpx;
+		background: #fff;
+		padding: 0 32rpx;
+
+		/deep/ .uni-checkbox-input-checked {
+			background-color: $theme-color !important;
+			border-color: $theme-color !important;
+		}
+	}
+
+	.listBox {
+		margin-top: 8rpx;
+		padding: 8rpx 24rpx;
+		background: #fff;
+
+		/deep/ .uni-checkbox-input-checked {
+			background-color: $theme-color !important;
+			border-color: $theme-color !important;
+		}
+
+		.listBox-con {
+			width: 650rpx;
+			font-weight: 400;
+		}
+
+		.listBox-top {
+			margin-top: 6rpx;
+			color: #090a0a;
+			font-size: 28rpx;
+			font-style: normal;
+			font-weight: 800;
+		}
+
+		.listBox-bottom {
+			color: #090a0a;
+			font-size: 24rpx;
+			font-style: normal;
+			flex-wrap: wrap;
+
+			.items {
+				width: calc(50% - 1px);
+				border-left: 1rpx solid #e3e5e5;
+				border-right: 1rpx solid #e3e5e5;
+				border-bottom: 1rpx solid #e3e5e5;
+				box-sizing: border-box;
+				word-break: break-all;
+				text {
+					display: inline-block;
+					background: #f7f9fa;
+					padding: 8rpx 10rpx;
+					color: #157a2c;
+				}
+
+				&:nth-child(1),
+				&:nth-child(2) {
+					border-top: 1rpx solid #e3e5e5;
+					margin-top: 8rpx;
+				}
 			}
 		}
 	}
+
+	.search_list {
+		min-height: 100rpx;
+
+		/deep/ .baseForm {
+			padding: 0 20rpx;
+		}
+	}
 </style>