NGTools/pagesPackage/ngTools_Dict/detail.vue

<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="数据字典 详情" @clickLeft="back" />
<uni-card>
		<view class="btns">
			<button type="primary" size="mini" @click="handleUpdate">修改</button>
			<button type="warn" size="mini" class="btn-delete" @click="handleDelete">删除</button>
		</view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options"
			:collection="collectionList"
			field="dictName,dictCode,description,delFlag,createBy,updateBy,updateTime,createTime" :where="queryWhere"
			:getone="true" :manual="true">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if="data">
				<uni-row>
					<uni-col :span="6">
						<uni-title title="字典名称"></uni-title>
					</uni-col>
					<uni-col :push='2' :span="14">
						<uni-title :title="data.dictName"></uni-title>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<uni-title title="字典编码"></uni-title>
					</uni-col>
					<uni-col :push='2' :span="14">
						<uni-title :title="data.dictCode"></uni-title>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<uni-title title="描述"></uni-title>
					</uni-col>
					<uni-col :push='2' :span="14">
						<uni-title :title="data.description"></uni-title>
					</uni-col>
				</uni-row>
				<!-- <uni-row>
					<uni-col :span="6">
						<uni-title title="删除状态"></uni-title>
					</uni-col>
					<uni-col :push='2' :span="14">
						<uni-title :title="data.delFlag"></uni-title>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="6">
						<uni-title title="创建人"></uni-title>
					</uni-col>
					<uni-col :push='2' :span="14">
						<uni-title :title="data.createBy"></uni-title>
					</uni-col>
				</uni-row> -->
				<view>
					<uni-title color="blue" :title="data.dictName + '  字典项'" align="center"></uni-title>
					<dict-item :dictID="data.dictCode"></dict-item>
				</view>
			</view>
		</unicloud-db>

</uni-card>

	</view>
</template>


<script>
	import dictItem from '../ngTools_DictItem/list.vue';
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '../../js_sdk/validator/ngTools_Dict.js'
	const db = uniCloud.database()

	export default {
		components: {
			dictItem
		},
		data() {
			return {
				queryWhere: '',
				collectionList: "ngTools_Dict",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				}
			}
		},
		onLoad(e) {
			this._id = e.id
			console.log(this._id)
		},
		onReady() {
			if (this._id) {
				this.queryWhere = '_id=="' + this._id + '"'
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleUpdate() {
				// 打开修改页面
				uni.navigateTo({
					url: './edit?id=' + this._id,
					events: {
						// 监听修改页面成功修改数据后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			},
			handleDelete() {
				this.$refs.udb.remove(this._id, {
					success: (res) => {
						// 删除数据成功后跳转到list页面
						uni.navigateTo({
							url: './list'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 0px;
	}

	.btns {
		margin-top: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.btns button {
		flex: 1;
	}

	.btn-delete {
		margin-left: 40px;
	}
</style>