JCSS / yl_miniapp

<template>
	<view class="container">
		<tui-form ref="form" :showMessage="false">
			<tui-input label="问题单号" v-model="formData.problemNo" disabled></tui-input>
			<tui-input label="道路名称" v-model="formData.roadName" disabled></tui-input>
			<tui-input label="养护级别" v-model="formData.curingLevelName" disabled></tui-input>
			<tui-input placeholder="请选择" label="养护类型" v-model="formData.maintainTypeName" disabled @click="pickerOpen(1)"></tui-input>
			<tui-input placeholder="请选择" label="植物类型" v-model="formData.plantTypeName" disabled @click="pickerOpen(2)"></tui-input>
			<tui-form-item label="紧急程度">
				<tui-radio-group v-model="formData.pressingType">
					<view class="fs-flex">
						<tui-label margin="0 0 0 30rpx" v-for="(item,index) in pressingTypeList">
							<tui-radio :checked="item.checked" :value="item.value"></tui-radio>
							<text class="fs-ml16">{{item.name}}</text>
						</tui-label>
					</view>
				</tui-radio-group>
			</tui-form-item>
			<tui-input placeholder="请选择" label="指派人员" v-model="formData.userName" :borderBottom="false" disabled @click="pickerOpen(3)"></tui-input>
			<tui-white-space></tui-white-space>
			<tui-textarea :radius="20" placeholder="请输入问题描述" isCounter :size="28" :maxlength="100" v-model="formData.taskRemark"></tui-textarea>
		</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>
		<tui-picker :show="pickerShow" :layer="pickerType==3 ? 2 : 1" radius :pickerData="pickerList[pickerType]" textField="name" valueField="id" @hide="pickerHide" @change="pickerChange"></tui-picker>
		<tui-select :list="pickerList[pickerType]" multiple reverse :highlight="false" :show="selectShow" textField="name" valueField="id" @confirm="pickerChange" @close="pickerHide"></tui-select>
	</view>
</template>

<script>
const rules = [
	{
		name: "maintainTypeName",
		rule: ["required"],
		msg: ["请选择养护类型"]
	},
	{
		name: "plantTypeName",
		rule: ["required"],
		msg: ["请选择植物类型"]
	},
	{
		name: "userName",
		rule: ["required"],
		msg: ["请选择人员"]
	},
	{
		name: "taskRemark",
		rule: ["required"],
		msg: ["请输入问题描述"]
	}
]
import { apiCaseDetail, apiUserListByDeptId, apiTaskAdd } from '@/api/work'
import { apiMaintaintTypeList, apiPlantTypeList } from '@/api/app'
export default {
	data() {
		return {
			isLoading: false,
			pickerShow: false,
			selectShow: false,
			pickerList: [],
			pickerType: 0,
			formData: {
				problemNo: '',
				roadId: 0,
				taskRemark: '',
				maintainTypeId: 0,
				maintainTypeName: '',
				plantTypeId: '',
				plantTypeName: '',
				userId: 0,
				userName: '',
				pressingType: 3,
				roadName: '',
				curingLevelName: ''
			},
			pressingTypeList: [
				{value:1, name:'特急'},
				{value:2, name:'紧急'},
				{value:3, name:'一般', checked:true}
			]
		}
	},
	onLoad(options) {
		this.getCaseDetail(options.problem_no)
		this.getMaintaintTypeList()
		this.getPlantTypeList()
	},
	methods: {
		// 获取问题详情
		getCaseDetail(problem_no) {
			apiCaseDetail({data:{problem_no}}).then(res => {
				this.formData.problemNo = res.data.problemNo
				this.formData.roadId = res.data.roadId
				this.formData.roadName = res.data.roadName
				this.formData.curingLevelName = res.data.curingLevelName
				this.getStaffList(res.data.deptId)
			})
		},
		// 获取养护类型列表
		getMaintaintTypeList() {
			apiMaintaintTypeList().then(res => {
				let list = res.data.filter(item => item.id !== 9)
				list.forEach((item, index) => {
					item.name = item.maintainTypeName
				})
				this.pickerList[1] = list
			})
		},
		// 获取植物类型列表
		getPlantTypeList() {
			apiPlantTypeList().then(res => {
				res.data.forEach(item => {item.name = item.plantTypeName})
				this.pickerList[2] = res.data
			})
		},
		// 获取人员列表
		getStaffList(id) {
			apiUserListByDeptId({data:{dept_id:id}}).then(res => {
				this.pickerList[3] = res.data
			})
		},
		// 打开选择框
		pickerOpen(type) {
			if (type == 2){
				this.selectShow = true
			} else {
				this.pickerShow = true
			}
			this.pickerType = type
		},
		// 关闭选择框
		pickerHide() {
			this.pickerShow = false
			this.selectShow = false
		},
		// 选择选择框
		pickerChange(event) {
			switch (this.pickerType) {
				case 1:
					this.formData.maintainTypeId = event.id
					this.formData.maintainTypeName = event.name
					break
				case 2:
					this.formData.plantTypeId = event.options.map(item => item.id).join()
					this.formData.plantTypeName = event.options.map(item => item.name).join()
					this.pickerHide()
					break
				case 3:
					this.formData.userId = event.id[1]
					this.formData.userName = event.name[1]
					break
			}
		},
		// 提交
		onSubmit() {
			this.$refs.form.validate(this.formData, rules).then(res => {
				if (!res.isPass) {
					uni.$tui.toast(res.errorMsg)
					return
				}
				this.isLoading = true
				apiTaskAdd({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
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>

</style>