warst/warst-h5/pages/waitHandle/approvalDetail/fmInfo.vue

<template>
	<u--form
		class="main-fm-info"
		labelWidth="auto"
		labelPosition="left"
	>
		<!--不可新增fmItem-->
		<view class="def-box">
			<u-form-item
				:key="item.id"
				v-for="item in defList"
				:label="item.name"
				borderBottom
				:labelPosition="labelPosition(item)"
			>
				<text v-if="showTxt(item)">
					{{
						fmData[item.valueKey] || fmData[item.valueKey] === 0
							? fmData[item.valueKey]
							: '无'
					}}
				</text>
				<view
					v-else-if="item.type === typeKeys.textarea"
					class="w-100 mt-10"
					:class="{ 'text-field-bg': fmData[item.valueKey] }"
				>
					{{ fmData[item.valueKey] || '无' }}
				</view>
				<view
					v-else-if="item.type === typeKeys.checkbox"
					class="text-field-bg w-100"
				>
					{{ (fmData[item.valueKey] || []).join(',') }}
				</view>
				<view
					v-else-if="item.type === typeKeys.upload"
					class="w-100 mt-10"
				>
					<text
						v-if="
							!fmData[item.valueKey] ||
							fmData[item.valueKey].length === 0
						"
					>
						无
					</text>
					<c-upload
						disabled
						:accept="item.accept"
						v-model="fmData[item.valueKey]"
					></c-upload>
				</view>
			</u-form-item>
		</view>
		<!--可新增fmItem-->
		<view class="add-group"></view>
	</u--form>
</template>

<script>
import { typeKeys } from '@/pages/approval/types';

export default {
	name: 'fmInfo',
	props: {
		content: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			typeKeys,
		};
	},
	computed: {
		defList() {
			// 不可新增的
			return this.content.defList || {};
		},
		addList() {
			// 可新增（如：出差的，行程1，行程2）
			return this.content.addList || {};
		},
		fmData() {
			// 回显表单数据
			return this.content.fmData || {};
		},
	},
	watch: {
		content() {
			console.log(this.content);
		},
	},
	methods: {
		showTxt(item) {
			const {
				select,
				text,
				date,
				datetimerange,
				datetime,
				radio,
				number,
			} = this.typeKeys;
			return [
				select,
				text,
				date,
				datetimerange,
				datetime,
				radio,
				number,
			].includes(item.type);
		},
		labelPosition(item) {
			const { textarea, upload, checkbox } = this.typeKeys;
			return [textarea, upload, checkbox].includes(item.type)
				? 'top'
				: 'left';
		},
	},
};
</script>

<style scoped lang="scss">
.main-fm-info {
	margin-top: 20rpx;
	.def-box {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 6px;
	}
	.add-group {
		background-color: #fff;
		padding: 20 rpx;
		border-radius: 6px;
		margin-top: 20 rpx;
	}

	/deep/ .u-form-item__body {
		.u-form-item__body__left__content__label {
			font-size: 12px;
		}
		.u-form-item__body__right__content__slot {
			font-size: 12px;
			display: flex;
			justify-content: flex-end;
			color: #8c93a3;

			.text-field-bg {
				background-color: #f8f8f8;
				border-radius: 3px;
				padding: 20rpx;
			}
		}
	}
}
</style>