筆記8：商品分類【Vue實戰專案：電商管理系統（Element-UI）】

1 樣式

1.1 設定路由

• 創建商品分類頁面../components/goods/Cate.vue，并添加一些基本的元素

<template>
  <div>
    <!-- 面包屑導航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分類</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 添加角色按鈕 -->
      <el-row>
        <el-col>
          <el-button type="primary">添加分類</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

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

<style lang="postcss" scoped>
</style>

• 設定路由

import Cate from '../components/goods/Cate.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/home', component: Home, redirect: '/welcome', children: [
        ...
        { path: '/categories', component: Cate },
      ]
    }
  ]
})

1.2 完成表格區域展示

• 在頁面創建的時候，通過介面獲取商品分類資料；

<script>
export default {
  data() {
    return {
      // 商品分類資料串列介面查詢條件
      querInfo: {
        type: [],
        pagenum: 1,
        pagesize: 5,
      },
      // 商品分類串列數據
      cateList: [],
      total: 0,
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    // 獲取商品分類資料
    async getCateList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.querInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("商品分類資料串列失敗！");
      }

      this.cateList = res.data.result;
      this.total = res.data.total;
      console.log(this.cateList);
    },
  },
};
</script>

• 繪制表格區域

使用的是第三方組件：vue-table-with-tree-grid
查看官方樣例

• 安裝后，在main.js中配置全域匯入vue-table-with-tree-grid

// 匯入vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'

// 全域注冊
Vue.component('tree-table', TreeTable)

• 使用tree-table繪制表格

  <!-- 表格區域 -->
  <tree-table
    :data="cateList"
    :columns="columns"
    :selection-type="false"
    :expand-type="false"
    show-index
    index-text="#"
    border
    :show-row-hover="false"
  >
    <!-- 是否有效 -->
    <template slot="isok" scope="scope">
      <i
        class="el-icon-success"
        v-if="scope.row.cat_deleted === false"
        style="color: lightgreen"
      ></i>
      <i class="el-icon-error" v-else style="color: red"></i>
    </template>
    <!-- 排序 -->
    <template slot="order" scope="scope">
      <el-tag size="mini" v-if="scope.row.cat_level === 0">一級</el-tag>
      <el-tag
        size="mini"
        type="success"
        v-else-if="scope.row.cat_level === 1"
        >二級</el-tag
      >
      <el-tag
        size="mini"
        type="warning"
        v-else-if="scope.row.cat_level === 2"
        >三級</el-tag
      >
    </template>
    <!-- 操作 -->
    <template slot="opt">
      <el-button type="primary" size="mini" icon="el-icon-edit">編輯</el-button>
      <el-button type="danger" size="mini" icon="el-icon-delete">洗掉</el-button>
    </template>
  </tree-table>

• 引數定義：

知識點：
vue-table-with-tree-grid的作用域插槽的形式

data() {
return {
    ...
  // 為table指定列的定義
  columns: [
    { label: "分類名稱", prop: "cat_name" },
    {
      label: "是否有效",
      // 表示將當前列定義成模板列
      type: "template",
      // 表示當前這一列使用模板名稱
      template: "isok",
    },
    {
      label: "排序",
      type: "template",
      template: "order",
    },
    {
      label: "操作",
      type: "template",
      template: "opt",
    },
  ],
};

1.3 實作分頁功能

• 繪制分頁

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="querInfo.pagenum"
    :page-sizes="[3, 5, 7, 10]"
    :page-size="5"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >

• 實作監聽 pagesize 和 pagenum 改變的方法

// 監聽pagesize改變
handleSizeChange(newSize) {
  this.querInfo.pagesize = newSize;
  this.getCateList();
},
// 監聽pagenum改變
handleCurrentChange(newPageNum) {
  this.querInfo.pagenum = newPageNum;
  this.getCateList();
},

1.4 實作添加分類功能

1.4.1 完成彈窗繪制

• 展開添加彈窗時，需要獲取一、二級父級資料

// 添加分類彈窗中獲取父級資料
async getParentCateList() {
  const { data: res } = await this.$http.get("categories", {
    params: { type: 2 },
  });
  if (res.meta.status !== 200) {
    return this.$message.error("父級資料串列失敗！");
  }
  this.parentCateList = res.data;
},

• 繪制

<!-- 添加分類對話框 -->
<el-dialog
  title="添加分類"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateDialogClosed"
>
  <!-- 添加分類表單 -->
  <el-form
    :model="addCateForm"
    :rules="addCateFormRules"
    ref="addCateFormRef"
    label-width="100px"
  >
    <el-form-item label="分類名稱：" prop="cat_name">
      <el-input v-model="addCateForm.cat_name"></el-input>
    </el-form-item>
    <!-- 使用級聯選擇器展示添加分類選單中的父分類 -->
    <el-form-item label="父級分類：">
      <el-cascader
        expand-trigger="hover"
        v-model="selectKeys"
        :options="parentCateList"
        :props="cascaderProps"
        @change="parentCateChange"
        clearable
        change-on-select
      ></el-cascader>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate()">確 定</el-button>
  </span>
</el-dialog>

父級分類的選擇器使用的是Cascader 級聯選擇器.

1.4.2 完成提交添加分類功能

• 在選擇父級分類時，需要做好回應引數的修改

// 添加分類選擇項變化觸發方法
parentCateChange() {
  console.log(this.selectKeys);
  // 如果selectKeys的長度大于0，則證明選中了父級分類
  if (this.selectKeys.length > 0) {
    // 父id
    this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1];
    // 當前分類的等級賦值
    this.addCateForm.cat_level = this.selectKeys.length;
    return;
  } else {
    // 長度為0時，添加的分類為一級分類
    // 父id
    this.addCateForm.cat_pid = 0;
    // 當前分類的等級賦值
    this.addCateForm.cat_level = 0;
  }
},

• 提交添加請求

// 添加分類確定按鈕
addCate() {
  this.$refs.addCateFormRef.validate(async (valid) => {
    if (!valid) return;
    // post 添加分類操作
    const { data: res } = await this.$http.post(
      "categories",
      this.addCateForm
    );

    // 針對狀態碼做提示
    if (res.meta.status !== 201) {
      return this.$message.error("添加分類失敗！");
    }

    this.$message.success("添加分類成功！");

    // 獲取頁面串列資料
    this.getCateList();

    // 關閉添加分類彈窗
    this.addCateDialogVisible = false;
  });
},

1.4.3 彈窗關閉時，重置資料

• 重置表單資料

// 監聽添加分類dialg的關閉事件，重置表單資料
addCateDialogClosed() {
  this.$refs.addCateFormRef.resetFields();
  this.selectKeys = [];
  this.addCateForm.cat_level = 0;
  this.addCateForm.cat_pid = 0;
},

1.5 實作洗掉功能

• 實作洗掉方法

// 通過id洗掉分類
async removeCateById(id) {
  const confirmResult = await this.$confirm(
    "此操作將永久洗掉該分類, 是否繼續?",
    "提示",
    {
      confirmButtonText: "確定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).catch((err) => {
    return err;
  });

  // 如果用戶確認洗掉，則回傳值為字串 confirm
  // 如果用戶取消了洗掉，則回傳值為字串cancel
  console.log(confirmResult);
  if (confirmResult === "cancel") {
    this.$message.info("已取消洗掉");
  } else {
    const { data: res } = await this.$http.delete("categories/" + id);
    if (res.meta.status !== 200) {
      userinfo.mg_state = !userinfo.mg_state;
      return this.$message.error("洗掉分類失敗！");
    }

    this.$message.success("洗掉分類成功！");
    this.getCateList();
  }
},

1.6 實作修改分類名稱功能

• 繪制分類彈窗

<!-- 編輯分類對話框 -->
<el-dialog
  title="修改分類名稱"
  :visible.sync="editCateDialogVisible"
  width="50%"
  @close="editCateDialogClosed()"
>
  <!-- 編輯分類表單 -->
  <el-form
    :model="editCateForm"
    :rules="editCateFormRules"
    ref="editCateFormRef"
    label-width="100px"
  >
    <el-form-item label="分類名稱：" prop="cat_name">
      <el-input v-model="editCateForm.cat_name"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCate()">確 定</el-button>
  </span>
</el-dialog>

• 打開編輯彈窗時，默認填充當前的分類名稱

// 通過id獲取分類資訊
async showCateEditDialog(id) {
  // 通過介面獲取用戶資訊
  const { data: res } = await this.$http.get("categories/" + id);

  if (res.meta.status !== 200) {
    return this.$message.error("查詢分類資訊失敗");
  }
  this.editCateForm = res.data;

  // 展示編輯彈窗
  this.editCateDialogVisible = true;

  // 獲取級聯選擇器的資料
  this.getParentCateList();
  // 級聯選擇器的資料填充
  let cat_level = this.editCateForm.cat_level;
  console.log(cat_level);
},

• 實作修改名稱方法

// 提交編輯彈窗的內容
editCate() {
  this.$refs.editCateFormRef.validate(async (valid) => {
    if (!valid) return;
    // put 編輯分類操作
    const { data: res } = await this.$http.put(
      "categories/" + this.editCateForm.cat_id,
      {
        cat_name: this.editCateForm.cat_name,
      }
    );

    // 針對狀態碼做提示
    if (res.meta.status !== 200) {
      return this.$message.error("編輯分類失敗！");
    }

    this.$message.success("編輯分類成功！");

    // 獲取頁面串列資料
    this.getCateList();

    // 關閉添加分類彈窗
    this.editCateDialogVisible = false;
  });
},