1金币
模板js(sgrz.js)
Reporter.vue
- <template>
- <j-modal
- :title="title"
- :width="width"
- :visible="visible"
- switchFullscreen
- @ok="handleOk"
- :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
- @cancel="handleCancel"
- cancelText="关闭">
- <div id="report"></div>
- </j-modal>
- </template>
- <script>
- import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
- import '@grapecity/spread-sheets-vue';
- import GC from "@grapecity/spread-sheets";
- import '@grapecity/spread-sheets-charts';
- import "@grapecity/spread-sheets-resources-zh";
- import "@grapecity/spread-sheets-barcode";
- GC.Spread.Common.CultureManager.culture("zh-cn");
- GC.Spread.Sheets.LicenseKey='xxxxx';
- export default {
- name: "reporter",
- data(){
- return {
- dataurl:'', //请求后的数据
- path:'', // 模板路径
- title:'',
- width:896,
- visible: false,
- disableSubmit: false
- };
- }, //请求后封装的数据
- /*----------------初始化工作簿----------------*/
- methods:{
- workbookInitialized() {
- var spread = new GC.Spread.Sheets.Workbook(document.getElementById("report"));
- spread.fromJSON(this.path);
- // this.spread.options.tabStripRatio = 0.7;
- var sheet = spread.getActiveSheet();
- this.dataurl='';
- var source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.dataurl);
- sheet.setDataSource(source);
- },
- show(){
- this.visible = true
- },
- close () {
- this.$emit('close');
- this.visible = false;
- },
- handleOk () {
- this.close()
- },
- // submitCallback(){
- // this.$emit('ok');
- // this.visible = false;
- // },
- handleCancel () {
- this.close()
- }
- },
- // mounted(){
- // this.workbookInitialized();
- // }
- }
- </script>
- <style scoped>
- </style>
复制代码 报表列表
- <template>
- <a-card :bordered="false">
- <!-- 查询区域 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline" @keyup.enter.native="searchQuery">
- <a-row :gutter="24">
- </a-row>
- </a-form>
- </div>
- <!-- 查询区域-END -->
- <!-- 操作按钮区域 -->
- <div class="table-operator">
- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
- <!--//@TODO 报表功能待实现-->
- <a-button @click="showreport(selectionRows)" type="primary">报表</a-button>
- <a-button type="primary" icon="download" @click="handleExportXls('施工日志')">导出</a-button>
- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
- <a-button type="primary" icon="import">导入</a-button>
- </a-upload>
- <!-- 高级查询区域 -->
- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
- <a-dropdown v-if="selectedRowKeys.length > 0">
- <a-menu slot="overlay">
- <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
- </a-menu>
- <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
- </a-dropdown>
- </div>
- <!-- table区域-begin -->
- <div>
- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
- <a style="margin-left: 24px" @click="onClearSelected">清空</a>
- </div>
- <a-table
- ref="table"
- size="middle"
- :scroll="{x:true}"
- bordered
- rowKey="id"
- :columns="columns"
- :dataSource="dataSource"
- :pagination="ipagination"
- :loading="loading"
- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
- class="j-table-force-nowrap"
- @change="handleTableChange">
- <template slot="htmlSlot" slot-scope="text">
- <div v-html="text"></div>
- </template>
- <template slot="imgSlot" slot-scope="text">
- <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
- <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
- </template>
- <template slot="fileSlot" slot-scope="text">
- <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
- <a-button
- v-else
- :ghost="true"
- type="primary"
- icon="download"
- size="small"
- @click="downloadFile(text)">
- 下载
- </a-button>
- </template>
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">编辑</a>
- <a-divider type="vertical" />
- <a-dropdown>
- <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
- <a-menu slot="overlay">
- <a-menu-item>
- <a @click="handleDetail(record)">详情</a>
- </a-menu-item>
- <a-menu-item>
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
- </span>
- </a-table>
- </div>
- <construction-log-modal ref="modalForm" @ok="modalFormOk"></construction-log-modal>
- <reporter ref="gpreporter"></reporter>
- </a-card>
- </template>
- <script>
- import '@/assets/less/TableExpand.less'
- import { mixinDevice } from '@/utils/mixin'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import ConstructionLogModal from './modules/ConstructionLogModal'
- import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
- import {getAction} from "../../api/manage";
- import Reporter from './modules/Reporter'
- export default {
- name: 'ConstructionLogList',
- mixins:[JeecgListMixin, mixinDevice],
- components: {
- ConstructionLogModal,
- Reporter
- },
- data () {
- return {
- description: '施工日志管理页面',
- // 表头
- columns: [
- {
- title: '#',
- dataIndex: '',
- key:'rowIndex',
- width:60,
- align:"center",
- customRender:function (t,r,index) {
- return parseInt(index)+1;
- }
- },
- {
- title:'单位',
- align:"center",
- dataIndex: 'unit'
- },
- {
- title:'日期',
- align:"center",
- dataIndex: 'time',
- customRender:function (text) {
- return !text?"":(text.length>10?text.substr(0,10):text)
- }
- },
- {
- title:'星期',
- align:"center",
- dataIndex: 'week_dictText'
- },
- {
- title:'天气',
- align:"center",
- dataIndex: 'weather'
- },
- /* {
- title:'最高气温(℃)',
- align:"center",
- dataIndex: 'tmax'
- },
- {
- title:'最低气温(℃)',
- align:"center",
- dataIndex: 'tmin'
- },*/
- {
- title:'养护航道',
- align:"center",
- dataIndex: 'yhhd'
- },
- {
- title:'桩号',
- align:"center",
- dataIndex: 'zh'
- },
- {
- title:'施工人数',
- align:"center",
- dataIndex: 'sgrs'
- },
- {
- title:'施工班组',
- align:"center",
- dataIndex: 'sgbz'
- },
- /*{
- title:'养护内容',
- align:"center",
- dataIndex: 'content'
- },
- {
- title:'养护情况(包括质量、安全)',
- align:"center",
- dataIndex: 'situation'
- },
- {
- title:'完成后情况',
- align:"center",
- dataIndex: 'situationFinish'
- },*/
- {
- title:'负责人',
- align:"center",
- dataIndex: 'chargePerson'
- },
- {
- title:'记录',
- align:"center",
- dataIndex: 'recorder'
- },
- {
- title: '操作',
- dataIndex: 'action',
- align:"center",
- fixed:"right",
- width:147,
- scopedSlots: { customRender: 'action' }
- }
- ],
- url: {
- // report:"/report/constructionLog/report",
- list: "/report/constructionLog/list",
- delete: "/report/constructionLog/delete",
- deleteBatch: "/report/constructionLog/deleteBatch",
- exportXlsUrl: "/report/constructionLog/exportXls",
- importExcelUrl: "report/constructionLog/importExcel",
-
- },
- path:"./modules/sgrz.js",
- dictOptions:{},
- superFieldList:[],
- }
- },
- created() {
- this.getSuperFieldList();
- },
- computed: {
- importExcelUrl: function(){
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
- },
- },
- methods: {
- initDictConfig(){
- },
- //@TODO 获取选中行的数据
- getSelectdata(row){
- return Selecteddata
- },
- //@TODO 报表功能待实现
- showreport(record){
- console.log(record)
- // data=getAction(this.url.report,)
- this.$refs.gpreporter.path=this.path;
- this.$refs.gpreporter.dataurl=record;//改成所选id
- this.$refs.gpreporter.workbookInitialized();
- this.$refs.gpreporter.show();
- },
- getSuperFieldList(){
- let fieldList=[];
- fieldList.push({type:'string',value:'unit',text:'单位',dictCode:''})
- fieldList.push({type:'date',value:'time',text:'日期'})
- fieldList.push({type:'string',value:'week',text:'星期',dictCode:'week'})
- fieldList.push({type:'string',value:'weather',text:'天气',dictCode:''})
- fieldList.push({type:'double',value:'tmax',text:'最高气温(℃)',dictCode:''})
- fieldList.push({type:'double',value:'tmin',text:'最低气温(℃)',dictCode:''})
- fieldList.push({type:'string',value:'yhhd',text:'养护航道',dictCode:''})
- fieldList.push({type:'string',value:'zh',text:'桩号',dictCode:''})
- fieldList.push({type:'int',value:'sgrs',text:'施工人数',dictCode:''})
- fieldList.push({type:'string',value:'sgbz',text:'施工班组',dictCode:''})
- fieldList.push({type:'string',value:'content',text:'养护内容',dictCode:''})
- fieldList.push({type:'string',value:'situation',text:'养护情况(包括质量、安全)',dictCode:''})
- fieldList.push({type:'string',value:'situationFinish',text:'完成后情况',dictCode:''})
- fieldList.push({type:'string',value:'chargePerson',text:'负责人',dictCode:''})
- fieldList.push({type:'string',value:'recorder',text:'记录',dictCode:''})
- this.superFieldList = fieldList
- }
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
复制代码 加载的record
点击报表后,加载出来的界面不出现spread
|
最佳答案
查看完整内容
请参考这个最新的demo去调,在调用workbookInitialized的时候需要传参,否则再次调用之后上面定义的workbookInitialized接不到参数就会找不到spread对象。
|