完整表单全栈代码,有自定义上传功能,项扩展功能,数据回显,异步表单重构,上传文件变量管理,数据认证等

读者须知:

文件是全代码文件,比较长,重点功能部分是前端的script标签的各种功能函数,代码量不大,其他大部分上下文代码作为全局参考

 

 

前端添加文件

extends ../layout/default
include ../components/top_header
include ../components/left_sidebar
include ../components/top_title
include ../components/showErrorMessage
include ../components/breadcrumb

block vars
  - var title ="新建广告材料"
  - origin_app_id = user.origin_app_id||''
  - channels = channels || []
  - applicationList = applicationList || []
  link(rel="stylesheet" type="text/css" href="/assets/css/material.css")
  link(rel="stylesheet" type="text/css" href="/assets/css/duallistbox.css")
  

block top
  +top_header(title,origin_app_id)

block leftbar
  +left_sidebar("materials/")

block top_title
  - var bread = [{path: "/admins/materials/", label: "广告材料管理"}, {label: title}]
  +top_title("新建广告材料")
    +breadcrumb(bread)


block content
  .card.card-border-color.card-border-color-primary
    .card-header.card-header-divider
        | 广告材料资料 
        span.card-subtitle 请填写广告材料相关资料
    .card-body
      +showErrorMessage(error_messages||messages)
      form#submit
        .row
          .col-12.col-md-6
            h4(style='font-weight:bold;') 广告材料归属
            //- .form-group.pt-2
            //-   label.col-3.text-right(for='origin_app_id' required="required") 上游APPID
            //-   input.col-9#origin_app_id.form-control(type="url" name='origin_app_id', placeholder='请输入上游APPID', style='display:inline-block;')
            //- .form-group.pt-2
            //-   label.col-3.text-right(for='origin_post_id') 上游广告位ID
            //-   input.col-9#origin_post_id.form-control(type="url" name='origin_post_id', placeholder='请输入上游广告位ID', style='display:inline-block;')
            .form-group.pt-2
              label.col-3.text-right(for='api_channel') API渠道
              select.col-9#api_channel.form-control(name='api_channel', style='display:inline-block;')
                each v,i in channels
                  option(value=i+1) #{v}
            .form-group.pt-2(style="display:flex;")
              label.col-3.text-right(for='applications') 应用选择
              select.col-9#applications.form-control(style='display:inline-block;' multiple size="5")
                each v,i in applicationList
                  option(value=v._id title=v._id) #{v.app_name}(#{v._id})
            .form-group.pt-2(style="display:flex;")
              label.col-3.text-right(for='unapplications') 应用排除选择
              select.col-9#unapplications.form-control(style='display:inline-block;' multiple size="5")
                each v,i in applicationList
                  option(value=v._id title=v._id) #{v.app_name}(#{v._id})
          
            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 广告材料名称
            .form-group.pt-2
              label.col-3.text-right(for='name') 
                span(style="color:red") *  
                span 广告材料名称
              input.col-9#name.form-control(type="text" name='name', placeholder='请输入广告材料名称', style='display:inline-block;' required)                                    
            
            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 广告材料制作
            .form-group.pt-2
              label.col-3.text-right.align-top(for='api_channel') 广告材料素材
              .col-9.figure.filels
                img.pr-1(src="/assets/images/mv.png", width="50%",onclick="upload('mv')")          
                img.pl-1(src="/assets/images/pic.png", width="50%",onclick="upload('pic')")
            .form-group.pt-2
              span.list-inline-item.col-3.text-right(for='operation') 素材链接操作
              span.col-9#operation 
                a(onclick="addinput()").btn.btn-space.btn-secondary 添加素材链接
                a(onclick="delinput()").btn.btn-space.btn-secondary 删除素材链接
            .form-group.pt-2.url
              label.col-3.text-right(for='url') 素材链接
              input.col-9#url.form-control.materurl(type="text", placeholder='请输入素材链接', style='display:inline-block;')                                    
            .form-group.pt-2.height
              label.col-3.text-right(for='height') 素材高度
              input.col-9#height.form-control.materheight(type="text", placeholder='请输入素材高度(单位:像素)', style='display:inline-block;')                                    
            .form-group.pt-2.width
              label.col-3.text-right(for='width') 素材宽度
              input.col-9#width.form-control.materwidth(type="text", placeholder='请输入素材宽度(单位:像素)', style='display:inline-block;')                                    
            .form-group.pt-2
              label.col-3.text-right(for='title') 广告标题
              input.col-9#title.form-control(type="text" name='title', placeholder='请输入广告标题', style='display:inline-block;')                                    
            .form-group.pt-2
              label.col-3.text-right(for='desc') 广告描述
              input.col-9#desc.form-control(type="text" name='desc', placeholder='请输入广告描述', style='display:inline-block;')
            .form-group.pt-2
              label.col-3.text-right(for='weight') 权重
              select.col-9#weight.form-control(name='weight', style='display:inline-block;')
                option(value=100) 100(最优先)
                option(value=90) 90(次优先)
                option(value=70) 70(较优先)
                option(value=50 selected="selected") 50(一般优先)
                option(value=30) 30(不优先)
                option(value=10) 10(非常不优先)
            .form-group.pt-2
              label.col-3.text-right(for='origin_config') 其它参数
              input.col-9#origin_config.form-control(type='text' name='origin_config', placeholder='请输入上游广告位所需的其它参数', style='display:inline-block;')
            .form-group.pt-2
              label.col-3.text-right(for='type') 类型
              select.col-9#type.form-control(name='type', style='display:inline-block;')
                option(value="1") 视频
                option(value="2") 单图
                option(value="3") 多图
                option(value="4") html文本
                option(value="5") 音频
            .form-group.pt-2
              label.col-3.text-right(for='orientation') 屏幕方向
              select.col-9#orientation.form-control(style='display:inline-block;')
                option(value="") 类型为视频,选择横竖屏
                option(value="1") 竖屏
                option(value="2") 横屏
            .form-group.pt-2
              label.col-3.text-right(for='ad_type') 广告类型
              select.col-9#ad_type.form-control(name='ad_type', style='display:inline-block;')
                option(value="1") 轮播图
                option(value="2") 视频
                option(value="3") 信息流
                option(value="4") 播放式广告
                option(value="5") 开屏
            .form-group.pt-2
              label.col-3.text-right(for='op_type') opType
              select.col-9#op_type.form-control(name='op_type', style='display:inline-block;')
                option(value="0") 无限制
                option(value="1") app下载
                option(value="2") H5
                option(value="3") Deeplink
                option(value="4") 电话广告
                option(value="5") 广点通下载广告
                option(value="6") 微信小程序拉起
                option(value="7") 广电通跳转
                option(value="8") 浏览器打开目标链接
            .form-group.pt-2
              label.col-3.text-right(for='switch_type') 运行开关
              select.col-9#switch_type.form-control(name='switch_type', style='display:inline-block;')
                option(value="1") 开
                option(value="0") 关
            
            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 转化页面
            .form-group.pt-2
              label.col-3.text-right(for='landing_page') 点击素材
              input.col-9#landing_page.form-control(type="url" name='landing_page', placeholder='请输入点击素材', style='display:inline-block;')
            .form-group.pt-2
              label.col-3.text-right(for='download_url') 应用下载地址
              input.col-9#download_url.form-control(type="url" name='download_url', placeholder='请输入应用下载地址', style='display:inline-block;')
            .form-group.pt-2
              label.col-3.text-right(for='deeplink_url') 
                span(style="color:red") *  
                span app唤醒地址
              input.col-9#deeplink_url.form-control(type='url' name='deeplink_url', placeholder='请输入app唤醒地址', style='display:inline-block;')
            
            //- hr.pt-2(style='width:74vw;')
            //- h4(style='font-weight:bold;') 第三方检测
            //- .form-group.pt-2
            //-   label.col-3.text-right(for='url_track_show') 曝光检测
            //-   input.col-9#url_track_show.form-control(type='text' name='url_track_show', placeholder='请输入曝光检测', style='display:inline-block;')            
            //- .form-group.pt-2
            //-   label.col-3.text-right(for='url_track_click') 点击检测
            //-   input.col-9#url_track_click.form-control(type='text' name='url_track_click', placeholder='请输入点击检测', style='display:inline-block;')            
            //- .form-group.pt-2
            //-   label.col-3.text-right(for='url_track_dplink') 唤醒检测
            //-   input.col-9#url_track_dplink.form-control(type='text' name='url_track_dplink', placeholder='请输入唤醒检测', style='display:inline-block;')                    
        
        input#num(type="text" style="display: none;" value=applicationList.length)
        input#mvfile(type="file" onchange="myupload('mv')" style="display: none;" accept="video/*")
        input#picfile(type="file" onchange="myupload('pic')" style="display: none;" accept="image/*")
        hr.pt-2(style='width:74vw;')
        .text-right
            a(href='/admins/materials/').btn.btn-space.btn-secondary 取消
            button.btn.btn-space.btn-primary.mr-3(onclick="asyncSubmit()") 提交

block script
  script(src="/assets/js/duallistbox.js")
  script.
    $(document).ready(function(){
      //- 穿梭框渲染
      acBoxRender()
    })

    //- 定义全局变量上传文件数组
    window.files = []
    l = console.log
    acBoxL = $('#num').val()

    //- 上传事件转发函数
    function upload(type){
      type == 'mv' ? $('#mvfile')[0].click() : $('#picfile')[0].click()
    }    

    //- 异步表单提交事件函数
    async function asyncSubmit(){
      event.preventDefault()
      dealurl()     // 处理素材链接框
      if(files.length<1) return alert('请添加素材')

      //- 表单必填项验证
        //- 屏幕方向参数验证
      if([1].includes(+$('#type').val())){
        if(!$('#orientation').val()) return alert('当类型为视频时,必须选择屏幕方向')
      }else{
        if($('#orientation').val()) return alert('当类型不为视频时,不能选择写屏幕方向')
      }
        //- 表单必填字段验证
      let formDatas = $("#submit").serializeArray()
      let optionField = ['name','deeplink_url']
      let required = formDatas.every(v=>{return optionField.includes(v.name) ? v.value : true})
      if(!required) return alert('带星号为必填项,请检查你的未填项继续填写')
        //- 素材合法性验证
      if($('#type').val() == 2){
        if(files.length != 1 || !files[0].width) return alert('当类型为单图,必须是只有一个图片素材')
        window.isfull = files[0].height > files[0].width
        let pass = isfull ? files[0].width > 539 && files[0].height > 959 : files[0].width > 959 && files[0].height > 539
        if(!pass && $('#ad_type').val() == 5) return alert('当类型为单图,像素必须是大于960X540')
      }
      if($('#type').val() == 1){
        if(files.length != 1) return alert('当类型为视频时,必须是只有一个视频素材')
      }
      if($('#applications').val().length == acBoxL){
        window.isall = true
      }
      let apps =  $('#applications').val()
      let unapps =  $('#unapplications').val()
      let combiapp = apps.concat(unapps)
      if(combiapp.length != new Set(combiapp).size){
        return alert('应用选择和应用排除含有相同项,请重新选择')
      }        

      //- 重构表单
      let formData = $("#submit").serialize()
        //- 为素材添加type类型参数
      let adtp =  Number($('#type').val())
      adtp === 3 && --adtp
      files.map((v,i)=>{files[i].type = adtp})
      formData += '&features='+JSON.stringify(files)
      formData += '&applications='+(window.isall ? '' : $('#applications').val().join(","))
      formData += '&unapplications='+$('#unapplications').val().join(",")
      formData += '&orientation='+(window.isfull != undefined ? (isfull ? 1 : 2) : +$('#orientation').val())
      let result = await $.post('/admins/materials/add',formData)
      if(result.success){
        alert('添加成功')
        location.href = '/admins/materials/'
      }else{
        if(result.message == '广告材料名称重复') return alert('广告材料名称重复,请修改后重试')
        if(result.message == '广告位id重复') return alert('广告位id重复,请修改后重试')
        if(result.message.msg) return alert(result.message.msg)
        alert('网络忙,请刷新后重试')
        location.reload()
      }
    }

    //- 上传功能事件函数
    function myupload(type){
      //- 重建表单数据
      let ele = type == 'mv' ? '#mvfile' : '#picfile'             
      let file =$(ele)[0].files[0]
      if(file == 'undefined' || file == undefined){return}
      let myform = new FormData()
      myform.append('file',file)

      //- 异步请求服务器
      console.log("正在上传数据,请稍后...")
      let ajax = $.ajax({url:'/admins/materials/upload',type:'post',data:myform,contentType: false,processData: false})
      ajax.then(function(res){        
        const { result, success } = res 
        if(!success) return alert("接口返回值错误")
        console.log("文件上传成功")
        
        //- 上传成功的文件名推入全局变量
        disposeParam = {...result.filePath,...result.fileSize}
        delete disposeParam.type
        files.push(disposeParam)

        //- 文件上传成功把附件局部更新到页面
        let txt = result.filePath.fileName
        let dels = $('[class^="del"]').length+1
        let nclass = 'del' + dels 
        $('.filels').append(`<div title="${result.filePath.filePath}"><span>${txt}</span>   <img  src="/assets/images/del.png", class="${nclass}", width="25""></img></div>`)
        $('.'+nclass).click(function () {delitem()})
      })                  
    } 

    //- 附件删除事件函数
    function delitem(){
      let ele = event.target.parentNode
      let name = ele.textContent.trim()   
      let sure = confirm(`确定要删除${ name }素材吗?`)
      if(sure){
        files.map((v,i) => {
          if(v.fileName == name){
            files.splice(i,1)               
          }
        })
        $(ele).remove()
      }
    }

    //- 媒体主穿梭框渲染
    function acBoxRender(){
      let config = {
        //- nonSelectedListLabel: '未选媒体主列表:',
        //- selectedListLabel: '已选媒体主列表:',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false,           // 出现一个剪头,表示可以一次选择一个
        filterTextClear: '展示所有',
        moveSelectedLabel: "添加",
        moveAllLabel: '添加所有',
        removeSelectedLabel: "移除",
        removeAllLabel: '移除所有',
        infoText: '共{0}个',
        showFilterInputs: false,       // 是否带搜索
        selectorMinimalHeight: 160
      }
      $('#applications').bootstrapDualListbox(config)
      $('#unapplications').bootstrapDualListbox(config)
    }

    //- 素材链接输入框添加
    function addinput(){
      let eles = Array.from($('.width'))
      let len = eles.length
      let endele = eles[len-1]
      let html = `
        <div class="form-group pt-2 url">
          <label class="col-3 text-right" style="margin-right: -4px;">素材链接${len}</label>
          <input class="col-9 form-control materurl" type="text" placeholder='请输入素材链接' style="display:inline-block;">
        </div>
        <div class="form-group pt-2 height">
          <label class="col-3 text-right" style="margin-right: -4px;">素材高度${len}</label>
          <input class="col-9 form-control materheight" type="text" placeholder='请输入素材高度(单位:像素)' style="display:inline-block;">
        </div>
        <div class="form-group pt-2 width">
          <label class="col-3 text-right" style="margin-right: -4px;">素材宽度${len}</label>
          <input class="col-9 form-control materwidth" type="text" placeholder='请输入素材宽度(单位:像素)' style="display:inline-block;">
        </div>
      `
      $(endele).after(html)
    }

    //- 素材链接输入框删除
    function delinput(){
      let eles = Array.from($('.url'))
      let eles1 = Array.from($('.width'))
      let eles2 = Array.from($('.height'))
      if(eles.length<2){
        return alert('素材链接输入框少于两个,不能删除')
      }
      if(confirm('确认删除最后一个素材链接输入框吗?')){
        let endele = eles.pop()
        let endele1 = eles1.pop()
        let endele2 = eles2.pop()
        let value = $(endele).find('input').val()
        files.map((v,i)=>{if(v.url==value) files.splice(i,1)})
        let parent = endele.parentNode
        let parent1 = endele1.parentNode
        let parent2 = endele2.parentNode
        parent.removeChild(endele)
        parent1.removeChild(endele1)
        parent2.removeChild(endele2)
      }
    }

    //- 素材链接输入框表单数据处理
    function dealurl(){
      let eles = Array.from($('.materurl'))
      let eles1 = Array.from($('.materheight'))
      let eles2 = Array.from($('.materwidth'))
      files = files.filter((v)=>{return v.name})
      eles.map((v,i)=>{
        if(v.value){
          files.push({url:v.value,height:+eles1[i].value,width:+eles2[i].value})
        }
      })
    }

 

 

前端修改文件

extends ../layout/default
include ../components/top_header
include ../components/left_sidebar
include ../components/top_title
include ../components/showErrorMessage
include ../components/breadcrumb

block vars
  - var title ="修改广告材料"
  - origin_app_id = user.origin_app_id || ''
  - material = material || {}
  - material.applications = material.applications || []
  - channels = channels || []
  - applicationList = applicationList || []
  link(rel="stylesheet" type="text/css" href="/assets/css/material.css")
  link(rel="stylesheet" type="text/css" href="/assets/css/duallistbox.css")

block top
  +top_header(title,origin_app_id)

block leftbar
  +left_sidebar("materials/")

block top_title
  - var bread = [{path: "/admins/materials/", label: "广告材料管理"}, {label: title}]
  +top_title("修改广告材料")
    +breadcrumb(bread)


block content
  .card.card-border-color.card-border-color-primary
    .card-header.card-header-divider
        | 广告材料资料 
        span.card-subtitle 请填写广告材料相关资料
    .card-body
      +showErrorMessage(error_messages||messages)
      form#submit
        .row
          .col-12.col-md-6
            h4(style='font-weight:bold;') 广告材料归属
            //- .form-group.pt-2
            //-   label.col-md-3.text-right(for='origin_app_id' required="required") 上游APPID
            //-   input.col-md-9#origin_app_id.form-control(type="url" name='origin_app_id', value=material.origin_app_id, placeholder='请输入上游APPID', style='display:inline-block;')
            //- .form-group.pt-2
            //-   label.col-md-3.text-right(for='origin_post_id') 上游广告位ID
            //-   input.col-md-9#origin_post_id.form-control(type="url" name='origin_post_id', value=material.origin_post_id, placeholder='请输入上游广告位ID', style='display:inline-block;')
            .form-group.pt-2
              label.col-md-3.text-right(for='api_channel') API渠道
              select.col-md-9#api_channel.form-control(name='api_channel', style='display:inline-block;')
                each v,i in channels
                  option(value=i+1 selected = material.api_channel == i+1 ? true : false) #{v}
            .form-group.pt-2(style="display:flex;")
              label.col-3.text-right(for='applications') 应用选择
              select.col-9#applications.form-control(style='display:inline-block;' multiple size="5")
                each v,i in applicationList
                  option(value=v._id title=v._id selected = material.applications.includes(v._id) ? true : false) #{v.app_name}(#{v._id})
            .form-group.pt-2(style="display:flex;")
              label.col-3.text-right(for='unapplications') 应用排除选择
              select.col-9#unapplications.form-control(style='display:inline-block;' multiple size="5")
                each v,i in applicationList
                  option(value=v._id title=v._id selected = material.unapplications.includes(v._id) ? true : false) #{v.app_name}(#{v._id})


            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 广告材料名称
            .form-group.pt-2
              label.col-md-3.text-right(for='name')
                span(style="color:red") *  
                span 广告材料名称
              input.col-md-9#name.form-control(type="text" name='name', value=material.name, placeholder='请输入广告材料名称', style='display:inline-block;')                                    
            
            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 广告材料制作
            .form-group.pt-2
              label.col-md-3.text-right.align-top(for='api_channel') 广告材料素材
              .col-md-9.figure.filels
                img.pr-1(src="/assets/images/mv.png", width="50%",onclick="upload('mv')")          
                img.pl-1(src="/assets/images/pic.png", width="50%",onclick="upload('pic')")
                each v,i in material.features
                  if v.name
                    div 
                      span #{v.name}
                      img(src="/assets/images/del.png", class="del"+(i+1), width="25",onclick="delitem()")
            .form-group.pt-2
              span.list-inline-item.col-3.text-right(for='operation') 素材链接操作
              span.col-9#operation 
                a(onclick="addinput()").btn.btn-space.btn-secondary 添加素材链接
                a(onclick="delinput()").btn.btn-space.btn-secondary 删除素材链接
            each v,i in material.features
              if !v.name                        
                .form-group.pt-2.url
                  label.col-3.text-right(for='url') 素材链接#{i+1}
                  input.col-9#url.form-control.materurl(type="text", placeholder='请输入素材链接', value=v.url, style='display:inline-block;')                                    
                .form-group.pt-2.height
                  label.col-3.text-right(for='height') 素材高度#{i+1}
                  input.col-9#height.form-control.materheight(type="text", value=v.height, placeholder='请输入素材高度(单位:像素)', style='display:inline-block;')                                    
                .form-group.pt-2.width
                  label.col-3.text-right(for='width') 素材宽度#{i+1}
                  input.col-9#width.form-control.materwidth(type="text", value=v.width, placeholder='请输入素材宽度(单位:像素)', style='display:inline-block;')                                                    
            .form-group.pt-2
              label.col-md-3.text-right(for='title') 广告标题
              input.col-md-9#title.form-control(type="text" name='title', value=material.title, placeholder='请输入广告标题', style='display:inline-block;')                                    
            .form-group.pt-2
              label.col-md-3.text-right(for='desc') 广告描述
              input.col-md-9#desc.form-control(type="text" name='desc', value=material.desc, placeholder='请输入广告描述', style='display:inline-block;')
            .form-group.pt-2
              label.col-md-3.text-right(for='weight') 权重
              select.col-md-9#weight.form-control(name='weight', style='display:inline-block;')
                option(value="100" selected = material.weight == 100 ? true : false) 100(最优先)
                option(value="90" selected = material.weight == 90 ? true : false) 90(次优先)
                option(value="70" selected = material.weight == 70 ? true : false) 70(较优先)
                option(value="50" selected = material.weight == 50 ? true : false) 50(一般优先)
                option(value="30" selected = material.weight == 30 ? true : false) 30(不优先)
                option(value="10" selected = material.weight == 10 ? true : false) 10(非常不优先)
            .form-group.pt-2
              label.col-md-3.text-right(for='origin_config') 其它参数
              input.col-md-9#origin_config.form-control(type='text', name='origin_config', value=material.origin_config, placeholder='请输入上游广告位所需的其它参数', style='display:inline-block;')
            .form-group.pt-2
              label.col-md-3.text-right(for='type') 类型
              select.col-md-9#type.form-control(name='type', style='display:inline-block;')
                option(value="1" selected = material.type == 1 ? true : false) 视频
                option(value="2" selected = material.type == 2 ? true : false) 单图
                option(value="3" selected = material.type == 3 ? true : false) 多图
                option(value="4" selected = material.type == 4 ? true : false) html文本
                option(value="5" selected = material.type == 5 ? true : false) 音频
            .form-group.pt-2
              label.col-md-3.text-right(for='orientation') 屏幕方向
              select.col-md-9#orientation.form-control(style='display:inline-block;')
                option(value="") 类型为视频,选择横竖屏
                option(value="1" selected = material.features[0] && material.features[0].orientation == 1 ? true : false) 竖屏
                option(value="2" selected = material.features[0] && material.features[0].orientation == 2 ? true : false) 横屏
              //- input.col-md-9#orientation.form-control(type="number", value=material.features[0].orientation, placeholder='如果类型为单图或视频,竖1,横2', style='display:inline-block;')            
            .form-group.pt-2
              label.col-md-3.text-right(for='ad_type') 广告类型
              select.col-md-9#ad_type.form-control(name='ad_type', style='display:inline-block;')
                option(value="1" selected = material.ad_type == 1 ? true : false) 轮播图
                option(value="2" selected = material.ad_type == 2 ? true : false) 视频
                option(value="3" selected = material.ad_type == 3 ? true : false) 信息流
                option(value="4" selected = material.ad_type == 4 ? true : false) 播放式广告
                option(value="5" selected = material.ad_type == 5 ? true : false) 开屏
            .form-group.pt-2
              label.col-md-3.text-right(for='op_type') opType
              select.col-md-9#op_type.form-control(name='op_type', style='display:inline-block;')
                option(value="0" selected = material.op_type == 0 ? true : false) 无限制
                option(value="1" selected = material.op_type == 1 ? true : false) app下载
                option(value="2" selected = material.op_type == 2 ? true : false) H5
                option(value="3" selected = material.op_type == 3 ? true : false) Deeplink
                option(value="4" selected = material.op_type == 4 ? true : false) 电话广告
                option(value="5" selected = material.op_type == 5 ? true : false) 广点通下载广告
                option(value="6" selected = material.op_type == 6 ? true : false) 微信小程序拉起
                option(value="7" selected = material.op_type == 7 ? true : false) 广电通跳转
                option(value="8" selected = material.op_type == 8 ? true : false) 浏览器打开目标链接
            .form-group.pt-2
              label.col-md-3.text-right(for='switch_type') 运行开关
              select.col-md-9#switch_type.form-control(name='switch_type', style='display:inline-block;')
                option(value="1" selected = material.switch_type == 1 ? true : false) 开
                option(value="0" selected = material.switch_type == 0 ? true : false) 关
            
            hr.pt-2(style='width:74vw;')
            h4(style='font-weight:bold;') 转化页面
            .form-group.pt-2
              label.col-md-3.text-right(for='landing_page') 点击素材
              input.col-md-9#landing_page.form-control(type="url" name='landing_page', value=material.landing_page, placeholder='请输入点击素材', style='display:inline-block;')
            .form-group.pt-2
              label.col-md-3.text-right(for='download_url') 应用下载地址
              input.col-md-9#download_url.form-control(type="url" name='download_url', value=material.download_url, placeholder='请输入应用下载地址', style='display:inline-block;')
            .form-group.pt-2
              label.col-md-3.text-right(for='deeplink_url') 
                span(style="color:red") *  
                span app唤醒地址
              input.col-md-9#deeplink_url.form-control(type='url' name='deeplink_url', value=material.deeplink_url, placeholder='请输入app唤醒地址', style='display:inline-block;')
            
            //- hr.pt-2(style='width:74vw;')
            //- h4(style='font-weight:bold;') 第三方检测
            //- .form-group.pt-2
            //-   label.col-md-3.text-right(for='url_track_show') 曝光检测
            //-   input.col-md-9#url_track_show.form-control(type='text' name='url_track_show', value=material.url_track_show, placeholder='请输入曝光检测', style='display:inline-block;')            
            //- .form-group.pt-2
            //-   label.col-md-3.text-right(for='url_track_click') 点击检测
            //-   input.col-md-9#url_track_click.form-control(type='text' name='url_track_click', value=material.url_track_click, placeholder='请输入点击检测', style='display:inline-block;')            
            //- .form-group.pt-2
            //-   label.col-md-3.text-right(for='url_track_dplink') 唤醒检测
            //-   input.col-md-9#url_track_dplink.form-control(type='text' name='url_track_dplink', value=material.url_track_dplink, placeholder='请输入唤醒检测', style='display:inline-block;')                    
        
        input#num(type="text" style="display: none;" value=applicationList.length)
        input#mvfile(type="file" onchange="myupload('mv')" style="display: none;" accept="video/*")
        input#picfile(type="file" onchange="myupload('pic')" style="display: none;" accept="image/*")
        hr.pt-2(style='width:74vw;')
        .text-right
            a(href='/admins/materials/').btn.btn-space.btn-secondary 取消
            button.btn.btn-space.btn-primary.mr-3(onclick="asyncSubmit()") 保存
block script
  script(src="/assets/js/duallistbox.js")
  script.
    $(function(){
      //- $.fn.sspmaterials/Add()
      window.oldfiles = getFiles()      // 初始化获取素材文件并缓存
      //- 穿梭框渲染
      acBoxRender()
    })

    //- 定义全局变量上传文件数组
    window.files = []    
    l = console.log
    id = location.href.split('/').pop()
    acBoxL = $('#num').val()
 
    //- 上传事件转发函数
    function upload(type){
      type == 'mv' ? $('#mvfile')[0].click() : $('#picfile')[0].click()
    }    

    //- 异步表单提交事件函数
    async function asyncSubmit(){
      event.preventDefault()
      dealurl()     // 处理素材链接框
      //- return console.log(files)
      //- 表单必填项验证
      if([1].includes(+$('#type').val())){
        if(!$('#orientation').val()) return alert('当类型为视频时,必须选择屏幕方向')
      }
      let formDatas = $("#submit").serializeArray()
      let optionField = ['name','deeplink_url']
      let required = formDatas.every(v=>{return optionField.includes(v.name) ? v.value : true})
      if(!required) return alert('带星号为必填项,请检查你的未填项继续填写')     
      if($('#applications').val().length == acBoxL){
        window.isall = true
      }
      let apps =  $('#applications').val()
      let unapps =  $('#unapplications').val()
      let combiapp = apps.concat(unapps)
      if(combiapp.length != new Set(combiapp).size){
        return alert('应用选择和应用排除含有相同项,请重新选择')
      }   

      //- 重构表单
      let formData = $("#submit").serialize()
      let adtp =  Number($('#type').val())
      adtp === 3 && --adtp
      files.map((v,i)=>{files[i].type = adtp})
      formData += '&features='+JSON.stringify(files)
      formData += '&id='+id
      formData += '&dels='+getDelFiles().join(",")
      formData += '&applications='+(window.isall ? '' : $('#applications').val().join(","))
      formData += '&unapplications='+$('#unapplications').val().join(",")
      formData += '&orientation='+$('#orientation').val()
      let result = await $.post('/admins/materials/edit/'+id, formData)
      if(result.success){
        alert('修改成功')
        location.href = '/admins/materials/'
      }else{
        if(result.message == '广告材料名称重复') return alert('广告材料名称重复,请修改后重试')
        if(result.message == '广告位id重复') return alert('广告位id重复,请修改后重试')
        alert('网络忙,请刷新后重试')
        location.reload()
      }
    }

    //- 获取素材附件
    function getFiles(){
      let attachments = Array.from($('.filels div'))
      attachments = attachments.map(v=>{
        return v.textContent
      })
      return attachments
    }

    //- 获取删除已上传素材附件
    function getDelFiles(){
      let files = getFiles()
      let dels = []
      oldfiles.map(v=>{
        !files.includes(v) && dels.push(v.trim())
      })
      return dels
    }

    //- 上传功能事件函数
    function myupload(type){
      //- 重建表单数据
      let ele = type == 'mv' ? '#mvfile' : '#picfile'             
      let file =$(ele)[0].files[0]
      if(file == 'undefined' || file == undefined){return}
      let myform = new FormData()
      myform.append('file',file)

      //- 异步请求服务器
      console.log("正在上传数据,请稍后...")
      let ajax = $.ajax({url:'/admins/materials/upload',type:'post',data:myform,contentType: false,processData: false})
      ajax.then(function(res){        
        const { result, success } = res 
        if(!success) return alert("接口返回值错误")
        console.log("文件上传成功")
        
        //- 上传成功的文件名推入全局变量
        disposeParam = {...result.filePath,...result.fileSize}
        delete disposeParam.type
        files.push(disposeParam)

        //- 文件上传成功把附件局部更新到页面
        let txt = result.filePath.fileName
        let dels = $('[class^="del"]').length+1
        let nclass = 'del' + dels 
        $('.filels').append(`<div title="${result.filePath.filePath}"><span>${txt}</span>   <img  src="/assets/images/del.png", class="${nclass}", width="25""></img></div>`)
        $('.'+nclass).click(function () {delitem()})
      })                  
    } 

    //- 附件删除事件函数
    function delitem(){
      let ele = event.target.parentNode
      let name = ele.textContent.trim()   
      let sure = confirm(`确定要删除${ name }素材吗?`)
      if(sure){
        files.map((v,i) => {
          if(v.fileName == name){
            files.splice(i,1)               
          }
        })
        $(ele).remove()
      }
    }

    //- 媒体主穿梭框渲染
    function acBoxRender(){
      let config = {
        //- nonSelectedListLabel: '未选媒体主列表:',
        //- selectedListLabel: '已选媒体主列表:',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: false,           // 出现一个剪头,表示可以一次选择一个
        filterTextClear: '展示所有',
        moveSelectedLabel: "添加",
        moveAllLabel: '添加所有',
        removeSelectedLabel: "移除",
        removeAllLabel: '移除所有',
        infoText: '共{0}个',
        showFilterInputs: false,       // 是否带搜索
        selectorMinimalHeight: 160
      }
      $('#applications').bootstrapDualListbox(config)
      $('#unapplications').bootstrapDualListbox(config)
    }

    //- 素材链接输入框添加
    function addinput(){
      let eles = Array.from($('.width'))
      let len = eles.length
      let endele = eles[len-1]
      let html = `
        <div class="form-group pt-2 url">
          <label class="col-3 text-right" style="margin-right: -4px;">素材链接${len}</label>
          <input class="col-9 form-control materurl" type="text" placeholder='请输入素材链接' style="display:inline-block;">
        </div>
        <div class="form-group pt-2 height">
          <label class="col-3 text-right" style="margin-right: -4px;">素材高度${len}</label>
          <input class="col-9 form-control materheight" type="text" placeholder='请输入素材高度(单位:像素)' style="display:inline-block;">
        </div>
        <div class="form-group pt-2 width">
          <label class="col-3 text-right" style="margin-right: -4px;">素材宽度${len}</label>
          <input class="col-9 form-control materwidth" type="text" placeholder='请输入素材宽度(单位:像素)' style="display:inline-block;">
        </div>
      `
      $(endele).after(html)
    }

    //- 素材链接输入框删除
    function delinput(){
      let eles = Array.from($('.url'))
      let eles1 = Array.from($('.width'))
      let eles2 = Array.from($('.height'))
      if(eles.length<2){
        return alert('素材链接输入框少于两个,不能删除')
      }
      if(confirm('确认删除最后一个素材链接输入框吗?')){
        let endele = eles.pop()
        let endele1 = eles1.pop()
        let endele2 = eles2.pop()
        let value = $(endele).find('input').val()
        files.map((v,i)=>{if(v.url==value) files.splice(i,1)})
        let parent = endele.parentNode
        let parent1 = endele1.parentNode
        let parent2 = endele2.parentNode
        parent.removeChild(endele)
        parent1.removeChild(endele1)
        parent2.removeChild(endele2)
      }
    }

    //- 素材链接输入框表单数据处理
    function dealurl(){
      let eles = Array.from($('.materurl'))
      let eles1 = Array.from($('.materheight'))
      let eles2 = Array.from($('.materwidth'))
      files = files.filter((v)=>{return v.name})
      eles.map((v,i)=>{
        if(v.value){
          files.push({url:v.value,height:+eles1[i].value,width:+eles2[i].value})
        }       
      })
    }
      

 

后端koa文件

_ = require 'lodash'
path = require 'path'
fs = require 'fs'
url = require 'url'
os = require 'os'
debuglog = require('debug')("ssp::controllers:::material")
express = require "express"
router = express.Router()

# 导入数据模型
ModelMaterial = require '../models/material'
mongoose = require('mongoose')
MongoMaterial = mongoose.model('Material')

# 导入上传文件需要的依赖
multiparty = require('multiparty')
sizeOf = require('image-size')
profileName = process.env.DO_PROFILE
unless profileName
  throw new Error "DO SPACES INIT FAILED: Missing enviroment variable: DO_PROFILE"
pathToConfig = path.join os.homedir(), ".ssps3", profileName + ".json"
configRaw = fs.readFileSync pathToConfig
config = JSON.parse(configRaw)
PATH_PREFIX = config.priefix||'dev'
HOST = 'https://yjh-material.yunpro.cn/'



{
  sendSuccess,
  sendError,
  genResRender,
  getResRedirect,
  genResJson,
  renderItemsAsSuccess
} = require '../utils/response_util'


{
  requiresLogin
  isAdminRoleType
} = require '../middlewares/authorization'

{
  uploadFeature
} = require '../utils/dospace_util'

{
  generateUUID
} = require '../utils/string_util'

{
  API_CHANNEL_ENUMS_LABEL
} = require '../enums/api_channels'

{
  listAllApplications
} = require '../models/application'

# 上传表单解析方法
uploadBasic = (req, res, next) ->
  debuglog "[uploadBasic] start.", req.isAuthenticated()
  form = new multiparty.Form()
  form.parse req, (err, fields, files) ->
    if err?
      debuglog "[uploadBasic] ERROR: #{err}"
      sendError res, err
      return

    if _.isEmpty(files) or not files?
      debuglog "[uploadBasic] WARN files is empty."
      sendError res, "文件上传错误。"
      return

    keys = _.keys(files)
    file = files[keys[0]][0]
    if _.isEmpty(file)
      debuglog "[uploadBasic] WARN file is empty"
      sendError res, "文件上传错误。"
      return

    # TODO 确定判断上传文件类型和大小的条件
    options =
      size : file.sizegt
      originalFilename : file.originalFilename
      extName: path.extname(file.originalFilename)
      source: file.path
      contentType : file['headers']["content-type"]
      fields: fields||{}
    res.locals.uploadOptions = options
    debuglog("[uploadBasic] %j - %j", file, options)
    next()
    return
  return

# 文件上传到oss方法
uploadFileToOss = (req, res, next ) ->
  debuglog "[uploadFileToOss] start."
  uploadOptions = res.locals.uploadOptions||{}

  if _.isEmpty(uploadOptions)
    debuglog "[uploadFileToOss] ERROR: 数据上传错误。 userId:#{userId}"
    sendError res, "数据上传错误。"
    return

  {source, fields, extName, size, originalFilename, contentType} = uploadOptions
  oss_id = generateUUID()
  remoteFilePath = "#{oss_id}#{extName}"
  if contentType.match('image')
    res.locals.fileSize = sizeOf(source)
  uploadFeature remoteFilePath, source, contentType, (err) ->
    fs.unlinkSync source
    if err?
      debuglog "[uploadFileToOss] ERROR:#{err}"
      sendError res, err
      return
    res.locals.filePath =
      filePath : url.resolve HOST,path.join PATH_PREFIX,remoteFilePath
      fileName : originalFilename
    next()
    return
  return

# 广告添加方法
postAddMaterial = (req, res) ->
  body = req.body

  # 素材名称格式化
  features = String(body.features)
  features =features.replace(/filePath/g,'url')
  features = features.replace(/fileName/g,'name')
  body.features = JSON.parse(features)
 
  # 应用列表格式化
  body.applications = String(body.applications).split(",")
  body.unapplications = String(body.unapplications).split(",")

  # 字符串去空格
  for k,v of body
    if typeof v is 'string' then body[k] = v.trim()

  # 添加手动输入屏幕方向到素材对象
  orientation = body.orientation
  delete body.orientation
  if orientation and body.features[0]
    body.features[0].orientation = Number(orientation)

  ModelMaterial.insertData body, (cb) ->
    status = cb[0]
    log = cb[1]
    if status
      sendError res,log
    else
      sendSuccess res,log

# 广告修改方法
postEditMaterial = (req, res) ->
  body = req.body
  features = String(body.features)
  features =features.replace(/filePath/g,'url')
  features = features.replace(/fileName/g,'name')
  body.features = JSON.parse(features)

  # 应用列表格式化
  body.applications = String(body.applications).split(",")
  body.unapplications = String(body.unapplications).split(",")

  for k,v of body
    if typeof v is 'string' then body[k] = v.trim()

  id = body.id
  delete body.id

  dels = if body.dels then body.dels.split(",") else false
  delete body.dels

  oldFiles = res.locals.material.features
  oldFiles = oldFiles.filter ->
    v.name
  if dels
    for v in dels
      for v1,i in oldFiles
        oldFiles.splice i,1 if v is (v1 && v1.name)

  body.features = body.features.concat oldFiles

  orientation = body.orientation
  delete body.orientation
  if orientation
    if body.features[0] then body.features[0].orientation = Number(orientation)

  result = await MongoMaterial.updateOne _id:id,body
  if result.nModified is 1
    sendSuccess res,'修改成功'
  else
    sendError res,'修改失败'

# 获取api渠道方法
getChannels = (req, res, next) ->
  dics = []
  for i,v of API_CHANNEL_ENUMS_LABEL
    dics.push v
  res.locals.channels = dics
  next()
  return

# 获取应用列表方法
getApplicationList = (req, res, next) ->
  listAllApplications (err, applications) -> 
    if err?
      debuglog "[getApplicationList] ERROR:#{err}"
      next(err)
      return
    res.locals.applicationList = applications||[]
    next()
    return
  return

# 广告列表分页获取数据
getPageListMaterial = (req, res, next) ->
  {page} = req.params
  {switch_type} = req.query||{}
  ModelMaterial.pageListMaterial page, req.query, (err, materials) ->
    if err?
      debuglog "[getPageListMaterial:pageListMaterial] ERROR:#{err}."
      next(err)
      return

    res.locals.materials = materials||[]
    if switch_type?
      res.locals.switch_type = switch_type
    next()
    return
  return

# 广告开关状态更新方法
postUpdateSwitchType = (req, res, next) ->
  {_id} = req.params
  user = req.user || {}
  {material} = res.locals||{}
  referer = (req.headers||{}).referer
  # console.log(res.locals)
  debuglog "[postUpdateSwitchType] start. material:#{_id} user:#{user._id}"

  if _.isEmpty(material)
    debuglog "[postUpdateSwitchType] WARN material is empty. material:#{_id} user:#{user._id}"
    # sendError res, 'materialUser is empty'
    req.flash('error', "没有对应的广告")
    res.redirect referer||"/admins/materials"
    return
  switchType = if material.switch_type == 0 then 1 else 0
  ModelMaterial.updateSwitchTypeById _id, switchType, (err, newMaterial) ->
    if err?
      debuglog "[postUpdateSwitchType:updateSwitchTypeById] ERROR:#{err}. material:#{_id} user:#{user._id}"
      # sendError res, err
      req.flash('error', "#{err}")
      res.redirect referer||"/admins/materials"
      return
    # sendSuccess res, newmaterialUser
    res.redirect referer||"/admins/materials"
    return
  return

# 通过广告id获取广告方法
getMaterialDeatilById = (req, res, next) ->
  {_id} = req.params
  debuglog "[getMaterialDeatilById] start. Material:#{_id}"
  ModelMaterial.findMaterialById _id, (err, material) ->
    if err?
      debuglog "[getMaterialDeatilById:findMaterialById] ERROR:#{err}. material:#{_id}"
      next(err)
      return
    res.locals.material = material||{}
    next()
    return
  return

# 添加直投广告页面
router.get '/add',
  requiresLogin,
  isAdminRoleType,
  getChannels,
  getApplicationList,
  genResRender("materials/add")

# 添加直投广告接口
router.post '/add',
  requiresLogin,
  isAdminRoleType,
  postAddMaterial

# 修改直投广告页面
router.get '/edit/:_id',
  requiresLogin,
  isAdminRoleType,
  getMaterialDeatilById,
  getChannels,
  getApplicationList,
  genResRender("materials/edit")

# 修改直投广告接口
router.post '/edit/:_id',
  requiresLogin,
  isAdminRoleType,
  getMaterialDeatilById,
  postEditMaterial

# 直投广告上传接口
router.post "/upload",
  requiresLogin
  isAdminRoleType
  uploadBasic
  uploadFileToOss
  (req,res) ->
    sendSuccess(res,res.locals)


# 广告材料列表
router.get '/:page?',
  requiresLogin,
  isAdminRoleType,
  getPageListMaterial,
  getChannels
  # genResJson()
  genResRender("materials/index")

#列表switch修改
router.post '/switch/update/:_id',
  requiresLogin,
  isAdminRoleType,
  getMaterialDeatilById,
  postUpdateSwitchType

module.exports = exports = router

 

posted @ 2021-10-28 18:11  中国计算机技术研究员  阅读(8)  评论(0编辑  收藏  举报