element+xlsx+file-saver配置导出
This commit is contained in:
熊丽君
@ -46,24 +46,25 @@
|
||||
"core-js": "3.6.5",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "2.13.2",
|
||||
"file-saver": "2.0.1",
|
||||
"js-beautify": "1.10.2",
|
||||
"file-saver": "^2.0.1",
|
||||
"fuse.js": "3.4.4",
|
||||
"js-beautify": "1.10.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"quill": "1.3.7",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0"
|
||||
"vuex": "3.1.0",
|
||||
"xlsx": "^0.16.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.4",
|
||||
|
||||
@ -19,21 +19,41 @@
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="处理结果：">
|
||||
<el-row>
|
||||
<el-form-item label="处理结果：">
|
||||
<span>{{ props.row.writeForm.resultNote }}</span>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否修复：">
|
||||
<span>{{ props.row.writeForm.isOk==1?'是':'否' }}</span>
|
||||
<span>{{ props.row.writeForm.isOk == 1 ? '是' : '否' }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否返厂：">
|
||||
<span>{{ props.row.writeForm.isReturn==1?'是':'否' }}</span>
|
||||
<span>{{
|
||||
props.row.writeForm.isReturn == 1 ? '是' : '否'
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="返厂数量：" v-if="props.row.writeForm.isReturn==1">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="返厂数量："
|
||||
v-if="props.row.writeForm.isReturn == 1"
|
||||
>
|
||||
<span>{{ props.row.writeForm.returnNum }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="返厂单号：" v-if="props.row.writeForm.isReturn==1">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="返厂单号："
|
||||
v-if="props.row.writeForm.isReturn == 1"
|
||||
>
|
||||
<span>{{ props.row.writeForm.returnOrder }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="app-container">
|
||||
<el-form
|
||||
<!-- <el-form
|
||||
ref="tableData"
|
||||
:inline="true"
|
||||
:model="tableHeader"
|
||||
@ -9,161 +9,262 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" class="grid-content">
|
||||
<el-form-item label="派单编号：">
|
||||
{{tableHeader.id}}
|
||||
{{ tableHeader.id }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" class="grid-content">
|
||||
<el-form-item label="派单时间：">
|
||||
{{tableHeader.createTime | formatDate}}
|
||||
{{ tableHeader.createTime | formatDate }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" class="grid-content">
|
||||
<el-form-item label="处理人：">
|
||||
{{tableHeader.nick_name}}
|
||||
{{ tableHeader.nick_name }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" class="grid-content">
|
||||
<el-form-item label="提交时间：">
|
||||
{{tableHeader.updateTime | formatDate}}
|
||||
{{ tableHeader.updateTime | formatDate }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" class="grid-content">
|
||||
<el-form-item label="通过时间：">
|
||||
{{tableHeader.finishTime | formatDate}}
|
||||
{{ tableHeader.finishTime | formatDate }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-form-item label="派单备注：">
|
||||
{{tableHeader.note}}
|
||||
{{ tableHeader.note }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item>
|
||||
<el-button type="primary">报表导出</el-button>
|
||||
<el-button type="primary" @click="exportExcel">报表导出</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="驳回备注：">
|
||||
{{tableHeader.rejectNote}}
|
||||
{{ tableHeader.rejectNote }}
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-form> -->
|
||||
<!-- 表格区域 -->
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%" default-expand-all>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="处理结果：">
|
||||
<span>{{ props.row.writeForm.resultNote }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否修复：">
|
||||
<span>{{ props.row.writeForm.isOk==1?'是':'否' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否返厂：">
|
||||
<span>{{ props.row.writeForm.isReturn==1?'是':'否' }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="返厂数量：" v-if="props.row.writeForm.isReturn==1">
|
||||
<span>{{ props.row.writeForm.returnNum }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="返厂单号：" v-if="props.row.writeForm.isReturn==1">
|
||||
<span>{{ props.row.writeForm.returnOrder }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="55"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="地区" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.workInfo.proName + scope.row.workInfo.cityName + scope.row.workInfo.disName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.workCode"
|
||||
align="center"
|
||||
label="工单编号"
|
||||
min-width="180"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="warningLevel"
|
||||
align="center"
|
||||
label="告警等级"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.workInfo.warningLevel | toChinaNum }}级
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.warningName"
|
||||
align="center"
|
||||
label="告警名称"
|
||||
min-width="150"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.productName"
|
||||
label="产品名称"
|
||||
align="center"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.nickName"
|
||||
align="center"
|
||||
label="所属客户"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.projectName"
|
||||
align="center"
|
||||
label="所属项目"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.deviceSn"
|
||||
align="center"
|
||||
label="设备SN"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="建单时间" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.workInfo.createTime | formatDate }}
|
||||
</template>
|
||||
<el-row style="margin-bottom:20px;text-align: right;">
|
||||
<el-button type="primary" @click="exportExcel">报表导出</el-button>
|
||||
</el-row>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
default-expand-all
|
||||
id="out-table"
|
||||
>
|
||||
<el-table-column align="center" label="派单信息">
|
||||
<el-table-column
|
||||
label="工单信息"
|
||||
width="55"
|
||||
:render-header="renderHeaderDate"
|
||||
>
|
||||
<template>
|
||||
{{ tableHeader.id }}
|
||||
</template>
|
||||
<el-table-column align="center" label="工单信息" width="55">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<!-- <el-row> -->
|
||||
<el-form-item label="处理结果：">
|
||||
<span>{{
|
||||
props.row.writeForm.resultNote
|
||||
}}</span> </el-form-item
|
||||
><br />
|
||||
<!-- </el-row> -->
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-form-item label="是否修复：">
|
||||
<span>{{
|
||||
props.row.writeForm.isOk == 1 ? '是' : '否'
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item label="是否返厂：">
|
||||
<span>{{
|
||||
props.row.writeForm.isReturn == 1 ? '是' : '否'
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item
|
||||
label="返厂数量："
|
||||
v-if="props.row.writeForm.isReturn == 1"
|
||||
>
|
||||
<span>{{ props.row.writeForm.returnNum }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item
|
||||
label="返厂单号："
|
||||
v-if="props.row.writeForm.isReturn == 1"
|
||||
>
|
||||
<span>{{ props.row.writeForm.returnOrder }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="55"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="地区" min-width="150">
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
scope.row.workInfo.proName +
|
||||
scope.row.workInfo.cityName +
|
||||
scope.row.workInfo.disName
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.workCode"
|
||||
align="center"
|
||||
label="工单编号"
|
||||
min-width="180"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="warningLevel"
|
||||
align="center"
|
||||
label="告警等级"
|
||||
min-width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.workInfo.warningLevel | toChinaNum }}级
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.warningName"
|
||||
align="center"
|
||||
label="告警名称"
|
||||
min-width="150"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.productName"
|
||||
label="产品名称"
|
||||
align="center"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.nickName"
|
||||
align="center"
|
||||
label="所属客户"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.projectName"
|
||||
align="center"
|
||||
label="所属项目"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="workInfo.deviceSn"
|
||||
align="center"
|
||||
label="设备SN"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="建单时间" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.workInfo.createTime | formatDate }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSaver from 'file-saver';
|
||||
import XLSX from 'xlsx';
|
||||
import { getOkInfo } from '@/api/work/orderHistory';
|
||||
export default {
|
||||
name: 'detail',
|
||||
data() {
|
||||
return {
|
||||
id:null,
|
||||
id: null,
|
||||
loading: true,
|
||||
tableHeader: {},
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCompleteOrder(){
|
||||
this.loading = true
|
||||
getOkInfo({id:this.id}).then(({code,data,message})=>{
|
||||
renderHeaderDate() {
|
||||
return (
|
||||
<section>
|
||||
<div class="table_content">
|
||||
<span>派单编号：{this.tableHeader.id}</span>
|
||||
<span>派单时间：{this.tableHeader.createTime}</span>
|
||||
<span>处理人：{this.tableHeader.nick_name}</span>
|
||||
<span>提交时间：{this.tableHeader.finishTime}</span>
|
||||
<span>通过时间：{this.tableHeader.updateTime}</span>
|
||||
</div>
|
||||
<div>派单备注：{this.tableHeader.note}</div>
|
||||
<div>驳回备注：{this.tableHeader.rejectNote}</div>
|
||||
</section>
|
||||
);
|
||||
},
|
||||
getCompleteOrder() {
|
||||
this.loading = true;
|
||||
getOkInfo({ id: this.id }).then(({ code, data, message }) => {
|
||||
if (code !== 200) return this.$message.error(message);
|
||||
this.tableHeader = data.find((item,index)=>{
|
||||
return index == 0
|
||||
})
|
||||
this.tableData = data.filter((item,index)=>{
|
||||
return index != 0
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
this.tableHeader = data.find((item, index) => {
|
||||
return index == 0;
|
||||
});
|
||||
this.tableData = data.filter((item, index) => {
|
||||
return index != 0;
|
||||
});
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// exportExcel () {
|
||||
// /* out-table关联导出的dom节点 */
|
||||
// var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
|
||||
// /* get binary string as output */
|
||||
// var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
|
||||
// try {
|
||||
// FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '工单详情.xlsx')
|
||||
// } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
|
||||
// return wbout
|
||||
// },
|
||||
// },
|
||||
exportExcel() {
|
||||
let time = new Date();
|
||||
let year = time.getFullYear();
|
||||
let month = time.getMonth() + 1;
|
||||
let day = time.getDate();
|
||||
let name = year + '' + month + '' + day;
|
||||
let xlsxParam = { raw: true };
|
||||
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam);
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array'
|
||||
});
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: 'application/octet-stream' }),
|
||||
name + '.xlsx'
|
||||
);
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, wbout);
|
||||
}
|
||||
return wbout;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -174,7 +275,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
this.id = id;
|
||||
this.getCompleteOrder()
|
||||
this.getCompleteOrder();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -196,4 +297,11 @@ export default {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table_content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user