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="规 格" 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-textarea label="除草措施" placeholder="请输入" flexStart isCounter :maxlength="100" :borderTop="false" :labelSize="28" :size="28" v-model="formData.weedRemark"></tui-textarea>
				<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>
				-->
			</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" :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" :width="210" :value="formData.materialImgList" :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 { apiTaskDetail, apiTaskHandleDetail, apiTaskHandle, apiStaffListByDeptId } from '@/api/work'
import { apiTypeList } from '@/api/app'
const rules = [
	// {
	// 	name: "specifications",
	// 	rule: ["required"],
	// 	msg: ["请填写规格"]
	// },
	// {
	// 	name: "maintainNum",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入绿地面积","绿地面积必须是数字"]
	// },
	// {
	// 	name: "weedRemark",
	// 	rule: ["required"],
	// 	msg: ["请输入除草措施"]
	// },
	// {
	// 	name: "maintainAmount",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入除草量","除草量必须是数字"]
	// },
	// {
	// 	name: "operationDuration",
	// 	rule: ["required","isAmount"],
	// 	msg: ["请输入操作时长","操作时长必须是数字"]
	// }
]
export default {
	data() {
		return {
			formData: {
				sourceType: 2,
				maintainNo: '',
				maintainTypeId: 0,
				maintainTypeName: '',
				plantTypeId: 0,
				plantTypeName: '',
				specifications: '',
				maintainNum: '',
				numUnitName: 'm²',
				maintainAmount: 0,
				amountUnitName: 'm²',
				weedRemark: '',
				operationDuration: '',
				commonStaffList: [],
				togetherPerson: '',
				beginImgList: [],
				workingImgList: [],
				endImgList: [],
				staffImgList: [],
				materialImgList: [],
				detailList: [],
				currentPlanNum: 1
			},
			pickerList: [],
			pickerType: 'watering_type',
			pickerShow: false,
			isLoading: false,
			serverURL: uploadURL,
			currentIndex: 0,
			tabList: ['开始处理照片', '进行中照片', '结束照片', '人员照片', '使用材料照片'],
			staffList: [],
			selectShow: false
		}
	},
	onLoad(options) {
		if (options.again == 1) {
			this.getTaskDetailByNo(options.problem_no)
		} else {
			this.getTaskDetailById(options.id)
		}
		// this.getTypeList('watering_type')
		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.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.plantTypeId = res.data.plantTypeId
				this.formData.plantTypeName = res.data.plantTypeName
				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
			})
		},
		// 获取人员列表
		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 'watering_type':
					this.formData.wateringtype = event.value
					this.formData.wateringtypeName = 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
		}
	}
}
</script>

<style lang="scss" scoped>

</style>