Skip to content

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

layout

parent 2eecde67
Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 74 deletions
packages/components/HForm/index.vue
View file @ e895f1e7
......@@ -8,52 +8,72 @@
<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"
:default-active="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>
<tab-item v-for="tab in com.layoutFiledList" :key="tab.filedId">
<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>
<template v-for="(com, index) in layoutConfig">
<list-item
v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="checkFromHide(com)"
:class="com.cssClass" :key="com.configId">
<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="./right-arrow@2x.png">
</item>
<item
v-for="filed in com.layoutFiledList"
v-show="!com.hideForm" :key="filed.filedId" :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"
:disable="filed.inputMode==='readOnly'" @click.native="switchNativeClick(com,filed)"/>
<div v-else slot="content" @click="filedClick(com,filed)" v-html="data[com.configCode][filed.filedCode]"/>
<img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
</item>
</list-item>
<template v-else-if="com.configType==='BUTTON' && com.layoutFiledList.length">
<h-button
v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass"
size="normal" @click.native="btnClick(com,btn)">
<section v-html="btn.btnContent || btn.filedName"/>
</h-button>
</template>
</template>
</h-content>
<bottom-tab
v-for="(com, index) in layoutConfig" v-if="com.configType==='bottomTab' && com.layoutFiledList.length" :key="index" :show-divider="showBtnDivider"
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>
<tab-button v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass" @click.native="btnClick(com,btn)">
<section v-html="btn.btnContent || btn.filedName"/>
</tab-button>
</bottom-tab>
</section>
</template>
......@@ -97,14 +117,18 @@ export default {
}
},
computed: {
defaultTabActive () {
return this.tabIndex
},
},
/**
* 通过布局代码解析出form表单中定义了那些字端。取出字端的默认值等
* 取出布局中的全部按钮，返回给父组件，用于按钮逻辑的处理
* 取出后通过$set以及$email函数把值传递给父组件
*/
created () {
let vm = this
if (vm.layoutData.length && vm.layoutData[0].layoutConfigList.length) {
vm.layoutConfig = vm.layoutData[0].layoutConfigList
let btns = []
vm.layoutConfig.forEach((com, index) => {
if (com.configType === 'bottomTab') {
vm.hasBottom = true
......@@ -113,20 +137,22 @@ export default {
let form = com
let temp = {}
if (form.layoutFiledList.length) {
let filed = form.layoutFiledList
filed.forEach((filed, index) => {
if (vm.formData[form.configCode]) {
let fileds = form.layoutFiledList
fileds.forEach((filed, index) => {
if (vm.formData[form.configCode] && (vm.formData[form.configCode][filed.filedCode] !== undefined)) {
temp[filed.filedCode] = vm.formData[form.configCode][filed.filedCode]
} else {
temp[filed.filedCode] = filed.defaultValue
}
if (filed.filedType === 'SELECT') {
if (vm.formData[form.configCode]) {
if (filed.filedType === 'SELECT') {
temp[filed.filedCode + '_n'] = vm.formData[form.configCode][filed.filedCode + '_n']
}
}
if (filed.filedType === 'SWITCH') {
temp[filed.filedCode] = !!filed.defaultValue
} else {
if (filed.filedType === 'SELECT') {
temp[filed.filedCode] = filed.defaultValue
temp[filed.filedCode + '_n'] = filed.defaultValueN
} else if (filed.filedType === 'SWITCH') {
temp[filed.filedCode] = !!filed.defaultValue
} else {
temp[filed.filedCode] = filed.defaultValue
}
}
})
vm.$set(vm.data, [form.configCode], temp)
......@@ -134,61 +160,140 @@ export default {
} else if (com.configType === 'TAB') {
vm.activeTab = com.configCode
vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
} else if (com.configType === 'BUTTON' || com.configType === 'bottomTab') {
if (com.layoutFiledList.length) {
let btnFileds = com.layoutFiledList
btnFileds.forEach((btnFiled, index) => {
let btn = {'btnType': com.configType, 'btnCode': btnFiled.filedCode, 'btnName': btnFiled.filedName}
btns.push(btn)
})
vm.$set(vm.data, 'btns', btns)
}
}
})
vm.$emit('input', vm.data)
}
},
methods: {
/**
* item左右距离查询出来为字符串 在此转换为数组
* @param proportion
* @returns {*}
*/
proportionArray (proportion) {
return proportion.split(',')
},
/**
* STAB的点击事件
* @param index
*/
layoutTabClick (index) {
let vm = this
vm.tabIndex = index
this.$emit('tabClick', index)
},
/**
* tab的点击事件用于判断当前的哪个tab的哪个子元素是活跃状态，用于动态切换显示form
* @param com 当前组件
*/
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) {
/**
* 根据tab的显示动态判断tab下的form显示情况
* @param com 当前的form组件
*/
checkFromHide (com) {
let vm = this
if (com.tabConfigCode && com.tabFiledCode) {
if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
return true
}
} return false
}
return false
},
/**
* Form title点击事件用于隐藏form下的内容
* @param index
*/
hideFormClick (index) {
let vm = this
vm.layoutConfig[index]['hideForm'] = !vm.layoutConfig[index]['hideForm']
},
/**
* 下拉框点击函数 交由父组件处理 传递父组件当前点击对象以及字端名
* @param com 当前组件
* @param filed 当前字端
*/
showSelect (com, filed) {
this.$emit('showSelect', com.configCode, filed.filedCode)
if (filed.inputMode !== 'readOnly') {
this.$emit('showSelect', com.configCode, filed.filedCode)
}
},
/**
* 时间点击函数 交由父组件处理 传递父组件当前点击对象以及字端名
* @param com 当前组件
* @param filed 当前字端
*/
showTime (com, filed) {
this.$emit('showTime', com.configCode, filed.filedCode)
if (filed.inputMode !== 'readOnly') {
this.$emit('showTime', com.configCode, filed.filedCode)
}
},
/**
* switch点击函数 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名以及vaule值，用于其他处理逻辑
* @param com 当前组件
* @param filed 当前字端
*/
switchNativeClick (com, filed) {
let vm = this
if (filed.inputMode !== 'readOnly') {
this.$emit('switchClick', com.configCode, filed.filedCode, vm.data[com.configCode][filed.filedCode])
}
},
/**
* 其他非input的字端点击函数 用于超链接等其他字端的逻辑处理 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名
* @param com 当前组件
* @param filed 当前字端
*/
filedClick (com, filed) {
this.$emit('filedClick', com.configCode, filed.filedCode)
},
/**
* 按钮点击事件 交由父组件处理 传递当前的按钮对象
* @param com 当前组件
* @param filed 当前字端
*/
btnClick (com, filed) {
let btnType = com.configCode
let btnCode = filed.filedCode
this.data.btns.forEach((btn, index) => {
if (btn.btnType === btnType && btn.btnCode === btnCode) {
this.$emit('btnClick', btn)
}
})
},
},
}
</script>
<style lang="less">
<style lang="less">
.h-form {
.hls-switch-tab {
.tab-content {
.h-tab-item {
.h-item{
img{
.h-item {
img {
width: 20px;
}
}
}
}
}
.content {
.form-title {
.contents {
......
packages/components/Switch/index.vue
View file @ e895f1e7
......@@ -32,19 +32,14 @@ export default {
}
},
computed: {
/* value() {
return value ? value : false
} */
},
watch: {
value (val) {
this.$emit('input', val)
this.value = val
},
},
methods: {
checked () {
if (!this.disable) {
this.$emit('input', !this.value)
this.$emit('switchClick', !this.value)
}
},
......
src/pages/form.vue
View file @ e895f1e7
......@@ -14,8 +14,9 @@
</h-header>
<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"/>
:show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
@btnClick="btnClick"/>
</h-view>
</template>
......@@ -34,6 +35,7 @@ export default {
contract: {
postion: '01',
postion_n: '技术顾问',
enable_flag: false,
},
},
postionList: [
......@@ -47,6 +49,10 @@ export default {
},
methods: {
/**
* tab的点击事件
* @param index
*/
tabClick (index) {
this.tabIndex = index
},
......@@ -62,6 +68,11 @@ export default {
},
})
},
/**
* 下拉框点击事件
* @param configCode
* @param filedCode
*/
showSelect (configCode, filedCode) {
let vm = this
switch (filedCode) {
......@@ -79,6 +90,11 @@ export default {
},
})
},
/**
* 事件选择事件
* @param configCode
* @param filedCode
*/
showTime (configCode, filedCode) {
let vm = this
switch (filedCode) {
......@@ -88,6 +104,30 @@ export default {
default:
}
},
/**
* switch的点开事件
* @param configCode
* @param filedCode
* @param value
*/
switchClick (configCode, filedCode, value) {
debugger
},
/**
* 其他字端的点击事件
* @param configCode
* @param filedCode
*/
filedClick (configCode, filedCode) {
debugger
},
/**
* 按钮点击事件
* @param btn
*/
btnClick (btn) {
debugger
},
},
}
</script>
......
src/pages/layout.json
View file @ e895f1e7
......@@ -201,7 +201,7 @@
"inputType": "text",
"placeholder": "请选择岗位",
"filedOrder": "3",
"inputMode": "other",
"inputMode": "readOnly",
"leftIcon": null,
"rightIcon": null,
"format": "N",
......@@ -616,6 +616,83 @@
"cssClass": null
}
]
},
{
"_token": "db3ad35d036691c5b0caa2e273d31f25",
"objectVersionNumber": null,
"configId": "5c95cde581a64f42a86900712c53502a",
"layoutId": "1",
"configCode": "BUTTON",
"configName": "底部按钮",
"configType": "BUTTON",
"configOrder": "40",
"tabFlag": "N",
"tabConfigId": null,
"tabFiledId": null,
"cssClass": "btn-button",
"enableFlag": "Y",
"hideForm": false,
"tabConfigCode": null,
"tabFiledCode": null,
"tabFiledName": null,
"layoutFiledList": [
{
"_token": "7e61d576cfa5d12ee68bdf7ec36d99b2",
"objectVersionNumber": 2,
"filedId": "3d7ba60e16594e1fb170790d166c8bb1",
"layoutId": "1",
"configId": "5c95cde581a64f42a86900712c53502a",
"filedCode": "save",
"filedName": "保存",
"defaultValue": null,
"filedType": "OTHES",
"inputType": "text",
"placeholder": null,
"filedOrder": "1",
"inputMode": "other",
"leftIcon": null,
"rightIcon": null,
"format": "N",
"proportion": "1,2",
"showName": true,
"showContent": true,
"showArrow": false,
"hasBorder": true,
"filedHeight": 45,
"enableFlag": "Y",
"tabContent": null,
"btnContent": null,
"cssClass": "save-btn"
},
{
"_token": "974a18dedc6a0960a4ad0f6be96dacea",
"objectVersionNumber": 1,
"filedId": "f64a1e6b0c834f5fa0db15e999e84eb0",
"layoutId": "1",
"configId": "5c95cde581a64f42a86900712c53502a",
"filedCode": "submit",
"filedName": "提交",
"defaultValue": null,
"filedType": "OTHES",
"inputType": "text",
"placeholder": null,
"filedOrder": "2",
"inputMode": "other",
"leftIcon": null,
"rightIcon": null,
"format": "N",
"proportion": "1,2",
"showName": true,
"showContent": true,
"showArrow": false,
"hasBorder": true,
"filedHeight": 45,
"enableFlag": "Y",
"tabContent": null,
"btnContent": null,
"cssClass": null
}
]
}
]
}
......
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