Commit ffb55d2a authored by nature's avatar nature

hzero下拉框组件

parent a0f3006e
......@@ -9,6 +9,7 @@ module.exports = merge(prodEnv, {
isMobilePlatform: false,
appCode:'"HLS_APP"',
clearTable: true,
VUE_APP_API_HOST:"'http://devapi.leafhzero.hand-china.com'",
loginPath: '"http://hlsapp.hand-china.com/core/oauth/token?client_id=hQGCtxTItRa34PUOgxaD0r7oSPeuEaIB&client_secret=7ee8338c-4a06-44a1-87cc-afa63f8e1bc3&grant_type=password&username=app&password=" ',
basePath: '"http://hlsapp.hand-china.com/core/r/api?sysName=HLS_APP&apiName="',
rootPath: '"http://hlsapp.hand-china.com/core/r/api"',
......
......@@ -112,13 +112,13 @@
&-disabled {
.field-label {
color: #999;
color: #666;
}
.field-value {
.field-body {
.field-control {
color: #999;
color: #666;
}
}
}
......
/**
* @Author think
* @Date 2021-04-21 13:49
*/
<template>
<div :style="{'min-height':minHeight}" :class="{'h-field-disabled':disabled}" class="h-field h-select">
<div v-if="showLeftIcon" class="field-icon field-left-icon" @click="onClickLeftIcon">
<img v-if="!hasLeftIcon" :src="leftIcon">
<slot name="left-icon"/>
</div>
<div v-if="label" :class="{'required': required}" :style="{'flex':proportion[0] }" class="field-title field-label">
<span>{{ label }}</span>
</div>
<div :style="{'flex':proportion[1] }" class="field-value">
<div :class="{'field-control-error':hasError}" class="field-body">
<input
v-bind="$attrs"
v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" :class="('field-control-'+inputAlign)"
type="text" class="field-control"
readonly
@click="showSelect"
@blur="onBlur">
<input v-model="value" type="text" hidden>
<i v-if="showClean" class="field-icon field-right-icon icon ion-close-circled" @click="cleanValue"/>
<!--<slot name="icon"/>-->
<img v-if="!showClean" :src="rightIcon" class="field-right-icon date-field-icon" >
</div>
</div>
</div>
<!--</section>-->
</template>
<script>
import {isDef} from '../../../packages/common/utils'
import VueSelect from './index'
import axios from 'axios'
export default {
name: 'HSelect',
inheritAttrs: false,
props: {
value: {
default: null,
type: Number | String,
},
placeholder: {
type: String,
default: null,
},
clearable: {
type: Boolean,
default: true,
},
dataArray: {
type: Array,
default: () => [],
},
multiple: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
valueKey: {
type: String,
default: 'value',
},
valueName: {
type: String,
default: 'meaning',
},
code: {
type: String,
default: 'code',
},
object: {
type: Object,
default: () => {},
},
label: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
proportion: {
// name/content 横向面积比例
type: Array,
default: () => [1, 2],
},
itemHeight: {
type: Number,
default: null,
},
inputAlign: {
type: String,
default: 'right',
},
showIcon: {
type: Boolean,
default: true,
},
leftIcon: {
type: String,
default: null,
},
rightIcon: {
type: String,
default: require('./right-gray@2x.png'),
},
lovCode: {
type: String,
default: null,
},
lookUpCode: {
type: String,
default: null,
},
error: {
type: Boolean,
default: false,
},
},
data () {
return {
hasError: false,
codeName: null,
arrayList: [],
}
},
computed: {
hasLeftIcon () {
return !!this.$slots['left-icon']
},
showLeftIcon () {
return !!(this.leftIcon || this.$slots['left-icon'])
},
showClean () {
let vm = this
if (vm.disabled) {
return false
}
if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
return true
} else {
return !vm.showIcon
}
},
minHeight () {
if (this.$parent.itemHeight) {
return this.$parent.itemHeight + 'px'
} else {
return this.itemHeight + 'px'
}
},
selectPlaceholder () {
return this.placeholder ? this.placeholder : this.label ? '请输入' + this.label : ''
},
},
watch: {
value (oldVal, newVal) {
if (oldVal !== newVal) {
let array = (this.lookUpCode || this.lovCode) ? this.arrayList : this.dataArray
this.getCodeName(array)
}
},
},
mounted () {
if (this.lookUpCode) {
this.getLookUpCode()
}
if (this.lovCode) {
this.getLovCode()
}
this.$nextTick(() => {
this.getCodeName(this.dataArray)
})
},
methods: {
getCodeName (arrayList) {
let vm = this
if (vm.multiple) {
vm.codeName = []
if (Array.isArray(vm.value)) {
arrayList.forEach((selectItem, listIndex, listArray) => {
vm.value.forEach((index, item, array) => {
if (selectItem[vm.valueKey] === item) {
name.push(selectItem[vm.valueName])
}
})
})
} else {
console.error('multiple select value must be Array')
}
} else {
arrayList.forEach((selectItem, listIndex, listArray) => {
// eslint-disable-next-line eqeqeq
if (selectItem[vm.valueKey] == vm.value) {
vm.codeName = selectItem[vm.valueName]
}
})
}
},
getLovCode () {
let vm = this
const tenantId = localStorage.getItem('tenantId')
let url = `${process.env.VUE_APP_API_HOST}/hpfm/v1/${tenantId}/lov-view/info?viewCode=${vm.lovCode}`
let headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + window.localStorage.access_token,
}
axios.get(url, {
headers: headers,
}).then((res) => {
if (res.queryUrl) {
const queryUrl = res.queryUrl
let lovUrl = `${process.env.VUE_APP_API_HOST}${queryUrl}?lovCode=${this.lovCode}&page=0&size=99`
axios.get(lovUrl, {
headers: headers,
}).then((res) => {
if (res.content) {
vm.arrayList = res.content
vm.getCodeName(res.content)
}
})
}
})
},
getLookUpCode () {
let vm = this
const tenantId = localStorage.getItem('tenantId')
let url = `${process.env.VUE_APP_API_HOST}/hpfm/v1/${tenantId}/lovs/data?lovCode=${vm.lookUpCode}`
axios.get(url, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + window.localStorage.access_token,
},
}).then((res) => {
if (Array.isArray(res)) {
vm.arrayList = res
vm.getCodeName(res)
}
})
},
selectCall (v1, v2, v3) {
let vm = this
if (!vm.multiple) {
this.$emit('input', v2[vm.code])
this.$emit('onSelect', v1, v2, v3)
} else {
this.$emit('input', v1)
this.$emit('onSelect', v1, v2)
}
vm.hasError = false
},
cleanValue () {
let vm = this
this.codeName = null
this.$emit('input', null)
this.$emit('clean', null)
const { required, error } = this
if (required && error) {
this.hasError = !isDef(vm.value)
}
},
showSelect () {
let vm = this
if (!vm.disabled) {
let array = (vm.lookUpCode || vm.lovCode) ? vm.arrayList : vm.dataArray
let list = []
array.forEach((date, index, array) => {
list.push({
value: date[vm.valueKey],
name: date[vm.valueName],
parent: date.parent,
})
})
VueSelect.show({
list: list,
callBack: vm.selectCall,
code: vm.code,
object: vm.object || {},
multiple: vm.multiple,
})
}
},
// 检验输入的合法性
validate () {
const { fieldInput } = this.$refs
const { required, error } = this
if (required && error) {
this.hasError = !isDef(fieldInput.value)
/* if (isString(error)) {
this.placehold = error
} */
}
},
onBlur (event) {
this.focused = false
this.$emit('blur', event)
this.validate()
},
},
}
</script>
<style lang="less">
@import "../../../packages/common/styles/hField";
.h-select{
background-color: #fff;
position: relative;
.field-value{
.date-field-icon{
height: 12.5px;
}
}
}
</style>
......@@ -33,6 +33,7 @@ import CurrencyInput from './CurrencyInput/index'
import HProgress from './Progress/index'
import HRange from './Range/index'
import SelectField from './Select/SelectField'
import Select from './Select/index.vue'
import DateField from './DateField/index'
import Field from './Field/index'
......@@ -71,6 +72,7 @@ export default (Vue) => {
Vue.component('h-progress', HProgress)
Vue.component('h-range', HRange)
Vue.component('SelectField', SelectField)
Vue.component('h-select', Select)
Vue.component('DateField', DateField)
Vue.component('h-field', Field)
}
......@@ -47,7 +47,7 @@ export default {
},
},
mounted () {
this.getAccessToken()
// this.getAccessToken()
},
methods: {
// 右滑返回上一页
......
......@@ -47,7 +47,7 @@
<currency-input v-model="number"/>
<DateField
v-model="nowDate" required label="时间"
@onSelect="select" error/>
error @onSelect="select"/>
<h-field
v-model="number" format type="number"
......@@ -87,7 +87,9 @@
inputAlign="left"
clearable error
required label="家庭地址"/>
<!--<img src="@/assets/image/logo.png" @click="imgclick()" alt="img">-->
<!--<img src="@/assets/image/logo.png" @click="imgclick()" alt="img">-->
<h-select v-model="unitId" look-up-code="HPFM.MY_UNIT" label="部门"/>
<h-select v-model="leaseItemId" lov-code="HLLI.LEASE_ITEM" label="租赁物" value-key="leaseItemId" value-name="fullName"/>
</h-content>
<bottom-tab/>
</h-view>
......@@ -97,6 +99,8 @@
export default {
data () {
return {
unitId: 11,
leaseItemId:126,
userImg: window.localStorage.userImg || '',
message: [{
'isFromeMe': false,
......
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