aiot-app/pages/salesServiceManagement/accessory/accessoryAdd.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="!isDisable" @click.native="selectWorkOrder" style="flex:1" border="surround"
						v-model="form.name">
					</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.receivingDeptName">
					</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.recipientName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="使用部门" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input @click.native="classification" :disabled="!isDisable" style="flex:1" border="surround"
						placeholder="请选择使用部门" v-model="form.useDeptName">
					</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="!isDisable" style="flex:1" border="surround" v-model="form.userName"
						placeholder="请选择使用人" @click.native="openSelector">
					</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" border="surround" placeholder="请输入内容"
						v-model="form.purpose"></u--textarea>
				</view>
			</u-cell>
		</u-cell-group>
		<accessoryList ref="accessoryRef" 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>
		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择部门"
			:selectedData="selectedData" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" />
		<search-select ref="selector" v-model="form.userId" :data-list="executorList" title="选择使用人"
			@change="onClose"></search-select>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import accessoryList from '@/pages/salesServiceManagement/workOrder/components/accessoryList.vue';
	import searchSelect from '../accessory/components/searchSelect.vue';
	import {
		listOrganizations
	} from '@/api/salesServiceManagement/workOrder/index.js';
	import {
		getUserPage
	} from '@/api/common.js';
	import {
		toTreeData
	} from '@/utils/utils.js';
	import {
		accessorySave,
		accessoryUpdate
	} from '@/api/salesServiceManagement/accessory/index.js'
	export default {
		components: {
			searchSelect,
			accessoryList
		},
		computed: {
			isDisable() {
				let flag = this.type != 'view'
				return flag;
			}
		},
		data() {
			return {
				current: 0,
				list: ['基本信息', '配件信息'],
				title: '',
				type: '',
				form: {
					repairId: '', // 工单Id
					name: '', // 工单名称
					recipientName: '', // 领用人名称
					recipientId: '', // 领用人id
					receivingDeptId: '', // 领用人部门Id
					receivingDeptName: '', // 领用人部门名称
					useDeptId: '', // 使用部门Id
					useDeptName: '', // 使用部门名称
					userId: '', // 使用人Id
					userName: '', // 使用人名称
					usageTime: '', // 使用时间
					purpose: '' // 用途
				},
				selectedData: [], // 使用部门绑定值
				classificationList: [], // 使用部门数据
				executorList: [], // 选择人数据
			}
		},
		onLoad(params) {
			this.title = params.type == 'view' ? '配件申请详情' : params.type == 'edit' ? '配件申请修改' : '配件申请新增';
			this.type = params.type;
			this.getData();
		},
		created() {
			uni.$off('updateWorkData')
			uni.$on('updateWorkData', ({
				data
			}) => {
				this.form.name = data.name;
				this.form.repairId = data.id;
			})
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			getData() {
				let userInfo = uni.getStorageSync('userInfo');
				this.form.receivingDeptName = userInfo.groupName;
				this.form.receivingDeptId = userInfo.groupId;
				this.form.recipientName = userInfo.name;
				this.form.recipientId = userInfo.roleId[0];
				this.getTreeList();
			},
			// 获取使用部门数据
			async getTreeList() {
				const data = await listOrganizations({});
				let treeList = toTreeData({
					data: data || [],
					idField: 'id',
					parentIdField: 'parentId'
				});
				this.classificationList = treeList;
			},
			// 打开部门弹窗
			classification() {
				this.$refs.treePicker._show();
			},
			// 使用部门选择
			confirm(id, name) {
				this.form.useDeptName = name;
				this.form.useDeptId = id[0];
				this.getUserList(id[0])
			},
			// 打开使用人弹窗
			openSelector() {
				this.$refs.selector.open();
			},
			// 获取使用人数据
			async getUserList(id) {
				let params = {
					pageNum: 1,
					size: -1,
					groupId: id
				}
				try {
					const res = await getUserPage(params);
					let list = res.list && res.list.map((el) => {
						return {
							text: el.name,
							value: el.id
						}
					})
					this.executorList = list;
				} catch (error) {

				}
			},
			// 使用人选择
			onClose(item) {
				this.form.userName = item.text;
				console.log(item, 'item')
				console.log(this.form, 'form')
			},
			save() {
				uni.redirectTo({
					url: '/pages/salesServiceManagement/accessory/index'
				});
				return
				if (!this.form.name) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择工单",
					})
				};
				if (!this.form.useDeptName) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择使用部门",
					})
				};
				if (!this.form.userName) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择使用人",
					})
				};
				let details = this.$refs.accessoryRef.getTabData() || [];
				if (details.length == 0) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请添加一条配件信息",
					})
					this.current = 1;
					return
				}
				let data = {
					...this.form,
					details
				};
				if (data.usageTime) {
					data.usageTime = data.usageTime + ' 00:00:00'
				}
				let api = this.type == 'edit' ? accessoryUpdate : accessorySave;
				api(data).then((res) => {
					this.$refs.uToast.show({
						type: "success",
						message: "操作成功",
					})
				}).catch((err) => {
					console.log(err, 'err --')
				})
			},
			selectWorkOrder() {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/accessory/components/selectWork`
				})
				console.log('打开工单数据');
			}
		}
	}
</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;

		}
	}

	.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;
	}
</style>