JCSS / yl_miniapp

<template>
	<view class="fs-p30">
		<tui-form ref="form" :showMessage="false">
			<view class="fs-radius__sm">
				<tui-input label="养护编码" v-model="formData.maintainNo" disabled></tui-input>
				<tui-input label="养护类型" v-model="formData.maintainTypeName" disabled></tui-input>
				<tui-input label="植物类型" placeholder="请选择" v-model="formData.plantTypeName" @click="selectOpen(1)"></tui-input>
				<!--
				<tui-input label="规 格" placeholder="胸径/地径/株高/冠幅" v-model="formData.specifications"></tui-input>
				<tui-input label="绿地面积" placeholder="请输入" type="digit" v-model="formData.maintainNum">
					<template #right><view class="fs-size__h4">m²</view></template>
				</tui-input>
				<tui-input label="水源类型" placeholder="请选择" disabled v-model="formData.wateringTypeName" @click="pickerOpen('watering_type')"></tui-input>
				<tui-input label="浇水方式" placeholder="请选择" disabled v-model="formData.wateringModeName" @click="pickerOpen('watering_mode')"></tui-input>
				<tui-input label="浇水量" placeholder="请输入" type="digit" v-model="formData.maintainAmount">
					<template #right><view class="fs-size__h4">吨</view></template>
				</tui-input>
				<tui-input label="操作时长" placeholder="请输入" type="digit" v-model="formData.operationDuration">
					<template #right><view class="fs-size__h4">天</view></template>
				</tui-input>
				-->
				<tui-input placeholder="请选择" label="共同处理人" v-model="formData.togetherPerson" disabled @click="selectOpen(2)"></tui-input>
				<!--
				<tui-list-cell :hover="false" unlined padding="26rpx 30rpx">
					<view class="fs-align__right"><tui-tag type="primary" padding="8rpx 12rpx" size="26rpx" @click="material">添加耗材</tui-tag></view>
				</tui-list-cell>
				<tui-table>
					<tui-tr><tui-td :span="12" alignItems="center" :size="28">耗材明细</tui-td><tui-td :span="6" alignItems="center" :size="28">数 量</tui-td><tui-td :span="6" alignItems="center" :size="28">操 作</tui-td></tui-tr>
					<tui-tr v-for="(item, index) in formData.detailList">
						<tui-td :span="12" :size="28">{{item.typeName}}/{{item.typeDetailName}}</tui-td><tui-td :span="6" alignItems="center" :size="28">{{item.userCount}}{{item.unitName}}</tui-td><tui-td :span="6" alignItems="center" :size="28"><tui-icon name="close" :size="14" @click="delMaterial(index)"></tui-icon></tui-td>
					</tui-tr>
				</tui-table>
				-->
			</view>
			<!--
			<tui-white-space></tui-white-space>
			<tui-textarea :radius="20" placeholder="请输入养护描述" isCounter :size="28" :maxlength="100" v-model="formData.remark"></tui-textarea>
			-->
			<tui-white-space></tui-white-space>
			<tui-tab :tabs="tabList" scroll bold :leftGap="30" @change="tabChange"></tui-tab>
			<tui-white-space></tui-white-space>
			<tui-upload v-show="currentIndex == 0" background="#fff" :value="formData.beginImgList" :width="210"
				:radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL"
				:header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'beginImgList')">
				<text class="fs-size__28 fs-color__subtitle fs-weight__400">处理开始照片</text>
			</tui-upload>
			<tui-upload v-show="currentIndex == 1" background="#fff" :value="formData.workingImgList" :width="210"
				:radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL"
				:header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'workingImgList')">
				<text class="fs-size__28 fs-color__subtitle fs-weight__400">进行中照片</text>
			</tui-upload>
			<tui-upload v-show="currentIndex == 2" background="#fff" :value="formData.endImgList" :width="210"
				:radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL"
				:header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'endImgList')">
				<text class="fs-size__28 fs-color__subtitle fs-weight__400">结束照片</text>
			</tui-upload>
			<tui-upload v-show="currentIndex == 3" background="#fff" :value="formData.staffImgList" :width="210"
				:radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL"
				:header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'staffImgList')">
				<text class="fs-size__28 fs-color__subtitle fs-weight__400">人员照片</text>
			</tui-upload>
			<tui-upload v-show="currentIndex == 4" background="#fff" :value="formData.materialImgList" :width="210"
				:radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL"
				:header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'materialImgList')">
				<text class="fs-size__28 fs-color__subtitle fs-weight__400">使用材料照片</text>
			</tui-upload>
		</tui-form>
		<view class="fs-mt60 fs-flex__center fs-safe__area">
			<tui-button shape="circle" width="600rpx" height="80rpx" shadow :loading="isLoading" :disabled="isLoading"
				@click="onSubmit">提 交</tui-button>
		</view>
	</view>
	<tui-picker :show="pickerShow" radius :pickerData="pickerList[pickerType]" textField="label" valueField="value"
		@hide="pickerHide" @change="pickerChange"></tui-picker>
	<tui-select :list="selectList[selectType]" multiple reverse :highlight="false" textField="name" valueField="id"
		:show="selectShow" @confirm="selectConfirm" @close="selectHide"></tui-select>
</template>

<script>
	import {
		uploadURL
	} from '@/config/app'
	import {
		apiTaskDetail,
		apiTaskHandleDetail,
		apiTaskHandle,
		apiStaffListByDeptId
	} from '@/api/work'
	import {
		apiTypeList,
		apiPlantTypeList
	} from '@/api/app'
	const rules = [
		{
			name: "plantTypeName",
			rule: ["required"],
			msg: ["请选择植物类型"]
		},
		// {
		// 	name: "specifications",
		// 	rule: ["required"],
		// 	msg: ["请填写规格"]
		// },
		// {
		// 	name: "maintainNum",
		// 	rule: ["required","isAmount"],
		// 	msg: ["请输入绿地面积","绿地面积必须是数字"]
		// },
		// {
		// 	name: "wateringTypeName",
		// 	rule: ["required"],
		// 	msg: ["请选择水源类型"]
		// },
		// {
		// 	name: "wateringModeName",
		// 	rule: ["required"],
		// 	msg: ["请选择浇水方式"]
		// },
		// {
		// 	name: "maintainAmount",
		// 	rule: ["required","isAmount"],
		// 	msg: ["请输入浇水量","浇水量必须是数字"]
		// },
		// {
		// 	name: "operationDuration",
		// 	rule: ["required","isAmount"],
		// 	msg: ["请输入操作时长","操作时长必须是数字"]
		// }
	]
	export default {
		data() {
			return {
				formData: {
					sourceType: 2,
					remark: '',
					maintainNo: '',
					maintainTypeId: 0,
					maintainTypeName: '',
					plantTypeId: 0,
					plantTypeName: '',
					specifications: '',
					maintainNum: '',
					numUnitName: 'm²',
					maintainAmount: '',
					amountUnitName: '吨',
					wateringType: 0,
					wateringTypeName: '',
					wateringMode: 0,
					wateringModeName: '',
					operationDuration: '',
					commonStaffList: [],
					togetherPerson: '',
					beginImgList: [],
					workingImgList: [],
					endImgList: [],
					staffImgList: [],
					materialImgList: [],
					detailList: [],
					currentPlanNum: 1
				},
				pickerList: [],
				pickerType: 'watering_type',
				pickerShow: false,
				isLoading: false,
				serverURL: uploadURL,
				currentIndex: 0,
				tabList: ['开始处理照片', '进行中照片', '结束照片', '人员照片', '使用材料照片'],
				selectType: 1,
				selectList: [],
				selectShow: false
			}
		},
		onLoad(options) {
			if (options.again == 1) {
				this.getTaskDetailByNo(options.problem_no)
			} else {
				this.getTaskDetailById(options.id)
			}
			this.getTypeList('watering_type')
			this.getTypeList('watering_mode')
			this.getStaffList()
			this.getPlantTypeList()
		},
		onShow() {
			const detailList = uni.getStorageSync('detailList')
			if (detailList) {
				this.formData.detailList = detailList
			}
		},
		onUnload() {
			uni.removeStorageSync('detailList')
		},
		methods: {
			// 上传完成
			complete(e, type) {
				if (e.status == 1) this.formData[type] = e.imgArr
			},
			// 提交记录
			onSubmit() {
				this.$refs.form.validate(this.formData, rules).then(res => {
					if (!res.isPass) {
						uni.$tui.toast(res.errorMsg)
						return
					}
					// if (!this.formData.detailList.length) {
					// 	uni.$tui.toast('请添加耗材')
					// 	return
					// }
					if (!this.formData.beginImgList.length || !this.formData.workingImgList.length || !this
						.formData.endImgList.length || !this.formData.staffImgList.length || !this.formData
						.materialImgList.length) {
						uni.$tui.toast('请上传图片')
						return
					}
					this.isLoading = true
					apiTaskHandle({
						data: {
							...this.formData
						}
					}).then(res => {
						uni.$tui.toast('提交成功')
						const pages = getCurrentPages()
						const beforePage = pages[pages.length - 2]
						setTimeout(() => {
							uni.navigateBack({
								success() {
									// 刷新页面数据
									beforePage.$vm.refreshList()
								}
							})
						}, 1500)
					}).finally(() => {
						this.isLoading = false
					})
				})
			},
			// 获取任务详情
			getTaskDetailById(id) {
				apiTaskDetail({
					data: {
						id: id
					}
				}).then(res => {
					this.formData.maintainNo = res.data.problemNo
					this.formData.maintainTypeId = res.data.maintainTypeId
					this.formData.maintainTypeName = res.data.maintainTypeName
				})
			},
			// 获取任务详情
			getTaskDetailByNo(problemNo) {
				apiTaskHandleDetail({
					data: {
						problem_no: problemNo,
						is_add_url: false
					}
				}).then(res => {
					Object.keys(this.formData).forEach(key => {
						this.formData[key] = res.data[key]
					})
					// 处理共同处理人
					const togetherPerson = this.formData.commonStaffList.map(item => item.userName)
					this.formData.togetherPerson = togetherPerson.join()
					// 处理耗材
					this.formData.detailList = res.data.materialDetailList
					uni.setStorageSync('detailList', this.formData.detailList)
				})
			},
			// 查询单位列表
			getTypeList(type) {
				apiTypeList({
					data: {
						dict_type: type
					}
				}).then(res => {
					this.pickerList[type] = res.data
				})
			},
			// 获取植物类型列表
			getPlantTypeList() {
				apiPlantTypeList().then(res => {
					res.data.forEach(item => {
						item.name = item.plantTypeName
					})
					this.selectList[1] = res.data
				})
			},
			// 获取人员列表
			getStaffList() {
				apiStaffListByDeptId().then(res => {
					res.data.forEach(item => {
						item.id = item.userId
						item.name = item.nickName
					})
					this.selectList[2] = res.data
				})
			},
			// 打开选择框
			pickerOpen(type) {
				this.pickerShow = true
				this.pickerType = type
			},
			// 关闭选择框
			pickerHide() {
				this.pickerShow = false
			},
			// 选择选择框
			pickerChange(event) {
				switch (this.pickerType) {
					case 'watering_type':
						this.formData.wateringType = event.value
						this.formData.wateringTypeName = event.label
						break
					case 'watering_mode':
						this.formData.wateringMode = event.value
						this.formData.wateringModeName = event.label
						break
				}
			},
			// 打开选择框
			selectOpen(type) {
				this.selectShow = true
				this.selectType = type
			},
			// 关闭选择框
			selectHide() {
				this.selectShow = false
			},
			// 选择选择框
			selectConfirm(event) {
				switch (this.selectType) {
					case 1:
						this.formData.plantTypeId = event.options.map(item => item.id).join()
						this.formData.plantTypeName = event.options.map(item => item.name).join()
						break
					case 2:
						let commonStaffList = []
						let togetherPerson = []
						event.options.forEach((item, index) => {
							commonStaffList.push({
								userId: item.id,
								userName: item.name
							})
							togetherPerson.push(item.name)
						})
						this.formData.commonStaffList = commonStaffList
						this.formData.togetherPerson = togetherPerson.join()
						break
				}
				this.selectHide()
			},
			// 添加物料
			material() {
				uni.$tui.href(`/pages/work/daily/maintain/material`)
			},
			// 删除物料
			delMaterial(index) {
				let detailList = this.formData.detailList
				detailList.splice(index, 1)
				this.formData.detailList = detailList
				uni.setStorageSync('detailList', detailList)
			},
			// 选项卡
			tabChange(event) {
				this.currentIndex = event.index
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>