aiot-app/pages/warehouse/reportLoss/edit.vue

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

		<u-form labelPosition="left" :model="formData" :rules="rules" ref="formRef" labelWidth="240" labelAlign="right"
			class="baseForm">
			<u-form-item label="报损报溢编码" borderBottom prop="code">
				<u-input :value="formData.code" disableColor="#ffffff" placeholder="请选择" disabled type="select" />
			</u-form-item>
			<u-form-item label="名称" class="required-form" borderBottom prop="name">
				<u-input v-model="formData.name" placeholder="请输入" type="text" />
			</u-form-item>
			<u-form-item label="报损报溢部门" class="required-form" prop="bizScene" borderBottom>
				<u-input v-model="formData.executeGroupName" disableColor="#ffffff"
					@click.native="$refs.treePicker._show()" placeholder="请选择" type="select" />
			</u-form-item>
			<u-form-item label="报损报溢人" class="required-form" prop="reportName" borderBottom>
				<uni-data-select v-model="formData.executorId" :localdata="userList"
					@change="userChange"></uni-data-select>
			</u-form-item>
			<u-form-item label="备注" prop="remark" borderBottom>
				<u-input v-model="formData.remark" placeholder="请输入" type="text" />
			</u-form-item>
		</u-form>

		<uni-section title="报损报溢明细" type="line">
			<template v-slot:right>
				<text class="text-primary" @click="workorderSelect">选择盘点工单</text>
			</template>
			<view class="order-box">盘点工单{{ formData.workOrderCode }}</view>
			<view v-for="(item, index) in formData.list" :key="index" class="list-card">
				<view class="status" :style="{ color: colorInfo[item.status] }">
					<text>{{ statusInfo[item.status] }}</text>
					<text>数量：{{ item[countInfo[item.status]] }}</text>
				</view>
				<view class="row first">
					<view class="col" style="width: 100%">
						<text class="main">{{ item.categoryName }}</text>
						{{ item.categoryCode }}
					</view>
					<view class="col" style="width: 100%">
						<text class="main">包装编码：</text>
						{{ item.packageNo }}
					</view>
					<view class="col" style="width: 100%">
						<text class="main">仓库：</text>
						{{ item.info.warehouseName }}
					</view>
				</view>
				<view class="row">
					<view class="col">
						<text class="label">包装数量：</text>
						{{ item.info.packingCountBase }}
					</view>
					<view class="col">
						<text class="label">包装单位：</text>
						{{ item.info.packingUnit }}
					</view>
					<view class="col">
						<text class="label">重量：</text>
						{{ item.info.weight }}
					</view>
					<view class="col">
						<text class="label">重量单位：</text>
						{{ item.info.weightUnit }}
					</view>
					<view class="col">
						<text class="label">批次号：</text>
						{{ item.batchNo }}
					</view>
				</view>
			</view>
		</uni-section>

		<view class="footBox">
			<u-button type="success" @click="handleSubmit">提交</u-button>
		</view>

		<ba-tree-picker ref="treePicker" :multiple="false" @select-change="deptConfirm" title="选择部门"
			:localdata="listData" valueKey="id" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import {
		getCode,
		saveReportsList
	} from '@/api/warehouseManagement'
	import {
		listOrganizations,
		getUserPage
	} from '@/api/myTicket/index.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import {
		getRuleNo
	} from '@/utils/utils.js'
	// import dictMxins from '@/mixins/dictMixins'
	export default {
		components: {
			baTreePicker
		},
		// mixins: [dictMxins],
		data() {
			return {
				listData: [],
				statusInfo: {
					2: '盘盈',
					3: '丢失',
					4: '破损'
				},
				countInfo: {
					2: 'surplusQuantity',
					3: 'loseQuantity',
					4: 'wornQuantity'
				},
				colorInfo: {
					2: 'red',
					3: 'green',
					4: 'black'
				},
				statusOption: [{
						label: '盘盈',
						value: '2',
						numKey: 'surplusQuantity'
					},
					{
						label: '丢失',
						value: '3',
						numKey: 'loseQuantity'
					},
					{
						label: '破损',
						value: '4',
						numKey: 'wornQuantity'
					}
				],
				pickerIndex: 0,
				deptList: [],
				userList: [],
				formData: {
					code: '',
					name: '',
					executeGroupName: '',
					executeGroupId: '',
					executorName: '',
					executorId: '',
					workOrderCode: '',
					list: []
				},
				isMaterial: true,
				rules: {
					// name: {
					//   type: 'string',
					//   required: true,
					//   message: '请输入名称',
					//   trigger: ['blur']
					// }
				}
			}
		},
		onLoad({
			id
		}) {
			// this.requestDict('物品类型')
			if (id) {
				this.getDetail(id)
			} else {
				const userInfo = uni.getStorageSync('userInfo')
				console.log(userInfo)
			}
			this.getDept()
			this.getOrderCode()
			uni.$off('getWorkorder')
			uni.$on('getWorkorder', data => {
				console.log(data)
				if (data?.id) {
					this.formData.workOrderCode = data.code
					this.formData.list = data.planDetailVOList
					this.formData.tableList = [data]
				}
			})
		},
		methods: {
			userChange(value) {
				this.formData.executorId = value
				this.formData.executorName = this.userList.find(item => item.value == value).text
			},
			async getOrderCode() {
				const code = await getCode('plan_profit_loss')
				this.formData.code = code
			},
			workorderSelect() {
				uni.navigateTo({
					url: '/pages/warehouse/reportLoss/workorderSelected'
				})
			},
			async getDetail(id) {},
			async handleSubmit() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入名称！',
						icon: 'none'
					})
					return
				}
				if (!this.formData.executeGroupId) {
					uni.showToast({
						title: '请选择部门！',
						icon: 'none'
					})
					return
				}
				if (!this.formData.executorId) {
					uni.showToast({
						title: '请选择人员！',
						icon: 'none'
					})
					return
				}
				if (!this.formData.list?.length) {
					uni.showToast({
						title: '请选择工单！',
						icon: 'none'
					})
					return
				}
				let params = {
					...this.formData,
					info: this.formData.tableList,
					status: 1
				}
				uni.showLoading({
					title: '加载中'
				})
				saveReportsList(params)
					.then(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						uni.navigateTo({
							url: `/pages/warehouse/reportLoss/index`
						})
					})
					.catch(() => {
						uni.hideLoading()
					})
			},
			// 部门确认
			deptConfirm(data, name) {
				this.formData.executeGroupId = data[0]
				this.formData.executeGroupName = name
				this.formData.executorId = ''
				this.formData.executorName = ''
				this.getUser(data[0])
			},
			// 获取部门
			getDept() {
				listOrganizations(1).then(data => {
					this.listData = data
				})
			},
			// 获取人员
			getUser(deptCode) {
				uni.showLoading({
					title: '加载中'
				})
				getUserPage({
						pageNum: 1,
						size: -1,
						groupId: deptCode
					})
					.then(data => {
						this.userList = data.list.map(item => {
							item.text = item.name
							item.value = item.id
							return item
						})
					})
					.finally(() => {
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.mainBox {
		/deep/.baseForm {
			.u-form-item__body {
				padding: 4px !important;
			}

			.assetType_box {
				padding: 12rpx 18rpx;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 30rpx;
			}
		}

		padding-bottom: 90rpx;

		/deep/.required-form .u-form-item__body__left__content__label::before {
			content: '*';
			color: red;
		}

		.select_user {
			width: 100%;
			padding: 12rpx 20rpx;
			box-sizing: border-box;

			/deep/ .uni-select {
				height: 48rpx;
			}
		}

		.order-box {
			color: #7f7f7f;
			background-color: rgba(215, 215, 215, 0.729411764705882);
			line-height: 66rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 28rpx;
			margin: 0 20rpx;
		}

		.list-card {
			border-bottom: 20rpx solid #f2f2f2;
			position: relative;

			.status {
				padding: 16rpx 32rpx;
				font-weight: bold;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f2f2f2;
			}

			.del {
				position: absolute;
				color: $uni-color-order-error !important;
				bottom: 5rpx;
				right: 10rpx;
				font-size: 50rpx !important;
			}

			.row {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				// color: #7d7d7d;

				&.first {
					// color: #000;
					font-size: 28rpx;
					border-bottom: 1rpx solid #f2f2f2;

					.col {
						min-width: 0%;
					}
				}

				.col {
					min-width: 50%;
					line-height: 24px;
				}

				.label {
					margin-right: 10rpx;
					display: inline-block;
					width: 180rpx;
					text-align: right;
				}

				.main {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>