hzero下拉框组件

config/dev.env.js

@@ -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"',

packages/common/styles/hField.less

@@ -112,13 +112,13 @@
 
   &-disabled {
     .field-label {
-      color: #999;
+      color: #666;
     }
 
     .field-value {
       .field-body {
         .field-control {
-          color: #999;
+          color: #666;
         }
       }
     }

packages/components/Select/index.vue

+/**
+* @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>

packages/components/component.js

@@ -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)
 }

src/App.vue

@@ -47,7 +47,7 @@ export default {
     },
   },
   mounted () {
-    this.getAccessToken()
+   // this.getAccessToken()
   },
   methods: {
     // 右滑返回上一页

src/pages/home.vue

@@ -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"
@@ -88,6 +88,8 @@
         clearable error
         required label="家庭地址"/>
       <!--<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,