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

<template>
	<c-modal
		@cancel="handleCancel"
		@confirm="confirm"
		title="请填写撤销原因"
		:show="showRevoke"
	>
		<view>
			<view class="header-tip"
				>撤销将按照原请假流程再次审批，通过后撤销原请假</view
			>
			<u--form
				labelPosition="top"
				:model="fmData"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item prop="reason">
					<c-textarea
						v-model="fmData.reason"
						placeholder="请填写撤销原因"
					></c-textarea>
				</u-form-item>
			</u--form>
		</view>
	</c-modal>
</template>

<script>
import { revoke } from '@/api/approval';

export default {
	name: 'revokeFm',
	props: {
		showRevoke: Boolean,
		id: Number,
	},
	data() {
		return {
			fmData: {
				reason: '',
			},
			rules: {
				reason: {
					type: 'string',
					required: true,
					message: '请填写撤销原因',
					trigger: ['blur', 'change'],
				},
			},
		};
	},
	methods: {
		handleCancel() {
			this.$refs.uForm.resetFields();
			this.$emit('update:showRevoke', false);
		},
		async confirm() {
			await this.$refs.uForm.validate();
			try {
				uni.$c.loading();
				await revoke({ id: this.id, reason: this.fmData.reason });
				uni.$c.toast('撤销成功');
				uni.hideLoading();
				this.handleCancel();
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.header-tip {
	font-size: 13px;
	color: $u-tips-color;
}
</style>