二〇二三-三-二十九

产品增加

1. “添加商品”按钮事件

   <div class="layui-card-header">
       <button class="layui-btn" onclick="xadmin.open('添加商品','/html/product/product-add.html',600,400)"><i
               class="layui-icon"></i>添加
       </button>
   </div>
   

2. 修改添加商品页面表单

3. 导入添加商品页面js

4. 添加页面表单设置文件上传功能

   <!--product-add.html-->
   
   <button type="button" class="layui-btn" id="test1">上传图片</button>
   <div class="layui-upload-list">
       <img class="layui-upload-img" id="demo1" width="200" height="200">
       <p id="demoText"></p>
   </div>
   

   //product-add.js
   
   let uploadInst = upload.render({
       elem: '#test1'
       , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
       , before: function (obj) {
           //预读本地文件示例，不支持ie8
           obj.preview(function (index, file, result) {
               $('#demo1').attr('src', result); //图片链接（base64）
           });
       }
       , done: function (res) {
           //如果上传失败
           if (res.code > 0) {
               return layer.msg('上传失败');
           }
           //上传成功的一些操作
           console.log(res);
           sessionStorage.setItem("imgHref", res.data);
           //……
           $('#demoText').html(''); //置空上传失败的状态
       }
   });
   

5. 通过单行选择框录入产品类型

   1. html设置select标签

      <div class="layui-input-block" style="width: 200px" >
          <select id="type_id" name="type_id" lay-filter="typeName" >
              <option value=""></option>
          </select>
      </div>
      

   2. js通过ajax、for循环和 .html 进行传值赋值

      function findAllType() {
          $.ajax({
              url: '/back/product_type/findall',
              data: {enable: 1},
              type: 'get',
              dataType: 'json',
              success: function (res) {
                  console.log(res.data);
                  //    将得到的值赋给下拉菜单
                  setTypeData(res.data);
      
              },
          })
      }
      
      function setTypeData(data) {
          let html = '';
          for (let i = 0; i < data.length; i++) {
              html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'
          }
          $("#type_id").html(html)
          form.render();
      }
      

6. 监听 添加表单的 “新增” 按钮

   form.on('submit(add)',function(data){}
   

7. 通过ajax将获取到的表单数据传递给servlet

   1. 获取前面上传的文件的名称（路径）并赋值给表单数据对应字段

      在上传文件时将文件名称上传至 sessionStorage

      ajax传值时从sessionStorage取值

      data.img = sessionStorage.getItem("imgHref");
      

   2. 获取单行选择框中选中数据的value值并赋值给表单数据

      let typeId = document.getElementById("type_id");
      let type_id = typeId.options[typeId.selectedIndex].value;
      data.type_id = type_id;
      

8. 关闭表单页面并刷新列表