自定义文件内容下载

自定义文件内容下载

open 方法的第二个参数为下载地址

a.download 对应的是文件名字

var a = document.createElement('a');
      a.style.display = 'none';

      var xhr = new XMLHttpRequest();
      xhr.open('GET', row.attachmentUrl, true);
      xhr.responseType = 'blob';

      // 处理下载完成的回调函数
      xhr.onload = function () {
        // 如果请求成功
        if (xhr.status === 200) {
          // 创建一个 Blob 对象
          var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
          var urlObject = URL.createObjectURL(blob);
          a.href = urlObject;
          a.download = row.attachmentName
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(urlObject);
        }
      };
      xhr.send();

 

日期选择--快捷本季度、上季度、不可超过一年

1. 使用datepicker，v-model绑定一个数组类型['','']

<b-date-picker
                    v-model="invoiceRepairDate"
                    type='daterange'
                    class="invoice-date-picker"
                    placeholder="请选择"
                    :options="dateRangeOptions"
                    width='400'>
                </b-date-picker>

2.计算属性给出option：近五日、本月、上月、本季度、上季度

dateRangeOptions () {
            return {
                'shortcuts': [
                    {
                        text: '近五日',
                        value: function value () {
                            var now = new Date() // 获取当前日期

                            var first = new Date()
                            first.setDate(now.getDate() - 5)
                            return [first, now]
                        }
                    },
                    {
                        text: '本月',
                        value: function value () {
                            var now = new Date() // 获取当前日期

                            var first = new Date()
                            first.setMonth(now.getMonth())
                            first.setDate(1)
                            return [first, now]
                        }
                    },
                    {
                        text: '上月',
                        value: function value () {
                            var now = new Date()
                            var month = now.getMonth()
                            var start = new Date()
                            start.setDate(1)
                            start.setMonth(month - 1)
                            var end = new Date(now.setDate(0))
                            return [start, end]
                        }
                    },
                    {
                        text: '本季度',
                        value: function value () {
                            var now = new Date()
                            var month = now.getMonth()
                            var start = new Date()
                            start.setDate(1)
                            start.setMonth(month - month % 3)
                            return [start, now]
                        }
                    },
                    {
                        text: '上季度',
                        value: function value () {
                            var now = new Date()
                            var month = now.getMonth()
                            var start = new Date()
                            start.setDate(1)
                            start.setMonth(month - month % 3 - 3)
                            now.setDate(1)
                            now.setMonth(month - month % 3)
                            now.setDate(0)
                            return [start, now]
                        }
                    }]
            }
        }

3.检验选择的时间范围不可超过一年

            let validate = true
            const timeDiff = new Date(this.invoiceRepairDate[1]) - new Date(this.invoiceRepairDate[0])
            if (timeDiff > 365 * 24 * 60 * 60 * 1000) {
                this.$Message.info('选择时间不能超过一年')
                validate = false
            }
            if (!validate) return

 

表格的位置移动及置顶

{
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            let { row, index } = params
            return h('div', [
              h(
                'Tooltip',
                {
                  props: {
                    content: '上移',
                    placement: 'top',
                    transfer: true
                  }
                },
                [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'shangyi',
                      size: 'small',
                      disabled: params.index === 0
                    },
                    on: {
                      click: () => {
                        this.removeUp(params.row, params.index)
                      }
                    }
                  })
                ]
              ),
              h(
                'Tooltip',
                {
                  props: {
                    content: '下移',
                    placement: 'top',
                    transfer: true
                  }
                },
                [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'xiayi',
                      size: 'small',
                      disabled:
                        params.index === this.codeTableDataTarget.length - 1
                    },
                    on: {
                      click: () => {
                        this.removeDown(params.row, params.index)
                      }
                    }
                  })
                ]
              ),
              h(
                'Tooltip',
                {
                  props: {
                    content: '置顶',
                    placement: 'top',
                    transfer: true
                  }
                },
                [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'zhiding',
                      size: 'small',
                      disabled: params.index === 0
                    },
                    on: {
                      click: () => {
                        this.removeTop(params.row, params.index)
                      }
                    }
                  })
                ]
              ),
              h(
                'Tooltip',
                {
                  props: {
                    content: '删除',
                    placement: 'top',
                    transfer: true
                  }
                },
                [
                  h('Button', {
                    props: {
                      type: 'text',
                      icon: 'shanchu2',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        // if (params.row.enName === 'issueInvoiceBasis') {
                        //   this.$Message.info('您已从模板配置中选择开票类单据，不可删除【开票依据】字段')
                        //   return
                        // }
                        this.removeBack(params.row, params.index)
                      }
                    }
                  })
                ]
              )
            ])
          }
        }