devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

记录一个vue编辑的移动端页面

作者：我家小花儿 | 2024-03-15 21:58:10

赞

踩

记录一个vue编辑的移动端页面

  1. <template>
  2.   <div class="wrap">
  3.     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
  4.  
  5.       <el-form-item label="班级" prop="classId" required style="width: 100%;">
  6.         <template v-if="oroles == 'teacher_director'">
  7.           <el-select v-model="queryParams.classId" placeholder="请选择班级" @change="seletChange">
  8.             <el-option v-for="item in classList" :key="item.deptId" :label="item.deptName" :value="item.deptId">
  9.             </el-option>
  10.           </el-select>
  11.         </template>
  12.         <template v-else>
  13.           <div>{{ classList[0] ? classList[0].deptName : '' }}</div>
  14.         </template>
  15.       </el-form-item> 
  16.  
  17.       <el-form-item label="选择学生" prop="student" required>
  18.         <el-button size="mini" @click="openStudent">点击选择</el-button>
  19.         <div class="checked-student" v-if="checkedStudent">
  20.           <!-- <el-image style="width: 60px; height: 60px; border-radius: 50%;" :src="checkedStudent.headUrl" fit="cover"></el-image> -->
  21.           <div class="student-mes">
  22.             <div class="d1">{{ checkedStudent.number }}号</div>
  23.             <!-- <div class="d2">{{ checkedStudent.name }}</div> -->
  24.           </div>
  25.         </div>
  26.       </el-form-item>
  27.  
  28.       <el-form-item label="性别" prop="sex">
  29.         <el-radio v-model="queryParams.sex" label="0">男</el-radio>
  30.         <el-radio v-model="queryParams.sex" label="1">女</el-radio>
  31.       </el-form-item>
  32.  
  33.       <el-form-item label="生日" prop="birthday">
  34.         <el-date-picker clearable v-model="queryParams.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择生日">
  35.         </el-date-picker>
  36.       </el-form-item>      
  37.                 
  38.       <el-form-item label="身高" prop="height">
  39.         <div class="input-wrap">
  40.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.height" placeholder="请输入身高" />
  41.           <div class="d1">(cm)</div>
  42.         </div>
  43.       </el-form-item>
  44.       <el-form-item label="体重" prop="weight">
  45.         <div class="input-wrap">
  46.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.weight" placeholder="请输入体重" />
  47.           <div class="d1">(kg)</div>
  48.         </div>    
  49.       </el-form-item>
  50.       
  51.       <el-form-item label="坐位体前屈" prop="flexibility">
  52.         <div class="input-wrap">
  53.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.flexibility" placeholder="请输入" />
  54.           <div class="d1">(cm)</div>
  55.         </div>          
  56.       </el-form-item>
  57.  
  58.       <el-form-item label="立定跳远" prop="downStrength">
  59.         <div class="input-wrap">
  60.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.downStrength" placeholder="请输入" />
  61.           <div class="d1">(cm)</div>
  62.         </div>        
  63.       </el-form-item>
  64.       <el-form-item :label="physicalVersion == '2' ? '握力' : '网球掷远'" prop="upStrength">
  65.         <div class="input-wrap">
  66.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.upStrength" placeholder="请输入" />
  67.           <div class="d1">{{ physicalVersion == '2' ? '(kg)' : '(m)' }}</div>
  68.         </div>          
  69.       </el-form-item>
  70.       
  71.       <el-form-item label="平衡木" prop="balance"> 
  72.         <div class="input-wrap">
  73.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.balance" placeholder="请输入" /> 
  74.           <div class="d1">(s)</div>
  75.         </div>         
  76.       </el-form-item>
  77.  
  78.       <el-form-item label="双脚连跳" prop="coordination"> 
  79.         <div class="input-wrap">
  80.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.coordination" placeholder="请输入" /> 
  81.           <div class="d1">(s)</div>
  82.         </div>        
  83.       </el-form-item>
  84.  
  85.       <el-form-item :label="physicalVersion == '2' ? '15米绕障碍跑' : '10米折返跑'" prop="sensitivity"> 
  86.         <div class="input-wrap">
  87.           <el-input type="number" oninput="if(value.length>5)value=value.slice(0,5)" v-model="queryParams.sensitivity" placeholder="请输入" /> 
  88.           <div class="d1">{{ physicalVersion == '2' ? '(s)' : '(s)' }}</div>
  89.         </div>         
  90.       </el-form-item>
  91.       
  92.       <el-form-item label=" " prop="" size="medium">
  93.         <div class="pop-footer">
  94.           <div class="b1" @click="prev">返回</div>
  95.           <div class="b2" @click="save">保存</div>
  96.         </div>
  97.       </el-form-item>   
  98.     </el-form>
  99.             
  100.     <div class="mask" v-if="open"></div>
  101.     <!-- 选择学生 -->
  102.     <div class="pop-box" v-if="open">
  103.       <div class="student-header">
  104.         <div class="d1">请选择学生</div>
  105.         <div class="close-wrap" @click="cancel">
  106.           <i class="el-icon-close"></i>
  107.         </div>
  108.       </div>
  109.       <div class="student-main">
  110.  
  111.         <div class="student-list" v-for="(item,index) in reportRecordDetailList" :key="item.id" @click="studentHandle(index)">          
  112.           <div class="img-wrap">
  113.             <img src="@/assets/images/complet.png" class="icon-complet" v-if="item.status == 1" />
  114.             <!-- <i class="el-icon-success" v-if="item.checked"></i> -->
  115.           </div>
  116.           <div class="student-mes" :class="{ active: item.checked }">
  117.             <div class="d1">{{ item.number }}号</div>
  118.           </div>
  119.         </div>        
  120.  
  121.       </div>
  122.     </div>
  123.  
  124.   </div>
  125. </template>
  126.  
  127. <script>
  128. import { listDeptAll,listReportRecordDetail, getReportRecordDetail, delReportRecordDetail, addReportRecordDetail, updateReportRecordDetail } from "@/api/school/reportRecordDetail";
  129. import { listDept } from "@/api/system/dept";
  130.  
  131. export default {
  132.   metaInfo() {
  133.     return {
  134.       title: this.PageTitle,
  135.       titleTemplate: null,//不加这个会有个默认的后缀
  136.       meta: [
  137.         {
  138.           name: "viewport",
  139.           content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no',
  140.         },
  141.       ],
  142.     };
  143.   },
  144.  
  145.   // metaInfo: {
  146.   //   //title: '详情页',
  147.   //   meta: [
  148.   //     { charset: 'utf-8' },
  149.   //     { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
  150.   //   ]
  151.   // },
  152.   name: "ReportRecordDetail",
  153.   data() {
  154.     return {
  155.       // 班级数据
  156.       classList: [],
  157.       queryParams: {
  158.         classId: null,        
  159.         recordId: null,//上级目录id
  160.         id: null,//学生列表里的id(修改则必填 新增的时候没有id)
  161.         sid: null,//选中的学生id
  162.         sex: null,//性别 2是未知 0男 1女
  163.         birthday: null,   
  164.         height: null,
  165.         weight: null,
  166.         flexibility: null,
  167.         downStrength: null,
  168.         upStrength: null,   
  169.  
  170.         balance: null,  
  171.         coordination: null,
  172.         sensitivity: null,
  173.       },
  174.       ouser: null,//用户信息
  175.       checkedStudent: null,//选中的学生信息    
  176.       reportRecordDetailList: [],// 体测数据，录入学生数据表格数据
  177.       oroles: null,//角色
  178.       studentIndex: null,
  179.       physicalVersion: null,//版本
  180.  
  181.       // 遮罩层
  182.       loading: true,
  183.       // 选中数组
  184.       ids: [],
  185.       // 非单个禁用
  186.       single: true,
  187.       // 非多个禁用
  188.       multiple: true,
  189.       // 显示搜索条件
  190.       // 总条数
  191.       total: 0,      
  192.       // 弹出层标题
  193.       title: "",
  194.       // 是否显示弹出层
  195.       open: false,
  196.       // 查询参数      
  197.       // 表单参数
  198.       form: {},    
  199.       name: null,
  200.       PageTitle: null, 
  201.       isclock: false, 
  202.     };
  203.   },
  204.   watch: {
  205.     selectedValue(newValue, oldValue) {
  206.       // 当selectedValue变化时，这个函数会被调用
  207.       // newValue是新选中的值，oldValue是之前的值
  208.       console.log('选中的值变化了', newValue, oldValue);
  209.       // 在这里可以执行其他逻辑
  210.     }
  211.   },
  212.   created() {    
  213.     this.ouser = this.$store.state.user;
  214.     this.reportRecordDetailList = [];//重置学生列表
  215.     this.queryParams.recordId = this.$route.params.id
  216.     this.physicalVersion = this.$route.params.physicalVersion
  217.     this.name = this.$route.params.name
  218.  
  219.     //如果用户直接访问这个页面 给它跳转到列表页
  220.     if(!this.queryParams.recordId){
  221.       this.$router.push({ path: '/reportRecord' })
  222.     }
  223.     //判断当前老师是不是混龄班级的老师teacher_director
  224.     this.oroles = this.ouser.roles[0]
  225.     if(this.oroles == 'teacher_director'){
  226.       this.getClassListAll();
  227.     }else{
  228.       this.getClassList();
  229.     }    
  230.   },
  231.   mounted() {    
  232.     this.PageTitle = this.name
  233.   },
  234.   methods: {
  235.     seletChange(val){
  236.       if(val){
  237.         this.checkedStudent = null
  238.         this.resetInput()
  239.       }
  240.     },
  241.     prev(){
  242.       this.$router.go(-1); // 返回上一页
  243.     },
  244.     /** 查询班级列表 */
  245.     getClassListAll() {
  246.       listDeptAll({ deptType: 3, parentId: this.ouser.schoolId, status :0 }).then(response => {
  247.         this.classList = response.data;
  248.       });
  249.     },
  250.     save(){
  251.       if(this.isclock) return
  252.       this.isclock = true
  253.       if(!this.checkedStudent){
  254.         this.$modal.msgError("请先选择学生");
  255.         this.isclock = true
  256.         return
  257.       }
  258.       this.queryParams.sid = this.checkedStudent.sid
  259.       if(this.checkedStudent.id){
  260.         this.queryParams.id = this.checkedStudent.id        
  261.       }else{
  262.         this.queryParams.id = null
  263.       }
  264.       //新增/编辑
  265.       addReportRecordDetail(this.queryParams).then(res => {
  266.         //this.$modal.msgSuccess("新增成功");
  267.         this.checkedStudent.id = res.data.id //ly-add
  268.         this.$modal.confirm(this.checkedStudent.number + '号学生数据保存成功，继续提交下一位同学？').then(() => {          
  269.           this.isclock = false
  270.           this.queryParams.id = null
  271.           this.queryParams.sid = null
  272.           this.resetInput()  
  273.           //studentIndex 学生下标 如果学生下标+1 有sid 那么就是有学生 如果没有sid 则最后一个学生了
  274.           //学生列表 this.reportRecordDetailList
  275.           let olist = this.reportRecordDetailList
  276.           if(olist[this.studentIndex + 1].sid){
  277.             this.checkedStudent = olist[this.studentIndex + 1]
  278.             if(olist[this.studentIndex + 1].id){
  279.               let slist = olist[this.studentIndex + 1]              
  280.               //有id代表编辑状态
  281.               this.fillValue(slist)              
  282.             }
  283.             this.studentIndex++            
  284.           }
  285.         }).catch(() => { 
  286.           this.isclock = false
  287.         });
  288.       }).catch(() => { 
  289.         this.isclock = false
  290.       });;        
  291.     },
  292.     studentHandle(idx){
  293.       this.studentIndex = idx; //给选中的下标赋值
  294.       let olist = this.reportRecordDetailList
  295.       this.reportRecordDetailList.forEach(item => {
  296.         item.checked = false; // 重置所有的checked状态为false
  297.       })
  298.       olist[idx].checked = true
  299.       this.reportRecordDetailList = olist
  300.       this.checkedStudent = olist[idx]
  301.       if(olist[idx].id){
  302.         //有id代表编辑状态
  303.         this.fillValue(olist[idx])
  304.       }else{
  305.         this.resetInput()
  306.       }      
  307.       this.open = false
  308.     },
  309.  
  310.     fillValue(list){
  311.       this.queryParams.sex = list.sex
  312.       this.queryParams.birthday = list.birthday
  313.       this.queryParams.height = list.height
  314.       this.queryParams.weight = list.weight
  315.       this.queryParams.flexibility = list.flexibility
  316.       this.queryParams.downStrength = list.downStrength
  317.       this.queryParams.upStrength = list.upStrength
  318.       this.queryParams.balance = list.balance 
  319.       this.queryParams.coordination = list.coordination
  320.       this.queryParams.sensitivity = list.sensitivity 
  321.     },
  322.  
  323.     resetInput(){
  324.       this.queryParams.sex = null
  325.       this.queryParams.birthday = null
  326.       this.queryParams.height = null
  327.       this.queryParams.weight = null
  328.       this.queryParams.flexibility = null
  329.       this.queryParams.downStrength = null
  330.       this.queryParams.upStrength = null  
  331.       this.queryParams.balance = null 
  332.       this.queryParams.coordination = null
  333.       this.queryParams.sensitivity = null 
  334.     },
  335.  
  336.     //打开学生列表
  337.     openStudent(){
  338.       if(!this.queryParams.classId){
  339.         this.$modal.msgError("请先选择班级");
  340.         return
  341.       }
  342.       this.getList()
  343.       this.open = true
  344.     },
  345.     /** 查询班级列表 */
  346.     getClassList() {
  347.       listDept({ deptType: 3, parentId: this.ouser.schoolId }).then(response => {
  348.         this.classList = response.data;
  349.         this.queryParams.classId = this.classList[0].deptId
  350.       });
  351.     },
  352.  
  353.     /** 查询体测数据，录入学生数据列表 */
  354.     getList() {
  355.       //如果班级id为空 则不请求接口      
  356.       this.loading = true;      
  357.       let params = {
  358.         classId: this.queryParams.classId,
  359.         recordId: this.queryParams.recordId
  360.       }
  361.       listReportRecordDetail(params).then(response => {
  362.         response.rows.forEach(item => {
  363.           item.checked = false; // 添加checked属性并赋值为false 作为判断是否选中的标识
  364.         });
  365.         this.reportRecordDetailList = response.rows
  366.         //如果已有选中的学生 给选中的学生加个选中状态
  367.         if(this.checkedStudent && this.checkedStudent.number){
  368.           let oindex = this.reportRecordDetailList.findIndex(item => item.number == this.checkedStudent.number)          
  369.           this.reportRecordDetailList[oindex].checked = true
  370.         }
  371.         this.total = response.total;
  372.         this.loading = false;
  373.       });
  374.     },
  375.     // 取消按钮
  376.     cancel() {
  377.       this.open = false;
  378.       //this.reset();
  379.     },
  380.     // 表单重置
  381.     reset() {
  382.       this.queryParams = {
  383.         id: null,
  384.         sid: null,
  385.         classId: null,
  386.         recordId: null,
  387.         sex: null,//性别 2是未知 0男 1女
  388.         birthday: null, 
  389.         height: null,
  390.         weight: null,
  391.         flexibility: null,
  392.         downStrength: null,
  393.         upStrength: null,
  394.       };
  395.       this.resetForm("queryParams");//queryForm / form
  396.     },
  397.  
  398.   }
  399. };
  400. </script>
  401. <style scoped>
  402. .close-wrap{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;}
  403. .close-wrap .el-icon-close{ color: #fff;}
  404. .student-list{ display: flex; flex-direction: column; align-items: center;}
  405. .img-wrap{ position: relative; width: 40px;}
  406. .img-wrap .el-icon-success{ position: absolute; top: -5px; right: -5px; color: #33a9ff;}
  407. .wrap /deep/ .el-scrollbar .el-scrollbar__bar {
  408.   opacity: 1 !important;
  409. }
  410. .wrap{ padding: 30px 15px 15px 15px;}
  411. .checked-student{ margin-top: 5px; display: flex; flex-direction: column;}
  412. .student-mes{ width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 12px; color: #33a9ff; border: 1px solid #33a9ff; border-radius: 50%;}
  413. .student-mes .d2{ margin-left: 5px; max-width: 50px;}
  414. .student-mes.active{ background: #33a9ff; color: #fff;}
  415. .mask{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background: rgba(0,0,0,0.3);}
  416. .pop-box{ position: fixed; top: 5%; left: 5%; z-index: 999; box-sizing: border-box; display: flex; flex-direction: column; width: 90%; height: 90%; background: #fff; border-radius: 10px;}
  417. .student-header{ padding-left: 15px; display: flex; justify-content: space-between; align-items: center; height: 40px; background: #33a9ff; font-size: 14px;
  418.    color: #fff; border-radius: 10px 10px 0 0;}
  419. .student-main{ align-content:flex-start; padding: 15px 0 10px 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px; flex: 1; overflow-y: scroll;}
  420. .student-img{ display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 50%;}
  421. .icon-complet{ position: absolute; top: -5px; left: -5px; width: 20px;}
  422. .wrap /deep/ .el-form-item__label{ font-weight: 400;}
  423. </style>
  424. <style>
  425. @media (max-width: 720px) {
  426.   .el-message-box {
  427.     width: 350px !important;
  428.   }
  429. }
  430.  
  431. .pop-footer{ display: flex; justify-content: center; align-items: center; height: 60px;}
  432. .pop-footer .b1,.pop-footer .b2{ width: 80px; height: 36px; text-align: center; line-height: 36px; font-size: 14px; color: #fff; border-radius: 18px;}
  433. .pop-footer .b1{ background: #ffa400;}
  434. .pop-footer .b2{ margin-left: 30px; background: #33a9ff;}
  435. .input-wrap{ position: relative;}
  436. .input-wrap .d1{ position: absolute; top: 0; right: 10px; line-height: 32px; font-size: 12px; color: #33a9ff;}
  437. </style>

起作用的是

  1. main.js
  2. // 头部标签组件 在PC端里使用移动端布局的方法
  3. import VueMeta from 'vue-meta'
  4. Vue.use(VueMeta)
  5.  
  6. 页面里：
  7. metaInfo() {
  8.     return {
  9.       title: this.PageTitle,
  10.       titleTemplate: null,//不加这个会有个默认的后缀
  11.       meta: [
  12.         {
  13.           name: "viewport",
  14.           content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no',
  15.         },
  16.       ],
  17.     };
  18.   },
  19.  
  20.  
  21. @media (max-width: 720px) {
  22.   .el-message-box {
  23.     width: 350px !important;
  24.   }
  25. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/244742
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号