layui+springboot+mybatis+mysql(demo项目)第二部分_springboot+mybatis+layui+mysql源码-CSDN博客

本文链接：https://blog.csdn.net/weixin_44149083/article/details/106018269

一、前言

上一篇介绍了项目用到的数据库结构，已经一些配置，这一篇主要展示相关代码

二、后台java代码

2.1 controller层代码

2.1.1 UserController(用于添加用户，用户登录等)

package dave.study.demo.controller;

import com.fasterxml.jackson.databind.util.JSONPObject;
import dave.study.demo.entity.User;
import dave.study.demo.service.UserService;
import org.json.simple.JSONObject;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/test")
public class UserController {

    @Resource
    private UserService userService;

    @GetMapping("/one")
    public List test(){
        List<User> list = userService.queryAllUser();
        return list;
    }

    @PostMapping("/add-user")
    public String addUser(@RequestBody User user){
        String str = userService.addUser(user);
        return str;
    }

    @PostMapping("/login")
    public JSONObject userLogin(@RequestBody User user){
        JSONObject jsonObject = userService.userLogin(user);
        return jsonObject;
    }
}

2.1.2 ProductController(项目主业务，对商品的进货，销售等操作)

package dave.study.demo.controller;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageInfo;
import dave.study.demo.dto.SaleRecordsDTO;
import dave.study.demo.entity.Product;
import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleRecords;
import dave.study.demo.service.ProductService;
import dave.study.demo.service.SaleRecordService;
import org.json.simple.JSONObject;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/product")
public class ProductController {

    @Resource
    private ProductService productService;

    @Resource
    private SaleRecordService saleRecordService;

    @PostMapping("/add")
    public JSONObject addProduct(@RequestBody Product product){
        return productService.addProduct(product);
    }

    @GetMapping("/get")
    public JSONObject getProduct(){
        List<Product> products = productService.getProduct();
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code",0);
        jsonObject.put("msg","");
        jsonObject.put("count",1000);
        jsonObject.put("data",products);
        return jsonObject;
    }

    @PostMapping("/add-sale")
    public JSONObject addSale(@RequestBody Sale sale){
        return productService.addSale(sale);
    }

    @PostMapping("/sale")
    public JSONObject saleProduct(@RequestBody SaleRecords saleRecords){
        return productService.saleProduct(saleRecords);
    }

    @PostMapping("/getsale-records")
    public PageInfo<SaleRecords> getSaleRecords(@RequestBody SaleRecordsDTO saleRecords){
        PageInfo<SaleRecords> pageInfo = new PageInfo<>(saleRecordService.getSaleRecords(saleRecords));
        return pageInfo;
    }

    @PostMapping("/getsale")
    public PageInfo<Sale> getSale(@RequestBody SaleRecordsDTO sale){
        PageInfo<Sale> pageInfo = new PageInfo<>(saleRecordService.getSale(sale));
        return pageInfo;
    }
}

2.2 service层代码

2.2.1 ProductService,ProductServiceImpl

package dave.study.demo.service;

import dave.study.demo.entity.Product;
import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleRecords;
import org.json.simple.JSONObject;

import java.util.List;

public interface ProductService {
    JSONObject addProduct(Product product);

    List<Product> getProduct();

    JSONObject saleProduct(SaleRecords saleRecords);

    JSONObject addSale(Sale sale);
}





package dave.study.demo.service;

import dave.study.demo.dao.ProductMapper;
import dave.study.demo.dao.SaleMapper;
import dave.study.demo.dao.SaleRecordsMapper;
import dave.study.demo.entity.Product;
import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleRecords;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

@Service
public class ProductServiceImpl implements ProductService {

    @Resource
    private SaleMapper saleMapper;

    @Resource
    private ProductMapper productMapper;

    @Resource
    private SaleRecordsMapper saleRecordsMapper;

    @Override
    public JSONObject addProduct(Product product) {
        int i = productMapper.insertSelective(product);
        JSONObject jsonObject = new JSONObject();
        if(i > 0){
            jsonObject.put("status",200);
            jsonObject.put("message","success");
        }else{
            jsonObject.put("status",400);
            jsonObject.put("message","failed");
        }
        return jsonObject;
    }

    @Override
    public List<Product> getProduct() {
        List<Product> products = productMapper.selectByExample(null);
        return products;
    }

    @Override
    @Transactional
    public JSONObject saleProduct(SaleRecords saleRecords) {
        SimpleDateFormat sdf = new SimpleDateFormat();// 格式化时间
        sdf.applyPattern("yyyy-MM-dd HH:mm:ss");// a为am/pm的标记
        Date date = new Date();// 获取当前时间
        saleRecords.setpDate(sdf.format(date));
        JSONObject jsonObject = new JSONObject();
        if(null==saleRecords.getpSaleId() || 0 == saleRecords.getpSaleId()){
            Sale sale = new Sale();
            sale.setpBuyer("过路买主");
            sale.setpDate(sdf.format(date));
            saleMapper.insertSelective(sale);
            saleRecords.setpSaleId(sale.getId());
            saleRecords.setpBuyer("过路买主");
        }else{
            Sale sale = saleMapper.selectByPrimaryKey(saleRecords.getpSaleId());
            if(null == sale){
                jsonObject.put("status",400);
                jsonObject.put("message","please write the correct order number");
                return jsonObject;
            }
            saleRecords.setpBuyer(sale.getpBuyer());
        }

        saleRecordsMapper.insertSelective(saleRecords);
        Product product = productMapper.selectByPrimaryKey(saleRecords.getpId());
        product.setpCount(product.getpCount()-saleRecords.getpCount());
        productMapper.updateByPrimaryKeySelective(product);
        jsonObject.put("status",200);
        jsonObject.put("message","success");
        return jsonObject;
    }

    @Override
    public JSONObject addSale(Sale sale) {
        JSONObject jsonObject = new JSONObject();
        SimpleDateFormat sdf = new SimpleDateFormat();// 格式化时间
        sdf.applyPattern("yyyy-MM-dd HH:mm:ss");// a为am/pm的标记
        Date date = new Date();// 获取当前时间
        sale.setpDate(sdf.format(date));
        int i = saleMapper.insertSelective(sale);
        if(i > 0){
            jsonObject.put("status",200);
            jsonObject.put("message","success");
        }else{
            jsonObject.put("status",400);
            jsonObject.put("message","failed");
        }
        return jsonObject;
    }
}

ProductService中定义了添加商品，销售商品等方法，ProductServiceImpl是其实现类，具体实现其中的方法。

2.2.2 SaleRecordsService,SaleRecordsServiceImpl

package dave.study.demo.service;

import com.github.pagehelper.Page;
import dave.study.demo.dto.SaleRecordsDTO;
import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleRecords;

public interface SaleRecordService {
    Page<SaleRecords> getSaleRecords(SaleRecordsDTO saleRecords);

    Page<Sale>  getSale(SaleRecordsDTO sale);
}

package dave.study.demo.service;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import dave.study.demo.dao.SaleMapper;
import dave.study.demo.dao.SaleRecordsMapper;
import dave.study.demo.dto.SaleRecordsDTO;
import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleExample;
import dave.study.demo.entity.SaleRecords;
import dave.study.demo.entity.SaleRecordsExample;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;

@Service
public class SaleRecordServiceImpl implements SaleRecordService {

    @Resource
    private SaleRecordsMapper saleRecordsMapper;

    @Resource
    private SaleMapper saleMapper;

    @Override
    public Page<SaleRecords> getSaleRecords(SaleRecordsDTO saleRecords) {
        SaleRecordsExample example = new SaleRecordsExample();
        example.setOrderByClause("`p_date` desc");
        SaleRecordsExample.Criteria criteria = example.createCriteria();
        if(null!=saleRecords.getpSaleId() && !"".equals(saleRecords.getpSaleId())){
            criteria.andPSaleIdEqualTo(saleRecords.getpSaleId());
        }
        if(null!=saleRecords.getpName() && !"".equals(saleRecords.getpName())){
            criteria.andPNameLike("%"+saleRecords.getpName()+"%");
        }
        if(null!=saleRecords.getpBuyer() && !"".equals(saleRecords.getpBuyer())){
            criteria.andPBuyerLike("%"+saleRecords.getpBuyer()+"%");
        }
        if(null!=saleRecords.getDateStart() && !"".equals(saleRecords.getDateStart())){
            criteria.andPDateGreaterThanOrEqualTo(saleRecords.getDateStart()+" 00:00:00");
        }
        if(null!=saleRecords.getDateEnd() && !"".equals(saleRecords.getDateEnd())){
            criteria.andPDateLessThanOrEqualTo(saleRecords.getDateEnd()+" 23:59:59");
        }
        PageHelper.startPage(saleRecords.getPage(),saleRecords.getPageCount());
        Page<SaleRecords> saleRecordsList = (Page<SaleRecords>) saleRecordsMapper.selectByExample(example);
        return saleRecordsList;
    }

    @Override
    public Page<Sale> getSale(SaleRecordsDTO sale) {
        SaleExample example = new SaleExample();
        example.setOrderByClause("`p_date` desc");
        SaleExample.Criteria criteria = example.createCriteria();
        if(null!=sale.getpBuyer() && !"".equals(sale.getpBuyer())){
            criteria.andPBuyerLike("%"+sale.getpBuyer()+"%");
        }
        if(null!=sale.getDateStart() && !"".equals(sale.getDateStart())){
            criteria.andPDateGreaterThanOrEqualTo(sale.getDateStart()+" 00:00:00");
        }
        if(null!=sale.getDateEnd() && !"".equals(sale.getDateEnd())){
            criteria.andPDateLessThanOrEqualTo(sale.getDateEnd()+" 23:59:59");
        }
        PageHelper.startPage(sale.getPage(),sale.getPageCount());
        Page<Sale> saleList = (Page<Sale>) saleMapper.selectByExample(example);
        return saleList;
    }
}

2.2.3 UserService,UserServiceImpl

package dave.study.demo.service;

import dave.study.demo.entity.User;
import org.json.simple.JSONObject;

import java.util.List;

public interface UserService {
    List<User> queryAllUser();

    String addUser(User user);

    JSONObject userLogin(User user);
}


package dave.study.demo.service;

import com.fasterxml.jackson.annotation.JsonAlias;
import dave.study.demo.dao.UserMapper;
import dave.study.demo.entity.User;
import dave.study.demo.entity.UserExample;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UserMapper userMapper;

    @Override
    public List<User> queryAllUser() {
        List<User> list = userMapper.selectByExample(new UserExample());
        return list;
    }

    @Override
    public String addUser(User user) {
        int i = userMapper.insertSelective(user);
        String str = i>0?"200":"400";
        return str;
    }

    @Override
    public JSONObject userLogin(User user) {
        UserExample example = new UserExample();
        JSONObject jsonObject = new JSONObject();
        example.createCriteria().andFlagEqualTo(0).andUsernameEqualTo(user.getUsername())
                .andPasswordEqualTo(user.getPassword());
        int i = userMapper.countByExample(example);
        if(i >= 1){
            jsonObject.put("status",200);
            jsonObject.put("message","login success");
            return jsonObject;
        }else{
            jsonObject.put("status",400);
            jsonObject.put("message","login failed");
            return jsonObject;
        }
    }
}

2.3 dao层

2.3.1 ProductMapper

package dave.study.demo.dao;

import dave.study.demo.entity.Product;
import dave.study.demo.entity.ProductExample;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface ProductMapper {
    int countByExample(ProductExample example);

    int deleteByExample(ProductExample example);

    int deleteByPrimaryKey(Integer id);

    int insert(Product record);

    int insertSelective(Product record);

    List<Product> selectByExample(ProductExample example);

    Product selectByPrimaryKey(Integer id);

    int updateByExampleSelective(@Param("record") Product record, @Param("example") ProductExample example);

    int updateByExample(@Param("record") Product record, @Param("example") ProductExample example);

    int updateByPrimaryKeySelective(Product record);

    int updateByPrimaryKey(Product record);
}

2.3.2 SaleMapper

package dave.study.demo.dao;

import dave.study.demo.entity.Sale;
import dave.study.demo.entity.SaleExample;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface SaleMapper {
    int countByExample(SaleExample example);

    int deleteByExample(SaleExample example);

    int deleteByPrimaryKey(Integer id);

    int insert(Sale record);

    int insertSelective(Sale record);

    List<Sale> selectByExample(SaleExample example);

    Sale selectByPrimaryKey(Integer id);

    int updateByExampleSelective(@Param("record") Sale record, @Param("example") SaleExample example);

    int updateByExample(@Param("record") Sale record, @Param("example") SaleExample example);

    int updateByPrimaryKeySelective(Sale record);

    int updateByPrimaryKey(Sale record);
}

2.3.3 SaleRecordsMapper

package dave.study.demo.dao;

import dave.study.demo.entity.SaleRecords;
import dave.study.demo.entity.SaleRecordsExample;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface SaleRecordsMapper {
    int countByExample(SaleRecordsExample example);

    int deleteByExample(SaleRecordsExample example);

    int deleteByPrimaryKey(Integer id);

    int insert(SaleRecords record);

    int insertSelective(SaleRecords record);

    List<SaleRecords> selectByExample(SaleRecordsExample example);

    SaleRecords selectByPrimaryKey(Integer id);

    int updateByExampleSelective(@Param("record") SaleRecords record, @Param("example") SaleRecordsExample example);

    int updateByExample(@Param("record") SaleRecords record, @Param("example") SaleRecordsExample example);

    int updateByPrimaryKeySelective(SaleRecords record);

    int updateByPrimaryKey(SaleRecords record);
}

2.3.4 UserMapper

package dave.study.demo.dao;

import dave.study.demo.entity.User;
import dave.study.demo.entity.UserExample;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface UserMapper {
    int countByExample(UserExample example);

    int deleteByExample(UserExample example);

    int deleteByPrimaryKey(Integer id);

    int insert(User record);

    int insertSelective(User record);

    List<User> selectByExample(UserExample example);

    User selectByPrimaryKey(Integer id);

    int updateByExampleSelective(@Param("record") User record, @Param("example") UserExample example);

    int updateByExample(@Param("record") User record, @Param("example") UserExample example);

    int updateByPrimaryKeySelective(User record);

    int updateByPrimaryKey(User record);
}

2.4 DTO层（用于接收前端一些特定的查询参数）

2.4.1 DTO（由于用到分页查询，所以讲页码等参数封装了一个公共类）

package dave.study.demo.dto;

public class DTO {
    private Integer page;
    private Integer pageCount;
    private String dateStart;
    private String dateEnd;

    public String getDateStart() {
        return dateStart;
    }

    public void setDateStart(String dateStart) {
        this.dateStart = dateStart;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public String getDateEnd() {
        return dateEnd;
    }

    public void setDateEnd(String dateEnd) {
        this.dateEnd = dateEnd;
    }

    public Integer getPageCount() {
        return pageCount;
    }

    public void setPageCount(Integer pageCount) {
        this.pageCount = pageCount;
    }
}

2.4.2 SaleRecordsDTO(集成DTO，并自定义一些需要的查询参数)

package dave.study.demo.dto;

public class SaleRecordsDTO extends DTO {
    private String pName;

    public Integer getpSaleId() {
        return pSaleId;
    }

    public void setpSaleId(Integer pSaleId) {
        this.pSaleId = pSaleId;
    }

    private Integer pSaleId;

    public String getpName() {
        return pName;
    }

    public void setpName(String pName) {
        this.pName = pName;
    }

    public String getpBuyer() {
        return pBuyer;
    }

    public void setpBuyer(String pBuyer) {
        this.pBuyer = pBuyer;
    }

    private String pBuyer;
}

2.5 entity

这一层就是放与数据表对应的实体类，根据之前文章提供的mybatis-generator生成。

2.6 util(放一些可能需要的工具类)

2.6.1 CorsConfig(配置允许跨域访问)

package dave.study.demo.util;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 跨域问题
 *
 * @author mousejoo
 */
@Configuration
public class CorsConfig {
	private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }

}

三、前端代码

3.1 代码结构

在这里插入图片描述
layui文件夹，直接在layui官网下载即可，主要的业务代码在login.html和index.html中。

3.2 具体代码

3.2.1 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style type="text/css">
        .container{
            width: 400px;
            height: 250px;
            min-height: 250px;
            max-height: 250px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
        }
        .close{
            background-color: white;
            border: none;
            font-size: 18px;
            margin-left: 410px;
            margin-top: -10px;
        }

        .layui-input{
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }
        .layui-form-item{
            margin-left: -20px;
        }
        #logoid{
            margin-top: -16px;
            padding-left:150px;
            padding-bottom: 15px;
        }
        .layui-btn{
            margin-left: -50px;
            border-radius: 5px;
            width: 350px;
            height: 40px;
            font-size: 15px;
        }
        .verity{
            width: 120px;
        }
        .font-set{
            font-size: 13px;
            text-decoration: none;
            margin-left: 100px;
        }
        a:hover{
            text-decoration: underline;
        }

    </style>
</head>
<body>
<form class="layui-form" action="" method="post">
    <div class="container">
        <div class="layui-form-mid layui-word-aux" style="text-align: center;width: 100%">
            <span style="font-size: 20px">企业内部管理平台</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
        </div>
        <!-- 			  <div class="layui-form-item">
                            <label class="layui-form-label">记住密码</label>
                            <div class="layui-input-block">
                              <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                            </div>
                      </div> -->

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
            </div>
        </div>
        <a href="" class="font-set">忘记密码?</a>  <a href="" class="font-set">立即注册</a>
    </div>
</form>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','layer'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,$=layui.jquery;

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:'http://127.0.0.1:9090/demo/test/login',
                method:'POST',
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data:JSON.stringify(data.field),
                success:function(res){
                    if(res.status=='200'){
                        localStorage.setItem("token","18123u129");
                        layer.msg('login success',{anim: 0,time: 500},
                            function () {
                            location.href="index.html";
                        });
                    }else{
                        layer.alert('login failed,please try again')
                    }
                },error:function (res) {
                    alert("失败,请重试")
                }
            }) ;
            return false;

        });

    });
</script>
</body>
</html>

3.2.2 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>后台管理系统</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="TabBrief">
    <ul class="layui-tab-title">
        <li lay-id="1" class="layui-this">商品进货</li>
        <li lay-id="7">商品销售</li>
        <li lay-id="2">商品列表</li>
        <li lay-id="3">商品记录</li>
        <li lay-id="4">供应商管理</li>
        <li lay-id="5">工人管理</li>
        <li lay-id="6">业绩统计</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" lay-verify="required" placeholder="请输入商品名称" name="pName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品数量</label>
                        <div class="layui-input-inline">
                            <input type="text" lay-verify="required" placeholder="请输入商品数量" name="pCount" id="count" autocomplete="off" class="layui-input number">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">商品单位</label>
                        <div class="layui-input-block">
                            <select name="pUnit" lay-filter="unit">
                                <option value="包">包</option>
                                <option value="方">方</option>
                                <option value="桶">桶</option>
                                <option value="个">个</option>
                                <option value="袋">袋</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品供应商</label>
                        <div class="layui-input-inline">
                            <input type="text" placeholder="请输入商品供应商" name="supplier" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品单价</label>
                        <div class="layui-input-inline">
                            <input type="text" placeholder="￥" name="pPriceIn" id="price" autocomplete="off" class="layui-input number" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">商品总价</label>
                        <div class="layui-input-inline">
                            <input type="text" placeholder="￥" name="total_money" id="total_money" autocomplete="off" class="layui-input number">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">进货日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="date" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input type="text" placeholder="可以填电话或其他" name="remark" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-tab-item">
            <div class="saleTable">
                买家
                <div class="layui-inline">
                    <input class="layui-input" name="sale_buyer" id="sale_buyer" autocomplete="off">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                日期
                <div class="layui-inline">
                    <input class="layui-input search-date" name="sale_start" id="sale_start" autocomplete="off">
                </div>
                -
                <div class="layui-inline">
                    <input class="layui-input search-date" name="sale_end" id="sale_end" autocomplete="off">
                </div>
                <button class="layui-btn search" data-type="reload">搜索</button>
                <button class="layui-btn create" data-type="create">创建销售记录</button>
            </div>
            <table class="layui-hide" id="sale_table" lay-filter="sale_table"></table>

        </div>

        <div class="layui-tab-item">
            <table id="demo" lay-filter="test"></table>
        </div>
        <div class="layui-tab-item"><div class="demoTable">
            订单号
            <div class="layui-inline">
                <input class="layui-input" name="search_number" id="search_number" autocomplete="off">
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            商品名
            <div class="layui-inline">
                <input class="layui-input" name="search_name" id="search_name" autocomplete="off">
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            买家
            <div class="layui-inline">
                <input class="layui-input" name="search_buyer" id="search_buyer" autocomplete="off">
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            日期
            <div class="layui-inline">
                <input class="layui-input search-date" name="search_start" id="search_start" autocomplete="off">
            </div>
            -
            <div class="layui-inline">
                <input class="layui-input search-date" name="search_end" id="search_end" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
            <table class="layui-hide" id="search_table" lay-filter="search_table"></table>
        </div>
        <div class="layui-tab-item">持续更新中</div>
        <div class="layui-tab-item">持续更新中</div>
        <div class="layui-tab-item">持续更新中</div>
    </div>
</div>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['element','form','laydate','table'], function(){
        let $ = layui.jquery
            ,element = layui.element
            ,form = layui.form
            ,laydate = layui.laydate
            ,layui_table = layui.table
        ; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //日期
        laydate.render({
            elem: '#date',
            type: 'datetime',
            value: new Date()
        });

        lay('.search-date').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        //监听行工具事件
        layui_table.on('tool(test)', function(obj){
            let data = obj.data;
            if(obj.event === 'sale'){
                layer.open({
                    content: `
                            <input type="text" hidden="hidden" name="pId" value=${data["id"]}>
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input style="margin-bottom: 3px" type="text" readonly="readonly" name="pName" value=${data["pName"]} autocomplete="off" class="layui-input">
                        </div>


                        <label class="layui-form-label">数量</label>
                        <div class="layui-input-block">
                            <input style="margin-top: 4px;margin-bottom: 3px" type="text" name="pCount" id="count" value=1 autocomplete="off" class="layui-input number">
                        </div>

                        <label class="layui-form-label">销售订单号</label>
                        <div class="layui-input-block">
                            <input style="margin-bottom: 3px" type="text" placeholder="普通买主可以不用填"  name="pSaleId"  autocomplete="off" class="layui-input">
                        </div>
                   `,
                    yes: function(index, layero){
                        let input = layero.find("input");
                        let data_new = {"pId":parseInt(input[0].value),"pName":input[1].value,"pCount":input[2].value,"pSaleId":input[3].value};
                        $.ajax({
                            url:"http://127.0.0.1:9090/demo/product/sale",
                            method:"POST",
                            async:false,
                            contentType: "application/json",
                            data:JSON.stringify(data_new),
                            success:function (res) {
                                if(res.status==200){
                                    layer.msg("销售成功",{time:800});
                                    layui_table.reload("demo");
                                }else{
                                    layer.alert(res.message);
                                }
                                layer.close(index);
                            },error:function (res) {
                                layer.alert("销售失败");
                                layer.close(index);
                            }
                        });
                    }
                });
            }
        });
        //页签切换调用不同请求
        element.on('tab(TabBrief)',function (elem) {
            let id = this.getAttribute("lay-id");
            if(id == 2){
                //商品列表
                layui_table.render({
                    elem: '#demo'
                    ,url: 'http://127.0.0.1:9090/demo/product/get' //数据接口
                    ,method:'GET'
                    ,limit:100
                    ,cellMinWidth: 80
                    ,cols: [[ //表头
                        {field: 'id',title:"商品编号"}
                        ,{field: 'pName', title: '商品名称'}
                        ,{field: 'pCount', title: '商品数量'}
                        ,{field: 'pUnit', title: '商品单位'}
                        ,{field: 'right', title: '操作',toolbar:"#barDemo"}
                    ]]
                });

            }
            if(id == 3){
                $('#search_number').val("");
                $('#search_name').val("");
                $('#search_buyer').val("");
                $('#search_start').val("");
                $('#search_end').val("");
                //方法级渲染
                layui_table.render({
                    elem: '#search_table'
                    ,method:"POST"
                    ,url: 'http://127.0.0.1:9090/demo/product/getsale-records'
                    ,cols: [[
                        {field:'pSaleId', title: '销售订单号', width:160}
                        ,{field:'pName', title: '商品名称', width:160}
                        ,{field:'pCount', title: '商品数量', width:150}
                        ,{field:'pDate', title: '销售日期', width:250}
                        ,{field:'pBuyer', title: '买家'}
                    ]]
                    ,request: {
                        limitName: 'pageCount' //每页数据量的参数名，默认：limit
                    }
                    ,page: true
                    ,contentType:"application/json"
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.list //解析数据列表
                        }
                    }
                    ,id: 'testReload'
                    ,height: 400
                });
            }

            if(id == 7){
                $('#sale_buyer').val("");
                $('#sale_start').val("");
                $('#sale_end').val("");
                //方法级渲染
                layui_table.render({
                    elem: '#sale_table'
                    ,method:"POST"
                    ,url: 'http://127.0.0.1:9090/demo/product/getsale'
                    ,cols: [[
                        {field:'id', title: '销售订单号'}
                        ,{field:'pBuyer', title: '买家'}
                        ,{field:'pPayMoney', title: '已付金额', width:250,templet:function(d){
                                return d.pPayMoney == null ? 0 : d.pPayMoney;}}
                        ,{field:'pDate', title: '销售日期', width:250,templet:function(d){
                                return d.pDate == null ? '暂无' : d.pDate;}}
                        ,{field:'pFlag', title: '订单状态', width:250,templet:function(d){
                                return d.pFlag == null ? '已结账' : d.pFlag;}}
                    ]]
                    ,request: {
                        limitName: 'pageCount' //每页数据量的参数名，默认：limit
                    }
                    ,page: true
                    ,contentType:"application/json"
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.list //解析数据列表
                        }}
                    ,id: 'saleReload'
                    ,height: 400
                });
            }

        });

        let active = {
            reload: function(){
                let reload_data = {};
                let searchName = $('#search_name');
                let searchBuyer = $('#search_buyer');
                let searchStart = $('#search_start');
                let searchEnd = $('#search_end');
                let searchNumber = $('#search_number');
                reload_data['pName'] = searchName.val();
                reload_data['pBuyer'] = searchBuyer.val();
                reload_data['dateStart'] = searchStart.val();
                reload_data['dateEnd'] = searchEnd.val();
                reload_data['pSaleId'] = parseInt(searchNumber.val());
                //执行重载
                layui_table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where:reload_data
                }, 'data');
            }
        };

        let sale_active = {
            reload: function(){
                let reload_data = {};
                let saleBuyer = $('#sale_buyer');
                let saleStart = $('#sale_start');
                let saleEnd = $('#sale_end');
                reload_data['pBuyer'] = saleBuyer.val();
                reload_data['dateStart'] = saleStart.val();
                reload_data['dateEnd'] = saleEnd.val();
                //执行重载
                layui_table.reload('saleReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where:reload_data
                }, 'data');
            }
        };


        $('.saleTable .search').on('click', function(){
            let type = $(this).data('type');
            sale_active[type] ? sale_active[type].call(this) : '';
        });

        $('.saleTable .create').on('click', function(){
            layer.open({
                content: `
                        <label class="layui-form-label">买主</label>
                        <div class="layui-input-block">
                           <input style="margin-top: 4px" type="text" name="pCount" id="buyer" value="过路买主" autocomplete="off" class="layui-input">
                        </div>
                   `,
                yes: function(index, layero){
                    let input = layero.find("input");
                    let data_new = {"pBuyer":input[0].value};
                    $.ajax({
                        url:"http://127.0.0.1:9090/demo/product/add-sale",
                        method:"POST",
                        async:false,
                        contentType: "application/json",
                        data:JSON.stringify(data_new),
                        success:function (res) {
                            layer.msg("创建成功",{time:800});
                            layui_table.reload('saleReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            }, 'data');
                            layer.close(index);
                        },error:function (res) {
                            layer.alert("创建失败");
                            layer.close(index);
                        }
                    });
                }
            });
        });

        $('.demoTable .layui-btn').on('click', function(){
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听提交
        form.on('submit(demo)', function(data){
            $.ajax({
                url:'http://127.0.0.1:9090/demo/product/add',
                method:'POST',
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data:JSON.stringify(data.field),
                success:function(res){
                    if(res.status=='200'){
                        layer.msg("进货成功",{time:500});
                        $(".layui-form")[0].reset();
                        form.render();
                    }else{
                        alert("异常，请联系管理员解决")
                    }
                },error:function (res) {
                    alert("失败,请重试")
                }
            }) ;
            return false;
        });

        //控制只能输入正整数和两位小数
        $(".number").on("input",function(e){
            e.target.value = e.target.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符

            e.target.value = e.target.value.replace(/^\./g,""); //验证第一个字符是数字而不是.

            e.target.value = e.target.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.

            e.target.value = e.target.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只允许输入一个小数点

            e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        });

        //监听数据修改
        $("#total_money").on('change',function (data) {
            let total_money = data.delegateTarget.value;
            let count = $("#count").val();
            console.log(count);
            $("#price").val(total_money/count);
        });
        $("#price").on('change',function (data) {
            let price = data.delegateTarget.value;
            let count = $("#count").val();
            console.log(count);
            $("#total_money").val(price * count);
        });
        $("#count").on('change',function (data) {
            let count = data.delegateTarget.value;
            let price = $("#price").val();
            console.log(count);
            $("#total_money").val(price * count);
        })
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="sale">销售</a>
</script>

</body>
</html>