|
|
@@ -0,0 +1,284 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Version: 1.0
|
|
|
+ * @Autor: zhuyijun
|
|
|
+ * @Date: 2021-11-23 20:45:35
|
|
|
+ * @LastEditTime: 2021-11-23 23:03:36
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 面包屑导航区 -->
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/home' }">首页</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"
|
|
|
+ @click="showAddCateDialog">添加分类</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 表格区 -->
|
|
|
+ <!--
|
|
|
+ 设置索引列
|
|
|
+ :show-index="true"
|
|
|
+ index-text="#"
|
|
|
+ -->
|
|
|
+ <tree-table class="treeTable"
|
|
|
+ :data="cateList"
|
|
|
+ :columns="columns"
|
|
|
+ :selection-type="false"
|
|
|
+ :expand-type="false"
|
|
|
+ border
|
|
|
+ :show-row-hover="false">
|
|
|
+ <!-- 插槽 - 是否有效 -->
|
|
|
+ <template slot="isok"
|
|
|
+ slot-scope="scope">
|
|
|
+ <i v-if="scope.row.cat_deleted === false "
|
|
|
+ class="el-icon-success"
|
|
|
+ style="color: lightgreen;"></i>
|
|
|
+ <i v-else
|
|
|
+ class="el-icon-error"
|
|
|
+ style="color: lightgreen;"></i>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 排序 order -->
|
|
|
+ <template slot="order"
|
|
|
+ slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.cat_level === 1"
|
|
|
+ type="success">二级</el-tag>
|
|
|
+ <el-tag v-else
|
|
|
+ type="warning">三级</el-tag>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="oprate"
|
|
|
+ slot-scope="scope">
|
|
|
+ <el-button type="primary"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ size="mini">编辑</el-button>
|
|
|
+ <el-button type="danger"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </tree-table>
|
|
|
+ <!-- 分页区 -->
|
|
|
+ <el-pagination @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="queryInfo.pagenum"
|
|
|
+ :page-sizes="[3, 5, 10, 20,50,100]"
|
|
|
+ :page-size="queryInfo.pagesize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </el-card>
|
|
|
+ <!-- 添加分类的对话框 -->
|
|
|
+ <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="username">
|
|
|
+ <el-input v-model="addCateForm.cat_name"
|
|
|
+ type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 父级分类 -->
|
|
|
+ <el-form-item label="父级分类: ">
|
|
|
+ <!-- options用来指定数据源
|
|
|
+ change-on-select 允许选中任意一项
|
|
|
+ filterable 可搜索
|
|
|
+ -->
|
|
|
+ <el-cascader v-model="selectedKey"
|
|
|
+ :options="parentCateList"
|
|
|
+ :props="cascaderProps"
|
|
|
+ @change="parentCateChange"
|
|
|
+ clearable
|
|
|
+ filterable></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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ //商品分类的数据列表
|
|
|
+ cateList: [],
|
|
|
+ queryInfo: {
|
|
|
+ type: 3,
|
|
|
+ pagenum: 1,
|
|
|
+ pagesize: 5
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ // 为table指定列的定义
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '编号',
|
|
|
+ prop: 'cat_id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '分类名称',
|
|
|
+ prop: 'cat_name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '是否有效',
|
|
|
+ // 表示将当前列定义为模板类
|
|
|
+ type: 'template',
|
|
|
+ // 表示当前模板名称
|
|
|
+ template: 'isok'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '排序',
|
|
|
+ type: 'template',
|
|
|
+ // 表示当前模板名称
|
|
|
+ template: 'order'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ type: 'template',
|
|
|
+ // 表示当前模板名称
|
|
|
+ template: 'oprate',
|
|
|
+ width: '200px'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 控制添加分类的显示与否
|
|
|
+ addCateDialogVisible: false,
|
|
|
+ // 添加分类表单数据
|
|
|
+ addCateForm: {
|
|
|
+ cat_name: '',
|
|
|
+ // 默认根节点id
|
|
|
+ cat_pid: 0,
|
|
|
+ // 默认一级
|
|
|
+ cat_level: 0
|
|
|
+ },
|
|
|
+ addCateFormRules: {
|
|
|
+ cat_name: [
|
|
|
+ { required: true, message: '请输入分类名称', trigger: 'blur' },
|
|
|
+ { min: 2, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ parentCateList: [],
|
|
|
+ cascaderProps: {
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ value: 'cat_id',
|
|
|
+ label: 'cat_name',
|
|
|
+ children: 'children',
|
|
|
+ expandTrigger: 'hover',
|
|
|
+ checkStrictly: true
|
|
|
+ },
|
|
|
+ // 选中的父级分类地址
|
|
|
+ selectedKey: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getCateList()
|
|
|
+
|
|
|
+ }, methods: {
|
|
|
+ async getCateList () {
|
|
|
+ const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
|
|
|
+ if (res.meta.status !== 200) {
|
|
|
+ return this.$message.error(res.meta.msg)
|
|
|
+ }
|
|
|
+ this.cateList = res.data.result
|
|
|
+ // 总数据条数
|
|
|
+ this.total = res.data.total
|
|
|
+ // this.$message.success(res.meta.msg)
|
|
|
+ },
|
|
|
+ // 监听pagesize改变事件
|
|
|
+ handleSizeChange (newSize) {
|
|
|
+ this.queryInfo.pagesize = newSize
|
|
|
+ this.getCateList()
|
|
|
+ },
|
|
|
+ // 监听pagenum的改变
|
|
|
+ handleCurrentChange (newPage) {
|
|
|
+ this.queryInfo.pagenum = newPage
|
|
|
+ this.getCateList()
|
|
|
+ },
|
|
|
+ // 点击按钮展示添加分类对话框
|
|
|
+ showAddCateDialog () {
|
|
|
+ // 加载父级分类
|
|
|
+ this.getParentCateList()
|
|
|
+ // 展示对话框
|
|
|
+ this.addCateDialogVisible = true
|
|
|
+ },
|
|
|
+ // 获取父级分类列表
|
|
|
+ async getParentCateList () {
|
|
|
+ const { data: res } = await this.$http.get('categories', {
|
|
|
+ params: {
|
|
|
+ type: 2
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (res.meta.status !== 200) {
|
|
|
+ return this.$message.error(res.meta.msg)
|
|
|
+ }
|
|
|
+ this.parentCateList = res.data
|
|
|
+ },
|
|
|
+ // 选种项发生变化触发这个函数
|
|
|
+ parentCateChange () {
|
|
|
+ // 如果selectKeys数组中的length大于0 代表选中了
|
|
|
+ let size = this.selectedKey.length
|
|
|
+ if (size > 0) {
|
|
|
+ this.addCateForm.cat_pid = this.selectedKey[size - 1]
|
|
|
+ // 当前分类的等级
|
|
|
+ this.addCateForm.cat_level = size
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.addCateForm.cat_pid = 0
|
|
|
+ // 当前分类的等级
|
|
|
+ this.addCateForm.cat_level = 0
|
|
|
+ },
|
|
|
+ // 新增分类
|
|
|
+ addCate () {
|
|
|
+ this.$refs.addCateFormRef.validate(async (vaild) => {
|
|
|
+ if (!vaild) return
|
|
|
+ const { data: res } = await this.$http.post(`categories`, this.addCateForm)
|
|
|
+ if (res.meta.status !== 201) {
|
|
|
+ return this.$message.error(res.meta.msg)
|
|
|
+ }
|
|
|
+ this.cateList.push(res.data)
|
|
|
+ this.addCateDialogVisible = false
|
|
|
+ this.$message.success(res.meta.msg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 监听对话框关闭事件
|
|
|
+ addCateDialogClosed () {
|
|
|
+ this.$refs.addCateFormRef.resetFields()
|
|
|
+ // 选中数据清空
|
|
|
+ this.selectedKey = []
|
|
|
+ // 重置
|
|
|
+ this.addCateForm.cat_name = ''
|
|
|
+ this.addCateForm.cat_level = 0
|
|
|
+ this.addCateForm.cat_pid = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.treeTable {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.el-cascader {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
