近期工作问题汇总（2022.9.8）

1.文件下载downFile函数发送请求网络请求失败

问题描述：使用get请求，参数过长导致请求失败

（原downFile函数）

解决方法：把get请求改为post请求，把params改为data,如下

2. 选择列导出含有动态模板中字段的表（大工二期）

1.先组装数据格式为

 还需要        fileName ，fileName的值是"反馈结果表"

2.把fileName和exportFieldList传给XmDynamicExportlSelectModal组件的show方法

show方法会做

this.exportSelectFileName = fileName;
this.fieldsExportSelectList = fieldsExportSelectList;点击确定会做如下，

this.$emit('ok', this.exportSelectFileName, exportFieldsList);

选择列后回调的方法

<!-- 【动态字段】可选择列进行导出的组件 -->
<xm-dynamic-exportl-select-modal ref="dynamicExportlSelectModal"  @ok="handleExportXlsWithSelectOK"></xm-dynamic-exportl-select-modal>

3.核心代码

/* 导出字段选择modal点击OK时的回调方法 */
    handleExportXlsWithSelectOK(fileName, exportFieldsList) {
      this.MyhandleExportXlsWithFiledSelect(fileName, exportFieldsList);
      this.$refs.dynamicExportlSelectModal.close();
    },
    //YX Add 带字段选择且允许包含动态字段的导出方法
    MyhandleExportXlsWithFiledSelect(fileName, exportFieldsList) {
      console.log("fi", fileName)
      console.log("ex", exportFieldsList)
      if (!fileName || typeof fileName != "string") {
        fileName = "导出文件"
      }
      let param = {...this.queryParam};
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(",")
      }

      if (exportFieldsList && exportFieldsList.length > 0) {
        let exportFieldsListStr = JSON.stringify(exportFieldsList);
        param['exportFieldsList'] = exportFieldsListStr;
        param['businessCode'] = this.businessCode
        param['checkRecords'] = this.checkRecords
      }

      console.log("导出参数", param)
      this.httpAction1(this.url.exportXlsWithDynamisAndDynamicModel, param,'post').then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], {type: 'application/vnd.ms-excel'}), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], {type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },

这里的businessCode传过去没用，可以不传，checkRecords就是表格的dataSource。

注意这里的httpAction1是

httpAction1(url,parameter,method) {
  return axios({
    url: url,
    method:method ,
    data: parameter,
    responseType: 'blob'
  })
}

给后端接口发送请求

exportXlsWithDynamisAndDynamicModel: '/saf_self_check/safSelfCheck/exportXlsWithDynamisAndDynamicModel',//下载组装导出数据调用的接口

4.后端处理数据

后端根据传过来的exportFieldsList和checkRecords组装导出的行exportList和列entityList

 最后组装的mv返回给前端

ModelAndView mv = new ModelAndView(new JeecgMapExcelView());
mv.addObject(NormalExcelConstants.FILE_NAME, title); //此处设置的filename无效 ,前端会重更新设置一下
mv.addObject(MapExcelConstants.ENTITY_LIST, entityList);//*注意这里与exportXls不同
mv.addObject(NormalExcelConstants.PARAMS, new ExportParams(title + "报表", "导出人:" + sysUser.getRealname(), title));
mv.addObject(NormalExcelConstants.MAP_LIST, exportList);//*注意这里与exportXls不同
return mv;

 3.实体类中创建int类型用Integer做类型，否则和数据库对不上。

 4.在ant design of vue中@click必须放在a-form中否则@click不生效。

5.下拉单选框组件

<j-dict-select-tag type="list" v-decorator="['name']" :trigger-change="true" dictCode="" placeholder="请选择项目名称"/>

6.Mybatis插入数据返回主键值代码。

@Insert("insert into xm_base_info(id,name,type,sb_status,ys_money,sb_money,sb_dept,sb_dept_name,ssjh,ndjxmb,xmnr,gk_dept,gk_dept_name,level,create_by,create_time,sys_org_code) " +
            "values(#{id},#{name},#{type},#{sbStatus},#{ysMoney},#{sbMoney},#{sbDept},#{sbDeptName},#{ssjh},#{ndjxmb},#{xmnr},#{gkDept},#{gkDeptName},#{level},#{createBy},#{createTime},#{sysOrgCode})")
@Options(useGeneratedKeys = true,keyProperty = "id",keyColumn = "id")
Long saveInfo(XmBaseInfo xmBaseInfo);

（主键值回显的时候一定要把主键id插入，否则会报does not have 主键id）

7.ant design of vue中对于Table，中的表格删除必须用如下，

handleDelete(index,record) {
    this.dataSource.splice(index, 1);
},

必须传index否则，删除出错

8.a-checkbox的使用案例

<a-row>
  <a-form-item label="申报自查条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
    <template>
      <a-row   :key="item.id" v-for="(item,index) in this.listSbZc" >
        <a-col :span="8">
          <a-checkbox :checked="item.active" :value="item.active"   @change="handleBox(index)" :disabled="false">{{item.name}}</a-checkbox>
        </a-col>
      </a-row>
    </template>
  </a-form-item>
</a-row>

handleBox(index){
  if(this.listSbZc[index].active==true){
    this.listSbZc[index].active=false
  }else{
    this.listSbZc[index].active=true
  }
  console.log("this.listSbZc",this.listSbZc)
},

9.去除Table表格中右下角的页码

:pagination="false"

10.前端判断数组是否包含某个元素的方法

zctjIds.includes(this.listSbZc[r].id)

11.a-form-item组件的按钮和标题对齐的方法

<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
   <a-col :span="4"></a-col>
   <a-button @click="handleAddQd" type="primary">查看退回意见</a-button>
</a-form-item>

12.jeecg-boot框架的按钮权限配置

<a v-has="'xmsb:rksh'"

13.谷歌F12调试console.log注意事项

14.时间组件

<j-date v-decorator="['lzTime', validatorRules.lzTime]" :trigger-change="true" :allow-clear="false" placeholder="请选择论证时间" />

15.关于子组件向父组件传值的问题，

this.$emit("change", this.userIds)

父组件接收的方法

@change="handleCyr"

handleCyr里面不能加参数。

16.jeecg-boot框架，保存文件和获取文件的方法（以后都用这个）

保存文件：（实测没问题）

      let files = [
              {files: lzFile, attachType: '101', typeName: '项目申报书'},
              {files: sbsFile, attachType: '103', typeName: '单位内论证结果与依据'},
            ];
      // 附件提交(用于保存一个表单页面的所有附件，所以传参时候注意 files 的格式)
      saveFiles(xmId, xmName, businessId, files, data){
        console.log("files",files)

        const that = this;
        let tempArr = [];

        if (files.length <= 0) {
          return new Promise(function (resolve, reject){
            resolve(data);
          })
        }
        for (let i = 0; i < files.length; i++){
          tempArr[i] = new Promise(function (resolve, reject) {

            if (files[i].files){
              that.confirmLoading = true;
              let url = that.url.addFiles;
              let method = 'post';
              let param = {
                xmId: xmId,
                xmName: xmName,
                businessId: businessId,
                files: files[i].files,
                attachType: files[i].attachType,
                typeName: files[i].typeName
              }

              httpAction(url, param, method).then((res) => {
                if (res.success) {
                  resolve(res);
                }
              }).finally(() => {
                that.confirmLoading = false
              })
            } else {
              resolve('文件为空');
            }

          })
        }

        return new Promise(function (resolve, reject) {
          Promise.all(tempArr).then(res=>{
            resolve(data);
          }).catch(err=>{
            reject(err);
          })
        })
      },

获取文件：（实测没问题）

// 回显上传的文件
      getFiles(baseInfoId, field, fileType) {
        let that = this
        if (!baseInfoId) return;
        let params = {
          'xmId':baseInfoId,
          'attachType': fileType
        }
        let list = '/xm_attach/xmAttach/list'
        getAction(list,params).then((res)=>{
          if(res.success){
            let files = res.result.records;
            if (files.length > 0){
              let fileList = [];
              files.forEach((item,index) => {
                let fileListItem = {};
                fileListItem.fileName = item.name;
                fileListItem.filePath = item["savePath"];
                fileListItem.fileSize = item['attachSize'] ? parseInt(item['attachSize']) : 0;
                fileList.push(fileListItem);
              });
              if (field){
                that.form.setFieldsValue({[field]:fileList});
                that.file = fileList;
              }
            }
          }else {
            console.log("ERROR----------请求通用附件接口失败")
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },

注意事项：在保存文件的时候不要忘记在data的return中添加

url: {
  addFiles: '/xm_attach/xmAttach/addByList',
},

17.按钮要放在a-form中，否则按钮会失效。

18.深拷贝，包括属性里的JSON对象和数组。

deepClone(data) {
      let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
      return dataClone;
},

19.Json类型的数据从前端传给后端要做如下处理

let modelStr=JSON.stringify(that.qdmxTable.dataSource)

20.Table去掉前面的选择框，注释掉如下内容，

:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"