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

<template>
	<view class="">
		<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-if="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 placeholder="请输入" :readonly="!isDisable" style="flex:1" border="surround"
						v-model="form.name">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="自动派单" arrow-direction="down">
				<uni-data-picker :readonly="!isDisable" v-model="form.isSyncBill" slot="value" placeholder="请选择"
					:localdata="isSyncBillist" @change="dispatchOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="预计售后时长" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input :readonly="!isDisable" style="flex:1" border="surround" v-model="form.duration">
						<template #suffix>
							<uni-data-picker class="time_select" :readonly="!isDisable" v-model="form.durationUnit"
								slot="value" placeholder="请选择" :localdata="durationList" @change="durationOnchange">
							</uni-data-picker>
						</template>
					</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" 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">
					<uni-data-picker :readonly="!isDisable" v-model="form.urgent" slot="value" placeholder="请选择"
						:localdata="urgentList" @change="urgentOnchange">
					</uni-data-picker>
			</u-cell>
			<u-cell title="备注" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--textarea> :readonly="!isDisable" style="flex:1" border="surround" v-model="form.remark">
					</u--textarea>
				</view>
			</u-cell>
		</u-cell-group>
		<SchemeList v-if="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" :multiple="false" @select-change="confirm" title="选择部门" :localdata="listData"
			valueKey="id" textKey="name" childrenKey="children" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
 
<script>
	import SchemeList from './schemeList.vue'
	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		listOrganizations,
		getUserPage
	} from '@/api/myTicket/index.js'
	export default {
		components: {
			SchemeList
		},
		computed: {
			isDisable() {
				let flag = this.type != 'view'
				return flag;
			}
		},
		data() {
			return {
				current: 0,
				title: '修改计划',
				type: 'edit',
				form: {
					name: '',
					remark: '',
					duration: '',
					durationUnit: '',
					executeGroupId: '',
					executeGroupName: '',
					executeUserName: '',
					executeUserId: ''
				},
				Usertype: '',
				list: ['基本信息', '方案', '联系人'],
				isSyncBillist: [{
						value: '1',
						text: '是'
					},
					{
						value: '1',
						text: '否'
					}
				],
				durationList: [{
						value: '1',
						text: '分钟'
					},
					{
						value: '2',
						text: '小时'
					},
					{
						value: '3',
						text: '天'
					},
				],
				urgentList: [],
				listData: [], // 部门数据
				userList: [], // 执行人列表
			}
		},
		onLoad(params) {
			console.log(params, 'params')
			this.type = params.type;
			this.title = params.type == 'view' ? '工单详情' : '修改工单';
			this.getDetails(params.id);
		},
		onUnload() {},
		created() {},
		methods: {
			async getDetails(id) {
				this.getByData();
				this.getDept();
			},
			async getByData() {
				const codeValue = await getByCode('urgent_type');
				console.log(codeValue, 'codeValue');
				let list = codeValue.map(item => {
					const key = Object.keys(item)[0]
					return {
						value: key,
						text: item[key]
					}
				})
				this.urgentList = list;
			},
			getDept() {
				listOrganizations(1).then(data => {
					console.log(data, '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() {
				console.log('选择部门');
				this.$refs.treePicker._show();
			},
			// 选择人
			handleUserChange(obj) {
				this.form.executeUserName = obj.name;
				console.log(obj, 'obj')
			},
			dispatchOnchange() {

			},
			durationOnchange(){
				
			}
		}
	}
</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>