photo

src/main/java/xyz/wbsite/dbtool/javafx/manger/callable/SpringBootCallable.java

@@ -688,6 +688,7 @@ public class SpringBootCallable implements Callable {
             Tool.outputResource(option + "/resources/templates/control/header.ftl", new File(control.getAbsolutePath(), "header.ftl"));
             Tool.outputResource(option + "/resources/templates/control/footer.ftl", new File(control.getAbsolutePath(), "footer.ftl"));
             Tool.outputResource(option + "/resources/templates/control/macro.ftl", new File(control.getAbsolutePath(), "macro.ftl"));
+            Tool.outputResource(option + "/resources/templates/control/mint-ui-extend.ftl", new File(control.getAbsolutePath(), "mint-ui-extend.ftl"));
             Tool.outputResource(option + "/resources/templates/layout/default.ftl", new File(layout.getAbsolutePath(), "default.ftl"));
             Tool.outputResource(option + "/resources/templates/layout/app.ftl", new File(layout.getAbsolutePath(), "app.ftl"));
             Tool.outputResource(option + "/resources/templates/screen/demo.ftl", new File(screen.getAbsolutePath(), "demo.ftl"));

src/main/resources/modules/SpringBoot/resources/templates/control/mint-ui-extend.ftl

@@ -0,0 +1,416 @@
+<script>
+    window.nav = new Vue({
+        data: {
+            activeIndex: 'home',
+            contextPath: '${contextPath?default("")}',
+            homePath: '${homePath?default("")}',
+        },
+        methods: {
+            i: function (message, callback) {
+                this.$toast({
+                    message: message,
+                    position: 'middle',
+                    duration: 3000
+                });
+                setTimeout(callback, 3000)
+            },
+            alert: function (message, callback) {
+                this.$messageBox.alert(message, "").then(callback);
+            },
+            confirm: function (message, callback) {
+                this.$messageBox.confirm(message, "").then(callback);
+            }
+        }
+    });
+
+    Vue.component('wb-field-select', {
+        data: function () {
+            return {
+                selectValue: '',
+                popupVisible: false,
+                clearVisible: false,
+                slots: [{
+                    values: this.items
+                }],
+            }
+        },
+        computed: {
+            currentValue: {
+                get: function () {
+                    return this.value;
+                },
+                set: function (value) {
+                    this.$emit('input', value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        methods: {
+            onSelect: function () {
+                this.popupVisible = true;
+                if (!this.value) {
+                    this.currentValue = this.items[0];
+                }
+            },
+            onClear: function () {
+                this.currentValue = '';
+            },
+            onValuesChange: function (picker, values) {
+                if (this.popupVisible) {
+                    this.currentValue = picker.getValues(0)[0];
+                }
+            },
+
+        },
+        props: ['value', 'label', 'placeholder', 'items'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-dict', {
+        data: function () {
+            return {
+                selectValue: '',
+                popupVisible: false,
+                clearVisible: false,
+                slots: [{
+                    values: this.items
+                }],
+            }
+        },
+        computed: {
+            currentValue: {
+                get: function () {
+                    return this.value;
+                },
+                set: function (value) {
+                    this.$emit('input', value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        created: function () {
+            this.items.forEach(function (item) {
+                item.keyValue = "[" + item.key + "]" + item.value;
+            })
+        },
+        methods: {
+            onSelect: function () {
+                this.popupVisible = true;
+                if (!this.value) {
+                    this.currentValue = "[" + this.items[0].key + "]" + this.items[0].value;
+                }
+            },
+            onClear: function () {
+                this.currentValue = '';
+            },
+            onValuesChange: function (picker, values) {
+                if (this.popupVisible) {
+                    this.currentValue = "[" + picker.getValues(0)[0].key + "]" + picker.getValues(0)[0].value;
+                }
+            }
+        },
+        props: ['value', 'label', 'placeholder', 'items'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker :slots="slots" valueKey="keyValue" @change="onValuesChange"></mt-picker></mt-popup>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-date', {
+        data: function () {
+            return {
+                selectValue: '',
+                clearVisible: false,
+            }
+        },
+        computed: {
+            currentValue: {
+                get: function () {
+                    return this.value;
+                },
+                set: function (value) {
+                    this.$emit('input', value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        methods: {
+            onSelect: function () {
+                this.$refs.picker.open();
+            },
+            onClear: function () {
+                this.currentValue = '';
+            },
+            onConfirm: function (value) {
+                this.currentValue = value.format("yyyy-MM-dd")
+            }
+        },
+        props: ['value', 'label', 'placeholder', 'items'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-datetime-picker ref="picker" type="date" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-time', {
+        data: function () {
+            return {
+                selectValue: '',
+                clearVisible: false,
+            }
+        },
+        computed: {
+            currentValue: {
+                get: function () {
+                    return this.value;
+                },
+                set: function (value) {
+                    this.$emit('input', value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        methods: {
+            onSelect: function () {
+                this.$refs.picker.open();
+            },
+            onClear: function () {
+                this.currentValue = '';
+            },
+            onConfirm: function (value) {
+                this.currentValue = value;
+            }
+        },
+        props: ['value', 'label', 'placeholder', 'items'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-datetime-picker ref="picker" type="time" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-datetime', {
+        data: function () {
+            return {
+                selectValue: '',
+                clearVisible: false,
+            }
+        },
+        computed: {
+            currentValue: {
+                get: function () {
+                    return this.value;
+                },
+                set: function (value) {
+                    this.$emit('input', value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        methods: {
+            onSelect: function () {
+                this.$refs.picker.open();
+            },
+            onClear: function () {
+                this.currentValue = '';
+            },
+            onConfirm: function (value) {
+                this.currentValue = value.format("yyyy-MM-dd hh:mm")
+            }
+        },
+        props: ['value', 'label', 'placeholder', 'items'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<input :placeholder="placeholder" @click="onSelect" readonly v-model="currentValue" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-datetime-picker ref="picker" type="datetime" v-model="selectValue" @confirm="onConfirm" year-format="{value}" month-format="{value}" date-format="{value}"></mt-datetime-picker>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-cphm', {
+        data: function () {
+            return {
+                prefixData: [{
+                    key: '',
+                    value: '苏',
+                    children: ['A', 'B', 'C']
+                }, {
+                    key: '',
+                    value: '鲁',
+                    children: ['A', 'B', 'C', 'D']
+                }],
+                popupVisible: false,
+                clearVisible: false,
+                slots: [{
+                    values: [],
+                    defaultIndex: 0,
+                    className: 'slot1'
+                }, {
+                    divider: true,
+                    content: '',
+                    className: 'slot2'
+                }, {
+                    values: [],
+                    defaultIndex: 0,
+                    className: 'slot3'
+                }],
+            }
+        },
+        created: function () {
+            if (!this.value) {//当model为空时初始化前缀
+                this.$emit('input', this.prefixData[0].value + this.prefixData[0].children[0]);
+            }
+            this.slots[0].values = this.getSlot1();
+            this.slots[2].values = this.getSlot3(this.prefixData[0].value);
+        },
+        computed: {
+            prefix: {
+                get: function () {
+                    return this.value.slice(0, 2);
+                },
+                set: function (value) {
+                    this.$emit('input', value + this.value.slice(2, this.value.length));
+                }
+            },
+            subfix: {
+                get: function () {
+                    return this.value.slice(2, this.value.length);
+                },
+                set: function (value) {
+                    this.$emit('input', this.value.slice(0, 2) + value);
+                    value ? this.clearVisible = true : this.clearVisible = false;
+                }
+            }
+        },
+        methods: {
+            onSelect: function () {
+                this.popupVisible = true;
+            },
+            getSlot1: function () {
+                var items = [];
+                this.prefixData.forEach(function (item) {
+                    items.push(item.value);
+                });
+                return items;
+            },
+            getSlot3: function (value) {
+                for (var i in this.prefixData) {
+                    if (value == this.prefixData[i].value) {
+                        return this.prefixData[i].children;
+                    }
+                }
+                return []
+            },
+            onClear: function () {
+                this.subfix = '';
+            },
+            onValuesChange: function (picker, values) {
+                if (this.popupVisible) {
+                    picker.setSlotValues(1, this.getSlot3(values[0]));
+                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
+                }
+            }
+        },
+        props: ['value', 'label', 'placeholder', 'items',],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        '<div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        '<div class="mint-cell-value">' +
+        '<p @click="onSelect" style="padding-right: 5px;color:#47d3ff">{{prefix}}</p>' +
+        '<input :placeholder="placeholder" maxlength="6" v-model="subfix" class="mint-field-core">' +
+        '<div class="mint-field-clear" v-if="clearVisible" @click="onClear"><i class="mintui mintui-field-error"></i></div>' +
+        '</div>' +
+        '</div>' +
+        '<mt-popup style="width: 100%" v-model="popupVisible" position="bottom"><mt-picker ref="picker" :slots="slots" @change="onValuesChange"></mt-picker></mt-popup>' +
+        '</a>'
+    });
+
+    Vue.component('wb-field-pictures', {
+        data: function () {
+            return {
+                fileList: []
+            }
+        },
+
+        methods: {
+            onClear: function (item) {
+                this.fileList.remove(item);
+            },
+            onValuesChange: function (picker, values) {
+                if (this.popupVisible) {
+                    picker.setSlotValues(1, this.getSlot3(values[0]));
+                    this.prefix = picker.getSlotValue(0) + picker.getSlotValue(1)
+                }
+            },
+            onTakePicture: function () {
+                this.fileList.push({
+                    name: '',
+                    file: ''
+                })
+                setTimeout(function () {
+                    this.$refs.input[this.fileList.length - 1].click();
+                }.bind(this), 1)
+            },
+            onChange: function (e, file) {
+                file.file = e.target.files[0]
+                file.name = e.target.files[0].name;
+                this.$emit("handle-file",file,{
+                    finish:function () {
+                        this.$emit("input",this.fileList)
+                    }.bind(this),
+                    cancel:function () {
+                        this.fileList.remove(file);
+                        this.$emit("input",this.fileList)
+                    }.bind(this)
+                });
+            },
+
+        },
+        props: ['value', 'label'],
+        template: '<a class="mint-cell mint-field"><!---->' +
+        '<div class="mint-cell-wrapper">' +
+        ' <div class="mint-cell-title"><!----><span class="mint-cell-text">{{label}}</span><!----></div>' +
+        ' <div class="mint-cell-value">' +
+        '  <div style="padding-top: 11px;padding-bottom: 11px;text-align: left;width: 100%">' +
+        '   <mt-button type="primary" size="small" @click="onTakePicture">添加</mt-button>' +
+        '   <div style="line-height: 35px;" v-for="item in fileList" v-show="item.name">' +
+        '    <span class="mint-field-clear" style="padding-right: 10px;" @click="onClear(item)"><i class="mintui mintui-field-error"></i></span>' +
+        '    <a>{{item.name}}</a>' +
+        '    <input ref="input" @change="onChange($event,item)" type="file" style="display: none"/>' +
+        '   </div>' +
+        '  </div>' +
+        ' </div>' +
+        ' </div>' +
+        '</a>'
+    });
+</script>

src/main/resources/modules/SpringBoot/resources/templates/layout/app.ftl

@@ -95,7 +95,40 @@
             <mt-button icon="more" slot="right"></mt-button>
         </mt-header>
         <div class="content" style="text-align: center;padding-top: 200px">
-            Hello world
+            Hello world <router-link to="demo">demo</router-link>
+        </div>
+    </div>
+</template>
+<template id="demo">
+    <div class="view">
+        <mt-header title="表单输入">
+            <mt-button icon="back" slot="left" @click="back">关闭</mt-button>
+        </mt-header>
+        <div class="content" style="text-align: center;">
+            <mt-header title="Mint-ui自带控件"></mt-header>
+            <mt-field label="普通文字" placeholder="请输入用户名" v-model="field1"></mt-field>
+            <mt-field label="邮箱地址" placeholder="请输入邮箱" type="email" v-model="field2"></mt-field>
+            <mt-field label="用户密码" placeholder="请输入密码" type="password" v-model="field3"></mt-field>
+            <mt-field label="手机号码" placeholder="请输入手机号" type="tel" v-model="field4"></mt-field>
+            <mt-field label="网站链接" placeholder="请输入网址" type="url" v-model="field5"></mt-field>
+            <mt-field label="数字输入" placeholder="请输入数字" type="number" v-model="field6"></mt-field>
+            <mt-field label="生日日期" placeholder="请输入生日" type="date" v-model="field7"></mt-field>
+            <mt-field label="多行文字" placeholder="多行文字" type="textarea" rows="2" v-model="field8"></mt-field>
+
+            <mt-header title="扩展控件"></mt-header>
+            <wb-field-select label="文字选择" placeholder="请选择" :items="['男','女']" v-model="field10"></wb-field-select>
+            <wb-field-dict label="字典选择" placeholder="请选择" :items="[{key:'1',value:'男'},{key:'2',value:'女'}]"
+                           v-model="field11"></wb-field-dict>
+            <wb-field-date label="日期选择" placeholder="请选择" v-model="field12"></wb-field-date>
+            <wb-field-time label="时间选择" placeholder="请选择" v-model="field13"></wb-field-time>
+            <wb-field-datetime label="日期时间" placeholder="请选择" v-model="field14"></wb-field-datetime>
+            <wb-field-cphm label="车牌号码" placeholder="车牌号" v-model="field15"></wb-field-cphm>
+
+            <wb-field-pictures label="选择照片" v-model="field16" @handle-file="handleFile"></wb-field-pictures>
+
+            <div style="padding: 10px">
+                <mt-button type="primary" size="large" @click="doSearch()">打印类容</mt-button>
+            </div>
         </div>
     </div>
 </template>
@@ -107,6 +140,63 @@
                 path: '/',
                 name: 'home',
                 component: Vue.extend({template: '#home'})
+            },
+            {
+                path: '/demo',
+                name: 'demo',
+                component: Vue.extend({
+                    template: '#demo',
+                    mounted: function () {
+
+                    },
+                    data: function () {
+                        return {
+                            field1: '',
+                            field2: '',
+                            field3: '',
+                            field4: '',
+                            field5: '',
+                            field6: '',
+                            field7: '',
+                            field8: '',
+                            field9: '',
+                            field10: '',
+                            field11: '',
+                            field12: '',
+                            field13: '',
+                            field14: '',
+                            field15: '',
+                            field16: '',
+                        }
+                    },
+                    methods: {
+                        doSearch: function () {
+                            console.log(this.field10);
+                            console.log(this.field11);
+                            console.log(this.field12);
+                            console.log(this.field13);
+                            console.log(this.field14);
+                            console.log(this.field15);
+                            console.log(this.field16);
+                        },
+                        back: function () {
+                            if (window.android) {
+                                android.finish()
+                            } else {
+                                location.href = "${Uri.getUrl('/app/index.htm')}"
+                            }
+                        },
+                        handleFile: function (file, call) {
+                            //do upload
+                            console.log("正在上传文件" + file.name);
+                            if (true) {
+                                call.finish();
+                            } else {
+                                call.cancel();
+                            }
+                        }
+                    }
+                })
             }
         ]
     });