Day02-ElementUI

一 菜单设计

1 静态菜单

a 在components文件夹中新建一个组件Menu.vue

<template>
  <div class="menu-wrap">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#031627"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <!-- 首页 -->
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- 会员 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span>会员</span>
        </template>
        <el-menu-item index="2-1">会员管理</el-menu-item>
      </el-submenu>
      <!-- 商品 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>商品</span>
        </template>
        <el-menu-item index="3-1">商品管理</el-menu-item>
      </el-submenu>
      <!-- 订单 -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>订单</span>
        </template>
        <el-menu-item index="/home/order">所有订单</el-menu-item>
        <el-menu-item index="4-2">售后订单</el-menu-item>
      </el-submenu>
      <!-- 设置 -->
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>设置</span>
        </template>
        <el-menu-item index="/home/admin">管理员管理</el-menu-item>
        <el-menu-item index="5-2">角色管理</el-menu-item>
        <el-menu-item index="5-3">权限管理</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// 去掉菜单的边框
.el-menu{
    border: none;
}
</style>

菜单背景颜色

​ background-color="rgb(3, 21, 39)"

菜单的文字颜色

​ text-color="#fff"

激活菜单的文字颜色

​ active-text-color="#ffd04b"

在激活导航时以 index 作为 path 进行路由跳转

​ :router="true"

b 在Home.vue中导入Menu组件

import Menu from '@/components/Menu.vue';

  components:{
    Menu
  },

替换以前的使用组件

<Menu></Menu>

2 动态菜单

<template>
  <div class="menu-wrap">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#031627"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <template v-for="oneMenu in menus">
        <!-- 可展开的菜单,有children -->
        <el-submenu v-if="oneMenu.children" :index="oneMenu.path" :key="oneMenu.id">
          <template slot="title">
            <i :class="oneMenu.icon"></i>
            <span>{{oneMenu.name}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item v-for="twoMenu in oneMenu.children" :index="twoMenu.path" :key="twoMenu.id">{{twoMenu.name}}</el-menu-item>
        </el-submenu>
        <!-- 不能展开的菜单,没有children -->
        <el-menu-item v-else :index="oneMenu.path" :key="oneMenu.id">
          <i :class="oneMenu.icon"></i>
          <span slot="title">{{oneMenu.name}}</span>
        </el-menu-item>
      </template>

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

<script>
export default {
  data() {
    return {
      menus: [
        {
          id: "41d4aa20-1e2a-11ee-ad4f-5b307b0820ca",
          name: "首页",
          path: "/home",
          icon: "el-icon-s-home",
        },
        {
          id: "75326cd0-1e2b-11ee-ad4f-5b307b0820ca",
          name: "会员",
          path: "/home/huiyuan",
          icon: "el-icon-menu",
          children: [
            {
              id: "0d7ec470-1e2c-11ee-ad4f-5b307b0820ca",
              name: "会员管理",
              path: "/home/huiyuanmanager",
              component: "/home/huiyuanmanager",
            },
          ],
        },
        {
          id: "81d96880-1e2b-11ee-ad4f-5b307b0820ca",
          name: "商品",
          path: "/home/product",
          icon: "el-icon-menu",
          children: [
            {
              id: "25619310-1e2c-11ee-ad4f-5b307b0820ca",
              name: "商品管理",
              path: "/home/product",
              component: "/home/product",
            },
          ],
        },
        {
          id: "ab64a1b0-1e2b-11ee-ad4f-5b307b0820ca",
          name: "订单",
          path: "/home/order",
          icon: "el-icon-s-order",
          children: [
            {
              id: "4e1271d0-1e2c-11ee-ad4f-5b307b0820ca",
              name: "所有订单",
              path: "/home/order",
              component: "/subs/Order",
            },
            {
              id: "6853c9e0-1e2c-11ee-ad4f-5b307b0820ca",
              name: "售后订单",
              path: "/home/afterSalesOrder",
              component: "/subs/AfterSalesOrder.vue",
            },
          ],
        },
        {
          id: "d71998b0-1e2b-11ee-ad4f-5b307b0820ca",
          name: "设置",
          path: "/home/seting",
          icon: "el-icon-user",
          children: [
            {
              id: "bcc908f0-1e2c-11ee-ad4f-5b307b0820ca",
              name: "管理员管理",
              path: "/home/adminManager",
              component: "/subs/AdminManager",
            },
            {
              id: "dad41330-1e2c-11ee-ad4f-5b307b0820ca",
              name: "角色管理",
              path: "/home/roleManager",
              component: "/subs/RoleManager",
            },
            {
              id: "f4aac290-1e2c-11ee-ad4f-5b307b0820ca",
              name: "权限管理",
              path: "/home/permissionManager",
              component: "/subs/PermissionManager",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// 去掉菜单的边框
.el-menu {
  border: none;
}
</style>

二 公共Header组件搭建

1 在components文件夹中新建一个组件Header.vue

<template>
  <div class="header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-dropdown @command="checkItem">
      <span class="el-dropdown-link">
        小王<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command='loginOut'>退出</el-dropdown-item>
        <el-dropdown-item command='updatePwd'>修改密码</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  methods:{
    checkItem(val){
      if(val == "loginOut"){
        this.$router.replace("/login")
      }else{

      }
    }
  }
};
</script>

<style lang="scss" scoped>
 .header{
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: aqua;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px gray dashed;
 }   
</style>

2 在HomeView.vue中导入Header组件

import HeaderVue from '@/components/Header.vue';

  components:{
    Menu,HeaderVue
  },

<div class="content">
    <HeaderVue></HeaderVue>
    <router-view></router-view>
</div>

三 订单管理

1 订单表格的渲染

<template>
  <div class="order-wrap">
    <!-- 订单类型 -->
    <el-tabs v-model="orderType" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="-1"></el-tab-pane>
      <el-tab-pane label="商城订单" name="0"></el-tab-pane>
      <el-tab-pane label="视频号订单" name="1"></el-tab-pane>
    </el-tabs>
    <!-- 订单状态 -->
    <div class="status-wrap">
      <div class="title">订单状态</div>
      <el-radio-group v-model="status" @input="checkStatus">
        <el-radio-button label="-1">全部</el-radio-button>
        <el-radio-button label="0">未支付</el-radio-button>
        <el-radio-button label="1">未发货</el-radio-button>
        <el-radio-button label="2">待收货</el-radio-button>
        <el-radio-button label="3">待评价</el-radio-button>
        <el-radio-button label="4">交易完成</el-radio-button>
        <el-radio-button label="5">待核销</el-radio-button>
        <el-radio-button label="6">退款中</el-radio-button>
        <el-radio-button label="7">已退款</el-radio-button>
        <el-radio-button label="8">已删除</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 表格 -->
    <div class="table-wrap">
      <el-table 
        :data="tableData" 
        height="250" 
        border 
        style="width: 100%" 
        :header-cell-style="{'text-align':'center'}" 
        :cell-style="{'text-align':'center'}" 
        >
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="100"></el-table-column>
        <el-table-column prop="orderUserName" label="下单人姓名" width="100"></el-table-column>
        <el-table-column prop="orderUserMobile" label="下单人电话" width="120"></el-table-column>
        <el-table-column prop="reciveUserName" label="收货人姓名" width="100"></el-table-column>
        <el-table-column prop="reciveAddress" label="收货地址" width="200"> </el-table-column>
        <el-table-column prop="reciveMobile" label="收货人电话" width="200"> </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200"> </el-table-column>
        <el-table-column prop="productNum" label="商品总数"> </el-table-column>
        <el-table-column prop="total" label="订单总价(分)" width="150"> </el-table-column>
        <el-table-column prop="preferenTotal" label="优惠金额(分)" width="150"> </el-table-column>
        <el-table-column prop="payTotal" label="支付金额(分)" width="150"> </el-table-column>
        <el-table-column prop="refundTotal" label="退款金额(分)" width="150"> </el-table-column>
        <el-table-column prop="postTotal" label="邮费(分)"> </el-table-column>
        <el-table-column prop="payType" label="支付方式"> </el-table-column>
        <el-table-column prop="customerBak" label="客户备注" width="200"> </el-table-column>
        <el-table-column prop="storeBak" label="商家备注" width="200"> </el-table-column>
        <el-table-column prop="postNo" label="快递单号" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="small">查看</el-button>
            <el-button type="success" size="small">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderType: "-1",
      status: "-1",
      tableData: [
        {
          id: "1",
          orderType: "1",
          orderNo: "202305080001",
          orderUserId: "1",
          orderUserName: "张三1",
          orderUserMobile: "13000000000",
          reciveUserName: "张三1",
          reciveAddress: "蜗牛学苑四楼",
          reciveMobile: "13000000000",
          orderTime: "2022-11-11 11:11:11",
          productNum: 41,
          total: 41000,
          preferenTotal: 0,
          payTotal: 10000,
          refundTotal: 0,
          postTotal: 0,
          payType: 0,
          customerBak: "东西太好了",
          storeBak: "欢迎下次再来",
          postNo: "101",
          status: 2,
          dr: 0,
        },
        {
          id: "2",
          orderType: "0",
          orderNo: "202305080002",
          orderUserId: "2",
          orderUserName: "李四",
          orderUserMobile: "13000000009",
          reciveUserName: "李四",
          reciveAddress: "蜗牛学苑四楼",
          reciveMobile: "13000000009",
          orderTime: "2023-05-09 11:11:11",
          productNum: 30,
          total: 3000,
          preferenTotal: 0,
          payTotal: 3000,
          refundTotal: 0,
          postTotal: 0,
          payType: 0,
          customerBak: "东西太好了",
          storeBak: "欢迎下次再来",
          postNo: "101",
          status: 2,
          dr: 0,
        },
        {
          id: "3",
          orderType: "0",
          orderNo: "202305080003",
          orderUserId: "3",
          orderUserName: "王五",
          orderUserMobile: "13000000001",
          reciveUserName: "王五",
          reciveAddress: "蜗牛学苑四楼",
          reciveMobile: "13000000001",
          orderTime: "2023-05-08 11:11:11",
          productNum: 22,
          total: 2200,
          preferenTotal: 0,
          payTotal: 2200,
          refundTotal: 0,
          postTotal: 0,
          payType: 0,
          customerBak: "东西太好了",
          storeBak: "欢迎下次再来",
          postNo: "101111",
          status: 2,
          dr: 0,
        },
        {
          id: "4",
          orderType: "0",
          orderNo: "202305080004",
          orderUserId: "4",
          orderUserName: "麻子",
          orderUserMobile: "13000000002",
          reciveUserName: "麻子",
          reciveAddress: "蜗牛学苑四楼",
          reciveMobile: "13000000002",
          orderTime: "2022-11-14 11:11:11",
          productNum: 23,
          total: 2300,
          preferenTotal: 0,
          payTotal: 2300,
          refundTotal: 0,
          postTotal: 0,
          payType: 0,
          customerBak: "东西太好了",
          storeBak: "欢迎下次再来",
          postNo: "1111",
          status: 2,
          dr: 0,
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    },
    checkStatus(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.order-wrap {
  padding: 20px;
  box-sizing: border-box;
  .status-wrap {
    display: flex;
    .title {
      display: flex;
      align-items: center;
      margin-right: 20px;
      // border: 1px gray solid;
    }
  }
  .table-wrap {
    width: 80vw;
    margin-top: 30px;
  }
}
</style>

2 表格数据的筛选

        <el-table-column prop="orderType" label="订单类型" width="100">
          <template slot-scope="scope">
            <span>
              {{scope.row.orderType==0?"商城订单":"视频号订单"}}
            </span>
          </template>
        </el-table-column>

3 过滤器

第一步 定义过滤器

  filters:{
    payTypeFilter(value){
      if(value == 0){
        return "微信支付"
      }else if(value == 1){
        return "支付宝支付"
      }else{
        return "余额支付"
      }
    }
  }

过滤器必须要有返回值

第二步 使用过滤器

{{1 | payTypeFilter}}

数字1或作为参数传递到过滤器payTypeFilter的内部

过滤器payTypeFilter使用参数value接收到传递进来的数据,对数据做处理并返回结果

4 对话框

HTML

<el-button type="success" size="small" @click="openWin_fahuo">发货</el-button>

    <el-dialog
      title="发货"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      >
      <div >
        <el-form ref="form"  label-width="80px">
          <el-form-item label="快递单号">
            <el-input placeholder="请输入快递单号"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus">确 定</el-button>
      </span>
    </el-dialog>

数据

 dialogVisible:false,

JS

    openWin_fahuo(){
      this.dialogVisible = true
    },
    updateStatus(){
      
    }

5 分页

HTML

    <div class="page-wrap">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

数据

      pageNum:1, //当前第多少页
      pageSize:2, //每页显示多少行
      total:10,   //总共有多少行数据

JS

    // 分页函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
    }