jfcloud-coldchain/snowy-admin-web/src/views/wx/index.vue

<template>
	<div class="wx">
		<div class="head">
			<img class="logo" src="/src/assets/images/login/logo.png" />
			<span class="title">冷链驿站</span>
		</div>

		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="请输入您的真实姓名" name="name">
				<a-input v-model:value.trim="formData.name" placeholder="请输入真实姓名" allow-clear />
			</a-form-item>

			<a-form-item label="请输入您要绑定的组织" name="createOrg">
				<a-select
					v-model:value.trim="formData.createOrg"
					show-search
					allowClear
					placeholder="请输入您要绑定的组织"
					style="width: 100%"
					:default-active-first-option="false"
					:show-arrow="false"
					:not-found-content="null"
					:filter-option="false"
					:options="options"
					@search="handleSearch"
					:field-names="{ label: 'name', value: 'id' }"
				/>
			</a-form-item>
		</a-form>

		<div class="btn">
			<a-button type="primary" @click="onSubmit" :loading="loading" :disabled="!formData.createOrg || !formData.name"
				>确定</a-button
			>
		</div>
	</div>
</template>

<script setup>
	import { useRoute } from 'vue-router'
	import { cloneDeep } from 'lodash-es'
	import router from '@/router'
	import { message } from 'ant-design-vue'
	import { required } from '@/utils/formRules'

	import alarmUserApi from '@/api/coldchain/alarmUserApi'

	const formData = ref({}) // 表单数据
	const formRef = ref()
	const Route = useRoute()

	// 默认要校验的
	const formRules = {
		name: [required('请输入您的真实姓名')],
		createOrg: [required('请输入您要绑定的组织')]
	}

	const loading = ref(false) //按钮加载

	const options = ref([]) //所有的组织数据

	const queryObj = ref({}) //携带的参数

	onMounted(() => {
		if (Route.query.id) {
			queryObj.value = Route.query
			console.log(queryObj.value, 'x')
		}
	})

	const handleSearch = (val) => {
		if (val) {
			alarmUserApi
				.getOrgByName({ orgName: val })
				.then((res) => {
					if (res) {
						const data = [{ ...res }]
						options.value = data
					} else {
						options.value = []
						message.error('暂无您需要绑定的组织')
					}
				})
				.catch((err) => {
					options.value = []
					message.error('暂无您需要绑定的组织')
				})
		}
	}
	// 确定
	const onSubmit = () => {
		if (queryObj.value && queryObj.value.id) {
			loading.value = true

			alarmUserApi
				.alarmUserSubmitForm({ ...formData.value, id: queryObj.value.id }, true)
				.then((res) => {
					loading.value = false

					router.push({
						path: '/success',
						query: {
							data: '授权成功'
						}
					})
				})
				.catch((err) => {
					loading.value = false
				})
		} else {
			loading.value = false
			message.error('当前无权授权')
		}
	}
</script>

<style lang="less" scoped>
	.wx {
		height: 100vh;
		padding: 0 30px;
		background-image: url('/src/assets/images/login/logo_background.png');
		background-size: cover;
		background-position: center;

		.head {
			padding-top: 35%;
			padding-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			.logo {
				width: 35px;
				height: 30px;
			}
			.title {
				font-size: 28px;
				font-weight: bold;
				padding: 30px 10px;
				letter-spacing: 10px;
				color: #303133;
			}
		}

		.btn {
			margin: 35px 0;
			text-align: center;
		}
	}
</style>