自定义文件内容下载
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.attachmentNamedocument.body.appendChild(a);a.click();URL.revokeObjectURL(urlObject);}};xhr.send();
日期选择--快捷本季度、上季度、不可超过一年
- 使用datepicker,v-model绑定一个数组类型['','']
<b-date-pickerv-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 = trueconst 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 } = paramsreturn 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)}}})])])}}