RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/myTask/comDispatch/addComDispatch/addComDispat...

<template>
	<view class="wrapper">
		<view class="form">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="工单类别" required name="WorkOrderCategory">
					<order-select :orderType="valiFormData.WorkOrderCategory" @post-select-data="postSelectData"
						:typeid="2000"></order-select>
				</uni-forms-item>
				<uni-forms-item label="申请部门" required name="ApplicationDept">
					<uni-data-picker placeholder="请选择申请部门" :localdata="deptDataTree"
						v-model="valiFormData.ApplicationDept" @nodeclick="deptNodeclick" @popupclosed="deptclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="申请人" required name="Applicant">
					<uni-data-select v-model="valiFormData.Applicant" :localdata="ApplicantData"
						@change="changeApplicant" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" required name="Phone">
					<uni-easyinput v-model="valiFormData.Phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="科室位置" required name="Location">
					<uni-easyinput v-model="valiFormData.Location" placeholder="请输入科室位置" />
				</uni-forms-item>
				<view style="margin: 15px 0;" v-show="valiFormData.WorkOrderCategory && flag[flaginfo]">
					<view style="margin-bottom: 15px;">
						<text class="point">*</text><text class="infoTittle">{{flagName[flaginfo]}}</text>
						<uni-icons type="plus" size="30" color="#007aff" @click="plusClck()"></uni-icons>
						<uni-icons type="minus" size="30" color="#007aff" @click="minusClck()"></uni-icons>
					</view>
					<view style="width: 100%;" v-for="(item, index) in dicList">
						<view class="dicSelect">
							<dictionaries-select :flag="flag[flaginfo]" :valInfo="index" :val="item.F_DicId + ','+ item.F_DicName"
								@post-select-dic="postSelectDic"></dictionaries-select>
						</view>
						<view class="dicNum">
							<uni-number-box v-model="item.F_Number" />
						</view>
					</view>
				</view>
				<uni-forms-item label="送达地点" required name="ToPlace">
					<uni-easyinput v-model="valiFormData.ToPlace" placeholder="请输入送达地点" />
				</uni-forms-item>
				<uni-forms-item label="工单内容" required name="Content">
					<uni-easyinput type="textarea" v-model="valiFormData.Content" placeholder="请输入工单内容" />
				</uni-forms-item>
				<uni-forms-item label="红处方数量" required name="redPrescriptionNum" v-show="flaginfo == '2004' ">
					<uni-number-box v-model="redPrescriptionNum" />
				</uni-forms-item>
				<uni-forms-item label="附件" name="">
					<view class="example-body">
						<!-- <uni-file-picker limit="5" file-mediatype="all" @select="select" @success="success" @delete="deleteFile"></uni-file-picker> -->
						<upload @post-string-data="getImgData" :fileUrlList="imgUrlList"></upload>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="btnClass">
				<button type="primary" :disabled="disabledButton" @click="submit('valiForm')">提交工单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import orderSelect from "@/pages/components/orderSelect/orderSelect"
	import {
		filterTreeDatas,
		filterSelectData
	} from '@/utils/dataTreating.js'
	import pageData from "@/pages/myTask/repairList/addRepair/pageData.js"
	import upload from '@/pages/components/upload/uploadFile.vue' //upload
	import dictionariesSelect from '@/pages/components/dictionariesSelect/dictionariesSelect.vue' //upload
	export default {
		components: {
			upload,
			orderSelect,
			dictionariesSelect
		},
		data() {
			return {
				isShowIsEnd: false,
				readonly: false,
				disabledButton: false,
				// 校验表单数据
				valiFormData: {
					WorkOrderCategory: '', //工单类别
					ApplicationDept: '', //申请部门
					Applicant: '', //申请人
					Phone: '', //联系电话
					Location: '', // 科室位置
					ToPlace: '', // 送达地点
					Content: '', // 工单内容
					DealDept: '', //	维修部门
					DealMan: '', //	维修人
					File: '', //	文件
				},
				redPrescriptionNum: 0, // 红处方数量
				workorderid: '',
				stepData: pageData.stepData,
				departid: '',
				departMain: '',
				imgUrlList: [], // 附件数据
				imgIdList: [], //上传附件id
				clickImgState: 0, // 图片回显的状态
				deptDataTree: [], // 科室-部门数据
				ApplicantData: [], // 获取人员数据
				assignedDepartData: [], //指派部门数据
				MaintenancerData: [], //指派人数据
				orderApplicantData: [], // 用户人员信息
				// 标本信息（BBXX），设备信息（SBXX），物资信息（WZXX），病床信息（BCXX），药品信息（YPXX）
				flagid: ["2001","2002","2003","2006","2005"],
				flaginfo: '',
				flag: {
					"2006": 'BBXX', 
					"2001": 'SBXX', 
					"2002": 'WZXX',
					"2003": 'BCXX', 
					"2005": 'YPXX'
				},
				flagName: {
					"2001": '设备信息',
					"2002": '物资信息',
					"2003": '病床信息',
					"2006": '标本信息',
					"2005": '药品信息'
				},
				dicList: [{
					F_DicId: 0,
					F_DicName: '',
					F_Number: 1
				}],
				// 校验规则
				rules: {
					WorkOrderCategory: {
						rules: [{
							required: true,
							errorMessage: '请选择工单类别'
						}]
					},
					ApplicationDept: {
						rules: [{
							required: true,
							errorMessage: '请选择申请科室'
						}]
					},
					Applicant: {
						rules: [{
							required: true,
							errorMessage: '请选择申请人'
						}]
					},
					Phone: {
						rules: [{
							required: true,
							errorMessage: '清输入联系电话'
						}]
					}
				},
			}
		},
		onLoad(option) {
			// 部门数据
			pageData.getDet((res, data) => {
				this.deptDataTree = res
				this.assignedDepartData = res
			})
			this.workorderid = option.wid
			if(this.workorderid) {
				this.getDetail()
			}
		},
		methods: {
			// 工单类别
			postSelectData(e,id) {
				this.flaginfo = String(id)
				this.valiFormData.WorkOrderCategory = e
				if(this.flagid.indexOf(this.flaginfo) > -1) {
					this.dicList = [{
						F_DicId: 0,
						F_DicName: '',
						F_Number: 1
					}]
				}else{
					this.dicList = []
				}
				
			},
			// 综合调度信息
			postSelectDic(e, index) {
				this.dicList[index].F_DicId = e.split(',')[0]
				this.dicList[index].F_DicName = e.split(',')[1]
			},
			plusClck() {
				const params = {
					F_DicId: 0,
					F_DicName: '',
					F_Number: 1
				}
				this.dicList.push(params)

			},
			minusClck() {
				this.dicList.splice(this.dicList.length - 1, 1)
			},
			// 申请部门
			deptNodeclick(e) {
				if (e) {
					this.departid = e.value
					pageData.getApplicant(e.value, (res, data) => {
						this.ApplicantData = res
						this.orderApplicantData = data
					})
					this.valiFormData.Phone = ''
				}
			},
			deptclosed() {
				this.valiFormData.ApplicationDept = this.departid
			},
			//申请人人
			changeApplicant(e) {
				this.valiFormData.Applicant = e
				const user = this.orderApplicantData.find((o) => {
					return o.usercode === e.toString()
				})
				if (user) {
					this.valiFormData.Phone = user.usertelphone
				}
			},
			// 指派部门
			maintenanceNodeclick(e) {
				if(e) {
					this.departMain = e.value
					pageData.getApplicant(e.value, (res) => {
						this.MaintenancerData = res
					})
				}
			},
			maintenanceclosed() {
				this.valiFormData.DealDept = this.departMain
			},

			//指派人
			changeMaintenancer(e) {
				this.valiFormData.DealMan = e
			},
			// 工单提交
			submit(ref) {
				this.disabledButton = true
				if (this.clickImgState == 1) {
					this.valiFormData.File = this.$mHelper.getImgString(this.imgIdList)
				}
				this.$refs[ref].validate().then(res => {
					if(this.workorderid) {
						this.valiFormData.WorkOrderCode = this.workorderid
						const params = {
							usertype: 1,
							input: this.valiFormData,
							detailists: this.dicList
						}
						this.$mHelper.httpPost("Scheduling/UpdateSchedulingWorkOrder",  this.serialize(params), 1, res => this.disabledButton = res)
					}else{
						const params = {
							cfnum: this.redPrescriptionNum, // 红处方数量
							input: this.valiFormData,
							detailists: this.dicList
						}
						this.$mHelper.httpPost("Scheduling/AddSchedulingWorkOrder",  this.serialize(params), 1, res => this.disabledButton = res)
					}
				}).catch(err => {
					this.disabledButton = false
					console.log('err', err);
				})
			},
			serialize(obj, prefix) {
				const str = []
				let p
				if (obj.length === 0) {
					//  str.push(encodeURIComponent(prefix) + '=1')  
				} else {
					for (p in obj) {
						if (obj.hasOwnProperty(p)) {
							const k = prefix ? prefix + '[' + p + ']' : p
							let v = obj[p]
							if (v instanceof Date) {
								v = parseTime(v)
							}
							str.push((v !== null && typeof v === 'object') ? this.serialize(v, k) : encodeURIComponent(k) +'=' + encodeURIComponent(v))
						}
					}
				}
				return str.join('&')
			},
			getDetail() {
				const params = {
					WorkOrderCode: this.workorderid,
					type: 0
				}
				this.$http.get("Scheduling/GetWorkOrder", params).then((response) => {
					if (response.state.toLowerCase() === "success") {
						this.valiFormData.WorkOrderCategory =  response.data[0].F_WorkOrderCategory // 工单类别
						this.valiFormData.Content =  response.data[0].F_Content // 工单内容
						if(response.data[0].F_ApplicationDept) {
							this.valiFormData.ApplicationDept =  response.data[0].F_ApplicationDept.trim() // 申请部门
							pageData.getApplicant(this.valiFormData.ApplicationDept, (res) => {
								this.ApplicantData = res
							})
							this.valiFormData.Applicant =  response.data[0].F_Applicant //申请人
						}
						this.valiFormData.Phone =  response.data[0].F_Phone // 联系电话
						this.valiFormData.Location =  response.data[0].F_Location 
						this.valiFormData.ToPlace =  response.data[0].F_ToPlace 
						this.valiFormData.File =  response.data[0].F_File 
						const ps = []
						response.data[0].PSInfo.forEach(v => {
							ps.push({
								F_DicId: v.F_DicId,
								F_DicName: v.F_DicName,
								F_Number: v.F_Number
							})
						})
						this.dicList =  ps
						if (response.data[0].FileUrl) {
							response.data[0].FileUrl.forEach((v, n) => {
								//详情图片回显
								this.imgUrlList.push({
									url: v.F_FileUrl,
									extname: v.F_FileType,
									name: v.F_FileName.substring(19),
									id:v.F_FileId
								})
							})
						}
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			// 上传图片
			getImgData(data) {
				console.log(data)
				this.clickImgState = 1
				this.imgIdList = data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 10px 15px;
		background-color: #fff;

		.form {

			.infoTittle {
				align-items: center;
				text-align: left;
				font-size: 14px;
				color: #606266;
				height: 36px;
				padding: 0 12px 0 0;
				vertical-align: middle;
				flex-shrink: 0;
				// box-sizing: border-box;
				margin-right: 10px;
			}

			.dicSelect {
				width: 65%;
				display: inline-block;
				margin-right: 10px;
				margin-bottom: 15px;
			}

			.dicNum {
				width: 30%;
				display: inline-block;
			}

			/deep/.uni-icons[data-v-a2e81f6e] {
				vertical-align: middle;
			}

			.point {
				color: #f00;
				vertical-align: middle;
				margin-right: 2px;
			}
		}

	}
</style>