ant design vue 多选 EasyExcel动态导出Excel

前端代码

<template>
    <div>
        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
            <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                全选
            </a-checkbox>
        </div>
        <br />
        <!-- <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" /> -->
        <a-checkbox-group  @change="onChange"  v-model="checkedList">
            <a-row >
                <a-col v-for="item in plainOptions"  :key="item" :value="item" :span="8"><a-checkbox :value=item>{{item.title}}</a-checkbox></a-col>
            </a-row>
        </a-checkbox-group>
    </div>
</template>
<script>
// const plainOptions = ['案件编号','来文名称','来文单位','回复时间','回复内容','回文名称','回文文号','工程性质','投诉来源','投诉性质','来访时间','完成时间','投诉人反映事项','案由','行业类型','涉及人数','涉及金额','欠薪时间起','欠薪时间止','欠薪原因','欠薪原因补充说明','是否为平台经济','是否实行农民工实名制管理','是否实行农名工工资专用账户管理','是否实行总包代发工资','是否实行工程保证金制度','实行工资保金制度','项目名称','项目地址','项目性质','项目性质说明','所属行业','开工时间','完工时间','建设单位单位名称','建设单位统一信用社会代码','总包单位_单位名称','总包单位_统一信用社会代码','总包性质','分包单位_单位名称','分包单位_统一信用社会代码','分包单位_法定代表人','欠薪直接责任单位_单位名称','欠薪直接责任单位_统一信用社会代码','欠薪直接责任单位_单位性质','欠薪直接责任单位_法定代表人','工单状态','指派办理人','指派日期','处理人','处理结果','处理情况','协议日期','解决(协议)人数','解决(协议)金额','是否为农民工','涉及农民工人数','涉及农民工金额','办结情况','短信电话通知情况','备注','投诉人', '联系电话', '证件号'];
const plainOptions = [
    {title:'工单编号',index:'AJBH',value:1},
    {title:'来文名称',index:'LWMC',value:2},
    {title:'来文单位',index:'LWDW',value:3},
    {title:'回复时间',index:'HFSJ',value:4},
    {title:'回复内容',index:'HFNR',value:5},
    {title:'回文名称',index:'HWMC',value:6},
    {title:'回文文号',index:'HWWH',value:7},
    {title:'工程性质',index:'GCXZSM',value:8},
    {title:'投诉来源',index:'TSLYSM',value:9},
    {title:'投诉性质',index:'TSXZSM',value:10},
    {title:'来访时间',index:'LFSJ',value:11},
    {title:'完成时间',index:'WCSJ',value:12},
    {title:'投诉人反映事项',index:'TSRFYSX',value:13},
    {title:'案由',index:'AYSM',value:14},
    {title:'行业类型',index:'HYLXSM',value:15},
    {title:'涉及人数',index:'SJRS',value:16},
    {title:'涉及金额',index:'SJJE',value:17},
    {title:'欠薪时间起',index:'QXSJQ',value:18},
    {title:'欠薪时间止',index:'QXSJZ',value:19},
    {title:'欠薪原因',index:'QXYY',value:20},
    {title:'欠薪原因补充说明',index:'QXYYBCSM',value:21},
    {title:'是否为平台经济',index:'SFWPTJJ',value:22},
    {title:'是否实行农民工实名制管理',index:'SFSXNMGSMZGL',value:23},
    {title:'是否实行农名工工资专用账户管理',index:'SFSXNMGGZZYZHGL',value:24},
    {title:'是否实行总包代发工资',index:'SFSXZBDFGZ',value:25},
    {title:'是否实行工程保证金制度',index:'SFSXGCBZJZD',value:26},
    {title:'实行工资保金制度',index:'SXGZBJZDSM',value:27},
    {title:'项目名称',index:'XMMC',value:28},
    {title:'项目地址',index:'XMDZ',value:29},
    {title:'项目性质',index:'XMXZSM',value:30},
    {title:'所属行业',index:'SSHYSM',value:31},
    {title:'开工时间',index:'KGSJ',value:32},
    {title:'完工时间',index:'WGSJ',value:33},
    {title:'建设单位单位名称',index:'JSDW_DWMC',value:34},
    {title:'建设单位统一信用社会代码',index:'JSDW_TYXYSHDM',value:35},
    {title:'总包单位_单位名称',index:'ZBDW_DWMC',value:36},
    {title:'总包单位_统一信用社会代码',index:'ZBDW_TYXYSHDM',value:37},
    {title:'总包单位_法定代表人',index:'ZBDW_FDDBR',value:38},
    {title:'总包性质',index:'ZBDW_XZSM',value:39},
    {title:'分包单位_单位名称',index:'FBDW_DWMC',value:40},
    {title:'分包单位_统一信用社会代码',index:'FBDW_TYXYSHDM',value:41},
    {title:'分包单位_法定代表人',index:'FBDW_FDDBR',value:42},
    {title:'欠薪直接责任单位_单位名称',index:'QXZJZRDW_DWMC',value:43},
    {title:'欠薪直接责任单位_统一信用社会代码',index:'QXZJZRDW_TYXYSHDM',value:44},
    {title:'欠薪直接责任单位_单位性质',index:'QXZJZRDW_DWXZSM',value:45},
    {title:'欠薪直接责任单位_法定代表人',index:'QXZJZRDW_FDDBR',value:46},
    {title:'工单状态',index:'GDZT',value:47},
    {title:'指派办理人',index:'ZPBLRXM',value:48},
    {title:'指派日期',index:'ZPRQ',value:49},
    {title:'处理人',index:'CLRXM',value:50},
    {title:'处理结果',index:'CLJGSM',value:51},
    {title:'处理情况',index:'CLQK',value:52},
    {title:'协议日期',index:'XYRQ',value:53},
    {title:'解决(协议)人数',index:'XYRS',value:54},
    {title:'解决(协议)金额',index:'XYJE',value:55},
    {title:'是否为农民工',index:'SFWNMG',value:56},
    {title:'涉及农民工人数',index:'SJNMGRS',value:57},
    {title:'涉及农民工金额',index:'SJNMGJE',value:58},
    {title:'办结情况',index:'BJQK',value:59},
    {title:'短信电话通知情况',index:'DXDHTZQK',value:60},
    {title:'备注',index:'BZ',value:61},
    {title:'投诉人',index:'XM',value:62},
    {title:'联系电话',index:'LXDH',value:63},
    {title:'证件号',index:'ZJHM',value:64},
];
const defaultCheckedList = [];
export default {
    data() {
        return {
            checkedList: defaultCheckedList,
            indeterminate: true,//当选择项有一部分还没有选择的时候,就会显示这个,否者就是完整的勾勾了
            checkAll: false,//是否全选  要默认全选
            plainOptions,
        };
    },
    methods: {
        onChange(checkedValues) {
            console.log('checked = ', checkedValues);
            if (this.checkedList.length != plainOptions.length) 
            {
                this.indeterminate=true
                this.checkAll=false
            }else{
                this.indeterminate=false
                this.checkAll=true
            }
        },
        onCheckAllChange(e) {
            console.log('e',e)
            Object.assign(this, {
                checkedList: this.checkedList.length == plainOptions.length ? [] : plainOptions,
                
                indeterminate: false,
                checkAll: e.target.checked,
            });
            console.log('checkedList',this.checkedList)
        },
    },
};
</script>
这里对ant design vue 进行了改动 合并

效果如下

这里多选时 是要进行排序的 value 就是用于前端排序

后端采用EsayExcel 导出

Service层

 @Override
    public void GdExport(JSONObject json) {
        //ARRY 为前端json 名称 
        JSONArray arry = json.getJSONArray("ARRY");

        List<String> heads = new ArrayList<>();
        for (Object o : arry) {
            Map<String,String> map = (Map<String,String>) o;
            heads.add(map.get("title"));
        }
        System.out.println("heads:"+heads);
        String head = "欠薪总表";
        List<LinkedHashMap<String, Object>> list = t3YwfpMapper.getGdSql(json);
        System.out.println("list2"+list);
        ExcelExport.easyUtil(heads,head,list);

    }

生成的SQL

    /**
     * 工单生成SQL
     * @param json
     * @return
     */
    public String findGdSql(JSONObject json){
        JSONArray arry = json.getJSONArray("ARRY");
        String str = "select";
        String str2 = "";
        for (Object o : arry) {
            Map<String,String> map = (Map<String,String>) o;
            str2+= "IFNULL("+map.get("index")+",''),";

        }
        str+= " " + str2;
        //删除最后一个 ,号
        str = str.substring(0, str.length() - 1);
        System.out.println("-----");
        System.out.println(str);
        str = str+" " +"FROM t3_gdxx gd LEFT JOIN t3_gdtsry ts ON gd.ID=ts.GDID where gd.IsDelete=0";
        System.out.println("-----");
        System.out.println(str);
//        t3YwfpGdMapper.getSql(str);
        return str;
    }
ARRY 是前端json的名字

Mapper层

   //YwfpGdServiceImpl.class  是生成SQL的类   findGdSql 是生成SQL 方法
    @SelectProvider(type = YwfpGdServiceImpl.class,method = "findGdSql")
    List<LinkedHashMap<String, Object>> getGdSql(JSONObject json);
这里改用有序的LinkedHashMap 接收

动态导出Excel 公共类

**
 *导出Excel
 */
public class ExcelExport
{
//    private final static String localTime = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));

    //保存路径与名字(也可以放进工具类,通过参数传递)
    private final static String fileName = "D:\\" +"汇总表"+System.currentTimeMillis() + ".xlsx";
//    private final static String fileName = "D:\\" +"汇总表"+localTime + ".xlsx";
    /**
     * 简易版动态导出
     * @param heads        表头
     * @param head        主表头
     * @param list        表数据
     */

    public static void easyUtil(List<String> heads, String head, List<LinkedHashMap<String, Object>>  list){
//    public void easyUtil(){


        System.out.println("list:"+list);
        List<List<String>> hs = new ArrayList<>();
        for (String s : heads) {
            hs.add(Arrays.asList(head,s));
        }
//        List<Map<String, Object>> l = new ArrayList<>();
        Collection<Object> values;
        List<List<Object>> list2 = new ArrayList<>();

        for (int i = 0; i < list.size(); i++) {
            List<Object> objects = new ArrayList<>();
            values = list.get(i).values();
            System.out.println("values:"+values);
            for (Object value : values) {
//                if (value == "" || value == null){
//                    objects.add(null);
//                }
                objects.add(value.toString());

            }
            System.out.println("objects:"+objects);
            list2.add(objects);
        }
        System.out.println("list2:"+list2);
        EasyExcel.write(fileName)
                .head(hs)
                .sheet("模板(sheet名字)")
                .doWrite(list2);
        System.out.println("导出成功");
    }

这里对参考的 进行过改动 你们们也可以用网上其他的详细方法

参考资料

JAVA使用EasyExcel数据库动态导出Excel。

Java神鬼莫测之MyBatis注解开发之动态SQL语句(六)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue中,可以使用`rowSelection`属性来实现表格多选功能。具体步骤如下: 1. 在表格组件中添加`rowSelection`属性,并设置`type`为`checkbox`,表示使用复选框来进行多选。 2. 在`rowSelection`属性中,设置`selectedRowKeys`为一个数组,用于存储当前选中的行的`key`值。 3. 在表格的列定义中,添加一列用于显示复选框,并设置`customRender`属性为一个函数,用于自定义复选框的显示和选中状态。 下面是一个示例代码: ```vue <template> <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection"></a-table> </template> <script> export default { data() { return { dataSource: [ { id: 1, name: 'John', age: 18 }, { id: 2, name: 'Mike', age: 22 }, { id: 3, name: 'Lucy', age: 20 } ], selectedRowKeys: [] } }, computed: { rowSelection() { return { type: 'checkbox', selectedRowKeys: this.selectedRowKeys, onChange: this.handleSelectChange } }, columns() { return [ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Select', customRender: (text, record) => { const isSelected = this.selectedRowKeys.includes(record.id) return <a-checkbox checked={isSelected} onChange={() => this.handleRowSelect(record)}></a-checkbox> } } ] } }, methods: { handleRowSelect(record) { const { id } = record const index = this.selectedRowKeys.indexOf(id) if (index > -1) { this.selectedRowKeys.splice(index, 1) } else { this.selectedRowKeys.push(id) } }, handleSelectChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值