aiot-app/pages/salesServiceManagement/workOrder/components/accessory.vue

<template>
	<view class="">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" 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 readonly 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 readonly placeholder="请输入" 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 readonly placeholder="请输入" 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 readonly placeholder="请输入" style="flex:1" border="surround" v-model="form.recipientName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="使用时间" arrow-direction="down">
				<uni-datetime-picker type="datetime" 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--input style="flex:1" placeholder="请选择" border="surround" @click.native="selectDepartment"
						v-model="form.executeGroupName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="执行人" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<zxz-uni-data-select class="executor_user" :localdata="userList" v-model="form.executeUserId"
						@change="handleUserChange" :multiple="Usertype==2"></zxz-uni-data-select>
				</view>
			</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 :itemList="tableList" v-show="current == 1" />
		<view class="footerButton">
			<u-button type="default" text="返回" @click="back"></u-button>
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<ba-tree-picker ref="treePicker" :multiple="false" @select-change="confirm" title="选择部门" :localdata="listData"
			valueKey="id" textKey="name" childrenKey="children" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import accessoryList from './accessoryList.vue';
	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		listOrganizations,
		getUserPage
	} from '@/api/myTicket/index.js'
	import {
		getSalesWorkOrderById,
		saveOrUpdateSalesWorkOrder
	} from '@/api/salesServiceManagement/workOrder/index.js'
	export default {
		components: {
			accessoryList
		},
		computed: {

		},
		data() {
			return {
				current: 0,
				type: 'edit',
				form: {
					name: '',
					receivingDeptName: '',
					receivingDeptId: '',
					recipientName: '',
					recipientId: '',
					purpose: '',
					executeGroupId: '',
					executeGroupName: '',
					executeUserName: '',
					executeUserId: '',
					usageTime: ''
				},
				Usertype: '',
				list: ['基本信息', '配件信息'],
				listData: [], // 部门数据
				userList: [], // 执行人列表
				tableList: [], // 配件列表
			}
		},
		onLoad(params) {
			this.type = params.type;
			this.title = params.type == 'view' ? '工单详情' : '修改工单';
			this.getDetails(params.id);
		},
		onUnload() {},
		created() {},
		methods: {
			async getDetails(id) {
				let data = await getSalesWorkOrderById(id);
				this.tableList = data.costListVOS.filter((item) => {
					if (item.typeId == 2 && item.isApply != 1) {
						item.totalPrice = item.settlementPrice;
						item.categoryCode = item.code;
						item.categoryName = item.name;
						return item;
					}
				})
				this.form.receivingDeptName = data.executeGroupName;
				this.form.receivingDeptId = data.executeGroupId;
				this.form.recipientName = data.executeUserName;
				this.form.recipientId = data.executeUserId;
				this.form.name = data.name;
				this.form.id = data.id;
				console.log(this.tableList, 'data ---- 1 + 1')
				this.getDept();
			},
			getDept() {
				listOrganizations(1).then(data => {
					this.listData = data;
				})
			},
			confirm(data, name) {
				this.form.executeGroupName = name
				this.form.executeGroupId = data[0]
				this.form.executeUserName = ''
				this.form.executeUserId = ''
				this.getUser(data[0])
			},
			getUser(deptCode) {
				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
					})
				})
			},
			sectionChange(index) {
				this.current = index;
			},
			// 选择部门
			selectDepartment() {
				this.$refs.treePicker._show();
			},
			// 选择人
			handleUserChange(obj) {
				this.form.executeUserName = obj.name;
			},
			save(){
				if(!this.form.usageTime){
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择使用时间",
					})
					return;
				}
				if(!this.form.executeGroupName){
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择部门",
					})
					return;
				}
				if(!this.form.executeUserName){
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择执行人",
					})
					return;
				}
				console.log(this.form,'form --- ===')
			}
		}
	}
</script>

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

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

	/deep/ .time_select .uni-data-tree-input {
		width: 200rpx;
	}

	/deep/ .executor_user {
		background: #fff;
	}

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

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

		>view {
			flex: 1;

		}
	}
</style>