|
|
@@ -1,19 +1,32 @@
|
|
|
<template>
|
|
|
<div class="wx">
|
|
|
- <div class="title">请选择您要绑定的组织</div>
|
|
|
+ <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="formData.name" placeholder="请输入真实姓名" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
|
|
|
- <a-select
|
|
|
- ref="select"
|
|
|
- v-model:value="orgId"
|
|
|
- :options="options"
|
|
|
- allowClear
|
|
|
- style="width: 200px"
|
|
|
- placeholder="请选择您要绑定的组织"
|
|
|
- :field-names="{ label: 'name', value: 'id' }"
|
|
|
- />
|
|
|
+ <a-form-item label="请选择您要绑定的组织" name="orgId">
|
|
|
+ <a-select
|
|
|
+ ref="select"
|
|
|
+ v-model:value="formData.orgId"
|
|
|
+ :options="options"
|
|
|
+ allowClear
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请选择您要绑定的组织"
|
|
|
+ :field-names="{ label: 'name', value: 'id' }"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
|
|
|
<div class="btn">
|
|
|
- <a-button type="primary" @click="onSubmit" :disabled="!orgId" :loading="loading">确定</a-button>
|
|
|
+ <a-button type="primary" @click="onSubmit" :disabled="!formData.orgId || !formData.name" :loading="loading"
|
|
|
+ >确定</a-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -22,14 +35,24 @@
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import router from '@/router'
|
|
|
import { message } from 'ant-design-vue'
|
|
|
+ import { required } from '@/utils/formRules'
|
|
|
import orgApi from '@/api/sys/orgApi.js'
|
|
|
import alarmUserApi from '@/api/coldchain/alarmUserApi'
|
|
|
|
|
|
+ const formData = ref({}) // 表单数据
|
|
|
+ const formRef = ref()
|
|
|
+ const Route = useRoute()
|
|
|
+
|
|
|
+ // 默认要校验的
|
|
|
+ const formRules = {
|
|
|
+ name: [required('请输入您的真实姓名')],
|
|
|
+ orgId: [required('请选择您要绑定的组织')]
|
|
|
+ }
|
|
|
+
|
|
|
const orgId = ref() //选中的机构
|
|
|
const options = ref([]) //机构数据
|
|
|
const loading = ref(false) //按钮加载
|
|
|
const queryObj = ref({}) //携带的参数
|
|
|
- const Route = useRoute()
|
|
|
|
|
|
onMounted(() => {
|
|
|
getOrg()
|
|
|
@@ -73,18 +96,34 @@
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.wx {
|
|
|
- height: 400px;
|
|
|
- text-align: center;
|
|
|
- padding-top: 45%;
|
|
|
+ height: 100vh;
|
|
|
+ padding: 0 30px;
|
|
|
+ background-image: url('/src/assets/images/login/logo_background.png'); /* 背景图 */
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 13px;
|
|
|
- margin: 20px 0;
|
|
|
- color: #303133;
|
|
|
+ .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: 20px 0;
|
|
|
+ margin: 35px 0;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
like