Merge branch 'NanMing2' of sckj/mz-cloud into master

ruoyi-web/src/router/index.js

@@ -1,4 +1,4 @@
-import {createRouter, createWebHistory} from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
@@ -52,7 +52,7 @@ const router = createRouter({
           path: 'zxsq',
           component: () => import('../views/zxsq/index.vue'),
           name: 'zxsq',
-          meta: { title: '在线申请' }
+          meta: { title: '个人申报' }
         },
         {
           path: 'slhgzsq',
@@ -108,6 +108,12 @@ const router = createRouter({
           name: 'rzyljgsq',
           meta: { title: '入住养老机构申请' }
         },
+        {
+          path: 'rzyljgsq/sqzltx',
+          component: () => import('../views/rzyljgsq/sqzltx/index.vue'),
+          name: 'sqzltx',
+          meta: { title: '填写申请资料' }
+        },
         {
           path: 'tpxwDetails/:id',
           component: () => import('../views/tpxwDetails/index.vue'),

ruoyi-web/src/views/rzyljgsq/index.vue

@@ -9,6 +9,9 @@
           <el-breadcrumb-item><span class="red">入住养老机构申请</span></el-breadcrumb-item>
         </el-breadcrumb>
       </div>
+      <div class="bread_right">
+        <el-button class="apply" type="danger" @click="apply">立即申请</el-button>
+      </div>
     </div>
     <div class="center_box">
       <p>入住养老机构申请</p>
@@ -73,12 +76,15 @@
 
 <script setup>
 import {ref} from 'vue'
+import {useRouter} from 'vue-router'
 
+let router = useRouter()
 const handleClick = () => {}
 const activeName = ref('1')
 const tabActive = ref('first')
 const src = new URL('../../assets/images/zxsq/waitingStepsSmall.00f899e2.png', import.meta.url).href
 const srcList = ref([new URL('../../assets/images/zxsq/waitingStepsSmall.00f899e2.png', import.meta.url).href])
+const apply = () => {router.push('rzyljgsq/sqzltx')}
 </script>
 
 <style scoped>

ruoyi-web/src/views/rzyljgsq/sqzltx/index.vue

@@ -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>