xunjian_app/task_pages/guarantee/guarantee.vue

<template>
	<!-- 发布任务 -->
	<view class="u-padding-30">
		<u-form>
			<u-form-item>
				<view class="item-title">任务标题</view>
				<u-input placeholder="任务标题" border :customStyle="{paddingRight:'22rpx'}" v-model="form.title" />
			</u-form-item>
			<u-form-item>
				<view class="item-title">任务类型</view>
				<u-input @click="selceshow=true" type="select" border v-model="selectValue" placeholder="任务类型"
					:customStyle="{paddingRight:'22rpx'}" />
				<u-select v-model="selceshow" :list="list" @confirm="confirm"></u-select>
			</u-form-item>
			<u-form-item>
				<view class="item-title">具体位置</view>
				<u-input @click="pointShow=true" type="select" border v-model="pointValue" placeholder="具体位置"
					:customStyle="{paddingRight:'22rpx'}" />
				<u-select v-model="pointShow" mode="mutil-column-auto" value-name="id" label-name="name" :list="pointList" @confirm="confirmPoint"></u-select>
			</u-form-item>
			<u-form-item>
				<view class="item-title">所属系统</view>
				<u-input @click="systemShow=true" type="select" border v-model="systemValue" placeholder="所属系统"
					:customStyle="{paddingRight:'22rpx'}" />
				<u-select v-model="systemShow" :list="systemList" @confirm="confirmSystem"></u-select>
			</u-form-item>
			<u-form-item>
				<view class="item-title">要求完成时间</view>
				<u-picker @confirm="pickermeth" :params="params" v-model="show" mode="time"></u-picker>
				<u-input placeholder="要求完成时间" type="select" @click="show=true" border v-model="form.finishTime"
					:customStyle="{paddingRight:'22rpx'}" />
			</u-form-item>

			<u-form-item>
				<view class="item-title">任务内容</view>
				<u-input type="Textarea" :customStyle="{paddingRight:'22rpx'}" height="60" border
					v-model="form.content" />
			</u-form-item>
			<u-form-item>
				<view class="item-title">任务图片</view>
				<view class="item-images u-padding-10">
					<c-img @changeImg="changeImg($event)"></c-img>
				</view>
			</u-form-item>
			<u-form-item>
				<view class="u-flex">
					<view class="item-title">执行人员</view>
					<navigator hover-class="none" url="../addppeople/addppeople" class="u-m-l-30 u-f-28 u-flex "
						style="color: #333333;">
						<view class="add">+</view>
						<view v-for="(index,key) in peopleList" :key="key" style="margin-right: 5px;">
							{{index.execUserName}}
						</view>
						<view class="u-m-l-20" style="color: #4A8BFF;">添加</view>
					</navigator>
				</view>
			</u-form-item>
			<u-form-item>
				<view @click="sumit" class="submit">确定</view>
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import cImg from '@/components/c-img/index.vue'
	import dayjs from "dayjs";
	import {
		addTask,
		building,
		floor,
		room
	} from "@/api/index.js";
	export default {
		components: {
			cImg,
		},
		data() {
			return {
				show: false,
				selceshow: false,
				pointShow: false,
				systemShow:false,
				form: {
					title: undefined,
					type: undefined,
					roomId:undefined,
					belongSystem:undefined,
					content: undefined,
					finishTime: undefined,
					images: undefined,
					executors: [],
				},
				peopleList: "",
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					province: true,
					city: true,
					area: true,
					timestamp: true,
				},
				list: [{
						value: 1,
						label: "一般任务",

					},
					{
						value: 2,
						label: "较急任务",

					},
					{
						value: 3,
						label: "紧急任务",

					},
				],
				systemList:[{
						value: "配电",
						label: "配电",
					},
					{
						value: "照明",
						label: "照明",

					},
					{
						value: "监控",
						label: "监控",
					
					},
					{
						value: "电梯",
						label: "电梯",
					
					},
					{
						value: "BA",
						label: "BA",
					
					},
					{
						value: "门禁",
						label: "门禁",
					
					},
					{
						value: "给排水",
						label: "给排水",
					
					},
					{
						value: "消防",
						label: "消防",
					
					},
					{
						value: "空调",
						label: "空调",
					
					},
					{
						value: "综合土建",
						label: "综合土建",
					
					},
					{
						value: "动环",
						label: "动环",
					
					},
					{
						value: "工器具",
						label: "工器具",
					
					},
					{
						value: "机柜",
						label: "机柜",
					
					},
				],
				pointList:[],//具体位置数组
				selectValue: "",
				pointValue:'',
				systemValue:''
			};
		},
		onLoad() {
		  this.getBuilding()
		},
		onShow() {
			this.peopleList = this.$store.state.user.people;
			
			this.form.executors = []
			if (this.peopleList) {
				this.peopleList.forEach(Element => {
					this.form.executors.push(Element.execUserId)
				})
				this.form.executors = JSON.parse(JSON.stringify(this.form.executors))
			}
			this.$store.state.user.people = "";
		},
		methods: {
			//获取楼栋
			async getBuilding() {
				let {
					data
				} = await building();
				this.pointList.length = 0;
				data.forEach(i => {
					this.pointList.push(i)
				});
				for (let i = 0, len = this.pointList.length; i < len; i++) {
					await this.getFloor(this.pointList[i].id, i)
					for (let j = 0, len = this.pointList[i].children.length; j < len; j++) {
						await this.getRoom(this.pointList[i].children[j].id, i, j)
					}
				}
				
			},
			//获取楼层
			async getFloor(buildingId, i) {
				let {
					data
				} = await floor(buildingId)
				this.pointList[i].children = [];
				data.forEach(ite => {
					this.pointList[i].children.push(ite)
				})
			},
			//获取房间
			async getRoom(roomId, i, j) {
				let {
					data
				} = await room(roomId)
				this.pointList[i].children[j].children = [];
				data.forEach(ite => {
					this.pointList[i].children[j].children.push(ite)
				})
			},
			//获取图片组件穿过来的图片
			changeImg(img) {
				this.form.images = img;
			},
			//发布任务
			sumit() {
				addTask(
					this.form
				).then((data) => {
					const {
						code,
						message
					} = data;
					if (code == 200) {
						this.$refs.uToast.show({
							title: "发布成功",
							type: 'success',
							callback: () => {
								uni.navigateBack(1);
							},
						});
					} else {
						this.$refs.uToast.show({
							title: message,
						});
					}
				});
			},
			//时间选择器
			pickermeth(timer) {
				const {
					timestamp
				} = timer;
				let ti = dayjs(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss");
				this.form.finishTime = ti;
			},
			//任务类型确认
			confirm(e) {
				this.form.type = e[0].value;
				this.selectValue = e[0].label;
			},
			//所属系统确认
			confirmSystem(e) {
				this.form.belongSystem = e[0].value;
				this.systemValue = e[0].label;
			},
			//具体位置确认
			confirmPoint(e) {
				this.form.roomId = e[2].value;
				this.pointValue = `${e[0].label}/${e[1].label}/${e[2].label}` 
			}
		},
	};
</script>

<style>
	.item-title {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #333333;
	}

	.item-images {
		width: 690rpx;

		border: 1rpx solid #dcdfe6;
		border-radius: 4rpx;
	}

	.upload-image {
		display: flex;
		line-height: 60rpx;
		justify-content: center;
		width: 76rpx;
		height: 76rpx;
		background: #a9a9a9;
		font-size: 74rpx;
	}

	.add {
		width: 47rpx;
		height: 47rpx;
		border-radius: 50%;
		line-height: 31rpx;
		text-align: center;
		color: #4a8bff;
		border: 2px solid #4a8bef;
		font-size: 45rpx;
		position: relative;
		display: flex;

		justify-content: center;
	}

	.submit {
		width: 690rpx;
		height: 90rpx;
		background: #4a8bff;
		border-radius: 4rpx;
		font-size: 28rpx;
		line-height: 90rpx;
		text-align: center;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #ffffff;
		margin-top: 50rpx;
	}
</style>