前端列表导出以及自定义列组件仓库

开发调试

下载源码

# 打包的是开发模式，可以带debugger
npm run dev

# 打包的是线上的，不带debugger
# npm run build

请确保项目添加了依赖

请确保项目添加了依赖 vuedraggable 和 sortablejs

vue.config.js

// 注意添加顺序
configureWebpack: {
    externals: {
      'vuedraggable': 'vuedraggable',
      'sortablejs': 'Sortable'
    }
  },

public/index.html

<!-- 注意添加顺序（必须把sortablejs 放在前面 ） -->
<script src="https://lib3.56ctm.com/sortablejs/1.8.4/sortable.min.js"></script>
<script src="https://lib3.56ctm.com/vue-draggable/2.20.0/main.js"></script>

导出

封装导出组件

引入和更新

安装

# 安装
npm install dj_export_column_fe --save-dev
# 更新
npm update dj_export_column_fe

main.js

import DJEXPORT from 'dj_export_column_fe'
// 安装组件
Vue.use(DJEXPORT)

注意：每次更新都会兼容前置版本，尽量避免更新后需要更新代码，除非特殊情况

// 展示导出
<el-button @click="exportTemplateComponent">展示导出组件</el-button>

// 引用导出组件
<ExportTemplate
  ref="_exportTemplate"
  :tempSubType="1"
  :tempType="1"
  :exprtFilePrefix="'运单'"
  :ids="ids"
  :resourceMethod="resourceMethod"
  :resourceType="resourceType"
  :resourceUrl="resourceUrl"
  :resourceUrlExtParams="resourceUrlExtParams"
  ></ExportTemplate>

data () {
  return {
    // 分页方式
    resourceType: '0',
    // 导出的 ids
    ids: [],
    // url
    resourceUrl: 'http://192.168.1.213:1411/order/waybill/selectByPage?page=1&pageSize=50&partnerName=&projectName=&waybillCode=&clientCode=&orderEnd=2019-06-30&orderStart=2019-06-01&transportDate=&rvName=&sdName=&rvProvinceRgcode=&rvCityRgcode=&rvDistrictRgcode=',
    // sleectbupage方法
    resourceMethod: 'post',
    // 接口方式，分页还是不分页
    resourceType: 0,
    // 参数
    resourceUrlExtParams: {
      "pageFiledName": "page", // 分页参数 page
      "pageSizeFiledName": "pageSize", // 分页参数 pageSize
      "responsePageDataFiledName": "",
      "responsePageFiledName": "",
      "totalRecordsFiledName": ""
    }
  }
},

显示

exportTemplateComponent () {
  // 调出 refs
  this.$refs._exportTemplate.show()
}

参数说明

// 所属模块，请参考石墨文档
tempType: 
tempSubType:

// 导出文件前缀
exprtFilePrefix: 

// 导出单据的id，比如运单id
ids:

// 拉取列表的请求方式
resourceMethod: 

// 拉取数据的url，比如运单列表selectBypage的请求url
resourceUrl:

// 分页方式
resourceType:

// 拉取数据的参数
resourceUrlExtParams: {
  "pageFiledName": "page",  // page
  "pageSizeFiledName": "pageSize", // pagesize
  "responsePageDataFiledName": "",
  "responsePageFiledName": "",
  "totalRecordsFiledName": ""
}

根据id导出 id 优先 exportType = 1

resourceMethod selectbypage的方法 是什么

resourceType： 当前接口是否分页

resourceUrl： 恶心的url

resourceUrlExtParams： { pageFiledName* string 当前页数字段名

pageSizeFiledName string 页大小字段名

responsePageDataFiledName string 分页实体Records名

responsePageFiledName string 分页实体名

totalRecordsFiledName string 总记录数字段名 （2取1 总记录数字段名 和 总记录数字段名）

}

自定义列

安装和引入

# 安装
npm install dj_export_column_fe --save-dev
# 更新
npm update dj_export_column_fe

main.js

import DJEXPORT from 'dj_export_column_fe'
// 安装组件
Vue.use(DJEXPORT)

注意：每次更新都会兼容前置版本，尽量避免更新后需要更新代码，除非特殊情况

<!-- 自定义列 -->
<magic-column
  ref="_magicColumn"
  @pageColumnOrderLoad="$refs.roleTable.refresh()"
  :bizFunc=""
  :bizModel=""
></magic-column>

• pageColumnOrderLoad： 自定义列，点击确定的回调方法

展示

// 自定义列-显示
showMagic () {
  this.$refs._magicColumn.show()
}

集合table 使用

// 在table的loadData 获取用户活动列表即可
// 这里逻辑比较多，请参考运单，调度等项目中的做法

更新日志

• 2019年07月22日 - 代码利用webpack打包，dist文件加载机制

mac node_sass

sudo npm install node-sass --unsafe-perm --save-dev