畫個(gè)餅
要求：新增一個(gè)增刪改查頁面印荔，每一條記錄的數(shù)據(jù)，可以導(dǎo)出详羡，也可以統(tǒng)計(jì)為餅圖仍律。
因?yàn)椴皇煜で岸耍瑫r(shí)時(shí)間挺緊实柠，這里采用的做法既見效也見笑水泉。。。
維護(hù)菜單
我們不建表了草则，直接使用menu數(shù)據(jù)钢拧。進(jìn)入系統(tǒng)，維護(hù)一個(gè)菜單畔师。
新增頁面
把menu頁面復(fù)制過來娶靡，改為views/report/list/index.vue
將按鈕改為導(dǎo)出word以及展示餅圖牧牢，其中餅圖借用了crud.toEdit方法：
<el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="260px" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="small" type="primary" @click="exportWord(scope.row)">導(dǎo)出word</el-button>
<el-button size="mini" type="success" @click="crud.toEdit(scope.row)">查看餅圖</el-button>
</template>
</el-table-column>
定義餅圖
修改components/Echarts/PieChart.vue自己做一個(gè)MyPieChart.vue
//props中增加：
chartData: {
type: Object,
required: true
}
//methods.initchart改為：
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
// methods新增setOptions方法看锉，將menu的幾個(gè)數(shù)字特性，作為餅圖百分比
setOptions(form) {
console.log(form)
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>塔鳍 : {c} (knjru23%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['subCount', 'type', 'menuSort', 'cache', 'hidden']
},
calculable: true,
series: [
{
name: 'Menu Pie',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '40%'],
data: [
{ value: form.subCount, name: 'subCount' },
{ value: form.type, name: 'type' },
{ value: form.menuSort, name: 'menuSort' },
{ value: form.cache, name: 'cache' },
{ value: form.hidden, name: 'hidden' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
引入餅圖
在index.vue中：
//引用餅圖
import PieChart from '@/components/Echarts/MyPieChart'
//修改dialog頁面伯铣，展示餅圖，數(shù)據(jù)源為form
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<div class="dashboard-container">
<div class="dashboard-editor-container">
<el-row :gutter="32">
<!-- <el-col :xs="24" :sm="24" :lg="8"> -->
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<pie-chart :chart-data="form" />
</div>
</el-col>
</el-row>
</div></div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
</div>
</el-dialog>
如無意外轮纫，餅圖展示已完成腔寡。
導(dǎo)出word
index.vue中新增methods.exportWord，如下：
//引入方法
import JSZipUtils from 'jszip-utils'
import Docxtemplater from 'docxtemplater'
import Pizzip from 'pizzip'
import { saveAs } from 'file-saver'
// 導(dǎo)出word
exportWord(row) {
const _this = this
const tableData = _this.$data.crud.data
const bodyData = { name: row.id, tel: '13309388888', need: '物美價(jià)廉', remark: '已通過質(zhì)檢', total: '9999', checkNote: '批準(zhǔn)' }
// ['name', 'tel', 'need', 'remark', 'total', 'checkNote']
console.log(_this.$data.crud.data)
// 讀取并獲得模板文件的二進(jìn)制內(nèi)容
JSZipUtils.getBinaryContent('/input.docx', function(error, content) {
// input.docx是模板掌唾。我們?cè)趯?dǎo)出的時(shí)候放前，會(huì)根據(jù)此模板來導(dǎo)出對(duì)應(yīng)的數(shù)據(jù)
// 拋出異常
if (error) {
throw error
}
// 創(chuàng)建一個(gè)JSZip實(shí)例，內(nèi)容為模板的內(nèi)容
const zip = new Pizzip(content)
// 創(chuàng)建并加載docxtemplater實(shí)例對(duì)象
const doc = new Docxtemplater().loadZip(zip)
// 設(shè)置模板變量的值
doc.setData({
...bodyData,
table: tableData
})
try {
// 用模板變量的值替換所有模板變量
doc.render()
} catch (error) {
// 拋出異常
const e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
}
console.log(JSON.stringify({ error: e }))
throw error
}
// 生成一個(gè)代表docxtemplater對(duì)象的zip文件（不是一個(gè)真實(shí)的文件糯彬，而是在內(nèi)存中的表示）
const out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
// 將目標(biāo)文件對(duì)象保存為目標(biāo)類型的文件凭语，并命名
const outName = '報(bào)表明細(xì)' + bodyData.name + '.docx'
saveAs(out, outName)
})
}
由于使用了一些插件，記得
npm install docxtemplater pizzip
npm install jszip --save
npm install jszip-utils --save
npm install file-saver --save
記得在/public目錄下放個(gè)input.docx作為模板撩扒，內(nèi)容如下：
header：
xxxx{name} xxxx{tel}
xxxx{need}
xxxx{remark}
明細(xì)內(nèi)容
{#table}
{id}
{label}
{menuSort}
{subCount}
{subCount}
{createTime}
{/table}
footer：{checkNote}
完畢似扔。
