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="当前次数" v-model="formData.currentPlanNum" disabled></tui-input>
				<tui-input label="植物类型" placeholder="请选择" v-model="formData.plantTypeName" disabled @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>
				-->
				<tui-list-cell :hover="false" unlined padding="26rpx 30rpx 40px">
					<div class="fs-flex__between">
						<div>本次完成(%)</div>
						<tui-slider width="240" :value="formData.totalFinishPercent" showValue boxColor="#577ee3"
							valueColor="#fff" :valueSize="24" position="bottom" @change="sliderChange"></tui-slider>
					</div>
				</tui-list-cell>
			</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" :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" :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" :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" :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" :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 {
		apiInspectionDetail,
		apiMaintainAdd,
		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: 1,
					remark: '',
					maintainNo: '',
					maintainTypeId: 0,
					maintainTypeName: '',
					plantTypeId: '',
					plantTypeName: '',
					specifications: '',
					maintainNum: '',
					numUnitName: 'm²',
					maintainAmount: '',
					amountUnitName: '吨',
					wateringType: 0,
					wateringTypeName: '',
					wateringMode: 0,
					wateringModeName: '',
					operationDuration: '',
					commonStaffList: [],
					togetherPerson: '',
					beginImgList: [],
					workingImgList: [],
					endImgList: [],
					staffImgList: [],
					materialImgList: [],
					detailList: [],
					currentPlanNum: 0,
					currentFinishPercent: 0,
					totalFinishPercent: 0,
					currentTotalFinishPercent: 0
				},
				pickerList: [],
				pickerType: 'watering_type',
				pickerShow: false,
				isLoading: false,
				serverURL: uploadURL,
				currentIndex: 0,
				tabList: ['开始处理照片', '进行中照片', '结束照片', '人员照片', '使用材料照片'],
				selectType: 1,
				selectList: [],
				selectShow: false
			}
		},
		onLoad(options) {
			this.formData.maintainNo = options.plan_no
			this.formData.currentPlanNum = options.current_plan_num
			this.formData.totalFinishPercent = options.total_finish_percent
			this.getInspectionInfo(options.plan_no)
			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.currentFinishPercent <= 0) {
						uni.$tui.toast('完成进度必须大于' + this.formData.totalFinishPercent + '%')
						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
					apiMaintainAdd({
						data: {
							...this.formData
						}
					}).then(res => {
						uni.$tui.toast('提交成功')
						const pages = getCurrentPages()
						const beforePage = pages[pages.length - 2]
						const planNo = this.formData.maintainNo
						setTimeout(() => {
							uni.navigateBack({
								success() {
									// 刷新页面数据
									beforePage.$vm.getList(planNo)
								}
							})
						}, 1500)
					}).finally(() => {
						this.isLoading = false
					})
				})
			},
			// 获取养护详情
			getInspectionInfo(plan_no) {
				apiInspectionDetail({
					data: {
						plan_no
					}
				}).then(res => {
					this.formData.maintainNo = res.data.planNo
					this.formData.maintainTypeId = res.data.maintainTypeId
					this.formData.maintainTypeName = res.data.maintainTypeName
				})
			},
			// 查询单位列表
			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
			},
			// 选择进度
			sliderChange(event) {
				this.formData.currentTotalFinishPercent = event.value
				this.formData.currentFinishPercent = this.formData.currentTotalFinishPercent - this.formData.totalFinishPercent
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>