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.plantTypeName" 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.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.pcoModeName" @click="pickerOpen('pco_mode')"></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"></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-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="staffList" multiple reverse :highlight="false" textField="nickName" valueField="userId" :show="selectShow" @confirm="selectConfirm" @close="selectHide"></tui-select>
</template>

<script>
import { uploadURL } from '@/config/app'
import { apiInspectionDetail, apiMaintainAdd, apiStaffListByDeptId } from '@/api/work'
import { apiTypeList } from '@/api/app'
const rules = [
	// {
	// 	name: "specifications",
	// 	rule: ["required"],
	// 	msg: ["请填写规格"]
	// },
	// {
	// 	name: "maintainNum",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入绿地面积","绿地面积必须是数字"]
	// },
	// {
	// 	name: "pcoModeName",
	// 	rule: ["required"],
	// 	msg: ["请选择防治方式"]
	// },
	// {
	// 	name: "maintainAmount",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入防治量","防治量必须是数字"]
	// },
	// {
	// 	name: "operationDuration",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入操作时长","操作时长必须是数字"]
	// }
]
export default {
	data() {
		return {
			formData: {
				sourceType: 1,
				maintainNo: '',
				maintainTypeId: 0,
				maintainTypeName: '',
				plantTypeId: 0,
				plantTypeName: '',
				specifications: '胸径',
				maintainNum: '0',
				numUnitName: 'm²',
				maintainAmount: 0,
				amountUnitName: 'kg',
				pcoMode: 0,
				pcoModeName: '',
				operationDuration: '',
				commonStaffList: [],
				togetherPerson: '',
				beginImgList: [],
				workingImgList: [],
				endImgList: [],
				staffImgList: [],
				materialImgList: [],
				detailList: [],
				currentPlanNum: 0,
				currentFinishPercent: 0,
				totalFinishPercent: 0
			},
			pickerList: [],
			pickerType: 'pco_mode',
			pickerShow: false,
			isLoading: false,
			staffList: [],
			serverURL: uploadURL,
			currentIndex: 0,
			tabList: ['开始处理照片', '进行中照片', '结束照片', '人员照片', '使用材料照片'],
			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('pco_mode')
		this.getStaffList()
	},
	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]
					setTimeout(() => {
						uni.navigateBack({
							success () {
								// 刷新页面数据
								beforePage.$vm.getList(this.formData.maintainNo)
						    }
						}) 
					}, 1500)
				}).finally(() => {
					this.isLoading = false
				})
			})
		},
		// 获取养护详情
		getInspectionInfo(planNo) {
			apiInspectionDetail({data:{plan_no:planNo}}).then(res => {
				this.formData.plantTypeId = res.data.maintainSubjectId
				this.formData.plantTypeName = res.data.maintainSubjectName
				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
			})
		},
		// 获取人员列表
		getStaffList() {
			apiStaffListByDeptId().then(res => {
				this.staffList = res.data
			})
		},
		// 打开选择框
		pickerOpen(type) {
			this.pickerShow = true
			this.pickerType = type
		},
		// 关闭选择框
		pickerHide() {
			this.pickerShow = false
		},
		// 选择选择框
		pickerChange(event) {
			switch (this.pickerType) {
				case 'pco_mode':
					this.formData.pcoMode = event.value
					this.formData.pcoModeName = event.label
					break
			}
		},
		// 打开选择框
		selectOpen() {
			this.selectShow = true
		},
		// 关闭选择框
		selectHide() {
			this.selectShow = false
		},
		// 选择选择框
		selectConfirm(event) {
			let commonStaffList = []
			let togetherPerson = []
			event.options.forEach((item, index) => {
				commonStaffList.push({userId:item.userId, userName:item.nickName})
				togetherPerson.push(item.nickName)
			})
			this.formData.commonStaffList = commonStaffList
			this.formData.togetherPerson = togetherPerson.join()
			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.currentFinishPercent = event.value - this.formData.totalFinishPercent
		}
	}
}
</script>

<style lang="scss" scoped>

</style>