JCSS / yl_miniapp

<template>
	<view class="fs-p30">
		<tui-form ref="form" :showMessage="false">
			<view class="fs-radius__sm">
				<tui-input placeholder="请选择" label="养护街道" v-model="formData.streetName" disabled @click="pickerOpen(1)"></tui-input>
				<tui-input placeholder="请选择" label="养护道路" v-model="formData.roadName" disabled @click="pickerOpen(2)"></tui-input>
				<tui-input placeholder="请选择" label="养护组长" v-model="formData.leaderUserName" disabled @click="pickerOpen(3)"></tui-input>
				<tui-input placeholder="请选择" label="具体位置" v-model="formData.lonLatAddress" disabled @click="openMap()"></tui-input>
				<tui-input placeholder="请选择" label="问题来源" v-model="formData.problemSourceName" disabled @click="pickerOpen(4)"></tui-input>
				<tui-form-item label="紧急程度" :bottomBorder="false">
					<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>
			</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, 'imgs')">
				<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, 'streetImgList')">
				<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, 'longRangeImgList')">
				<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>
		<tui-picker :show="pickerShow" radius :pickerData="pickerList[pickerType]" textField="name" valueField="id" @hide="pickerHide" @change="pickerChange"></tui-picker>
	</view>
</template>

<script>
import { uploadURL } from '@/config/app'
import { apiCaseAdd, apiStreetList, apiRoadListByStreetId, apiLeaderList } from '@/api/work'
import { apiTypeList } from '@/api/app'
const rules = [
	{
		name: "streetName",
		rule: ["required"],
		msg: ["请选择养护街道"]
	}, 
	{
		name: "roadName",
		rule: ["required"],
		msg: ["请选择养护道路"]
	}, 
	{
		name: "leaderUserName",
		rule: ["required"],
		msg: ["请选择养护组长"]
	},
	{
		name: "problemSourceName",
		rule: ["required"],
		msg: ["请选择问题来源"]
	},
	{
		name: "lonLatAddress",
		rule: ["required"],
		msg: ["请选择具体位置"]
	},
	{
		name: "remark",
		rule: ["required"],
		msg: ["请输入问题描述"]
	}
]
export default {
	data() {
		return {
			formData: {
				streetId: 0,
				streetName: '',
				roadId: 0,
				roadName: '',
				leaderUserId: 0,
				leaderUserName: '',
				remark: '',
				imgs: [],
				pressingType: 3,
				streetImgList: [],
				longRangeImgList: [],
				latLonType: 1,
				lat: 0,
				lon: 0,
				lonLatAddress: '',
				problemSourceId: 0,
				problemSourceName: ''
			},
			pickerList: [],
			isLoading: false,
			pickerShow: false,
			pickerType: 0,
			pressingTypeList: [
				{value:1, name:'特急'},
				{value:2, name:'紧急'},
				{value:3, name:'一般', checked:true}
			],
			serverURL: uploadURL,
			currentIndex: 0,
			tabList: ['问题图片', '街景图片', '远景图片'],
		}
	},
	onLoad() {
		this.getStreetList()
		this.getLeaderList()
		this.getTypeList()
	},
	methods: {
		// 获取街道列表
		getStreetList() {
			apiStreetList().then(res => {
				this.pickerList[1] = res.data
			})
		},
		// 获取道路列表
		getRoadList(streetId) {
			apiRoadListByStreetId({data:{stree_id:streetId}}).then(res => {
				this.formData.roadId = ''
				this.formData.roadName = ''
				this.pickerList[2] = res.data
			})
		},
		// 获取组长列表
		getLeaderList() {
			apiLeaderList().then(res => {
				res.data.forEach(item => {item.id = item.userId})
				this.pickerList[3] = res.data
			})
		},
		// 获取问题来源列表
		getTypeList() {
			apiTypeList({data:{dict_type: 'problem_source'}}).then(res => {
				res.data.forEach(item => {
					item.id = item.value
					item.name = item.label
				})
				this.pickerList[4] = res.data
			})
		},
		// 打开选择框
		pickerOpen(type) {
			this.pickerShow = true
			this.pickerType = type
		},
		// 关闭选择框
		pickerHide() {
			this.pickerShow = false
		},
		// 选择选择框
		pickerChange(event) {
			switch (this.pickerType) {
				case 1:
					this.formData.streetId = event.id
					this.formData.streetName = event.name
					this.formData.roadId = 0
					this.formData.roadName = ''
					// 查询道路列表
					this.getRoadList(event.id)
					break
				case 2:
					this.formData.roadId = event.id
					this.formData.roadName = event.name
					break
				case 3:
					this.formData.leaderUserId = event.id
					this.formData.leaderUserName = event.name
					break
				case 4:
					this.formData.problemSourceId = event.id
					this.formData.problemSourceName = event.name
					break
			}
		},
		// 上传完成
		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.imgs.length || !this.formData.streetImgList.length || !this.formData.longRangeImgList.length) {
					uni.$tui.toast('请上传图片')
					return
				}
				this.isLoading = true
				apiCaseAdd({data:{...this.formData}}).then(res => {
					uni.$tui.toast('提交成功')
					setTimeout(() => { uni.navigateBack() }, 1500)
				}).finally(() => {
					this.isLoading = false
				})
			})
		},
		// 选择位置
		openMap() {
			var that = this
			uni.chooseLocation({
				success: function (res) {
					that.formData.lat = res.latitude
					that.formData.lon = res.longitude
					that.formData.lonLatAddress = res.address
				}
			})
		},
		// 选项卡
		tabChange(event) {
			this.currentIndex = event.index
		},
	}
}
</script>

<style lang="scss" scoped>

</style>