jQWidgets Forums

My Vue File

<template>
    <div>
        <common ref="common"></common>
        <div class="col-md-12 vuetable-container">
            <div class="ibox">
                <div class="ibox-title">
                    <div class="form" style="padding-bottom:10px">
                        <div class="pull-left col-md-10 col-lg-10 ">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">From Date</label>
                                        <div class="col-md-8">
                                            <div class="input-group date" data-autoclose="true">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <date-picker v-model="reportparmModel.fromDate" :config="options"></date-picker>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">To Date</label>
                                        <div class="col-md-8">
                                            <div class="input-group clockpicker">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                <date-picker v-model="reportparmModel.toDate" :config="options"></date-picker>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="input-group col-md-2">
                            <span class="input-group-btn">
                                <button class="btn btn-success" style="background-color:#1ab394; z-index:0; color:white" @click="showDetails" type="button">
                                    <i class="fa fa-eye"></i> Show
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div id="printFrom">
                    <div class="ibox-content">
                        <div class="page-heading">
                            <h3>
                                {{branches.organisationName}}
                            </h3>
                            <h5>
                                {{branches.address.addressDetails}},  Web:{{branches.address.website}}
                            </h5>
                            <h3 style="text-align:center">
                                Check Out Details
                            </h3>
                        </div>
                    </div>
                    <dp-spinner v-if="loading"></dp-spinner>
                    <div class="ibox-content table-responsive">
                        <JqxGrid ref="myjqxGrid" :theme="'material'"
                                 :width="width" :source="dataAdapter" :columns="columns">
                        </JqxGrid>
                    </div>
                </div>
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-w-m btn-primary" type="submit" v-on:click="print()"><i class="fa fa-Print"> </i> Print</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import common from '../common/common'
  import FilterBarRepot from '../common/FilterBarRepot'
  import dpSpinner from '../common/dp-spinner'
  import VueEvents from 'vue-events'
  import moment from 'moment'
  import accounting from 'accounting'
  import datePicker from 'vue-bootstrap-datetimepicker';
  import BootstrapVue from 'bootstrap-vue'
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

  Vue.use(BootstrapVue);
  Vue.component('common', common)
  Vue.component('filter-bar-report', FilterBarRepot)
  Vue.use(VueEvents)

export default Vue.extend({
    components: { FilterBarRepot, dpSpinner, datePicker, JqxGrid},
    data() {
        return {
            moreParams: { filter: null },
            getWidth: '99%',
            dataAdapter: new jqx.dataAdapter(this.source),
            columns: [
                { text: 'Date', dataField: 'date', width: 80 },
                { text: 'Time', dataField: 'time', width: 80 },
                { text: 'Number', dataField: 'number', width: 80 },
                { text: 'Rooms', dataField: 'cRooms', width: 100,},
                { text: 'Guest Name', dataField: 'cGuestName', width: 120},
                { text: 'Basic', dataField: 'basicAmount', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' },
                { text: 'Sgst', dataField: 'sgstAmount', cellsalign: 'right', minwidth: 80, cellsformat: 'c2' },
                { text: 'Cgst', dataField: 'cgstAmount', cellsalign: 'right', minwidth: 80, cellsformat: 'c2' },
                { text: 'Advance', dataField: 'advanceAmount', cellsalign: 'right', minwidth: 80, cellsformat: 'c2' },
                { text: 'Disc', dataField: 'discountAmount', cellsalign: 'right', minwidth: 80, cellsformat: 'c2' },
                { text: 'Round', dataField: 'roundOffAmount', cellsalign: 'right', minwidth: 80, cellsformat: 'c2' },
                { text: 'Net Amount', dataField: 'netAmount', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }

            ],
            reportparmModel:{
                trantype: 'CheckIn',
                fromDate: new Date(),
                toDate:new Date()
            },
            options: {
                format: 'DD/MM/YYYY',
                useCurrent: false,
                showClear: true,
                showClose: true,
            },
            repostModel:{
                ids: [],
                tranType:''
            },
            branches: {
                branchName: '',
                addressId: 0,
                companyId: 0,
                adminOfficeId: 0,
                statutoryId: 0,
                bankInformationId: 0,
                branchCode: 0,
                stateId: 0,
                organisationName: '',
                address: {},
                statutoryLicense: {}
            }
        }
    },
    mounted: function () {
        this.getBranchDet();
    },
    beforeCreate: function () {
        this.source = {
            localdata:[],
            datafields:
                [
                    { name: 'date', type: 'date'},
                    { name: 'time', type: 'time'},
                    { name: 'number', type: 'string'},
                    { name: 'cRooms', type: 'string'},
                    { name: 'cGuestName', type: 'string',},
                    { name: 'basicAmount', type: 'number'},
                    { name: 'sgstAmount', type: 'number' },
                    { name: 'cgstAmount', type: 'number' },
                    //{ name: 'igstAmount',type: 'number' },
                    { name: 'advanceAmount', type: 'number' },
                    { name: 'discountAmount', type: 'number' },
                    { name: 'roundOffAmount', type: 'number' },
                    { name: 'netAmount', type: 'number' }
                ],
            datatype: 'array'
        };
    },
    methods: {
        onLoading() {
            this.loading = true;
        },
        onLoaded() {
            this.loading = false;
        },
        onPaginationData(paginationData) {
            this.$refs.pagination.setPaginationData(paginationData)
        },
        onChangePage(page) {
            this.$refs.vuetable.changePage(page)
            window.scrollTo(0, 0);
        },
        onCellClicked(data, field, event) {
            // console.log('cellClicked: ', field.name)
            //this.$refs.vuetable.toggleDetailRow(data.id)
        },
        onFilterSet(filterText) {
            this.moreParams.filter = filterText
            Vue.nextTick(() => this.$refs.vuetable.refresh())
        },
        onFilterReset() {
            delete this.moreParams.filter
            Vue.nextTick(() => this.$refs.vuetable.refresh())
        },
        formatDate(value, fmt = 'D MMM YYYY') {
            return (value == null)
                ? ''
                : moment(value, 'YYYY-MM-DD HH:mm:SS').format(fmt)
        },
        formatNumber(value) {
            return accounting.formatNumber(value, 2)
        },
        showDetails: function () {
            this.onFilterSet(null);
            this.moreParams.param = moment(this.reportparmModel.fromDate, 'DD/MM/YYYY').format('YYYY-MM-DD') + "|" + moment(this.reportparmModel.toDate, 'DD/MM/YYYY').format('YYYY-MM-DD');
            this.listurl = this.$siteName + "/api/reports/checkOutDetailsReport/GetReportlist";
            this.$refs.vuetable.reload();
        },
        getrepodetails: function () {
            var self = this
            var common = this.$refs.common;
            this.moreParams.param = moment(this.reportparmModel.fromDate, 'DD/MM/YYYY').format('YYYY-MM-DD') + "|" + moment(this.reportparmModel.toDate, 'DD/MM/YYYY').format('YYYY-MM-DD');
            this.$http.get(self.$siteName + '/api/reports/checkOutDetailsReport/GetReporttListJqx').then(function (response) {
                common.ManageResponse(response);
                this.source.localdata = response.data.data;
                this.$refs.myjqxGrid.updatebounddata('cells');
            }).catch(function (error) {
                common.ManageResponse(error.response);
            })
        },
        getBranchDet: function () {
            var self = this
            var common = this.$refs.common;
            this.$http.get(self.$siteName + '/api/reports/checkInDetailsReport/getfirmDetails').then(function (response) {
                common.ManageResponse(response);
                self.branches = response.data.data
            }).catch(function (error) {
                common.ManageResponse(error.response);
            })
        },
        print() {
            this.$htmlToPaper('printFrom');
        },
    }
})

</script>

<style>

   
    
</style>

My Webpack File

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': ['./ClientApp/boot-app.js', './ClientApp/js/inspinia.js'] },
        resolve: {
            extensions: ['.js', '.vue'],
            alias: {
                'vue$': 'vue/dist/vue',
                'components': path.resolve(__dirname, './ClientApp/components'),
                'views': path.resolve(__dirname, './ClientApp/views'),
                'utils': path.resolve(__dirname, './ClientApp/utils'),
                'api': path.resolve(__dirname, './ClientApp/store/api')
            }
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: '/dist/'
        },
        module: {
            rules: [
                { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
                { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                //{ test: /\.styl$/, use: isDevBuild ? ['style-loader', 'css-loader', 'stylus-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, vuetify stylus loader to load styles of vuetify
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                {
                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    use: [{
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',    // where the fonts will go
                        // publicPath: '../'       // override the default path
                      }
                    }]
                  },                

            ]
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery'
            }),

        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.ProvidePlugin({
                    Vue: ['vue/dist/vue.esm.js', 'default'],
                    $: 'jquery',
                    jquery: 'jquery',
                    'window.jQuery': 'jquery',
                    jQuery: 'jquery'
                }),
                new ExtractTextPlugin('site.css')
            ])
    }];
};