FE-app-oam/pages/iotClassification/infoPage.vue

<!-- 新增/编辑物联设备 -->
<template>
	<view id="iotClassification-info-page">
		<view class="info-max-big-box">
			<view>名称：{{newData.typeName}}</view>
			<view>标识：{{newData.typeKey}}</view>
		</view>
		<view class="top-table-button-box">
			<view :class="pageType == 1 ? 'colorA':''" @click="tbaleButton(1)">模型</view>
			<view :class="pageType == 2 ? 'colorA':''" @click="tbaleButton(2)">属性</view>
			<view :class="pageType == 3 ? 'colorA':''" @click="tbaleButton(3)">功能</view>
		</view>
		<!-- 模型 -->
		<view class="model-max-big-box" v-if="pageType == 1">
			<view class="list-max-big-null" v-if="!modelList[0]">暂无数据</view>
			<view class="model-for-box" v-for="(item,index) in modelList">
				<view class="model-title-box">
					<view>名称：{{item.label}}</view>
					<view>{{item.required?'必填':'非必填'}}</view>
				</view>
				<view class="model-text">类型：<span v-for="(minItem,minIndex) in classOption" v-if="item.type == minItem.value">{{minItem.label}}</span></view>
			</view>
		</view>
		<!-- 属性 -->
		<view class="attribute-max-big-box" v-if="pageType == 2">
			<view class="list-max-big-box">
				<view class="list-max-big-null" v-if="!attributeList[0]">暂无数据</view>
				<view class="for-list-max-big-box" v-for="(item,index) in attributeList" :key="index">
					<view class="for-box">
						<view>名称：{{item.name}}</view>
						<view :class="item.state?'colorA':''">{{item.state?'启用':'停用'}}</view>
					</view>
					<view class="for-text">
						<view>标识：</view>
						<view>{{item.code}}</view>
					</view>
					<view class="for-text">
						<view>属性：</view>
						<view>{{item.attrName}}</view>
					</view>
					<view class="for-text">
						<view>备注：</view>
						<view>{{item.remark}}</view>
					</view>
				</view>
			</view>
			<view class="pagination-max-big-box">
				<view class="pagination-button" @click="attributeButton(1)"
				:class="attributeQuery.page == 1 ? 'pagination-color':''">上一页</view>
				<view class="pagination-num">{{attributeQuery.page}}/{{attributePages}}</view>
				<view class="pagination-button" @click="attributeButton(2)"
				:class="attributeQuery.page == attributePages || attributeQuery.page > attributePages ? 'pagination-color':''">下一页</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="function-max-big-box" v-if="pageType == 3">
			<view class="list-max-big-box">
				<view class="list-max-big-null" v-if="!functionList[0]">暂无数据</view>
				<view class="for-list-max-big-box" v-for="(item,index) in functionList" :key="index">
					<view class="for-box">
						<view>名称：{{item.name}}</view>
						<view :class="item.state?'colorA':''">{{item.state?'启用':'停用'}}</view>
					</view>
					<view class="for-text">
						<view>地址：</view>
						<view>{{item.reqApi}}</view>
					</view>
					<view class="for-text">
						<view>方式：</view>
						<view>{{item.reqMethod}}</view>
					</view>
					<view class="for-text">
						<view>备注：</view>
						<view>{{item.remark}}</view>
					</view>
				</view>
			</view>
			<view class="pagination-max-big-box">
				<view class="pagination-button" @click="functionButton(1)"
				:class="functionQuery.page == 1 ? 'pagination-color':''">上一页</view>
				<view class="pagination-num">{{functionQuery.page}}/{{functionPages}}</view>
				<view class="pagination-button" @click="functionButton(2)"
				:class="functionQuery.page == functionPages || functionQuery.page > functionPages ? 'pagination-color':''">下一页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { itoTypeTypeModelAndAttr,itoAttributeList,itoTypeFunctionList } from '@/api/index.js'
	export default {
		data() {
			return {
				pageType:1,
				newData:{},
				//模型列表
				modelList:[],
        classOption:[
          {label:'文本框',value:'text'},
          {label:'文本域',value:'textarea'},
          {label:'密码框',value:'password'},
          {label:'计数器',value:'number'},
          {label:'单选下拉框',value:'select'},
          {label:'多选下拉框',value:'selectMultiple'},
          {label:'单选框',value:'radio'},
          {label:'复选框',value:'checkbox'},
          {label:'滑块',value:'slider'},
          {label:'时间选择器',value:'timePicker'},
          {label:'时间范围选择器',value:'timePickerRange'},
          {label:'日期选择器',value:'datePicker'},
          {label:'日期范围选择器',value:'datePickerRange'},
          {label:'颜色选择器',value:'colorPicker'},
        ],
				attributeList:[],
				attributeQuery:{
					page:1,
					pageSize:10,
				},
				attributePages:0,
				functionList:[],
				functionQuery:{
					page:1,
					pageSize:10,
				},
				functionPages:0,
			}
		},
		onLoad(option) {
			this.initialize(option.item);
		},
		onShow() {
			
		},
		methods: {
			initialize(item){
				let obj = JSON.parse(decodeURIComponent(item));
				this.$set(this,'newData',obj);
				this.itoTypeTypeModelAndAttr();
			},
			tbaleButton(type){
				if(type == 1){
					this.itoTypeTypeModelAndAttr();
				}else if(type == 2){
					this.$set(this,'attributeQuery',{
						page:1,
						pageSize:10,
					});
					this.itoAttributeList();
				}else if(type == 3){
					this.$set(this,'functionQuery',{
						page:1,
						pageSize:10,
					});
					this.itoTypeFunctionList();
				}
				this.$set(this,'pageType',type);
			},
			//模型列表
			async itoTypeTypeModelAndAttr(){
				const {data} = await itoTypeTypeModelAndAttr({id:this.newData.typeId});
				if(data.code==200){
					let list = [];
					data.data.model.forEach((item)=>{
						if(item.isSelect){
							list.push(item);
						}
					})
					this.$set(this,'modelList',list);
				}
			},
			attributeButton(type){
				if(type == 1){
					if(this.attributeQuery.page != 1){
						this.attributeQuery.page--
						this.itoAttributeList();
					}
				}else if(type == 2){
					if(this.attributeQuery.page != this.attributePages && this.attributeQuery.page < this.attributePages){
						this.attributeQuery.page++
						this.itoAttributeList();
					}
				}
			},
			//属性列表
			async itoAttributeList(){
				let obj = JSON.parse(JSON.stringify(this.attributeQuery))
				obj.typeId = this.newData.typeId
				const {data} = await itoAttributeList(obj);
				if(data.code==200){
					this.$set(this,'attributeList',data.data.records);
					this.$set(this,'attributePages',data.data.pages);
				}
			},
			functionButton(type){
				if(type == 1){
					if(this.functionQuery.page != 1){
						this.functionQuery.page--
						this.itoTypeFunctionList();
					}
				}else if(type == 2){
					if(this.functionQuery.page != this.functionPages && this.functionQuery.page < this.functionPages){
						this.functionQuery.page++
						this.itoTypeFunctionList();
					}
				}
			},
			//功能列表
			async itoTypeFunctionList(){
				let obj = JSON.parse(JSON.stringify(this.functionQuery))
				obj.typeId = this.newData.typeId
				const {data} = await itoTypeFunctionList(obj);
				if(data.code==200){
					this.$set(this,'functionList',data.data.records);
					this.$set(this,'functionPages',data.data.pages);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#iotClassification-info-page {
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.info-max-big-box{
			background-color: #fff;
			height:80rpx;
			display: flex;
			padding:0 20rpx;
			view{
				flex:1;
				font-size:28rpx;
				line-height:80rpx;
			}
		}
		.top-table-button-box{
			display: flex;
			view{
				flex:1;
				font-size:28rpx;
				line-height:60rpx;
				text-align:center;
				background-color:#999;
				color:#fff;
			}
			.colorA{
				background-color:#0183FA;
				color:#fff;
			}
		}
		.model-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			.list-max-big-null{
				font-size:28rpx;
				text-align:center;
				line-height:100rpx;
				color:#999;
			}
			.model-for-box{
				margin:20rpx 20rpx 0;
				padding:20rpx;
				background-color: #fff;
				border-radius:8rpx;
				.model-title-box{
					display: flex;
					view{
						font-size:28rpx;
						line-height:50rpx;
					}
					view:nth-child(1){
						flex:1;
					}
					view:nth-child(2){
						width:100rpx;
					}
				}
				.model-text{
					font-size:28rpx;
					line-height:50rpx;
				}
			}
		}
		.attribute-max-big-box{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
		.function-max-big-box{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
		.list-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			.list-max-big-null{
				font-size:28rpx;
				text-align:center;
				line-height:100rpx;
				color:#999;
			}
			.for-list-max-big-box{
				background-color: #fff;
				margin:20rpx;
				padding:20rpx;
				border-radius:8rpx;
				.for-box{
					display: flex;
					view{
						font-size:28rpx;
						line-height:50rpx;
					}
					view:nth-child(1){
						flex:1;
					}
					view:nth-child(2){
						width:100rpx;
					}
					.colorA{
						color:#14AE10;
					}
				}
				.for-text{
					display: flex;
					view{
						font-size:28rpx;
						line-height:50rpx;
					}
					view:nth-child(1){
						width:90rpx;
					}
					view:nth-child(2){
						width:590rpx;
						font-size:28rpx;
						line-height:40rpx;
						padding:5rpx 0;
						word-wrap: break-word;
					}
				}
			}
		}
		.pagination-max-big-box{
			height:80rpx;
			background-color: #fff;
			display: flex;
			.pagination-button{
				margin:10rpx;
				border-radius:8rpx;
				width:140rpx;
				height:60rpx;
				line-height:60rpx;
				text-align: center;
				font-size:28rpx;
				background-color:#0183FA;
				color:#fff;
			}
			.pagination-num{
				flex:1;
				text-align: center;
				line-height:80rpx;
			}
			.pagination-color{
				background-color: #dedede;
			}
		}
	}
</style>