【无标题】

闪电安爵

于 2023-04-23 18:18:39 发布

阅读量88

点赞数

文章标签： vue.js javascript java

本文链接：https://blog.csdn.net/qq_67799217/article/details/130327600

版权

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from "@/components/login/Login.vue"
import Index from "@/components/index/Index.vue"
import InputList from "@/components/input/InputList.vue"
import Main from "@/components/main/Main";
import InputAdd from "@/components/input/InputAdd";
import InputUpdate from "@/components/input/InputUpdate";
import InputBackList from "@/components/inputback/InputBackList";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path:'/sys',
      name:Index,
      component:Index,
      redirect:'/sys/main',
      children:[
              {
                path:'input/in',
                name:'Inputinfo',
                component:InputList
              },
              {
                path:'main',
                name: 'main',
                component: Main
              },
              {
                path:'input/add',
                name: 'inputadd',
                component:InputAdd
              },
              {
                path:'input/update/:inputId',
                name:'inputupdate',
                component:InputUpdate
              },
              {
                path:'input/back',
                name:'inputbackinfo',
                component:InputBackList
              }
            ]
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'
  /* 设置cookie,session跨域配置 */
 axios.defaults.withCredentials=true;
 /*设置全局请求URL前缀*/
 axios.defaults.baseURL = 'http://localhost:8088'
 /* 设置post请求体，当配置全局请求体后该配置需要注释*/
 // axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
 /* 设置全局axios写法 */
 Vue.prototype.$http = axios
 /* 设置post请求体*/
 axios.interceptors.request.use(
   config => {
     if (sessionStorage.getItem("token") != null) {
       config.headers["Authorization"] = sessionStorage.getItem("token");
     }
     config.headers["Content-Type"] = 'application/json;charset=utf-8';

     return config;
   },
   err => Promise.reject(err)
 )

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// 导航钩子
// to:要跳转至哪个路由  from:从哪个路由来  next:要放行的路由
router.beforeEach(function(to,from,next){
  var token=sessionStorage.getItem("token");
  if(token==null&&to.path!="/")
  {
    console.log("请先登录")
    next("/");
  }else
  {
    next();
  }
})

<template>
  <div class="loginbody">
    <div class="logindiv">
      <div class="logincontent">
      <el-container>
        <el-main>
          <el-col :span="8" :offset="8">
            <h1 class="logintitle">用户登录</h1>
            <el-form>
              <el-form-item>
                <el-input placeholder="用户名" v-model="username"
                style="width: 200px;margin-left: -30px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="密码" v-model="password" show-password
                          style="width: 200px;margin-left: -30px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="验证码" v-model="vcode"
                          style="width: 200px;margin-left: -30px"></el-input>
                <el-tooltip content="点击刷新" placement="right">
                  <!--              :表示v-bind，做属性绑定-->
                  <el-image :src="imageCode" fit="fill" @click="resetImage" ></el-image>
                </el-tooltip>

              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-main>
      </el-container>
  </div>
  </div>
  </div>
</template>

<script>
export default{
  name:"Login",
  data() {
    return{
      username:"",
      password:"",
      vcode:"",
      imageCode:"",
    }
  },
  methods:{
    resetImage(){
      this.getVcode();
    },
    login(){
      // post方法格式：post(url,params)
      var params={};
      params.username=this.username;
      params.password=this.password;
      params.vcode=this.vcode;
      // 将当前vue对象(this)保存至self，因为在下方的axios请求中时，其this表示的是axios对象而不是vue对象
      var self=this;
      // 使用axios向后台发送请求
      // JSON.stringify方法将params转换为json格式
      this.$http.post("/user/Login",JSON.stringify(params))
        .then(result=>{
          if (result.data.code==200){
            sessionStorage.setItem("nickname",result.data.data.nickname)
            sessionStorage.setItem("username",params.username)
            sessionStorage.setItem("token",result.data.data.token)
            sessionStorage.setItem("imageUrl",result.data.data.imageurl)
            self.$message.success("登录成功");
            // alert("登录成功！")
            self.$router.push('/sys')
          }else{
            // alert("登录失败！")
            self.$message.error(result.data.msg);
          }
        })
        .catch(()=>{
          self.$message.error("请求失败");
        })
    },
    getVcode(){
      var self =this;
      this.$http.get("/user/vcode")
        .then(res=>{
          var data = res.data
          if (data.code==200){
            self.imageCode = data.data.imageCode;
          }else {
            self.$message.error(data.msg);
          }
        })
        .catch(()=>{
          self.$message.error("请求失败");
        })
    }
  },
  //页面渲染完成后，自动调用的方法
  mounted:function () {
    this.getVcode();
  }
}
</script>

<style scoped>
.loginbody{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #7c96b6;

}
.logindiv{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 450px;
  height: 400px;
  background-color: #f5eded;
  border-radius: 5%;
}
.logincontent{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 25px;
  left: 25px;
}
.el-image{
  margin-left: 0;
}
.el-main{
  text-align: center;
}


</style>

index.vue

<template>
  <el-container class="index-container">

    <el-header>
      <index-header></index-header>
    </el-header>

    <el-container style="height: 500px">
      <el-aside width="200px">
        <index-aside></index-aside>
      </el-aside>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
  import IndexHeader from "@/components/index/IndexHeader.vue"
  import IndexAside from "@/components/index/IndexAside.vue"
  export default{
    name:'Index',
    components:{
      IndexHeader,
      IndexAside
    }
  }
</script>

<style scoped>
  .el-header{
      background-color: #258CF1;
    }

    .el-aside {
      background-color: #545c64;
    }

    .index-container{
      position: fixed;
      height: 100%;
      width: 100%;
    }

</style>

indexAside.vue

<template>
  <div >
    <!-- router  启用该模式时将会在激活导航时以index作为path进行路由跳转 -->
    <!-- default-active表示默认激活的路由 -->
    <el-menu
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" router>
          <el-submenu >
                <template slot="title" >
                  <i class="el-icon-s-home"></i>
                  <span @click="toMain">首页</span>
                </template>
              </el-submenu>
          <el-submenu :index="permMenuTree.permissionUrl" v-for="permMenuTree in permMenuTrees" :key="permMenuTree">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{permMenuTree.permissionName}}</span>
            </template>
            <el-menu-item-group v-for="child in permMenuTree.children" :key="child">
              <el-menu-item :index="child.permissionUrl">{{child.permissionName}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        permMenuTrees:[]
      }
    },
    methods:{
      getPermMenu(){
        var username=sessionStorage.getItem("username");
        var params={};
        params.username=username;
        var self=this;
        this.$http.get("/user/menu",{params:params})
        .then(result=>{
          var data=result.data;
          if(data.code==200)
          {
            self.permMenuTrees=data.data;
          }else
          {
            self.$message.error(data.msg);
          }
        })
        .catch(()=>{
          self.$message.error("菜单请求失败");
        })
      },
      toMain(){
            this.$router.push('/sys/main')
          }
    },
    mounted:function(){
      this.getPermMenu();
    }

  }
</script>

<style scoped>
.IndexAside{
  width: 200px;
}
</style>

indexHeader.vue

<template>
  <div class="index-header-container">
    <!-- 标题 -->
    <div>
      <span>仓库管理系统</span>
    </div>

    <!-- 用户信息 -->
    <div>
      <el-avatar :src="imageUrl"></el-avatar>
      <el-menu mode="horizontal" background-color="#258CF1" text-color="#fff">
        <el-submenu index="1">
          <template slot="title">{{nickname}}</template>
          <el-menu-item index="1-1" @click='logout()'>退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>


</template>

<script>
  export default{
    data(){
      return{
        imageUrl:sessionStorage.getItem("imageUrl"),
        nickname:sessionStorage.getItem("nickname")
      }
    },
    methods:{
      logout(){
        sessionStorage.clear();
        this.$router.push("/");
      }
    }
  }
</script>

<style scoped>
  .el-icon-arrow-down {
    font-size: 12px;
    }
  .index-header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .index-header-container>div{
    display: flex;
    align-items: center;
  }
  .index-header-container>div>span{
    color: white;
  }

</style>

<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="产品名称">
        <el-input  placeholder="产品名称" v-model="productname"></el-input>
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-select v-model="suppliername" placeholder="请选择">
          <el-option
            v-for="item in suppliers"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <span class="demonstration">入库时间</span>
          <el-date-picker
            style="width: 200px"
            v-model="startTime"
            type="date"
            placeholder="开始时间"
          >
          </el-date-picker>
          <el-date-picker
            style="width: 200px"
            v-model="endTime"
            type="date"
            placeholder="结束时间"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showAdd">录入</el-button>
      </el-form-item>
      <div style="margin-bottom: 20px;margin-left: 50px;">
        <el-button @click="batchDelete()" type="primary">批量删除</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="pagelist"
      border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="入库编号" style="margin-left: 60px">
              <span>{{ props.row.inputId}}</span>
            </el-form-item>
            <el-form-item label="供应商电话" style="margin-left: 60px">
              <span>{{ props.row.supplierPhone }}</span>
            </el-form-item>
            <el-form-item label="备注" style="margin-left: 60px">
              <span>{{ props.row.notes }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column  prop="productName" label="产品名称" >
      </el-table-column>
      <el-table-column prop="price" label="单价" >
      </el-table-column>
      <el-table-column prop="inputCount" label="入库数量" >
      </el-table-column>
      <el-table-column prop="unit" label="单位" >
      </el-table-column>
      <el-table-column prop="sumprice" label="金额" >
      </el-table-column>
      <el-table-column  prop="inputDate" label="入库时间" width="200px">
        <template slot-scope="scope">
          <span>{{ parseDate(scope.row.inputDate) }}</span>
          <br/>
          <span>{{ parseTime(scope.row.inputDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerName" label="采购员" >
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商名称" >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showUpdate(scope.row.inputId)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteInput(scope.row.inputId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Inputinfo",
  data(){
    return{
      inputlist:[],
      pagelist:[],
      pageNumber:1,
      pageSize:5,
      total:0,
      suppliers: [{
        value: '',
        label: ''
      }],
      productname:"",
      suppliername:'',
      startTime:'',
      endTime:'',
      multipleTable:'',
      centerDialogVisible:false,
      iuputback:{
        name:'',
      },
      backlist:[],
    }
  },
  methods:{
    toggleSelection(rows){
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDelete(multipleTable){
      var self = this;
      if (this.multipleSelection == '') {
          self.$notify({
              title: '温馨提示：',
              message: '您未选中公告，请重新操作！！！',
              type: 'warning'
          });
          return;
      }
      var checkArr = self.multipleSelection;  // multipleSelection存储了勾选到的数据
      var ids = [];
      checkArr.forEach(function (item) {
        // 添加所有需要删除数据的id到一个数组，post提交过去
          ids.push(item.inputId);
      })

      this.$confirm("确定要删除这几条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var self = this;
        var params = {};
        params.ids =ids;
        self.$http.post("/inputdocuments/batchDelete",JSON.stringify(ids))
          .then((res) => {
            var data = res.data;
            if (data.code == 200) {
              self.$message.success(data.msg);
              //表示跳转到哪个路由，0表示当前页面，-1表示后退，1表示前进
              self.$router.go(0);
            } else {
              self.$message.error(data.msg);
            }
          })
          .catch(() => {
            self.$message.error("请求失败");
          });
      });
    },
    getInputList(){
      var self=this;
      this.$http.get("/inputdocuments/list")
        .then(result=>{
          var data=result.data;
          if(data.code==200)
          {
            self.inputlist=data.list;
            self.total=data.total;
            for(var i=(this.pageNumber-1)*this.pageSize;i<(this.pageNumber-1)*this.pageSize+this.pageSize;i++)
            {
              if(i<this.total)
              {
                this.pagelist.push(this.inputlist[i])
              }else
              {
                break;
              }
            }
          }else{
            self.$message.error(data.msg);
          }
        })
        .catch(()=>{
          self.$message.error("用户列表请求失败")
        })
    },
    parseDate(time) {
      var date={
        y:time[0],
        M:time[1],
        d:time[2],
      };

      if (date.M < 10)
      {
        date.M="0"+date.M;
      }
      if (date.d < 10)
      {
        date.d="0"+date.d;
      }

      return date.y+"-"+date.M+"-"+date.d

    },
    parseTime(time) {
      var date={
        h:time[3],
        m:time[4],
        s:time[5]
      };

      if (date.h==null)
      {
        date.h="0"
      }
      if (date.m==null)
      {
        date.m="0"
      }
      if (date.s==null)
      {
        date.s="0"
      }


      if (date.h < 10)
      {
        date.h="0"+date.h;
      }
      if (date.m < 10)
      {
        date.m="0"+date.m;
      }
      if (date.s < 10)
      {
        date.s="0"+date.s;
      }

      return date.h+":"+date.m+":"+date.s;

    },
    handleSizeChange(val){
      // 将变化后的每页显示条数赋值给pageSize，然后调用getUserList方法查询数据
      this.pageSize=val;
      this.pagelist=[];
      for(var i=(this.pageNumber-1)*this.pageSize;i<(this.pageNumber-1)*this.pageSize+this.pageSize;i++)
      {
        if(i<this.total)
        {
          this.pagelist.push(this.inputlist[i])
        }else
        {
          break;
        }
      }
    },
    handleCurrentChange(val){
      // 将变化后的当前页数赋值给pageNumber，然后调用getUserList方法查询数据
      this.pageNumber=val;
      this.pagelist=[];
      for(var i=(this.pageNumber-1)*this.pageSize;i<(this.pageNumber-1)*this.pageSize+this.pageSize;i++)
      {
        if(i<this.total)
        {
          this.pagelist.push(this.inputlist[i])
        }else
        {
          break;
        }
      }
    },
    getNormalSpuplierName(){
      var self=this;
      this.$http.get("/supplier/supplier")
      .then(result=>{
        var data=result.data;
        if(data.code==200)
        {
          for(var i=0;i<data.data.length;i++)
          {
            var name=data.data[i]
            self.suppliers.push({value:name,label:name})
          }
        }else
        {
          self.$message.error(data.msg);
        }
      })
      .catch(()=>{
        self.$message.error("获取供应商请求失败");
      })
    },
    search(){
      var self=this;
      var params={};
      params.productName=this.productname;
      params.supplierName=this.suppliername;
      params.startTime=this.startTime;
      params.endTime=this.endTime;
      this.$http.post("/inputdocuments/select",JSON.stringify(params))
      .then(result=>{
        var data=result.data;
        if(data.code==200)
        {
          self.inputlist=data.list;
          self.total=data.total;
          self.pageNumber=1;
          self.pagelist=[];
          for(var i=(self.pageNumber-1)*self.pageSize;i<(self.pageNumber-1)*self.pageSize+self.pageSize;i++)
          {
            if(i<self.total)
            {
              self.pagelist.push(self.inputlist[i])
            }else
            {
              break;
            }
          }
        }else
        {
          self.$message.error(data.msg);
        }
      })
      .catch(()=>{
        self.$message.error("查询请求失败");
      })
    },
    showAdd(){
      this.$router.push("/sys/input/add")
    },
    showUpdate(inputId){
      this.$router.push("/sys/input/update/"+inputId)
    },
    deleteInput(inputId){
      this.$confirm('确定要删除该条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var self = this;
        var params = {};
        params.inputId = inputId;
        self.$http.get("/inputdocuments/delete", {
          params: params
        }).then(res => {
          var data = res.data;
          if (data.code == 200) {
            self.$message.success(data.msg)
            //表示跳转到哪个路由，0表示当前页面，-1表示后退，1表示前进
            self.$router.go(0)
          } else {
            self.$message.error(data.msg)
          }
        }).catch(() => {
          self.$message.error("请求失败")
        });
      })
    }
  },
  mounted() {
    this.getInputList();
    this.getNormalSpuplierName();
  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    color: red;
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

inputList.vue