一张订单图做一个小项目八

1：后端完成以后  来实现前端功能  主要实现登录以后的管理页面如图

点击新增以后的页面

业务层继续在model中实现

parta.js中

import  axios from  "./axios.js";
import  qs  from  "qs";

var  partaInfo = {
    add(info){
        return  axios({
            method:"post",
            url:"/api/parta/add",
            data:qs.stringify(info)
        })
    },
    list(){
        return  axios({
            method:"get",
            url:"/api/parta/list"
        })
    }
}

export default  partaInfo;

partb.js中

import  axios from  "./axios.js";
import  qs  from  "qs";

var  partbInfo = {
    add(info){
        return  axios({
            method:"post",
            url:"/api/partb/add",
            data:qs.stringify(info)
        })
    },
    list(){
        return  axios({
            method:"get",
            url:"/api/partb/list"
        })
    }
}


export default  partbInfo;

分别位新增和类别的功能

继续回到views的文件夹中 新建Parta.vue, Partb.vue Order.vue

Parta.vue中

<template>
  <div>
    <part-add></part-add>
    <div>
      <el-table :data="partaList" border style="width: 100%">
        <el-table-column fixed prop="partaname" label="甲方名称">
        </el-table-column>
        <el-table-column prop="tel" label="电话"> </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ new Date(scope.row.date).dateFormat("yyyy年mm月dd日") }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template>
            <el-button type="warning" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import add from "../components/parta/Add";
import partaInfo from "../model/parta";
import  {mapState,mapMutations} from "vuex";
export default {
  data() {
    return {
     // partaList: []
    };
  },
  computed:{
      ...mapState(["partaList"])
  },
  mounted() {
    partaInfo.list().then(resulte => {
            this.initPartaList(resulte.data.msg);
    });
  },
  methods:{
          ...mapMutations(["initPartaList"]),
  },
  components: {
    "part-add": add
  }
};
</script>

 

Partb.vue中

<template>
  <div>
    <part-add></part-add>
    <div>
      <el-table :data="partbList" border style="width: 100%">
        <el-table-column fixed prop="partbname" label="甲方名称">
        </el-table-column>
        <el-table-column prop="fax" label="传真"> </el-table-column>
        <el-table-column label="状态">
          <template>
            <el-button type="warning" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import add from "../components/partb/Add";
import partbInfo from "../model/partb";
import {mapState,mapMutations} from "vuex";
export default {
  data() {
    return {
      
    };
  },
  computed:{
    ...mapState(["partbList"])
  },
  methods:{
    ...mapMutations(["initPartbList"])
  },
  mounted() {
    partbInfo.list().then(result => {
      this.initPartbList(result.data.msg);
    });
  },
  components: {
    "part-add": add
  }
};
</script>

组件模块 在components文件夹中新建 parta和partb文件夹   里面分别新建Add.vue文件

parta/Add.vue中

<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true"
      >新增甲方</el-button
    >
    <el-dialog title="新增甲方" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="甲方名称" prop="partaname">
          <el-input type="text" v-model="ruleForm.partaname"></el-input>
        </el-form-item>
        <el-form-item label="甲方电话" prop="tel">
          <el-input type="text" v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="订单时间" prop="date">
          <el-date-picker
            v-model="ruleForm.date"
            type="date"
            placeholder="开始时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import partainfo from "../../model/parta";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,
      ruleForm: {
        partaname: "",
        tel: "",
        date: ""
      },
      rules: {
        partaname: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^.{2,50}$/i,
            message: "长度2到50位",
            trigger: "blur"
          }
        ],
        tel: [
          { required: true, message: "手机号", trigger: "blur" },
          {
            pattern: /^1[0-9]{10}$/i,
            message: "长度11位手机号",
            trigger: "blur"
          }
        ],
        date: [{ required: true, message: "订单日期不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    ...mapMutations(["addPartaItem"]),
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var info = {
            partaname: this.ruleForm.partaname,
            tel: this.ruleForm.tel,
            date: this.ruleForm.date
          };
          partainfo.add(info).then(result => {
            if (result.data.code == 1) {
              this.$refs[formName].resetFields();
              this.dialogFormVisible = false;
              this.addPartaItem(info);
            } else {
              this.$message.error(result.data.msg);
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    }
  }
};
</script>

 

partb/Add.vue中

<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true"
      >新增乙方</el-button
    >
    <el-dialog title="新增乙方" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="乙方名称" prop="partbname">
          <el-input type="text" v-model="ruleForm.partbname"></el-input>
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input type="text" v-model="ruleForm.fax"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import partbinfo from "../../model/partb";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,
      ruleForm: {
        partbname: "",
        fax: "" 
      },
      rules: {
        partbname: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^.{2,50}$/i,
            message: "长度2到50位",
            trigger: "blur"
          }
        ],
        tel: [
          { required: true, message: "传真不能位空", trigger: "blur" },
        ],
    }
    };
  },
  methods: {
    ...mapMutations(["addPartbItem"]),
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var info = {
            partbname: this.ruleForm.partbname,
            fax: this.ruleForm.fax
          };
          partbinfo.add(info).then(result => {
            if (result.data.code == 1) {
              this.$refs[formName].resetFields();
              this.dialogFormVisible = false;
              this.addPartbItem(info);
            } else {
              this.$message.error(result.data.msg);
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    }
  }
};
</script>

 

里面用到了vuex 需要在store/index.js中定义好全局的数据和数据管理方法

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    partaList:[],
    partbList:[],
  },
  mutations: {
    initPartaList(state,list){
      state.partaList = list;
    },
    addPartaItem(state,item){
      state.partaList=[...state.partaList,item];
    },
    initPartbList(state,list){
      state.partbList = list;
    },
    addPartbItem(state,item){
      state.partbList=[...state.partbList,item];
    }
  },
  actions: {},
  modules: {}
});

路由配置如下

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/menu",
    name: "menu",
    component: () =>import("../views/Menu.vue"),

    children:[{
      path:"parta",
      name:"parta",
      component:()=>
      import("../views/Parta.vue")
  },
  {
      path:"partb",
      name:"partb",
      component:()=>
      import("../views/Partb.vue")
  },
  {
    path:"order",
    name:"order",
    component:()=>
    import("../views/Order.vue")
}
]
  }
];

const router = new VueRouter({
  routes
});

export default router;

最后修改菜单组件 启动路由跳转功能即可  router="true"  index="路由地址"   default-active="默认选中的index"

    <el-menu 
      default-active="/menu/parta"
      class="el-menu-vertical-demo"
      style="width:150px" @select="select" :router="flag" >

      <el-menu-item index="/menu/parta" >
        <i class="el-icon-menu"></i>
        <span slot="title">甲方管理</span>
      </el-menu-item>