|
先复制所有的代码
- <title> 添加商标信息 </title>
- <div class="layui-form" lay-filter="lm-sb-old">
- <table class="layui-table">
- <colgroup>
- <col width="150">
- <col>
- <col width="150">
- <col>
- </colgroup>
- <thead>
- <tr>
- <th>项目</th>
- <th>内容</th>
- <th>项目</th>
- <th>内容</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>档案号</td>
- <td><input type="text" name="cid" lay-verify="required" placeholder="请输入档案号" autocomplete="off"
- class="layui-input"></td>
- <td>公司名称</td>
- <td> <input type="text" id="lm-companyId" name="companyName" lay-verify="required" placeholder="请输入公司名称"
- autocomplete="off" class="layui-input">
- <input type="hidden" name="companyId">
- </td>
- </tr>
- <tr>
- <td>商标名称</td>
- <td><input type="text" name="name" lay-verify="required" placeholder="请输入商标名称" autocomplete="off"
- class="layui-input"></td>
- <td>商标注册号</td>
- <td> <input type="text" name="registerNumber" autocomplete="off" class="layui-input"></td>
- </tr>
- <tr>
- <td>申请日期</td>
- <td> <input type="text" name="applyDate" id="applyDate" lay-verify="applyDate" placeholder="yyyy-MM-dd"
- autocomplete="off" class="layui-input"></td>
- <td>注册日期</td>
- <td> <input type="text" name="registerDate" id="registerDate" lay-verify="registerDate"
- placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></td>
- </tr>
- <tr>
- <td>到期日期</td>
- <td> <input type="text" name="expiredDate" id="expiredDate" placeholder="yyyy-MM-dd" autocomplete="off"
- class="layui-input"></td>
- <td>商标有效期</td>
- <td><input type="text" name="periodOfValidity" placeholder="" autocomplete="off" class="layui-input">
- </td>
- </tr>
- <tr>
- <td>代理费用</td>
- <td><input type="text" name="price" autocomplete="off" class="layui-input"></td>
- <td>商标备注</td>
- <td><input type="text" name="remark" autocomplete="off" class="layui-input"></td>
- </tr>
- <tr>
- <td>商标类别</td>
- <td>
- <select name="tradmarkCategoryId" id="tradmarkCategoryId">
- <option></option>
- </select>
- </td>
- <td>商标价值</td>
- <td>
- <select name="tradmarkValueId" id="tradmarkValueId">
- <option></option>
- </select>
- </td>
- </tr>
- <tr>
- <td>添加人</td>
- <td><input type="text" name="addName" placeholder="" autocomplete="off" class="layui-input"></td>
- <td>更新人</td>
- <td><input type="text" name="updateName" placeholder="" autocomplete="off" class="layui-input"></td>
- </tr>
- <tr>
- <td>商标类型</td>
- <td>
- <select name="typeId" id="typeIds">
- <option></option>
- </select>
- </td>
- <td>业务类型</td>
- <td>
- <select name="serviceTypeId" id="serviceTypeIds">
- <option></option>
- </select>
- </td>
- </tr>
- <tr>
- <td>商标图样</td>
- <td colspan="3">
- <button type="button" class="layui-btn layui-btn-normal" id="choose-img">选择文件</button>
- <!-- <button type="button" class="layui-btn" id="test-upload-change-action">开始上传</button> -->
- <input type="hidden" name="image" class="layui-input" id="image">
- <span id="img-name-span"> </span>
- </td>
- </tr>
- <tr>
- <td>相关附件</td>
- <td colspan="3">
- <div class="layui-upload">
- <button type="button" class="layui-btn layui-btn-normal" id="lm-m-c">选择多文件</button>
- <div class="layui-upload-list">
- <table class="layui-table">
- <thead>
- <tr>
- <th>文件名</th>
- <th>大小</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="lm-tm-a-f-t"></tbody>
- </table>
- </div>
- </div>
- <!-- <input type="hidden" name="attachedFileList" class="layui-input" id="attachedFileList"> -->
- </td>
- </tr>
- <tr>
- <td colspan="4" class="lm-text-center">
- <input type="button" lay-submit lay-filter="lm-sb-old-submit" id="lm-sb-old-submit" value="确认"
- class="layui-btn">
- </td>
- </tr>
- </tbody>
- </table>
- <script>
- layui.use(['index', 'table', 'laomo', 'form', 'laydate', 'upload', 'admin', 'layer'], function () {
- var $ = layui.$,
- table = layui.table,
- form = layui.form,
- admin = layui.admin,
- element = layui.element,
- layer = layui.layer,
- laydate = layui.laydate,
- upload = layui.upload,
- view = layui.view,
- laomo = layui.laomo,
- index = parent.layer.getFrameIndex(window.name); //获取窗口索引
- // 关于文件问题
- // 10.25
- // 1。商品自己传的 与 统一导入的 OSS的路径未能统一 自己传的图标目前不显示
- // 2. 多附件 没有一个说法,说法就是先放着 -- 不处理 也不展示 ,且 上传的名称为 attachedFileList ,但是详细的接受的名称为 attachedList
- var companyId_temp = '';//公司id中间量
- form.render();//刷新select选择框渲染
- laydate.render({
- elem: '#applyDate'
- });
- laydate.render({
- elem: '#registerDate'
- });
- laydate.render({
- elem: "#expiredDate"
- });
- let lmImage ; // 上传的图标
- let uplodatList ; // 上传的文件
- //商标图样上传
- upload.render({
- elem: '#choose-img'
- , url: layui.setter.linqiangurl + 'myFile/addAttachedFile'
- , auto: false
- , bindAction: '#t'
- , choose: function (obj) {
- obj.preview(function (index, file, result) {
- $('#img-name-span').html(file.name);
- lmImage = file;
- });
- }
- });
- // 相关附件
- let uploadListIns = upload.render({
- elem: '#lm-m-c'
- , url: layui.setter.linqiangurl + 'myFile/addAttachedFile'
- , accept: 'file'
- , multiple: true
- , auto: false
- , bindAction: '#tr'
- , choose: function (obj) {
- var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
- //读取本地文件
- obj.preview(function (index, file, result) {
- var tr = $(['<tr id="upload-' + index + '">'
- , '<td>' + file.name + '</td>'
- , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
- , '<td><button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button></td>'
- , '</tr>'].join(''));
-
- //删除
- tr.find('.test-upload-demo-delete').on('click', function () {
- delete files[index]; //删除对应的文件
- uplodatList = files; // 丢过去
- tr.remove();
- uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
- });
- $('#lm-tm-a-f-t').append(tr);
- uplodatList = files; // 丢过去
- });
- }
- });
- laomo.s("config/name/tradmark_type", "typeIds"); //商标类型
- laomo.s("config/name/tradmark_state", "serviceTypeIds"); //商标状态
- laomo.s("config/name/tradmark_value", "tradmarkValueId"); //商标价值
- laomo.s("config/name/tradmark_category", "tradmarkCategoryId"); //商标类别
- // 选择公司
- $('#lm-companyId').on('click', function () {
- admin.popup({
- title: "选择公司",
- area: ["1000px", "700px"],
- btn: ['关闭']
- , success: function (index, layero) {
- view(this.id).render("lay/companyinfo");
- },
- end: function () {
- var data_temp = '';
- if (localStorage.getItem('trademark_company_add_return')) {
- var data = localStorage.getItem('trademark_company_add_return');
- data_temp = JSON.parse(data);
- localStorage.removeItem('trademark_company_add_return');
- }
- if (data_temp) {
- companyId_temp = data_temp.id;//公司id
- form.val('lm-sb-old', {
- 'companyId': data_temp.id, //公司名称
- 'companyName': data_temp.appCnName
- });
- form.render();
- }
- }
- });
- });
- //监听提交
- form.on("submit(lm-sb-old-submit)", function (data) {
- var field = data.field; //获取提交的字段
- var subForm = new FormData();
- // 循环放入key值
- for (var i in field) {
- subForm.append(i, field[i]);
- }
-
-
- if(lmImage){
- subForm.append('imageFile',lmImage);
- }
- let attachFileList =[];
- // 依据后台要求更改为数组
- if(uplodatList){
- // 先判断这个对象是不是空
- let t3 = Object.keys(uplodatList);
-
- if(t3.length > 0){
- let t = 0;
- for(var i in uplodatList)
- {
- subForm.append('attachFileList'+'['+t+']', uplodatList[i]);
- t ++
- }
- }
- }
-
-
- console.log( subForm.get('attachFileList[0]') )
- $.ajax({
- url: layui.setter.linqiangurl + "trademark/add",
- type: "post",
- data: subForm,
- headers: {
- token:
- layui.data(layui.setter.tableName)[
- layui.setter.request.tokenName
- ] || ""
- },
- processData: false,
- contentType: false,
- dataType: "json",
- success: function (e) {
- if(e.code !== -1){
- layer.closeAll(); //执行关闭
- }else{
- layer.msg(e.message,{icon:2});
- }
-
- }
- });
- return false
- });
- })
- </script>
- </div>
复制代码 这是当时做商标的,添加一个商标信息页面;
这个页面的要求是 所有的 图片、多附件 都以formData的形式去提交;
遇到坑1: formData 的获取值的方式?
一开始我用console.log 发现打印出来的 数据不对 是个空对象,后来才想起来formData 的取值方式是这么写的
- subForm.get('attachFileList[0]')
复制代码
遇到坑2: 多文件添加进formData 必须用一个循环,不能直接赋值键值对;
|
|