aiot-app/pages/salesServiceManagement/recycle/recycleAdd.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back"
			:title="title" @clickLeft="back">
		</uni-nav-bar>
		<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		<u-cell-group v-show="current == 0">
			<u-cell title="编码" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.code">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="回收部门" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.recycleDeptName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="回收人" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.recycleName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="工单名称" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input placeholder="请选择" :disabled="!isDisable" @click.native="selectWorkOrder" style="flex:1"
						border="surround" v-model="form.orderWorkName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="工单编码" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.orderWorkCode">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="客户名称" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.contactName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="客户编码" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.contactCode">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="设备名称" arrow-direction="down">
				<uni-data-picker ellipsis :readonly="!isDisable" v-model="form.demandDetailId" slot="value"
					placeholder="请选择" :localdata="deviceList" @change="sourceCodeOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="设备编码" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 90%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.categoryCode">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="回收时间" arrow-direction="down">
				<uni-datetime-picker :disabled="!isDisable" type="date" slot="value" v-model="form.usageTime">
				</uni-datetime-picker>
			</u-cell>
			<u-cell title="原因" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--textarea style="flex:1; min-height: 160rpx;" border="surround" placeholder="请输入内容"
						v-model="form.reason"></u--textarea>
				</view>
			</u-cell>
		</u-cell-group>
		<accessoryList :itemList="itemList" ref="accessoryRef" :type="type" v-show="current == 1" />
		<view class="footerButton" v-if="isDisable">
			<u-button type="default" text="返回" @click="back"></u-button>
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import accessoryList from '@/pages/salesServiceManagement/workOrder/components/accessoryList.vue';
	import {
		recycleDetails,
		recycleSave,
		recycleUpdate,
		getSalesWorkOrderById
	} from '@/api/salesServiceManagement/workOrder/index.js'
	export default {
		components: {
			accessoryList
		},
		computed: {
			isDisable() {
				let flag = this.type != 'view'
				return flag;
			}
		},
		data() {
			return {
				current: 0,
				list: ['基本信息', '配件信息'],
				title: '',
				type: '',
				form: {
					repairId: '', // 工单Id
					orderWorkName: '', // 工单名称
					recycleName: '', // 回收人名称
					recycleId: '', // 回收人id
					receivingDeptId: '', // 回收人部门Id
					recycleDeptName: '', // 回收人部门名称
					usageTime: '', // 使用时间
					reason: '' ,// 原因
					demandDetailId:'', // 设备id
					categoryCode:'' ,// 设备编码
					categoryName:'', // 设备名称
				},
				selectedData: [], // 使用部门绑定值
				classificationList: [], // 使用部门数据
				itemList: [], // 配件信息
				deviceList: [], // 设备信息
			}
		},
		onLoad(params) {
			this.title = params.type == 'view' ? '配件回收详情' : params.type == 'edit' ? '配件回收修改' : '配件回收新增';
			this.type = params.type;
			if (params.id) {
				this.getDetails(params.id);
			} else {
				this.getData();
			}
		},
		created() {
			uni.$off('updateWorkData')
			uni.$on('updateWorkData', ({
				data
			}) => {
				this.changeSelect(data, '')
			})
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			async getDetails(id) {
				const res = await recycleDetails(id);
				for (let key in this.form) {
					this.form[key] = res[key];
				}
				this.form.id = res.id;
				this.form.code = res.code;
				this.itemList = res.detailList;
				this.changeSelect({
						id: res.repairId,
						name: res.orderWorkName,
						code: res.orderWorkCode
					},
					1
				);
			},
			getData() {
				let userInfo = uni.getStorageSync('userInfo');
				this.form.recycleDeptName = userInfo.groupName;
				this.form.recycleDeptId = userInfo.groupId;
				this.form.recycleName = userInfo.name;
				this.form.recycleId = userInfo.roleId[0];
			},
			sourceCodeOnchange(e) {
				const value = e.detail.value;
				if (value.length === 0) {
					return this.deviceSelect({
						text: '',
						categoryCode: '',
						value: ''
					});
				}
				let id = value[0].value;
				let item = this.deviceList.find(item => item.value == id);
				this.deviceSelect(item);
			},
			// 设备名称选择
			deviceSelect(item) {
				this.form.categoryName = item.text;
				this.form.categoryCode = item.categoryCode;
				this.form.demandDetailId = item.value;
			},
			// 确认选择工单
			async changeSelect(row, type) {
				this.$set(this.form, 'orderWorkName', row.name);
				this.$set(this.form, 'orderWorkCode', row.code);
				this.form.repairId = row.id; // 工单id
				const res = await getSalesWorkOrderById(row.id);
				this.$set(this.form, 'contactName', res.afterSalesDemandVO.contactName);
				this.$set(this.form, 'contactCode', res.afterSalesDemandVO.contactCode);
				let list = res.afterSalesDemandVO.productDetail.map((el) => {
					return {
						text: el.categoryName,
						categoryCode: el.categoryCode,
						value: el.id,

					};
				});
				this.deviceList = list;
				//  type 判断是不是修改/详情进来 是的话不需要初始赋值
				if (!type) {
					this.$set(this.form, 'categoryName', list[0].text);
					this.$set(this.form, 'categoryCode', list[0].categoryCode);
					this.$set(this.form, 'demandDetailId', list[0].value);
				}
			},
			// 使用人选择
			onClose(item) {
				this.form.userName = item.text;
			},
			save() {
				if (!this.form.orderWorkName) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择工单",
					})
				};
				if (!this.form.demandDetailId) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择设备",
					})
				};
				console.log(this.form, 'this.form 123456')
				let detailList = this.$refs.accessoryRef.getTabData() || [];
				if (detailList.length == 0) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请添加一条配件信息",
					})
					this.current = 1;
					return
				}
				let data = {
					...this.form,
					detailList
				};
				if (data.usageTime) {
					data.usageTime = data.usageTime + ' 00:00:00'
				}
				let api = this.type == 'edit' ? recycleUpdate : recycleSave;
				api(data).then((res) => {
					this.$refs.uToast.show({
						type: "success",
						message: "操作成功",
					})
					this.back();
				}).catch((err) => {})
			},
			selectWorkOrder() {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/accessory/components/selectWork`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	/deep/.u-cell__body__content {
		flex: none;
		margin-right: 16rpx;
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}

	/deep/ .u-textarea__field {
		height: 160rpx !important;
	}

	.selected-value {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	// .mainBox {
	/deep/.uni-data-tree {
		width: calc(100% - 150rpx);

		.selected-list {
			white-space: nowrap;
			/* 禁止文本换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}
	}

	// }
</style>