作业 —— day81

APP.vue

<template>
  <div id="app">
<!--    调用路由组件：路由组件的作用：识别访问当前站点的URL地址，获取地址的路径部分，到路由列表中进行识别判断-->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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/index"

Vue.config.productionTip = false

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);

//

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,   // 挂载路由对象，将来所有的路由对象的属性或者方法，都可以通过vm对象来操作
  components: { App },
  template: '<App/>'
})

// 这里是不能编写任何JS代码的，因为系统不会执行这里来

index.js

import Vue from "vue"
import Router from "vue-router"

// 注册路由组组件
Vue.use(Router)

// 导入组件
// import Home from "../components/Home"
// 在vue中 @表示src目录的路径

import User from "../components/User";
import Home from "../components/Home";
import Login from "../components/Login";
import Register from "../components/Register";
import Goods from "../components/Goods";
import ToDoList from "../components/ToDoList";

// 实例化路由对象，编写路由列表
export default new Router({
  mode: "history",   // 路由显示模式，默认hash，地址栏上面默认的带#，history不会带#
  routes: [    // 路由列表
    {
      path: "/home",        // 访问URL地址
      component: Home,      // 访问URL地址对应的组件
      name: "Home",         // 访问URL的路由别名 ，字符串格式
    },
    {
      path: "/goods",
      component: Goods,
      name: "Goods",
    },
    {
      path: "/todolist",    // 表示路由参数接收的2个参数名
      component: ToDoList,
      name: "ToDoList",
    }
  ]
})

ToDoList.vue

<template>
<div id="todolist" class="list_con">
    <el-button @click="jump" type="warning">Goods</el-button>
  <h2>To do list</h2>
    <el-row :gutter="20">
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-input v-model="message" size="medium"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <el-button @click="addItem" type="primary" size="medium">增加</el-button>
        </div>
      </el-col>
    </el-row>

  <ul id="list" class="list">
   <li v-for="(item, key) in dolist">

          <span>{{item}}</span>
          <a @click="upItem(key)" class="el-icon-top"></a>
          <a @click="downItem(key)" class="el-icon-bottom"></a>
          <a @click="delItem(key)" class="el-icon-delete"></a>

   </li>
  </ul>

 </div>
</template>

<script>
    export default {
        name: "ToDoList",
        data: function () {
            return{
                message:"",
                dolist:[
                    "There there is a will, there is a way",
                    "A man is as old as he feels",
                    "Union is strength",
                    "No pain, no gain",
                    "Stand out or get out",
                ]
            }
        },
        methods:{
            addItem(){
                if(this.messsage==""){
                    return false;
                }

                this.dolist.push(this.message);
                this.message = ""
            },
            delItem(key){
                this.dolist.splice(key, 1);
            },
            upItem(key){
                if(key==0){
                    return false;
                }
                let result = this.dolist.splice(key,1);
                this.dolist.splice(key-1,0,result[0]);
            },
            downItem(key){
                let result = this.dolist.splice(key, 1);
                this.dolist.splice(key+1,0,result[0]);
            },
            jump(){
              this.$router.push("/goods")
            },
        }
    }
</script>

<style scoped>
    .list_con{
   600px;
   margin:50px auto 0;
  }
  .list{
   margin:0;
   padding:0;
   list-style:none;
   margin-top:20px;
  }
  .list li{
   display: block;
      height: 30px;
      margin-top: 10px;
      line-height: 30px;
      border-bottom:1px solid #ccc;
  }

  .list li span{
   float:left;
  }

  .list li a{
   float:right;
   text-decoration:none;
   margin:0 10px;
      margin-top: 10px;
  }
    a:hover{
      cursor: pointer;
    }
</style>

Goods.vue

<template>
    <div id="goods">
        <el-button @click="jump" type="warning">ToDoList</el-button>
        <el-button @click="change" type="primary">添加商品</el-button>
      <br><br>
      <h1 style="left: 1000px !important;">商品列表</h1>
        <el-table :data="goods_list"  :summary-method="getSummaries"
    show-summary border style=" 800px" :row-class-name="tableRowClassName">
          <el-table-column label="商品id">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品标题"></el-table-column>
          <el-table-column prop="num" label="商品数量">
              <template slot-scope="scope">
                   <el-input-number v-model="scope.row.num" @change="issub(scope.$index)" size="mini" :min="0"></el-input-number>
              </template>
          </el-table-column>
          <el-table-column prop="price" label="商品价格"></el-table-column>
          <el-table-column label="操作">
             <template slot-scope="scope" >
              <el-button type="success plain" size="small" @click="edit(scope.$index)">编辑</el-button>
              <el-button type="danger plain" size="small" @click="del(scope.$index)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="box" :class="mycls">
          <el-form  class="demo-ruleForm" label-width="100px">
            <el-input type="text" v-model="goods_info.title" placeholder="商品标题"></el-input>
            <br><br>
            <el-input type="text" v-model="goods_info.num" placeholder="商品数量"></el-input>
            <br><br>
            <el-input type="text" v-model="goods_info.price" placeholder="商品价格"></el-input>
            <br><br>
            <el-button type="primary" @click="add()">保存</el-button>
            <el-button type="danger" @click="cancle">取消</el-button>
          </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Goods",
        data: function () {
            return {
                mycls:{
                    show_hide: true,
                },
                goods_info:{
                    id: -1,
                    title: '',
                    num: '',
                    price: '',
                },
                goods_list:[
                    {"name":"python入门","num":10,"price":150},
                    {"name":"python进阶","num":20,"price":100},
                    {"name":"python高级","num":30,"price":75},
                    {"name":"python研究","num":40,"price":60},
                    {"name":"python放弃","num":50,"price":10},
                ],
            }
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                  return 'odd_bgcolor';
                } else {
                  return 'even_bgcolor';
                }
              },
            change(){
                if (this.mycls.show_hide){
                    this.mycls.show_hide = false
                }
            },
            add(){
                if (this.goods_info.title === '' || this.goods_info.num === '' || this.goods_info.price === ''
                    || isNaN(parseFloat(this.goods_info.price)) || isNaN(parseInt(this.goods_info.num))
                    || parseFloat(this.goods_info.price) < 0 || parseInt(this.goods_info.num) < 0){
                    return alert('请将信息填写完整！')
                }
                let name = this.goods_info.title;
                let num = parseInt(this.goods_info.num);
                let price = parseFloat(this.goods_info.price).toFixed(2);
                if (this.goods_info.id !== -1){
                    let obj = this.goods_list[this.goods_info.id];
                    obj.name = name;
                    obj.num = num;
                    obj.price = price;
                }else{
                    let obj = {
                        'name': name,
                        'num': num,
                        'price': price,
                    };
                    this.goods_list.push(obj);
                }
                this.cancle()
            },
            del(index){
                this.goods_list.splice(index, 1)
            },
            cancle(){
                this.mycls.show_hide = true;
                this.goods_info.id = -1;
                this.goods_info.title = '';
                this.goods_info.num = '';
                this.goods_info.price = '';
            },
            edit(index){
                this.mycls.show_hide = false;
                let res = this.goods_list[index];
                this.goods_info.title = res.name;
                this.goods_info.num = res.num;
                this.goods_info.price = res.price;
                this.goods_info.id = index;
            },
            issub(index){
                if( this.goods_list[index].num === 0 ){
                    this.del(index)
                  }
            },
            getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '总价';
                  return;
                }
                let tmp = 0;
                for(let obj of data){
                  tmp = tmp + obj.num * obj.price
                }
                sums[1] = tmp.toFixed(2) + '￥'
              });

              return sums;
            },
            jump(){
              this.$router.push("/todolist")
            },
        },
    }
</script>

<style scoped>
  #goods{
       margin:100px 20%;
       text-align: center !important;
  }
  #goods .box{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #eee;
     280px;
    height: 240px;
    padding: 40px 80px;
    z-index: 10;
  }
  .show_hide{
      display: none;
  }
  .el-table .odd_bgcolor{
      background: blue;
  }
  .el-table .even_bgcolor{
    background: orange;
  }
  .cell{
    text-align: center !important;
  }
  .box{
    margin-top: 243px !important;
    margin-left: 1200px !important;
  }
  .x-title{
    left: 500px !important;
  }
</style>