画个饼

要求：新增一个增删改查页面，每一条记录的数据，可以导出，也可以统计为饼图。

因为不熟悉前端，同时时间挺紧，这里采用的做法既见效也见笑。。。

维护菜单

我们不建表了，直接使用menu数据。进入系统，维护一个菜单。

新增页面

把menu页面复制过来，改为views/report/list/index.vue

将按钮改为导出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)">导出word</el-button>
          <el-button size="mini" type="success" @click="crud.toEdit(scope.row)">查看饼图</el-button>
        </template>
      </el-table-column>

定义饼图

修改components/Echarts/PieChart.vue自己做一个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的几个数字特性，作为饼图百分比
    setOptions(form) {
      console.log(form)
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        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页面，展示饼图，数据源为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>

如无意外，饼图展示已完成。

导出word

index.vue中新增methods.exportWord，如下：

//引入方法
import JSZipUtils from 'jszip-utils'
import Docxtemplater from 'docxtemplater'
import Pizzip from 'pizzip'
import { saveAs } from 'file-saver'

// 导出word
    exportWord(row) {
      const _this = this
      const tableData = _this.$data.crud.data
      const bodyData = { name: row.id, tel: '13309388888', need: '物美价廉', remark: '已通过质检', total: '9999', checkNote: '批准' }
      // ['name', 'tel', 'need', 'remark', 'total', 'checkNote']
      console.log(_this.$data.crud.data)
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('/input.docx', function(error, content) {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }

        // 创建一个JSZip实例，内容为模板的内容
        const zip = new Pizzip(content)
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater().loadZip(zip)
        // 设置模板变量的值
        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
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        const outName = '报表明细' + 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目录下放个input.docx作为模板，内容如下：

header：
xxxx{name}              xxxx{tel}   
xxxx{need}      
xxxx{remark}    

明细内容
{#table}
{id}
{label}
{menuSort}
{subCount}
{subCount}
{createTime}
{/table}


footer：{checkNote}

完毕。