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

<template>
	<page-meta :root-font-size="getFontSizeValue"></page-meta>
	<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" :readonly="readonly"></order-select>
				</uni-forms-item>
				<uni-forms-item label="申请部门" required name="ApplicationDept">
					<uni-data-picker placeholder="请选择申请部门" :localdata="deptDataTree"
						v-model="valiFormData.ApplicationDept" @nodeclick="deptNodeclick" :showSearch= "showSearch">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="申请人" required name="ApplicantName">
					<uni-combox :candidates="candidates" placeholder="输入搜索内容"  @input="handleInput" v-model="valiFormData.ApplicantName"></uni-combox>
				</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="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%;height: 50px;" 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">
					<dictionaries-select flag="SDKS" @post-select-dic="postSelectDicPlace" v-if="identification === '2006' || identification === 'JC' || identification === 'FJ'"></dictionaries-select>
					<uni-easyinput v-model="valiFormData.ToPlace" placeholder="请输入送达地点" v-else/>
				</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="EmergencyTypes">
					<uni-data-checkbox v-model="valiFormData.EmergencyTypes" :localdata="EmergencyTypesList" />
				</uni-forms-item>
				<uni-forms-item label="附件" name="">
					<view class="example-body">
						<!-- <upload @post-string-data="getImgData" :imgUrlList="imgUrlList"></upload> -->
						<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
						<view class="padding" style="margin-top: 10px;">
							<button class="mini-btn" type="primary" size="mini" @tap="onUpload">上传</button>
						</view>
						<view class="padding">
							<uni-file-picker limit="5" file-mediatype="all" :value="fileLists" @delete="deleteFile"></uni-file-picker>
						</view>
					</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 indexConfig from '@/config/index.config';
	import {
		filterTreeDatas,
		filterSelectData
	} from '@/utils/dataTreating.js'
	import pageData from "@/pages/myTask/repairList/addRepair/pageData.js"
	import upload from '@/pages/components/upload/upload.vue' //upload
	import uploadFile from '@/pages/components/upload/uploadFile.vue' //upload
	import newfile from '@/pages/components/upload-imagesAndvideo/index.vue' //upload
	import dictionariesSelect from '@/pages/components/dictionariesSelect/dictionariesSelect.vue' //upload
	export default {
		components: {
			upload,
			uploadFile,
			newfile,
			orderSelect,
			dictionariesSelect
		},
		data() {
			return {
				identification: '', // 工单标识
				getFontSizeValue:'1rem',
				showSearch: true,
				logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F07%2F155788a6d8a5c42.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619847627&t=2da40b583002205c204d980b54b35040',
				isShowIsEnd: false,
				readonly: false,
				disabledButton: false,
				// 校验表单数据
				valiFormData: {
					WorkOrderCategory: '', //工单类别
					ApplicationDept: '', //申请部门
					Applicant: '', //申请人
					ApplicantName: '',
					Phone: '', //联系电话
					Location: '', // 科室位置
					ToPlace: '', // 送达地点
					Content: '', // 工单内容
					DealDept: '', //	维修部门
					DealMan: '', //	维修人
					File: '', //	文件
					opt: 2,
					EmergencyTypes: '一般',
				},
				EmergencyTypesList: [{
					text: '一般',
					value: '一般'
				},{
					text: '紧急',
					value: '紧急'
				}],
				redPrescriptionNum: 0, // 红处方数量
				workorderid: '',
				stepData: pageData.stepData,
				departMain: '',
				imgUrlList: [], // 附件数据
				imgIdList: [], //上传附件id
				clickImgState: 0, // 图片回显的状态
				departList: [],
				deptDataTree: [], // 科室-部门数据
				ApplicantData: [], // 获取人员数据
				assignedDepartData: [], //指派部门数据
				MaintenancerData: [], //指派人数据
				orderApplicantData: [], // 用户人员信息
				userListSelect: [],
				typeid: 0,
				candidates: [],
				// 标本信息（BBXX），设备信息（SBXX），物资信息（WZXX），病床信息（BCXX），药品信息（YPXX）
				flagid: ["2001","2002","2003","2006","2005"],
				flaginfo: '',
				fileLists: [],
				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: '请选择申请科室'
						}]
					},
					ApplicantName: {
						rules: [{
							required: true,
							errorMessage: '请选择申请人'
						}]
					},
					Phone: {
						rules: [{
							required: true,
							errorMessage: '清输入联系电话'
						}]
					},
					Content: {
						rules: [{
							required: true,
							errorMessage: '清输入工单内容'
						}]
					}
				},
			}
		},
		onLoad(option) {
			this.getFontSizeValue = uni.getStorageSync('fontSizeValue')+'rem'
			this.workorderid = option.wid
			// 添加工单，申请人默认当前登录人
			if(uni.getStorageSync("deptId")){
				this.valiFormData.ApplicationDept = uni.getStorageSync("deptId")
				pageData.getApplicant(uni.getStorageSync("deptId"), (res, data, candidates) => {
					this.candidates = candidates
					this.ApplicantData = res
					this.orderApplicantData = data
					if(uni.getStorageSync("userCode")) {
						this.valiFormData.Applicant = uni.getStorageSync("userCode")
						this.valiFormData.ApplicantName = this.$mHelper.findUserName(this.ApplicantData, uni.getStorageSync("userCode"))
						const user = this.orderApplicantData.find((o) => {
							return o.usercode === this.valiFormData.Applicant.toString()
						})
						if (user) {
							this.valiFormData.Phone = user.usertelphone
						}
						this.getLocation(this.valiFormData.Applicant)
					}
				})
			}
			// 部门数据
			pageData.getDet((res, data) => {
				console.log(res)
				this.departList = data
				this.deptDataTree = res
				this.assignedDepartData = res
			})
			if(this.workorderid) {
				this.readonly = true
				this.getDetail()
			}
			window.scrollTo(0,0)
		},
		watch: {
			'departList': function() {
				this.valiFormData.ApplicationDept = this.$mHelper.findParents(this.departList,this.valiFormData.ApplicationDept).split('/').length + '_'+ this.valiFormData.ApplicationDept
				console.log(1)
			}
		},
		methods: {
			// 获取科室位置
			postSelectDicPlace(res) {
				this.valiFormData.ToPlace = res.split(',')[1]
			},
			// 删除附件
			deleteFile(res) {
				const num = this.fileLists.findIndex(v => v.url === res.tempFile.path);
				this.fileLists.splice(num, 1)
			},
			/* 附件上传 */
			onUpload() { 
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: indexConfig.baseUrl + "/FaultRepair/UploadFile",
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						Authorization: uni.getStorageSync('Admin-Token')
					},
				})
			},
			// 附件上传
			onSuccess(res) {
				res.data.data.forEach(v => {
					this.fileLists.push({
						url: indexConfig.baseUrl + v.F_FileUrl,
						extname: v.F_FileType,
						name: v.F_FileName.substring(19),
						id: v.F_FileId
					})
				})
			},
			postImgData(res) {
			},
			// 工单类别
			postSelectData(e,id,type,ident) {
				this.identification = ident
				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 = 0
				}
			},
			// 综合调度信息
			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)
			},
			clearTagAdmin(value){
				this.userListSelect = this.userListSelect.filter(item => item != value); 
			},
			// 申请部门
			deptNodeclick(e) {
				if (e) {
					// this.valiFormData.ApplicationDept = e.value
					pageData.getApplicant(e.value.split('_')[1], (res, data, candidates) => {
						this.candidates = candidates
						console.log(this.candidates)
						this.ApplicantData = res
						this.orderApplicantData = data
					})
					this.candidates = []
					this.valiFormData.Applicant = ''
					this.valiFormData.ApplicantName = ''
					this.valiFormData.Phone = ''
					this.valiFormData.Location = ''
					this.valiFormData.ToPlace = ''
				}
			},
			handleInput(res) {
				let e = this.$mHelper.getValueByText(res,this.ApplicantData)
				this.valiFormData.Applicant = e
				this.valiFormData.ApplicantName = res
				const user = this.orderApplicantData.find((o) => {
					return o.usercode === e.toString()
				})
				if (user) {
					this.valiFormData.Phone = user.usertelphone
				}
				this.getLocation(this.valiFormData.Applicant)
			},
			// 地址
			getLocation(user) {
				this.$http.get("UserAccount/GetModel", {usercode: user}).then((response) => {
					if (response.state.toLowerCase() === "success") {
						this.valiFormData.Location = response.data.F_Location
						this.valiFormData.ToPlace = response.data.F_Location
					}
				})
			},
			// 指派部门
			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.imgIdList = []
				this.disabledButton = true
				this.fileLists.forEach(v =>{
					this.imgIdList.push(v.id)
				})
				this.$refs[ref].validate().then(res => {
					const params = {
						WorkOrderCategory: this.valiFormData.WorkOrderCategory, //工单类别
						ApplicationDept: this.valiFormData.ApplicationDept.split('_')[1], //申请部门
						Applicant: this.valiFormData.Applicant, //申请人
						Phone: this.valiFormData.Phone, //联系电话
						Location: this.valiFormData.Location, // 科室位置
						ToPlace: this.valiFormData.ToPlace, // 送达地点
						Content: this.valiFormData.Content, // 工单内容
						DealDept: this.valiFormData.DealDept, //	维修部门
						DealMan: this.valiFormData.DealMan, //	维修人
						File: this.$mHelper.getImgString(this.imgIdList), //	文件
						detailists: this.dicList,
						opt: this.valiFormData.opt,
						EmergencyTypes: this.valiFormData.EmergencyTypes,
						cfnum: this.redPrescriptionNum
					}
					if(this.workorderid) {
						params.WorkOrderCode = this.workorderid
						params.usertype = 1
						this.$mHelper.httpPost("Scheduling/UpdateSchedulingWorkOrder",  this.serialize(params), 1, res => this.disabledButton = res)
					}else{
						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.ApplicantName = this.$mHelper.findUserName(this.ApplicantData, response.data[0].F_Applicant)
							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 
						this.valiFormData.EmergencyTypes = response.data[0].F_EmergencyTypes
						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.fileLists.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) {
				this.clickImgState = 1
				this.imgIdList = data
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/addFormDeep.scss';
	
	.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>