pc-component-v5/examples/components/Hello.vue

<template>
    <div id="app"
         class="container">
        <h1>复选框</h1>
        <Checkbox></Checkbox>
        <h1>日期控件</h1>
        <Date :dateValue="dateValue"
              @on-value-change="dateValue = $event"></Date>
        {{dateValue}}
        <h1>日期+时间控件</h1>
        <DateTime></DateTime>

        <h1>时间日期控件V2</h1>

        <div class="form-inline">
            <div class="form-group">
                <DateTimeV2 :dateValue="dateValueV2"
                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
            </div>
        </div>

        <div>
            <div class="form-group">
                <DateTimeV2 :dateValue="dateValueV2"
                            v-on:on-value-change="dateValueV2 = $event"></DateTimeV2>
            </div>
        </div>

        {{ dateValueV2 }}

        <h1>时间日期控件V2-只读</h1>
        <DateTimeV2 :dateValue="dateValueV2"
                    :readonly="true"></DateTimeV2>
        {{ dateValueV2 }}

        <h1>时间日期控件V2-复制/粘贴</h1>
        <DateTimeV2 :dateValue="dateValueV2_1"
                    v-on:on-value-change="dateValueV2_1 = $event"></DateTimeV2>
        {{ dateValueV2_1 }}

        <h1>时间控件</h1>
        <Time></Time>
        <h1>加载中</h1>
        <button @click="showHideLoading">打开加载中</button>
        <Loading ref="loading"></Loading>

        <h1>模态框</h1>
        <button @click="$refs.modal.showModal()">打开模态框</button>
        <Modal ref="modal"
               @ok="closeModal">
            <template #header>
                hello1
            </template>
            <div>Hello World</div>
        </Modal>

        <h1>页面大小</h1>
        <PageSizeSelect v-on:pageSizeChanged="gridSizeSelect"></PageSizeSelect>

        <h1>复选框</h1>
        <Switches></Switches>

        <h1>上传控件</h1>
        <UploadWidget></UploadWidget>

        <h1>扫描仪</h1>
        <Scanner></Scanner>

        <h1>年份选择器</h1>
        <YearPicker></YearPicker>

        <h1>导航栏</h1>
        <div style="border: 1px solid">
            <NavBar :title="'导航栏1'"
                    :isGoBack="true"></NavBar>
        </div>

        <div style="border: 1px solid">
            <NavBar :title="'导航栏2'"
                    :isGoBack="false"></NavBar>
        </div>

        <h1>分页组件</h1>

        <Pagination v-model="pagination"
                    @callback='pageChanged'></Pagination>
        数据总数
        <input type="number"
               v-model.number="pagination.total" />
        页面大小
        <input type="number"
               v-model.number="pagination.perPage" />
        <div>
            当前页数 {{ pagination.currentPage }}
        </div>

    </div>
</template>

<script>


import Checkbox from "../../packages/checkbox/index.js";
import Date from "../../packages/date/index.js";
import DateTime from "../../packages/datetime/index.js";
import DateTimeV2 from "../../packages/datetime-v2/index.js";
import Time from "../../packages/time/index.js";
import Loading from "../../packages/loading/index.js";
import Modal from '../../packages/modal/index.js';
import PageSizeSelect from '../../packages/page-size-select/index.js';
import Scanner from '../../packages/scanner/index.js';
import Switches from '../../packages/switches/index.js';
import UploadWidget from '../../packages/upload-widget/index.js';
import YearPicker from "../../packages/year-picker/index.js";
import NavBar from '../../packages/navbar/index.js';
import Pagination from "../../packages/pagination/index.js";

export default {
    name: 'app',

    data: function () {
        return {
            msg: 'Welcome to Your Vue.js App',
            users: [
                {
                    id: 1,
                    name: "张三",
                },
                {
                    id: 2,
                    name: "李四",
                }
            ],
            selectedUserId: null,
            selectedUserName: null,
            suggestStyles: {
                "defaultInput": "form-control"
            },

            pagination: {
                currentPage: 1, // 当前的页数
                perPage: 12,    // 每页的显示数量
                total: 100,     // 显示总数
            },

            paginationOptions: {
                offset: 4,
                previousText: 'Prev',
                nextText: 'Next',
                alwaysShowPrevNext: true
            },
            selectedMonth: null,
            dateValue: '2021-10-09',

            dateValueV2: '2021-10-09 14:02:00',
            dateValueV2_1: '',
        }
    },

    components: {
        Checkbox,
        Date,
        DateTime,
        DateTimeV2,
        Time,
        Loading,
        Modal,
        PageSizeSelect,
        Scanner,
        Switches,
        UploadWidget,
        YearPicker,
        NavBar,
        Pagination
    },

    methods: {
        showHideLoading: function () {
            let _self = this;
            _self.$refs.loading.show();
            window.setTimeout(function () {
                _self.$refs.loading.hide();
            }, 3000);
        },


        /**
          * 修改页Size
          */
        gridSizeSelect: function (newPageSize) {
            console.log("page size changed: " + newPageSize);
        },


        /**
         * 选择了用户
         */
        selectUser: function (user) {
            if (user) {
                this.selectedUserId = user.id;
            } else {
                this.selectedUserId = null;
            }
        },

        loadData: function () {

        },

        /**
         * 关闭模态框
         */
        closeModal: function () {
            alert("准备关闭模态框。");
            this.$refs.modal.hideModal();
        },

        /**
         * 页面发生了改变
         */
        pageChanged: function () {
            console.log('页面发生了改变%o', this.pagination);
        },
    }
}
</script>

<style>
</style>