hitap-chat/pages/approve/approve-popup.vue

<template>
	<u-popup :show="show" @close="handleClose">
		<view class="popup-content">
			<view class="custom-pop-head">
				<view class="left" @click="handleClose">取消</view>
				<view class="title">审批意见</view>
				<view class="right" @click="handleSubmit">确认</view>
			</view>
			<view class="custom-pop-body">
				<view class="form-item">
					<view class="form-item-label">
						审批结果
					</view>
					<u-radio-group v-model="formModel.approvalStatus" placement="row" @change="handleChange">
						<u-radio v-for="(item, index) in radioList" :customStyle="{marginRight: '20px'}" :key="index"
							:label="item.label" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						审批意见
					</view>
					<u--textarea v-model="formModel.reason" placeholder="请输入审批意见"></u--textarea>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'approve-popup',
		data() {
			return {
				show: false,
				formModel: {
					approvalStatus: 1,
					reason: ''
				},
				radioList: [{
						name: 1,
						label: '审批通过'
					},
					{
						name: 0,
						label: '审批驳回'
					},
				]
			}
		},
		methods: {
			open() {
				this.show = true
				this.formModel.reason = '同意'
			},
			handleChange(event) {
				if (event === 0) {
					this.formModel.reason = ''
				} else {
					this.formModel.reason = '同意'
				}
			},
			handleClose() {
				this.formModel.approvalStatus = 1
				this.formModel.reason = ''
				this.show = false
			},
			handleSubmit() {
				if (this.formModel.reason) {
					this.$emit('approive-submit', this.formModel)
					this.handleClose()
				} else {
					this.$.toast('请输入审批意见')
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-content {
		.custom-pop-head {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e6e6e6;
			margin-bottom: 20rpx;

			.left {
				color: #666666;
			}

			.title {
				font-size: 16px;
			}

			.right {
				color: #2663bf;
			}
		}

		.custom-pop-body {
			padding: 12px;
		}

		.form-item {
			margin-bottom: 12px;
		}

		.form-item-label {
			margin-bottom: 8px;
		}
	}
</style>