考级系统(1.2)(页面, main.js)

于 2022-05-23 00:43:03 发布
阅读量87 收藏
点赞数
分类专栏： 小王的 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_giegie/article/details/124919428
版权

view

.listgrade.vue
<template>
  <div class="lwrap">
    <com-header title="考级审批记录"></com-header>
    <!-- 顶部input -->
    <div class="ipt flex">
      <span>考生名称</span>
      <el-input
        placeholder="名称"
        v-model="stuName"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>性别</span>
      <el-input
        placeholder="性别"
        v-model="stuSex"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>ID</span>
      <el-input placeholder="ID" v-model="stuID" clearable style="width: 10%">
      </el-input>
      <span>证件号码</span>
      <el-input
        placeholder="证件号码"
        v-model="stuNum"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>报考类型</span>
      <el-input
        placeholder="报考类型"
        v-model="stuType"
        clearable
        style="width: 10%"
      >
      </el-input>
      <el-button type="info">查询</el-button>
      <el-button type="info">重置</el-button>
    </div>

    <!-- 考生 -->
    <com-lable
      :arrlist="stu1"
      :stuData="stu2"
      :stuLength="stuLength"
      width="130px"
    >

      <template v-slot:btn>
        <el-table-column prop="check" label="操作" show-overflow-tooltip>
          <el-button size="mini" style="color: #02a7f0" @click="btn1">查看</el-button>
        </el-table-column>
      </template>
    </com-lable>
  </div>
</template>

<script>
import ComHeader from 'c/ComHeader'
import ComLable from 'c/ComLable.vue'
import { stuGradeApi } from '@/api/queryList'
export default {
  data () {
    return {
      // 顶上input
      stuName: '',
      stuSex: '',
      stuID: '',
      stuNum: '',
      stuType: '',
      // 表头
      stu1: [],
      // 内容
      stu2: [],
      // 数据长度
      stuLength: null
    }
  },
  components: {
    ComHeader: ComHeader,
    ComLable: ComLable
  },
  created () {
    this.stuGrade()
  },
  methods: {
    async stuGrade () {
      var res = await stuGradeApi()
      this.stu1 = res.data.data.gra1
      this.stu2 = res.data.data.gra2.sturesList
      this.stuLength = res.data.data.gra2.sturesList.length
      console.log(this.stu1 , this.stu2 , this.stuLength);
    },
    btn1(){
      this.$router.push('/home/addgrade')
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ipt {
  box-sizing: border-box;
  border-bottom: 1px solid black;
  padding: 0px 10px;
  padding-bottom: 20px;
}
</style>


//  listKaodian . vue
<template>
  <div class="">
    <com-header title="考点管理"></com-header>
    <div class="ipt flex">
      <span>考点简称</span>
      <el-input
        placeholder="名称"
        v-model="placeName"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>联系人</span>
      <el-input
        placeholder="输入联系人"
        v-model="placenumber"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>考点状态</span>
      <el-input
        placeholder="状态"
        v-model="placetype"
        clearable
        style="width: 10%"
      >
      </el-input>

      <el-button type="info">批量通过</el-button>
      <el-button type="info">导出</el-button>
      <el-button type="info">新增考点</el-button>
    </div>

    <com-lable
      :arrlist="stu1"
      :stuData="stu2"
      :stuLength="stuLength"
      width="100px"
    >
      <template v-slot:quanxuan>
        <el-table-column type="selection" width="50" label="全选">
        </el-table-column>
      </template>

      <template v-slot:btn>
        <el-table-column class="flex" prop="check" label="操作">
          <el-button size="mini" style="color: #02a7f0">查看</el-button>
          <el-button size="mini" style="color: #02a7f0">编辑</el-button>
          <el-button size="mini" style="color: #02a7f0">删除</el-button>
          <el-button size="mini" style="color: #02a7f0">审核</el-button>
        </el-table-column>
      </template>
    </com-lable>
  </div>
</template>

<script>
import ComHeader from 'c/ComHeader'
import ComLable from 'c/ComLable.vue'
import { kaoDianApi } from '@/api/queryList'
export default {
  data () {
    return {
      // 顶上input
      placeName: '',
      placenumber: '',
      placetype: '',
      // 表头
      stu1: [],
      // 内容
      stu2: [],
      // 数据长度
      stuLength: null
    }
  },
  components: {
    ComHeader: ComHeader,
    ComLable: ComLable
  },
  created () {
    this.appRove()
  },
  methods: {
    async appRove () {
      var res = await kaoDianApi()
      this.stu1 = res.data.data.stu1
      this.stu2 = res.data.data.stu2.levelList
      this.stuLength = res.data.data.stu2.levelList.length
      console.log(res)
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ipt {
  box-sizing: border-box;
  border-bottom: 1px solid black;
  padding: 0px 10px;
  padding-bottom: 20px;
}
</style>

学生管理:
stuAdmin > stuAdd.vue

<template>
  <div>
    <com-header title="考生信息管理" style="color: orange"></com-header>

    <el-tabs type="border-card" class="eltabs">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 基本信息</span>
        <!-- 考生信息 -- 基本信息 -->
        <stu-text></stu-text>
      </el-tab-pane>
      <el-tab-pane label="消息中心">
        <com-lable
          style="height: 65vh"
          :arrlist="stu1"
          :stuData="stu2"
          :stuLength="stuLength"
          width="130px"
        ></com-lable>
      </el-tab-pane>
      <!-- 证书信息 -->
      <el-tab-pane label="证书信息">
        <com-lable
          style="height: 65vh"
          :arrlist="stu11"
          :stuData="stu22"
          :stuLength="stuLength2"
          width="130px"
        >
          <template v-slot:btn>
            <el-table-column prop="check" label="操作" show-overflow-tooltip>
              <el-button size="mini" style="color: #02a7f0">查看</el-button>
            </el-table-column>
          </template>
        </com-lable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ComHeader from 'c/ComHeader'
import ComLable from 'c/ComLable.vue'
// 导入基本信息组件
import StuText from 'c/stu/StuText.vue'
// 发送请求
import { stuApplyApi, stuApplyApi2 } from '@/api/queryList'
export default {
  created () {
    this.stuApply()
    this.stuApply2()
  },
  components: {
    ComHeader: ComHeader,
    ComLable: ComLable,
    StuText: StuText
  },
  methods: {
    // 发送网络请求
    async stuApply () {
      var res = await stuApplyApi()
      console.log(res)
      this.stu1 = res.data.data.stu1
      this.stu2 = res.data.data.stu2.sturesList
      this.stuLength = res.data.data.stu2.sturesList.length
    },
    async stuApply2 () {
      var res = await stuApplyApi2()
      this.stu11 = res.data.data.stu1
      this.stu22 = res.data.data.stu2.sturesList
      this.stuLength2 = res.data.data.stu2.sturesList.length
      console.log(this.stu22, this.stu11)
    }
  },
  data () {
    return {
      stu1: [],
      stu2: [],
      stuLength: null,
      stu11: [],
      stu22: [],
      stuLength2: null
    }
  }
}
</script>

<style scoped>
.eltabs {
  width: 78vw;
  height: 85%;
  margin-left: 5%;
}
</style>

// stuAdmin.vue

<template>
  <div>
    <com-header title="考生信息管理"></com-header>
    <!-- 顶部input -->
    <div class="ipt flex">
      <span>考生名称</span>
      <el-input
        placeholder="名称"
        v-model="stuName"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>性别</span>
      <el-input
        placeholder="性别"
        v-model="stuSex"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>ID</span>
      <el-input placeholder="ID" v-model="stuID" clearable style="width: 10%">
      </el-input>
      <span>证件号码</span>
      <el-input
        placeholder="证件号码"
        v-model="stuNum"
        clearable
        style="width: 10%"
      >
      </el-input>
      <span>报考类型</span>
      <el-input
        placeholder="报考类型"
        v-model="stuType"
        clearable
        style="width: 10%"
      >
      </el-input>
      <el-button type="info">查询</el-button>
      <el-button type="info">重置</el-button>
    </div>

    <!-- 考生 -->
    <com-lable :arrlist="arrlist" :stuData="stuData" :stuLength="stuLength" width="101px">
      <template v-slot:quanxuan>
        <el-table-column type="selection" width="50" label="全选">
        </el-table-column>
      </template>

      <template v-slot:btn>
        <el-table-column prop="check" label="操作" show-overflow-tooltip>
          <el-button size="mini" style="color: #02a7f0">查看</el-button>
          <el-button size="mini" style="color: #02a7f0">編輯</el-button>
          <el-button size="mini" style="color: #02a7f0">删除</el-button>
          <el-button size="mini" style="color: #02a7f0">审核</el-button>
        </el-table-column>
      </template>
    </com-lable>
  </div>
</template>

<script>
import ComHeader from 'c/ComHeader'
import ComLable from 'c/ComLable.vue'
import { stuLableApi } from '@/api/queryList'
export default {
  data () {
    return {
      stuName: '',
      stuSex: '',
      stuID: '',
      stuNum: '',
      stuType: '',
      // 内容
      stuData: [],
      // 表头
      arrlist: [],
      // 数据长度
      stuLength: null
    }
  },
  components: {
    ComHeader: ComHeader,
    ComLable: ComLable
  },
  created () {
    this.stuLable()
  },
  methods: {
    async stuLable () {
      var res = await stuLableApi()
      this.stuData = res.data.data.stuLable.stuInfoList
      this.arrlist = res.data.data.headerData
      // 数据长度
      this.stuLength = res.data.data.stuLable.stuInfoList.length
      console.log(this.stuLength)
      console.log(this.arrlist)
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ipt {
  box-sizing: border-box;
  border-bottom: 1px solid black;
  padding: 0px 10px;
  padding-bottom: 20px;
}
</style>

登录界面的编写 login.vue

<template>
  <div class="wrap">
    <div class="login">
      <p>承办单位登录入口</p>
      <div class="flex column" style="height: 80%">
        <el-input placeholder="请输入账号" v-model="user">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
        <el-input placeholder="请输入密码" v-model="pass">
          <i slot="prefix" class="el-input__icon el-icon-view"></i>
        </el-input>
        <div class="login1 flex">
          <el-input placeholder="请输入验证码" v-model="code" class="yanzheng">
            <i slot="prefix" class="el-input__icon el-icon-circle-check"></i>
          </el-input>
          <img :src="hurl" alt="" />
        </div>
        <!-- `checked` 为 true 或 false -->
        <div>
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </div>
        <el-button type="primary" class="btn" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 网络请求
import { codeImg, loginApi } from '@/api/queryList'
// vuex
import { mapState , mapMutations } from 'vuex'
export default {
  created () {
    this.codeImg()
  },
  data () {
    return {
      user: '',
      pass: '',
      code: '',
      checked: true,
      hurl: ''
    }
  },
  methods: {
    // 请求验证码
    async codeImg () {
      var res = await codeImg()
      this.hurl = res.data.data.userInfo.hurl
      // this.url = res.data
      // console.log(img.data.userInfo.hurl);
    },
    // 登录
    async login () {
      // 发送请求
      var res = await loginApi(this.user, this.pass, this.code)
      console.log(res)
      if (res.data.status == 200) {
        this.$router.push('/home')
        // 放入vuex
        this.set_isLogin('true');
        this.set_user(res.data.data.userInfo.user)
      } else {
        alert(res.msg)
      }
    },
    ...mapMutations(['set_isLogin' , 'set_user']),
  },
  computed:{
    // 放入vuex
    ...mapState(['isLogin' , 'true']),
  }
}
</script>

<style scoped>
.wrap {
  height: 100vh;
  background: #1e9eff;
  overflow: hidden;
}
.login {
  width: 300px;
  height: 300px;
  padding: 20px 10px;
  background: #fff;
  border: 1px solid black;
  border-radius: 10px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.login p {
  font-size: 20px;
  white-space: nowrap;
  text-transform: none;
  font-weight: 700;
  font-style: normal;
  color: #5098c0;
  text-align: center;
}
.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.column {
  flex-direction: column;
}
.login1 img {
  padding-left: 15px;
  width: 115px;
  height: 35px;
}
.btn {
  width: 80%;
}
</style>

main.js 最重要的配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import directives from '@/directives' //只引入注册自定义指令
import filters from '@/filters'       //只引入注册过滤器
import Mock from '@/mock'
import toor from '@/lib/toor'
// elemtUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 去掉body的margin
import '@/assets/css/comm.css'
// 引入vant2 接口库
import { Button } from 'vant';
import { Area } from 'vant';
//引入将vant2适配pc端
import '@vant/touch-emulator';
// earch
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts



Vue.use(Area);
Vue.use(Button);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
Mr_giegie
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值