自定义文件内容下载
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();
日期选择--快捷本季度、上季度、不可超过一年
- 使用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)
}
}
})
]
)
])
}
}