wangbing
6 years ago
parent
c14d1d5a63
commit
9b461a2115
@ -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>
|
||||
Loading…
Reference in new issue