|
@@ -0,0 +1,151 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="main_box2">
|
|
|
|
+ <div class="bread">
|
|
|
|
+ <div class="bread_left">
|
|
|
|
+ <div class="gray">您现在所在位置:</div>
|
|
|
|
+ <el-breadcrumb separator=">>">
|
|
|
|
+ <el-breadcrumb-item :to="{ path: '/home' }"><span class="gray">首页</span></el-breadcrumb-item>
|
|
|
|
+ <el-breadcrumb-item :to="{ path: '/zxsq' }"><span class="gray">个人申报</span></el-breadcrumb-item>
|
|
|
|
+ <el-breadcrumb-item :to="{ path: '/rzyljgsq' }"><span class="gray">入住养老机构申请</span></el-breadcrumb-item>
|
|
|
|
+ <el-breadcrumb-item><span class="red">申请资料填写</span></el-breadcrumb-item>
|
|
|
|
+ </el-breadcrumb>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="center_box">
|
|
|
|
+ <el-form ref="formRef" class="applyForm" model="form" :rules="rules" label-width="165px" size="large" status-icon>
|
|
|
|
+ <el-form-item label="入住老年人姓名" prop="name">
|
|
|
|
+ <el-input v-model="form.name" placeholder="请输入入住老年人姓名" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="入住老年人身份证号码" prop="idNumber">
|
|
|
|
+ <el-input v-model="form.idNumber" placeholder="请输入入住老年人身份证号码" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="填写人手机号码" prop="phoneNumber">
|
|
|
|
+ <el-input v-model="form.phoneNumber" placeholder="请输入填写人手机号码" clearable></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="养老机构选择" prop="organization">
|
|
|
|
+ <el-input class="yljg-ipt" v-model="form.organization" placeholder="请选择养老机构" clearable></el-input>
|
|
|
|
+ <el-button type="danger">选 择</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="">
|
|
|
|
+ <el-button class="submitBtn" type="danger" @click="onSubmit(formRef)">提 交</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 选择养老机构弹出框 -->
|
|
|
|
+ <el-dialog v-model="showOrg" append-to-body></el-dialog>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
|
+// import type { FormInstance, FormRules } from 'element-plus'
|
|
|
|
+
|
|
|
|
+const showOrg = ref(false)
|
|
|
|
+const formRef = ref()
|
|
|
|
+// 表单数据
|
|
|
|
+const form = reactive({
|
|
|
|
+ name: '',
|
|
|
|
+ idNumber: '',
|
|
|
|
+ phoneNumber: '',
|
|
|
|
+ organization: '',
|
|
|
|
+})
|
|
|
|
+// 表单校验规则
|
|
|
|
+const rules = reactive({
|
|
|
|
+ name: [
|
|
|
|
+ { required: true, message: '请输入老人姓名', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+ idNumber: [
|
|
|
|
+ { required: true, message: '请输入老人身份证号码', trigger: 'blur' },
|
|
|
|
+ { max: 18, message: '身份证号码不能超过18位', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+ phoneNumber: [
|
|
|
|
+ { required: true, message: '请输入填报人手机号码', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+ organization: [
|
|
|
|
+ { required: true, message: '请选择机构', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+async function onSubmit(formEl) {
|
|
|
|
+ if (!formEl) return
|
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
|
+ console.log(valid);
|
|
|
|
+ if (valid) {
|
|
|
|
+ console.log('submit!')
|
|
|
|
+ } else {
|
|
|
|
+ console.log('error submit!', fields)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.main_box2 {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border: 1px solid #dedede;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.bread {
|
|
|
|
+ height: 58px;
|
|
|
|
+ border-bottom: 1px solid #dedede;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.bread_left {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-left: 34px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.gray {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #666666;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+:deep(.el-breadcrumb) {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: unset;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.red {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #b80100;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.bread_right {
|
|
|
|
+ margin-right: 12px;
|
|
|
|
+ display: flex;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.center_box {
|
|
|
|
+ min-height: 457px;
|
|
|
|
+ margin: 25px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background-image: url('@/assets/images/zxsq/background.png');
|
|
|
|
+ background-size: 100%;
|
|
|
|
+
|
|
|
|
+ .applyForm {
|
|
|
|
+ width: 43%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+
|
|
|
|
+ :deep(.el-cascader--large) {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .yljg-ipt {
|
|
|
|
+ width: 72%;
|
|
|
|
+ margin-right: 6%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .submitBtn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|