Skip to content

H
hls-easy-ui
Commit 2eecde67 authored by JingChao's avatar JingChao
Browse files
Options

layout

parent 0b9f23da
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 239 deletions
packages/common/scripts/hlsPopup.js
View file @ 2eecde67
......@@ -43,13 +43,13 @@ export default {
Vue.$vux.loading.hide()
vm.isLoading = false
// 弹出操作失败
Vue.$vux.toast.show({
/* Vue.$vux.toast.show({
text: '操作失败',
type: 'warn',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'middle',
})
}) */
}
}, 10000)
},
......@@ -68,19 +68,13 @@ export default {
showLongTop: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'top',
})
} else {
window.plugins.toast.showLongTop(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'top',
})
},
/**
......@@ -90,19 +84,13 @@ export default {
showLongCenter: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'middle',
})
} else {
window.plugins.toast.showLongCenter(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'middle',
})
},
/**
* 长时间中部提示toast
......@@ -111,19 +99,13 @@ export default {
showLongBottom: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
time: vm.SHOW_TIMES,
type: 'text',
isShowMask: vm.IS_SHOW_MASK,
position: 'bottom',
})
} else {
window.plugins.toast.showLongBottom(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
time: vm.SHOW_TIMES,
type: 'text',
isShowMask: vm.IS_SHOW_MASK,
position: 'bottom',
})
},
/**
* 成功提示框
......@@ -160,35 +142,19 @@ export default {
* @param confirmObject.onConfirm 确定函数
*/
showConfirm: function (confirmObject) {
if (!process.env.isMobilePlatform) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
cancelText: '取消',
onConfirm: () => {
confirmObject.onConfirm(1)
},
onCancel: () => {
confirmObject.onConfirm(0)
},
}
Vue.$vux.confirm.show(def)
} else {
let message = confirmObject.content || ''
let onConfirm = function (index) {
confirmObject.onConfirm(index)
}
let title = confirmObject.title || '提示'
navigator.notification.confirm(
message, // message
function (index) {
onConfirm(index - 1)
},
title, // title
['取消', '确定'] // buttonLabels
)
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
cancelText: '取消',
onConfirm: () => {
confirmObject.onConfirm(1)
},
onCancel: () => {
confirmObject.onConfirm(0)
},
}
Vue.$vux.confirm.show(def)
},
/*
* 弹出确认的窗口
......@@ -198,30 +164,16 @@ export default {
*
*/
showPopup: function (confirmObject) {
if (!process.env.isMobilePlatform) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
showCancelButton: false,
onConfirm: () => {
confirmObject.onConfirm()
},
}
Vue.$vux.confirm.show(def)
} else {
let alertDismissed = function (index) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
showCancelButton: false,
onConfirm: () => {
confirmObject.onConfirm()
}
let title = confirmObject.title || '提示'
let message = confirmObject.content || ''
navigator.notification.alert(
message, // message
alertDismissed, // callback
title || '提示', // title
'确定' // buttonName
)
},
}
Vue.$vux.confirm.show(def)
},
/**
* @param actionObject.titleText 弹出框的标题可空
......
packages/common/styles/ionic-public-style.less
View file @ 2eecde67
.has-footer {
padding-bottom: 1.6rem;
padding-bottom: 0.88rem;
.scrollContent{
padding-bottom: 1.76rem;
}
......
packages/common/styles/platform-iosx.less
View file @ 2eecde67
......@@ -8,7 +8,7 @@
bottom: 1.68rem;
}
.has-footer {
padding-bottom: 2rem;
padding-bottom: 1.6rem;
.scrollContent{
padding-bottom: 2.84rem;
}
......@@ -34,7 +34,7 @@
bottom: 1.68rem;
}
.has-footer {
padding-bottom: 2rem;
padding-bottom: 1.6rem;
.scrollContent{
padding-bottom: 2.84rem;
}
......
packages/common/ydui.flexible.js
View file @ 2eecde67
/* eslint-disable */
/**
* YDUI 可伸缩布局方案
* rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
* rem计算方式：设计图尺寸px / 50 = 实际rem 例: 100px = 2rem
*/
!(function(window) {
/* 设计图文档宽度 */
......
packages/components/HForm/index.vue 0 → 100644
View file @ 2eecde67
/**
* @Author think
* @Date 2019-07-16 20:00
*/
<template>
<section class="h-form">
<s-tab
v-for="com in layoutConfig" v-if="com.configType==='TAB' && com.layoutFiledList.length"
:key="com.configId"
:default-active="tabIndex" v-model="tabIndex" :class="com.cssClass" :has-border="showTabBorder"
:show-divider="showTabDivider"
@tabClick="layoutTabClick"
@click.native="tabNativeClick(com)">
<tab-item v-for="(tab,key) in com.layoutFiledList" :key="key"><section v-html="tab.tabContent || tab.filedName"/></tab-item>
</s-tab>
<h-content :class="{'has-footer':hasBottom}">
<list-item
v-for="(com, index) in layoutConfig" v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="tabFromHide(com)" :key="index"
:class="com.cssClass">
<item v-show="showFormTitle" class="form-title" @click.native="hideFormClick(index)">
<div slot="name">{{ com.configName }}</div>
<img
slot="right-icon" :class="{'hide-down-icon':!com.hideForm,'hide-up-icon':com.hideForm}"
class="right-icon " src="@/assets/image/right-arrow@2x.png">
</item>
<item
v-for="(filed, index) in com.layoutFiledList"
v-show="!com.hideForm" :key="index" :class="filed.cssClass" :has-border="filed.hasBorder"
:showContent="filed.showContent" :proportion="proportionArray(filed.proportion)" :showName="filed.showName"
:showArrow="filed.showArrow"
:item-height="filed.filedHeight">
<img v-if="filed.leftIcon" slot="left-icon" :src="filed.leftIcon" class="left-icon">
<div slot="name" :class="{'required':filed.inputMode=='required'}">{{ filed.filedName }}</div>
<input
v-if="filed.filedType==='INPUT'" slot="content"
:readonly="filed.inputMode==='readOnly'"
:placeholder="filed.placeholder" v-model="data[com.configCode][filed.filedCode]" :type="filed.inputType" :name="filed.filedCode">
<input
v-else-if="filed.filedType==='SELECT'"
slot="content" :name="filed.filedCode"
v-model="data[com.configCode][filed.filedCode+'_n']" :placeholder="filed.placeholder" readonly @click="showSelect(com,filed)">
<input
v-else-if="filed.filedType=='TIME'"
slot="content" :name="filed.filedCode"
v-model="data[com.configCode][filed.filedCode]" :placeholder="filed.placeholder" readonly @click="showTime(com,filed)">
<h-switch v-else-if="filed.filedType==='SWITCH'" slot="content" v-model="data[com.configCode][filed.filedCode]" :name="filed.filedCode"/>
<div v-else slot="content" v-html="data[com.configCode][filed.filedCode]"/>
<img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
</item>
</list-item>
</h-content>
<bottom-tab
v-for="(com, index) in layoutConfig" v-if="com.configType==='bottomTab' && com.layoutFiledList.length" :key="index" :show-divider="showBtnDivider"
:class="com.cssClass">
<tab-button v-for="(btn, index) in com.layoutFiledList" :key="index" :class="btn.cssClass"><section v-html="btn.btnContent || btn.filedName"/></tab-button>
</bottom-tab>
</section>
</template>
<script>
export default {
name: 'HForm',
props: {
layoutData: {
type: Array,
default: () => [],
},
showFormTitle: {
type: Boolean,
default: true,
},
showTabDivider: {
type: Boolean,
default: false,
},
showTabBorder: {
type: Boolean,
default: false,
},
showBtnDivider: {
type: Boolean,
default: true,
},
formData: {
type: Object,
default: () => {},
},
},
data () {
return {
tabIndex: 0,
data: {},
layoutConfig: [],
activeTab: null,
activeTabFiled: null,
hasBottom: false,
}
},
computed: {
defaultTabActive () {
return this.tabIndex
},
},
created () {
let vm = this
if (vm.layoutData.length && vm.layoutData[0].layoutConfigList.length) {
vm.layoutConfig = vm.layoutData[0].layoutConfigList
vm.layoutConfig.forEach((com, index) => {
if (com.configType === 'bottomTab') {
vm.hasBottom = true
}
if (com.configType === 'FORM') {
let form = com
let temp = {}
if (form.layoutFiledList.length) {
let filed = form.layoutFiledList
filed.forEach((filed, index) => {
if (vm.formData[form.configCode]) {
temp[filed.filedCode] = vm.formData[form.configCode][filed.filedCode]
} else {
temp[filed.filedCode] = filed.defaultValue
}
if (filed.filedType === 'SELECT') {
if (vm.formData[form.configCode]) {
temp[filed.filedCode + '_n'] = vm.formData[form.configCode][filed.filedCode + '_n']
}
}
if (filed.filedType === 'SWITCH') {
temp[filed.filedCode] = !!filed.defaultValue
}
})
vm.$set(vm.data, [form.configCode], temp)
}
} else if (com.configType === 'TAB') {
vm.activeTab = com.configCode
vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
}
})
vm.$emit('input', vm.data)
}
},
methods: {
proportionArray (proportion) {
return proportion.split(',')
},
layoutTabClick (index) {
let vm = this
vm.tabIndex = index
this.$emit('tabClick', index)
},
tabNativeClick (com) {
let vm = this
vm.activeTab = com.configCode
vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
},
hideFormClick (index) {
let vm = this
vm.layoutConfig[index]['hideForm'] = !vm.layoutConfig[index]['hideForm']
},
tabFromHide (com) {
let vm = this
if (com.tabConfigCode && com.tabFiledCode) {
if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
return true
}
} return false
},
showSelect (com, filed) {
this.$emit('showSelect', com.configCode, filed.filedCode)
},
showTime (com, filed) {
this.$emit('showTime', com.configCode, filed.filedCode)
},
},
}
</script>
<style lang="less">
.h-form {
.hls-switch-tab {
.tab-content {
.h-tab-item {
.h-item{
img{
width: 20px;
}
}
}
}
}
.content {
.form-title {
.contents {
.add-name {
font-weight: 500;
}
}
}
.hls-item {
.contents {
.add-content {
.right-icon {
height: 12px;
}
.hide-up-icon {
transform: rotate(90deg);
}
.hide-down-icon {
transform: rotate(-90deg);
}
}
}
}
}
}
</style>
packages/components/component.js
View file @ 2eecde67
......@@ -26,6 +26,7 @@ import HFile from './HFile/index'
import BottomTab from './BottomTab/index'
import TabButton from './BottomTab/tab-button'
import Modal from './Modal/Modal'
import HForm from './HForm/index'
import errLoadingPic from '../common/picture/errloading.jpg'
......@@ -57,4 +58,5 @@ export default (Vue) => {
Vue.component('radio-group', RadioGroup)
Vue.component('h-radio', Radio)
Vue.component('h-file', HFile)
Vue.component('h-form', HForm)
}
packages/index.js
View file @ 2eecde67
......@@ -23,6 +23,7 @@ import Stab from './components/STab/index'
import TabItem from './components/STab/tab-item'
import TabButton from './components/BottomTab/tab-button'
import HFile from './components/HFile/index'
import HForm from './components/HForm/index'
import componentInstall from './components/component'
// compontenPlugins
......@@ -64,6 +65,7 @@ export {
BottomTab,
TabButton,
HFile,
HForm,
ActionSheetPlugin,
ShowPicturePlugin,
SelectPlugin,
......
src/pages/form.vue
View file @ 2eecde67
......@@ -12,130 +12,81 @@
<div slot="center">From</div>
<div slot="right" class="h-header-btn">右边</div>
</h-header>
<h-content>
<section v-for="(com, index) in layoutData" :key="index">
<s-tab
v-if="com.configType==='TAB' && com.layoutFiledList.length"
:default-active="tabIndex" :class="com.cssClass" @tabClick="layoutTabClick"
@click.native="tabClick(com)">
<tab-item v-for="(tab,key) in com.layoutFiledList" :key="key"><section v-html="tab.tabContent || tab.filedName"/></tab-item>
</s-tab>
<list-item v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="tabFromHide(com)" :class="com.cssClass">
<item v-show="showFormTitle" class="form-title" @click.native="hideFormClick(index)">
<div slot="name">{{ com.configName }}</div>
<img
slot="right-icon" :class="{'hide-down-icon':!com.hideForm,'hide-up-icon':com.hideForm}"
class="right-icon " src="@/assets/image/right-arrow@2x.png">
</item>
<item
v-for="(filed, index) in com.layoutFiledList"
v-show="!com.hideForm" :key="index" :class="filed.cssClass" :has-border="filed.hasBorder"
:has-content="filed.showContent" :proportion="proportionArray(filed.proportion)" :showName="filed.showName"
:showArrow="filed.showArrow"
:item-height="filed.filedHeight">
<img v-if="filed.leftIcon" slot="left-icon" :src="filed.leftIcon" class="left-icon">
<div slot="name" :class="{'required':filed.inputMode=='required'}">{{ filed.filedName }}</div>
<input
v-if="filed.filedType==='INPUT'" slot="content"
:readonly="filed.inputMode==='readOnly'"
:placeholder="filed.placeholder" :value="filed.defaultValue" :type="filed.inputType" :name="filed.filedName">
<input
v-else-if="filed.filedType==='SELECT'"
slot="content" :name="filed.filedName"
readonly @click="showSelect(com,filed)">
<input
v-else-if="filed.filedType=='TIME'"
slot="content" :name="filed.filedName"
readonly @click="showTime(com,filed)">
<h-switch v-else-if="filed.filedType==='SWITCH'" slot="content"/>
<div v-else slot="content" v-html="filed.defaultValue"/>
<img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
</item>
</list-item>
</section>
</h-content>
<section v-for="(com, index) in layoutData" :key="index">
<bottom-tab v-if="com.configType==='BOTTOM-BUTTON' && com.layoutFiledList.length" :show-divider="true" :class="com.cssClass">
<tab-button v-for="(btn, index) in com.layoutFiledList" :key="index" :class="btn.cssClass"><section v-html="btn.btnContent || btn.filedName"/></tab-button>
</bottom-tab>
</section>
<h-form
:layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
:show-tab-divider="true" :formData.sync="data" v-model="data" @tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime"/>
</h-view>
</template>
<script>
import layoutData from './layout.json'
import ButtonTab from 'vux/src/components/button-tab/button-tab'
export default {
name: 'Form',
components: { ButtonTab },
data () {
return {
tabIndex: 1,
showFormTitle: true,
layoutData: null,
data: {},
activeTab: null,
activeTabFiled: null,
layoutData: [...layoutData],
data: {
contract: {
postion: '01',
postion_n: '技术顾问',
},
},
postionList: [
{code: '01', code_name: '技术顾问'},
{code: '02', code_name: '技术经理'},
{code: '03', code_name: '项目经理'},
],
}
},
created () {
let vm = this
if (layoutData.rows && layoutData.rows[0].layoutConfigList.length) {
vm.layoutData = layoutData.rows[0].layoutConfigList
vm.layoutData.forEach((com, index) => {
if (com.configType === 'FORM') {
let form = com
let temp = {}
if (form.layoutFiledList.length) {
let filed = form.layoutFiledList
filed.forEach((filed, index) => {
temp[filed.filedCode] = filed.defaultValue
if (filed.type === 'select') {
temp[filed.filedCode + '_n'] = filed.defaultValueN
}
})
vm.$set(this.data, [form.configCode], temp)
}
} else if (com.configType === 'TAB') {
vm.activeTab = com.configCode
vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
}
})
}
},
methods: {
proportionArray (proportion) {
return proportion.split(',')
tabClick (index) {
this.tabIndex = index
},
layoutTabClick (index) {
showPostion (configCode, filedCode) {
let vm = this
vm.tabIndex = index
vm.hlsPopup.selectList({
list: vm.postionList,
code: filedCode,
object: vm.data[configCode],
returnItem (index) {
vm.data[configCode][filedCode] = vm.postionList[index].code
vm.data[configCode][filedCode + '_n'] = vm.postionList[index].code_name
},
})
},
tabClick (com) {
showSelect (configCode, filedCode) {
let vm = this
vm.activeTab = com.configCode
vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
switch (filedCode) {
case 'postion':
vm.showPostion(configCode, filedCode)
break
default:
}
},
hideFormClick (index) {
showOrderDate (configCode, filedCode) {
let vm = this
vm.layoutData[index]['hideForm'] = !vm.layoutData[index]['hideForm']
vm.hlsPopup.showTime({
callback (time) {
vm.data[configCode][filedCode] = time
},
})
},
tabFromHide (com) {
showTime (configCode, filedCode) {
let vm = this
if (com.tabConfigCode && com.tabFiledCode) {
if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
return true
}
} return false
},
showSelect (com, filed) {
},
showTime (com, filed) {
switch (filedCode) {
case 'order_date':
vm.showOrderDate(configCode, filedCode)
break
default:
}
},
},
}
......@@ -143,43 +94,5 @@ export default {
<style lang="less">
.form {
.hls-switch-tab {
.tab-content {
.h-tab-item {
.h-item{
img{
width: 20px;
}
}
}
}
}
.content {
.form-title {
.contents {
.add-name {
font-weight: 500;
}
}
}
.hls-item {
.contents {
.add-content {
.right-icon {
height: 12px;
}
.hide-up-icon {
transform: rotate(90deg);
}
.hide-down-icon {
transform: rotate(-90deg);
}
}
}
}
}
}
</style>
src/pages/layout.json
View file @ 2eecde67
{
"rows": [
[
{
"_token": "5c7ed163aabdb97edbb4023503ad33f8",
"objectVersionNumber": null,
......@@ -548,7 +547,7 @@
"layoutId": "1",
"configCode": "SAVE_BUTTON",
"configName": "底部按钮",
"configType": "BOTTOM-BUTTON",
"configType": "bottomTab",
"configOrder": "40",
"tabFlag": "N",
"tabConfigId": null,
......@@ -620,7 +619,4 @@
}
]
}
],
"success": true,
"total": 1
}
]
src/scripts/hlsPopup.js
View file @ 2eecde67
......@@ -275,7 +275,7 @@ export default {
date = timeObject.nowDate
}
if (timeObject.format) {
format = timeObject.format
format = timeObject.format || 'YYYY-MM-DD'
}
Vue.$vux.datetime.show({
cancelText: '取消',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment