Skip to content

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

动态界面添加几个属性

parent 55a6dd2e
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 306 deletions
packages/components/CheckBox/index.vue
View file @ 452a754d
......@@ -32,14 +32,11 @@ export default {
return {}
},
watch: {
value (val) {
this.$emit('input', val)
this.value = val
},
},
methods: {
checked () {
if (!this.disable) {
this.$emit('input', !this.value)
this.$emit('checkClick', !this.value)
}
},
......
packages/components/HLayout/README.md
View file @ 452a754d
......@@ -19,11 +19,12 @@
<h-layout
v-if="layoutShow"
:layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
:show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
:show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
:show-btn="showBtn"
@tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
@btnClick="btnClick"/>
</h-view>
</template>
```
```javascript
......@@ -38,6 +39,8 @@ export default {
showFormTitle: true,
layoutData: [],
layoutShow: false,
readOnly: false,
showBtn: true,
data: {
contract: {
postion: '01',
......@@ -123,15 +126,6 @@ export default {
default:
}
},
/**
* switch的点开事件
* @param configCode
* @param filedCode
* @param value
*/
switchClick (configCode, filedCode, value) {
debugger
},
/**
* 其他字端的点击事件
* @param configCode
......@@ -175,7 +169,7 @@ export default {
4. 因无法在data里面直接set数据，故需在data里面新建data数据对象用于组件解析成功以及数据双向绑定使用
5. 支持在自定义data对象设置默认值，默认值的优先级高于组件定义的默认值
6. 组件使用v-model与formData进行传递data数据实现双向绑定，两者缺一不可
7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。已btns数组反馈给父组件，用于按钮点击事件
7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。以btns数组反馈给父组件，用于按钮点击事件
8. 所有的下拉框、时间以及按钮的触发逻辑全部交由父组件处理，子组件通知父组件，子组件内不做任何业务处理逻辑
......@@ -184,14 +178,15 @@ props
* showFormTitle:是否展示form表单上的title，title也可以点击实现form的缩放 默认 true
* showTabDivider:是否显示s-tab的分割线 默认true
* showTabBorder:是否显示s-tab的下边框 默认false
* showBtn:是否显示按钮组件(button与bottom-tab)
* showBtnDivider:是否底部按钮的分割线 默认true
* formData:组件数据，用于双向绑定
* readOnly:设置组件全部只读，禁用字端及按钮的输入点击
emit
* tabClick s-tab组件切换点击事件 返回当前点击的index
* showSelect 下拉框点开事件 返回布局组件code，字端的code，用于判断是哪个下拉框
* showTime 事件点开事件 返回组件code，字端的code，用于判断是哪个时间选择
* switchClick switch切换开关点击事件，返回组件code，字端的code以及value值
* filedClick 其它字端点击事件，字端类型为其它的点击事件 返回组件code，字端的code，可用于超链接，提示等
* btnClick 按钮点击事件，返回当前btn对象，包含组件code、按钮code、以及按钮描述，可根据此判断点击的是哪个按钮
......
packages/components/HLayout/index.vue
View file @ 452a754d
......@@ -37,7 +37,7 @@
<div slot="name" :class="{'required':filed.inputMode=='required'}">{{ filed.filedName }}</div>
<input
v-if="filed.filedType==='INPUT'" slot="content"
:readonly="filed.inputMode==='readOnly'"
:readonly="filedReadOnly(filed)"
:placeholder="filed.placeholder" v-model="data[com.configCode][filed.filedCode]" :type="filed.inputType"
:name="filed.filedCode">
<input
......@@ -53,28 +53,39 @@
<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)"/>
:disable="filedReadOnly(filed)"/>
<h-check
v-else-if="filed.filedType==='CHECKBOX'" slot="content" v-model="data[com.configCode][filed.filedCode]"
:name="filed.filedCode"
:disable="filedReadOnly(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>
<section v-else-if="com.configType==='Button' && com.layoutFiledList.length" class="layout-button">
<template v-if="showBtn">
<section v-if="com.configType==='Button' && com.layoutFiledList.length" class="layout-button">
<h-button
v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass"
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>
</section>
</template>
</template>
</h-content>
<template v-if="showBtn">
<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 in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass" @click.native="btnClick(com,btn)">
<tab-button
v-for="btn in com.layoutFiledList" :key="btn.filedId" :disabled="filedReadOnly(btn)" :class="btn.cssClass"
@click.native="btnClick(com,btn)">
<section v-html="btn.btnContent || btn.filedName"/>
</tab-button>
</bottom-tab>
</template>
</section>
</template>
<script>
......@@ -101,10 +112,18 @@ export default {
type: Boolean,
default: true,
},
showBtn: {
type: Boolean,
default: true,
},
formData: {
type: Object,
default: () => {},
},
readOnly: {
type: Boolean,
default: false,
},
},
data () {
return {
......@@ -150,6 +169,8 @@ export default {
temp[filed.filedCode + '_n'] = filed.defaultValueN
} else if (filed.filedType === 'SWITCH') {
temp[filed.filedCode] = !!filed.defaultValue
} else if (filed.filedType === 'CHECKBOX') {
temp[filed.filedCode] = !!filed.defaultValue
} else {
temp[filed.filedCode] = filed.defaultValue
}
......@@ -179,6 +200,10 @@ export default {
}
},
methods: {
filedReadOnly (filed) {
let vm = this
return vm.readOnly ? true : (filed.inputMode === 'readOnly')
},
/**
* item左右距离查询出来为字符串 在此转换为数组
* @param proportion
......@@ -232,6 +257,7 @@ export default {
* @param filed 当前字端
*/
showSelect (com, filed) {
if (this.readOnly) return
if (filed.inputMode !== 'readOnly') {
this.$emit('showSelect', com.configCode, filed.filedCode)
}
......@@ -242,28 +268,20 @@ export default {
* @param filed 当前字端
*/
showTime (com, filed) {
if (this.readOnly) return
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) {
if (!this.readOnly) {
this.$emit('filedClick', com.configCode, filed.filedCode)
}
},
/**
* 按钮点击事件 交由父组件处理 传递当前的按钮对象
......@@ -271,6 +289,7 @@ export default {
* @param filed 当前字端
*/
btnClick (com, filed) {
if (!this.readOnly) {
let btnType = com.configType
let btnCode = filed.filedCode
this.data.btns.forEach((btn, index) => {
......@@ -278,8 +297,8 @@ export default {
this.$emit('btnClick', btn)
}
})
}
},
},
}
</script>
......
packages/components/ListItem/Item.vue
View file @ 452a754d
......@@ -93,7 +93,7 @@ export default {
},
start (e) {
if (e.target.readOnly) return
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON') return
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON' || e.target.nodeName === 'LABEL') return
this.showActivated = 'activated'
},
end (e) {
......@@ -179,6 +179,14 @@ export default {
word-break: break-all;
word-wrap: break-word;
line-height: 20px;
.h-checkbox{
.checkbox {
input{
width: 24px;
height: 24px;
}
}
}
//输入框
input {
......
packages/components/component.js
View file @ 452a754d
......@@ -31,8 +31,10 @@ import HLayout from './HLayout/index'
import errLoadingPic from '../common/picture/errloading.jpg'
export default (Vue) => {
Vue.use(VueLazyload, {error: errLoadingPic,
loading: errLoadingPic})
Vue.use(VueLazyload, {
error: errLoadingPic,
loading: errLoadingPic,
})
Vue.component('h-view', HView)
Vue.component('h-header', HHeader)
Vue.component('h-content', HContent)
......
src/pages/dynamicLayout.Vue deleted 100644 → 0
View file @ 55a6dd2e
/**
* @Author Sean
* @Date 2019/7/29
*/
<template>
<h-view class="public-style" style="height: 100%">
<h-header>
<div slot="left" class="h-header-btn" @click="$routeGo(-1)">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">动态页面</div>
</h-header>
<h-content>
<section v-for="(list,parentIndex) in layoutData" :key="parentIndex">
<div v-if="list.code === 'form'">
<list-item v-if="list.fileds">
<item v-for="(item,index) in list.fileds" :key="index" :proportion="item.proportion">
<img slot="left-icon" :src="item.iconPath" class="left-icon" v-if="item.iconPath">
<div slot="name" class="required">{{item.filedName}}</div>
<div slot="content" v-if="item.filedType != 'div'">
<input v-if="item.filedType === 'input'" type="item.type" :placeholder="item.placeholder" v-model="item.VModelName"
:required="item.request" :readOnly="item.readOnly" @click="commonFunc(item.filedName)">
<input v-else-if="item.filedType === 'select'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName + '_n']"
:required="item.request" :readOnly="item.readOnly" @click="showSelect(item.selectList,item.VModelName,list.dataName,parentIndex,index)">
<input v-else-if="item.filedType === 'time'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName]"
:required="item.request" :readOnly="item.readOnly" @click="showTime(list.dataName,'YYYY-MM-DD',item)">
</div>
<div slot="content" v-if="item.filedType === 'div'" @click="commonFunc(item.filedName)">{{money | currency}}</div>
<img slot="right-icon" src="../assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon" v-if="item.rightArrow">
</item>
</list-item>
</div>
<div v-else-if="list.code === 'button' && !list.isisBottom">
<div v-for="(btn,index) in list.btns" v-if="list.btns" class="content-btn" @click="btnCommon(btn)">
{{btn.btnText}}
</div>
</div>
</section>
</h-content>
<bottom-tab v-if="bottomBtns[0].btns && bottomBtns[0].isBottom" :show-divider="true">
<tab-button class="button-save" v-for="(item,index) in bottomBtns[0].btns" :key="index" @click.native="footerBtnCommon(item)" >{{item.btnText}}</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import layoutData from '../common/layout'
export default {
data() {
return {
layoutData: [],
bottomBtns: [],
selectList: [{
code: 'man',
code_name: '男',
}, {
code: 'woman',
code_name: '女',
}],
object:{},
money: 2345483,
}
},
created: function () {
let vm = this
vm.layoutData = layoutData.layoutData
vm.bottomBtns = layoutData.bottomBtns
vm.layoutData.forEach((list,index) => {
if(list.code === 'form'){
let obj = {}
if(list.fileds.length){
list.fileds.forEach((item,index) => {
obj[item.VModelName] = ''
if(item.filedType === 'select'){
obj[item.VModelName + '_n'] = ''
}
})
vm.$set(vm.object,list.dataName,obj)
}
}
})
},
mounted: function () {
},
updated: function () {
},
destroyed: function () {
},
methods: {
commonFunc(name){
switch (name) {
case 'filedOne':
this.filedOne()
break;
case 'filedFour':
this.filedFour()
break;
default :
console.log('default')
}
},
filedOne(){
console.log('filedOne')
},
filedFour(){
console.log('filedFour')
},
showSelect (list, code, dataName,parentIndex,index) {
let vm = this
vm.layoutData[parentIndex].fileds[index].selectList = [...vm.selectList]
vm.hlsPopup.selectList({
list: vm.selectList,
code: code,
object: {},
returnItem (index, obj) {
var temp = {}
temp[code] = vm.selectList[index].code
temp[code + '_n'] = vm.selectList[index].code_name
vm.$set(vm.object,dataName,temp)
},
})
},
showTime(dataName,format,item){
let vm = this
vm.hlsPopup.showTime({
format: format,
callback (value) {
vm.object[dataName][item.VModelName] = value
},
})
},
// 按钮公用函数
btnCommon(btn){
switch(btn.btnCode){
case 'btnOne':
this.btnOne()
break
case 'btnTwo':
this.btnTwo()
break
case 'btnThree':
this.btnThree()
break
default:
}
},
btnOne(){
console.log('按钮1')
},
btnTwo(){
console.log('按钮2')
},
btnThree(){
console.log('按钮3')
},
// 底部按钮公用方法
footerBtnCommon(btn){
switch(btn.btnCode){
case 'btnFour':
this.btnFour()
break
case 'btnFive':
this.btnFive()
break
default:
}
},
btnFour(){
console.log('按钮4')
},
btnFive(){
console.log('按钮5')
},
}
}
</script>
<style scoped lang="less" rel="stylesheet">
.public-style {
.content {
.content-btn{
margin: 20px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 14px;
background-color: #0c60ee;
}
}
.button-save{
background-color: #0c60ee;
color: #fff;
}
}
</style>
src/pages/fileTest.vue
View file @ 452a754d
......@@ -5,6 +5,12 @@
<template>
<h-view>
<h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">HFile</div>
</h-header>
<h-content>
<h-file
:fileList="fileList" v-model="fileList" :upload="upload"
......
src/pages/form.vue
View file @ 452a754d
......@@ -15,11 +15,12 @@
<h-layout
v-if="layoutShow"
:layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
:show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
:show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
:show-btn="showBtn"
@tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
@btnClick="btnClick"/>
</h-view>
</template>
<script>
......@@ -32,12 +33,15 @@ export default {
showFormTitle: true,
layoutData: [],
layoutShow: false,
readOnly: false,
showBtn: true,
data: {
contract: {
contract_id: 1,
postion: '01',
postion_n: '技术顾问',
enable_flag: false,
checkValue: true,
},
},
postionList: [
......@@ -118,15 +122,6 @@ export default {
default:
}
},
/**
* switch的点开事件
* @param configCode
* @param filedCode
* @param value
*/
switchClick (configCode, filedCode, value) {
debugger
},
/**
* 其他字端的点击事件
* @param configCode
......
src/pages/hlsPopup.vue
View file @ 452a754d
......@@ -203,7 +203,7 @@
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
<div slot="name">保存照片</div>
<label slot="right" class="toggle toggle-positive toggle-check" @click="savePhotoFun">
<input :checked="savePhoto" type="checkbox" >
<input :checked="savePhoto" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
......@@ -282,7 +282,10 @@ export default {
infiniteCount: 0,
deleteText: '删除',
editText: '编辑',
colors: [{name: 'Yellow', hex: '#f4d03f'}, {name: 'Green', hex: '#229954'}, {name: 'Purple', hex: '#9b59b6'}],
colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
name: 'Purple',
hex: '#9b59b6',
}],
svgSrc: svg,
show1: false,
show2: false,
......@@ -409,7 +412,7 @@ export default {
showActionSheetButton () {
this.hlsPopup.showActionSheet({
titleText: '照片',
buttonArray: [{text: '拍照', type: 'warn'}, {text: '从相册取', type: 'primary'}],
buttonArray: [{ text: '拍照', type: 'warn' }, { text: '从相册取', type: 'primary' }],
callback: (index) => {
alert(index)
},
......@@ -616,8 +619,9 @@ export default {
.hls-popup {
height: 100%;
width: 100%;
.hls-switch-tab {
.tab-content .h-tab-item .h-item{
.tab-content .h-tab-item .h-item {
width: 80px;
}
......@@ -626,9 +630,11 @@ export default {
.vue-better-scroll__wrapper {
width: 100%;
}
.list {
width: 100%;
}
.content {
.scrollContent {
display: flex;
......@@ -638,6 +644,7 @@ export default {
flex-direction: column;
-webkit-flex-direction: column;
}
.button-class {
width: 90%;
margin: 10px 5%;
......@@ -677,6 +684,7 @@ export default {
background-color: #7e57c2;
border: 1px solid #7e57c2;
}
.button {
background-color: @theme-color;
color: #ffffff;
......@@ -686,6 +694,7 @@ export default {
margin-top: 20px;
}
}
.item-bg {
height: 200px;
line-height: 200px;
......@@ -693,6 +702,7 @@ export default {
font-size: 20px;
font-weight: 500;
}
.indicators {
height: 14px;
width: 14px;
......@@ -716,6 +726,7 @@ export default {
.sign-modal {
top: 50%;
.content {
background-color: #fff;
}
......
src/pages/layout.json
View file @ 452a754d
......@@ -245,15 +245,15 @@
"cssClass": null
},
{
"_token": "0ee346cf559acb4917da57bfdbaf334c",
"_token": "b993cccaf742d01d77d672f182047a36",
"objectVersionNumber": 1,
"filedId": "199658a5b961490a90238a9e9f95fe8d",
"filedId": "d4664c3a8ef34e1fb47acb325bb9bfb4",
"layoutId": "1",
"configId": "124",
"filedCode": "note",
"filedName": "备注",
"defaultValue": "请在经销商指导下操作",
"filedType": "OTHES",
"filedCode": "enable_flag",
"filedName": "启用标志",
"defaultValue": "true",
"filedType": "SWITCH",
"inputType": "text",
"placeholder": null,
"filedOrder": "5",
......@@ -262,29 +262,29 @@
"rightIcon": null,
"format": "N",
"proportion": "1,2",
"showName": false,
"showName": true,
"showContent": true,
"showArrow": false,
"hasBorder": false,
"filedHeight": 30,
"showArrow": true,
"hasBorder": true,
"filedHeight": 45,
"enableFlag": "Y",
"tabContent": null,
"btnContent": null,
"cssClass": "tip-note"
"cssClass": null
},
{
"_token": "b993cccaf742d01d77d672f182047a36",
"objectVersionNumber": 1,
"filedId": "d4664c3a8ef34e1fb47acb325bb9bfb4",
"filedId": "d4664c3a8ef34e1bg7y1cb325bb9bfb4",
"layoutId": "1",
"configId": "124",
"filedCode": "enable_flag",
"filedName": "启用标志",
"filedCode": "checkValue",
"filedName": "单选框",
"defaultValue": "true",
"filedType": "SWITCH",
"filedType": "CHECKBOX",
"inputType": "text",
"placeholder": null,
"filedOrder": "5",
"filedOrder": "15",
"inputMode": "other",
"leftIcon": null,
"rightIcon": null,
......@@ -299,6 +299,34 @@
"tabContent": null,
"btnContent": null,
"cssClass": null
},
{
"_token": "0ee346cf559acb4917da57bfdbaf334c",
"objectVersionNumber": 1,
"filedId": "199658a5b961490a90238a9e9f95fe8d",
"layoutId": "1",
"configId": "124",
"filedCode": "note",
"filedName": "备注",
"defaultValue": "请在经销商指导下操作",
"filedType": "OTHES",
"inputType": "text",
"placeholder": null,
"filedOrder": "5",
"inputMode": "other",
"leftIcon": null,
"rightIcon": null,
"format": "N",
"proportion": "1,2",
"showName": false,
"showContent": true,
"showArrow": false,
"hasBorder": false,
"filedHeight": 30,
"enableFlag": "Y",
"tabContent": null,
"btnContent": null,
"cssClass": "tip-note"
}
]
},
......
src/pages/radioTest.vue
View file @ 452a754d
......@@ -21,6 +21,16 @@
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
<list-item>
<item>
<h-check slot="left-icon" v-model="checkValue"/>
<section slot="content">CheckBox</section>
</item>
<item>
<div slot="name">switch滑块切换框</div>
<div slot="content"><h-switch v-model="switchValue"/></div>
</item>
</list-item>
</h-content>
</h-view>
</template>
......@@ -31,6 +41,8 @@ export default {
data () {
return {
radioValue: 'Japan',
checkValue: false,
switchValue: false,
}
},
watch: {
......@@ -40,14 +52,16 @@ export default {
},
methods: {},
}
</script>
<style scoped lang="less">
.hls-list-item{
.hls-item{
.radio-group{
.hls-list-item {
.hls-item {
.radio-group {
display: flex;
.h-radio{
.h-radio {
margin-right: 5px;
}
}
......
src/router/index.js
View file @ 452a754d
......@@ -8,7 +8,6 @@ import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
import HFile from '@/pages/fileTest'
import Form from '@/pages/form'
import DynamicLayout from '@/pages/dynamicLayout'
Vue.use(Router)
......@@ -23,8 +22,7 @@ export default new Router({
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
{path: '/dynamic-layout', component: DynamicLayout, name: 'DynamicLayout', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}}
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
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