使用模态框渲染对应数据，以及选择下拉选项对应数据渲染

因为uni-app这里text和value，接口是title和value所以需要转

点击对应的（审核中，审核通过，审核不通过）这里绑定之后，使用@change需要再渲染一次，这样页面就是对应的。

状态这里使用插槽的方式，这里是点击详情让对应的数据显示，用模态框来展示，

效果图

实现代码

<template>
	<view class="box">
		<u-navbar title="资产申领" :autoBack="true">
		</u-navbar>
		<view class="content-select">
			<view>
				<uni-forms label-width="98px" :model="form" ref="form" validate-trigger="bind">
					<!-- 审核 -->
					<uni-forms-item label="管理审核状态" name="manageStatus">
						<uni-data-select v-model="requestInfo.manageStatus" :localdata="processStatus" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="价值审核状态" name="valueStatus">
						<uni-data-select v-model="requestInfo.valueStatus" :localdata="processStatus" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="最终审核状态" name="finalStatus">
						<uni-data-select v-model="requestInfo.finalStatus" :localdata="processStatus" @change="change">
						</uni-data-select>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view>
			<!-- 渲染数据 -->
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无数据">
				<uni-tr>
					<uni-th width="70" align="center">资产名称</uni-th>
					<uni-th width="90" align="center">申请部门</uni-th>
					<uni-th width="80" align="center">申请人</uni-th>
					<uni-th width="50" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in requestList" :key="index">
					<uni-td align="center">{{ item.assetBasic.name }}</uni-td>
					<uni-td align="center">{{ item.claimDepart.deptName }}</uni-td>
					<uni-td align="center">{{ item.reqMan.nickName}}</uni-td>
					<!-- <uni-td align="center">{{ item.assetBasic.categoryName }}</uni-td> -->
					<uni-td align="center">
						<button class="uni-button" size="mini" type="primary" @click="onModalState(item)">详情</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!-- 模态框 -->
		<u-modal :show="modalState" title="详细信息" :showCancelButton="true" @cancel="modalState=false">
			<view v-if="selectedItem" class="contentbox">
				<u-row>
					<u-col span="12" class="action-item">
						<view><text class="info">资产名称:</text>{{selectedItem.assetBasic.name}}</view>
						<view><text class="info">资产类别:</text>{{selectedItem.assetBasic.categoryName}}</view>
						<view><text class="info">申请部门:</text>{{selectedItem.claimDepart.deptName}}</view>
						<view><text class="info">申请人:</text>{{selectedItem.reqMan.nickName}}</view>
						<view><text class="info">申请日期:</text>{{selectedItem.claimInfo.claimDate}}</view>
						<view><text class="info">管理审核状态:</text>
						<template v-if="selectedItem.claimInfo.manageStatus == 1">
							<text class="halert">
								<u-button size="mini" center type="primary">审核中</u-button>
							</text>
						</template>
						<template v-if="selectedItem.claimInfo.manageStatus == 2">
							<text class="halert">
								<u-button size="mini" center type="success">审核通过</u-button>
							</text>
						</template>
						<template v-if="selectedItem.claimInfo.manageStatus == 3">
							<text class="halert">
								<u-button size="mini" center type="error">审核不通过</u-button>
							</text>
						</template>
						</view>
						<view><text class="info">价值审核状态:</text>
							<template v-if="selectedItem.claimInfo.valueStatus == 1">
								<text class="halert">
									<u-button size="mini" center type="primary">审核中</u-button>
								</text>
							</template>
							<template v-if="selectedItem.claimInfo.valueStatus == 2">
								<text class="halert">
									<u-button size="mini" center type="success">审核通过</u-button>
								</text>
							</template>
							<template v-if="selectedItem.claimInfo.valueStatus == 3"> 
								<text class="halert">
									<u-button size="mini" center type="error">审核不通过</u-button>
								</text>
							</template>
						</view>
						<view><text class="info">审核结果:</text>
							<template v-if="selectedItem.claimInfo.finalStatus == 1">
								<text class="halert">
									<u-button size="mini" center type="primary">审核中</u-button>
								</text>
							</template>
							<template v-if="selectedItem.claimInfo.finalStatus == 2">
								<text class="halert">
									<u-button size="mini" center type="success">审核通过</u-button>
								</text>
							</template>
							<template v-if="selectedItem.claimInfo.finalStatus == 3"> 
								<text class="halert">
									<u-button size="mini" center type="error">审核不通过</u-button>
								</text>
							</template>
						</view>
						<view><text class="info">领用交接人:</text>{{selectedItem.vdeptReviewStatus}}</view>
					</u-col>
				</u-row>
			</view>
		</u-modal>
		<view class="addAllot">
			<u-button type="primary" text="填单" @click="receiveFill"></u-button>
		</view>
	</view>

</template>

<script>
	import {
		submitList,
		processStatus4Outbound
	} from '@/api/Blurb/index.js'
	export default {
		data() {
			return {
				requestList: [],
				// 表单参数
				form: {},
				modalState: false,
				selectedItem: null,
				// 请求参数
				requestInfo: {
					//审核状态
					pageNum: 1,
					pageSize: 10,
					manageStatus: '',
					valueStatus: '',
					finalStatus: '',
				},
				processStatus: [], //审核状态
				loading: false
			}
		},
		onLoad() {
			//状态栏高度
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		created() {
			this.getsubmitList()
			this.getProcess()
		},
		methods: {
			getsubmitList() {
				this.loading = true
				submitList(this.requestInfo).then(response => {
					this.requestList = response.rows
					this.total = response.total
					this.loading = false
					// console.log(response);
				}).catch((e) => {
					this.requestList = []
					this.loading = false
				})
			},
			// 流程状态
			async getProcess() {
				const res = await processStatus4Outbound()
				// console.log(res)
				// 遍历数组
				// this.processStatus = res.map(item = {
				// 	text: item.title,
				// 	value: item.value
				// })
				// Object.keys遍历对象
				this.processStatus = Object.keys(res).map(key => ({
					text: res[key].title,
					value: res[key].value
				}));
			},
			change() {
				this.requestInfo.pageNum = 1;
				this.getsubmitList();
			},
			// 模态框打开关闭事件
			onModalState(item) {
				this.modalState = true
				this.selectedItem = item;
			},
			// 填单
			receiveFill() {
				uni.navigateTo({
					url: '/pages/Blurb/fixedAssets/receive/receiveFill',
				})
			},

		},
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.content-select {
		background-color: #fff;
		margin-top: calc(50px + var(--status-bar-height));
		margin-left: 15px;
		margin-right: 10px;
	}

	.action-item view {
		display: flex;
		justify-content: space-between;
		padding: 5px 0;
	}

	.uni-search-bar {
		border: 1px solid #f5f5f5;
		padding: 0;
	}

	.search {
		width: 70px;
		height: 35px;
		font-size: 16px
	}

	.box {
		padding-bottom: 40px;
	}

	.button {
		display: flex;
	}

	.button .btn {
		height: 35px;
		border-radius: 5px;
		width: 100px;
		font-size: 14px;
	}

	.addAllot {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 0 10px;
	}

	.nodata {
		text-align: center;
		font-size: 16px;
		color: #999;
		padding: 20px;
	}

	.uni-button {
		width: 60px;
		padding: 1px 2px 1px 2px;
	}

	/deep/.u-modal__content {
		flex-direction: column !important;
		padding: 12px 50px 25px 50px
	}

	/deep/.uni-forms-item {
		margin-bottom: 5px;
	}
</style>