后端学习开发【13】——商品管理开发-商品类型前端实现

巨蟹座不吃鱼
736 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

前言

到目前为止，我们已经将商品类型的所有接口写好并测试好了，商品类型管理的开发主要是实现主键自增，自动填充功能，同时也为接下来的多表联查功能做个准备。接下来将继续实现商品类型管理的界面开发及接口对接，前端界面的开发依然是按部就班，总共需要4个步骤：

  • 新建 api 文件
  • 新建界面文件
  • 修改路由
  • 对接接口

实现

1、新建 productType.js Api 文件

import request from '../utils/request'

export default {
    // 查询列表
    list(){
        return request({
            url: '/product-type/list',
            method: 'get'
        })
    },

    // 添加
    save(data) {
        return request({
            url: '/product-type/save',
            method: 'post',
            data: data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 更新
    update(data) {
        return request({
            url: '/product-type/updateById',
            method: 'post',
            data: data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 删除
    delById(data) {
        return request({
            url: '/product-type/delById',
            method: 'post',
            data: data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },
    
}

image.png

2、新建 index.vue 界面文件

在 views 下新建 product 文件夹，再在该文件夹下新建 productType 文件夹，在该文件夹下新建 index.vue 文件。

image.png

3、修改 router.js 路由

const ProductType = () => import('@/views/product/productType/index')//商品类型

// 需要权限判断展示的路由
export const permissionRouter = [{
	path: "/product",
	component: Layout,
	name: "Product",
	meta: {
		title: "商品管理",
		icon: "el-icon-s-goods",
		roles: ['admin', 'user']//菜单权限设置
	},
	children: [
		{
			path: "productType",
			name: "ProductType",
			component: ProductType,
			meta: {
				title: "商品类型",
				roles: ['admin', 'user']
			},
		},
	]
},
{
	path: "/system",
	component: Layout,
	name: "System",
	meta: {
		title: "系统管理",
		icon: "el-icon-s-tools",
		roles: ['admin', 'user']//菜单权限设置
	},
	children: [
		{
			path: "user",
			name: "User",
			component: User,
			meta: {
				title: "用户管理",
				roles: ['admin', 'user']//菜单权限设置
			},
		},
		{
			path: "menu",
			name: "Menu",
			component: Menu,
			meta: {
				title: "菜单管理",
				roles: ['admin', 'user']//菜单权限设置
			},
		},
	]
}]

4、对接接口

<template>
  <div class="user-container">
    <!-- 操作 -->
    <el-row :gutter="20">
      <el-col :span="9">
        <el-input v-model="search.name" placeholder="请输入类型名称查找"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="searchData()">查询</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="添加数据"
          placement="top-start"
        >
          <el-button type="primary" @click="showDialog = true">添加</el-button>
        </el-tooltip>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin: 20px 0"
      stripe
      border
    >
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + addIndex }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称" prop="name">
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark">
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime">
      </el-table-column>
      <el-table-column align="center" label="更新时间" prop="updateTime">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog
      :title="getTitle"
      :visible.sync="showDialog"
      :close-on-click-modal="false"
      @close="closeDialog()"
      @close-on-press-escape="closeDialog()"
    >
      <el-form
        ref="typeForm"
        :model="typeForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="类型名称" prop="name">
          <el-input v-model="typeForm.name" placeholder="请输入商品类型名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="typeForm.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="closeDialog()">取消</el-button>
        <el-button v-if="getId" type="primary" @click="update('typeForm')">更新</el-button>
        <el-button v-else type="primary" @click="save('typeForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import productTypeApi from "../../../api/productType";
export default {
  name: "User",
  data() {
    return {
      //查询项
      search: {
        name: "",
      },

      // 表格
      typeList: [],
      tableData: [], // 数据
      addIndex: 1, // 序号

      // 新增/编辑弹框
      showDialog: false,
      typeForm: {
        id:'',
        name: "",
        remark: "",
      },
      // 表单验证
      rules: {
        name: [
          { required: true, message: "商品类型名称不能为空", trigger: "blur" },
        ]
      },
    };
  },
  computed: {
    // 弹框标题
    getTitle: function () {
      if (this.typeForm.id !== "") {
        return "编辑";
      } else {
        return "添加";
      }
    },
    // 展示的按钮
    getId: function () {
      if (this.typeForm.id !== "") {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.list();
  },
  methods: {
     // 查询
    searchData(){
      if (this.search.name === '') {
        this.list()
      } else {
        this.tableData = this.typeList.filter(item => {
          return item.name.toLowerCase().indexOf(this.search.name.toLowerCase()) > -1
        })
      }
    },

    // 列表
    list() {
      productTypeApi.list().then((response) => {
        if (response.code === 20000) {
          this.typeList = response.data.data;
          this.tableData = response.data.data;
        } else {
          this.$message.error(response.message);
        }
      });
    },

    // 删除
    handleDel(id) {
        this.$confirm("此操作将永久删除被选中的用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const form = new FormData();
          form.append("id", id);

          productTypeApi.delById(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        });
    },

    // 添加用户
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const form = new FormData();
          form.append("id", this.typeForm.id);
          form.append("name", this.typeForm.name);
          form.append("remark", this.typeForm.remark);

          productTypeApi.save(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              // 关闭弹框
              this.showDialog = false;
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },

    // 编辑按钮
    edit(row) {
      this.showDialog = true;
      this.typeForm.id = row.id;
      this.typeForm.name = row.name;
      this.typeForm.remark = row.remark;
    },

    // 确认更新用户
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const form = new FormData();
          form.append("id", this.typeForm.id);
          form.append("name", this.typeForm.name);
          form.append("remark", this.typeForm.remark);

          productTypeApi.update(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              // 关闭弹框
              this.showDialog = false;
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.typeForm.id = "";
      this.typeForm.name = "";
      this.typeForm.remark = "";
    },
  },
};
</script>

效果展示

image.png

avatar
文章
阅读
粉丝