zhgdyunapp/pages/projectEnd/markRoom/locationManage/locationManage.vue

<template>
	<view class="fullHeight bgWhite">
		<headers :showBack="true">
			<view class="headerName">
				存放位置设置
			</view>
		</headers>
		<scroll-view scroll-y="true" class="pageContent">
			<view class="pageInner">
				<view class="typeBox" v-for="(item,index) in typeList" :key="index" @click="editFn(item)">
					<image src="/static/markRoomImg/bg_bule.png" class="bg"></image>
					<view class="name">
						{{item.locationName}}
					</view>
				</view>
				<view class="addBox" @click="addFn">
					<view class="">
						<image src="/static/icon-add.png" class="icon-add"></image>
						<view class="">
							添加存放位置
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<dialogs ref="dialogs">
			<!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
			<template v-slot:content>
				<view class="formBox2">
					<form @submit="formSubmit">

						<view class="uni-form-item">
							<view class="uni-form-label">
								<text class="star">*</text>父级位置
							</view>
							<view class="uni-form-input">
								<picker @change="bindPickerChange" :value="selectIndex" :range="selectList"
									range-key="locationName">
									<view class="uni-input uni-select cl" v-if="selectIndex==null">
										请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
									</view>
									<view class="uni-input uni-select" v-else>{{selectList[selectIndex].locationName}}
										<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
									</view>
								</picker>
							</view>
						</view>
						<view class="uni-form-item">
							<view class="uni-form-label">
								<text class="star">*</text>位置名称
							</view>
							<view class="uni-form-input">
								<input class="uni-input" placeholder-class="cl" name="locationName"
									v-model="form.locationName" placeholder="请输入" />
							</view>
						</view>
						<button form-type="submit" type="primary" class="btn submitBtn">保存</button>
						<button form-type="submit" class="btn deleteBtn" v-show="!isAdd" @click="deleteFn">删除</button>
						<view class="closeBtn" @click="closeDialogFn">
							关闭
						</view>
					</form>
				</view>
			</template>

		</dialogs>
	</view>
</template>

<script>
	import headers from "../../../../components/headers/headers.vue"
	import dialogs from "../../../../components/dialog/dialog.vue"
	export default {
		components: {
			headers,
			dialogs
		},
		data() {
			return {
				projectDetail: {},
				typeList: [],
				form: {
					projectSn: '',
					locationName: '',
					parentId: ''
				},
				isAdd: true,
				devSn: '',
				selectList: [],
				selectIndex: null
			};
		},
		onLoad(options) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.devSn = options.devSn
			this.loadData2()
			this.loadData()
		},
		mounted() {

		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.selectIndex = e.target.value
			},
			closeDialogFn() {
				this.$refs.dialogs.hideFn()
			},
			editFn(item) {
				this.isAdd = false
				this.form = JSON.parse(JSON.stringify(item))
				this.selectIndex = null
				if (item.parentId != 0) {
					for (var i = 0; i < this.selectList.length; i++) {
						if (this.selectList[i].id == item.parentId) {
							this.selectIndex = i
							this.form.locationName = item.locationName.split('>')[1]
						}
					}
				}

				this.$refs.dialogs.showFn()
			},
			addFn() {
				this.form.locationName = ''
				this.form.parentId = ''
				this.selectIndex = null
				this.isAdd = true
				this.$refs.dialogs.showFn()
			},
			loadData() {
				var that = this
				this.sendRequest({
					url: "xmgl/standardLocation/selectChildrenLocationList",
					data: {
						projectSn: this.projectDetail.projectSn,
						devSn: this.devSn
					},
					method: "POST",
					success(res) {
						that.typeList = res.result
					}
				})
			},
			loadData2() {
				var that = this
				this.sendRequest({
					url: "xmgl/standardLocation/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						devSn: this.devSn
					},
					method: "POST",
					success(res) {
						that.selectList = res.result
					}
				})
			},
			deleteFn() {
				var that = this
				this.sendRequest({
					url: 'xmgl/standardLocation/delete',
					data: {
						id: this.form.id
					},
					method: "POST",
					success(res) {
						uni.showToast({
							title: '删除成功！'
						})
						that.$refs.dialogs.hideFn()
						that.loadData()
						that.loadData2()
					}
				})
			},
			formSubmit(e) {
				var that = this
				console.log(e)
				var params = e.detail.value
				params.projectSn = this.projectDetail.projectSn
				if (params.locationName == '') {
					uni.showToast({
						title: '请输入位置名称',
						icon: 'none'
					})
					return false;
				}
				if (this.selectIndex != null) {
					params.parentId = this.selectList[this.selectIndex].id
				}

				var url = 'xmgl/standardLocation/edit'
				if (this.isAdd) {
					url = 'xmgl/standardLocation/add'
					params.devSn = this.devSn
				} else {
					params.id = this.form.id
				}
				this.sendRequest({
					url: url,
					data: params,
					method: "POST",
					success(res) {
						uni.showToast({
							title: '保存成功！'
						})
						uni.navigateTo({
							url: '/pages/projectEnd/markRoom/locationManage/locationManage'
						});
						that.$refs.dialogs.hideFn()
						that.loadData()
						that.loadData2()

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.typeBox {
		width: 85px;
		height: 80px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		font-size: 12px;
		text-align: center;
		border-radius: 10px;
		position: relative;
		margin-bottom: 10px;
		color: white;
		vertical-align: top;
		padding: 0 10px;

		.name {
			font-size: 18px;
			position: relative;
			z-index: 2;
			word-break: break-all;
		}

		.desc {
			position: relative;
			z-index: 2;
		}

	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.pageInner {
		padding: 15px;
	}

	.addBox {
		text-align: center;
		width: 105px;
		height: 78px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(42, 43, 91, 0.1);
		border-radius: 10px;
		font-size: 12px;
		color: rgba(42, 43, 91, 1);
		background-color: #f6f5f8;
		vertical-align: top;

		.icon-add {
			width: 18px;
			height: 18px;
		}
	}

	.closeBtn {
		font-size: 15px;
		color: rgba(42, 43, 91, 0.5);
		padding: 10px 0;
		text-align: center;
	}
</style>