添加hs-input-select

src/packages/common/asyncFormPropSet.vue

 <template>
       <el-dialog
+          top='10px'
           :visible.sync="dialogVisible"
           width="80%"
           title='字段设置'
@@ -297,6 +298,11 @@ export default {
           value: 'hsRate',
           label: '24hs-rate',
           isRequireControlName: true
+        },
+        {
+          value: 'hsInputSelect',
+          label: '25hs-input-select',
+          isRequireControlName: true
         }
       ],
       formColumns_: [],

src/packages/common/hsTabsFormSet.vue

 <template>
       <el-dialog
+          top='10px'
           :visible.sync="dialogVisible"
           width="80%"
           title='字段设置'

src/packages/common/tbaleColumsSet.vue

@@ -277,6 +277,10 @@ export default {
           value: 'hsSelectList',
           label: '14select-list',
           isRequireControlName: true
+        },{
+          value: 'hsInputSelect',
+          label: '15hs-input-select',
+          isRequireControlName: true
         }
         // {
         //   value: 'hsDragList',

src/packages/hs-dialog/child.vue

 <template>
      <el-dialog
+         top='10px'
          :title="configData.title"
          :visible="visible"
          :width="configData.width"

src/packages/hs-drag-list/child.vue

@@ -4,6 +4,7 @@
   >
     <el-input :disabled="getDisabled" clearable  @clear="clearValue" @keydown.native.enter='showDialog' size="mini" v-model="label_value" placeholder="请输入"></el-input>
     <el-dialog
+     top='10px'
      @open='openDialog'
      :close-on-click-modal='false'
      :before-close='beforeClose'

src/packages/hs-dync-form/dyncFormItemComponentChild.vue

@@ -354,6 +354,19 @@
       >
       </hs-rate>
     </template>
+    <template v-if="item.type==='hsInputSelect'">
+      <hs-input-select
+        :formData='formParms'
+        v-model="formParms[item.prop]"
+        :allSourceData='item.allSourceData'
+        :elInfo='item.elInfo'
+        :disabled='disabled'
+        :filed='item.prop'
+        v-bind="$attrs"
+        v-on="$listeners"
+      >
+      </hs-input-select>
+    </template>
   </div>
 
 </template>

src/packages/hs-file/child.vue

@@ -14,6 +14,7 @@
       </div>
     </el-link>
     <el-dialog
+      top='10px'
       title="附件上传预览"
       :visible.sync="dialogVisible"
       width="80%"
@@ -418,10 +419,10 @@ export default {
         })
       }
     },
-    handleFileChange(e) {
-      const inputDOM = document.getElementById('avatar')
-      this.file = inputDOM.files[0]
-      this.files = Array.from(inputDOM.files)
+  handleFileChange(e) {
+      this.file = e.target.files[0]
+      this.files = Array.from(e.target.files)
+      console.log(this.files)
       // 在获取到文件对象进行预览就行了！
       this.files.forEach(item => {
         this.imgPreview(item)

src/packages/hs-img/child.vue

@@ -17,7 +17,8 @@
           @click="upload_dialogVisible=true"
         ></i>
       </div>
-          <el-dialog
+      <el-dialog
+      top='10px'
       :center='true'
       title="上传"
       :visible.sync="upload_dialogVisible"

src/packages/hs-input-select/child.vue

+<template>
+  <div class="hsInputBox">
+    <div
+      class="inputTitle"
+      v-if='configData.title'
+    >{{configData.title}}</div>
+    <div class="inputCurr">
+      <el-popover
+        v-model="yourShowState"
+        placement="bottom"
+        width="100%"
+        trigger="click"
+      >
+        <div class="keywordDiv">
+          <template v-show="selectItems.length">
+            <div
+              :class="{activeItem:activeItemhandle(item)}"
+              class="itemSelect"
+              @click="itemClick(item)"
+              v-for="(item, index) in selectItems"
+              :key="index"
+            >{{item.label}}</div>
+          </template>
+          <template v-if='!selectItems.length'>
+            <div class="notData">
+              暂无数据
+            </div>
+          </template>
+        </div>
+        <el-input
+          slot="reference"
+          @keyup.native="btKeyUp"
+          :clearable='clearable'
+          :size='configData.size'
+          @clear='clear'
+          @keyup.enter.native="submitInput"
+          v-model="innerValue"
+          @input='inputFun'
+          @change='changeFun'
+          @blur="inputBlur"
+          @focus='inputFocus'
+          :disabled="getDisabled"
+          :placeholder="configData.placeholder"
+        ></el-input>
+      </el-popover>
+    </div>
+  </div>
+</template>
+<script>
+import commonMixins from '../ucClass/commonMixins'
+export default {
+  mixins:[commonMixins],
+  name: 'input-select-component',
+  computed: {
+    configData: function() {
+      const { config } = this.allSourceData
+      return Object.assign(this.defaultConfig, config || {})
+    },
+    innerValue: {
+      set(value) {
+        const v = this.validateHandle(value)
+        this.valueChange(v)
+        this.$emit('input', v)
+      },
+      get() {
+        return this.value
+      }
+    },
+    getDisabled: function() {
+      const { disabled, disabledLevel } = this.configData
+      const type = typeof disabled
+      if (disabledLevel === 1) {
+        // 以自己的的配置为优先级最高
+        if (type === 'function') {
+          return disabled(this.formData)
+        } else {
+          return disabled
+        }
+      } else {
+        if (type === 'function') {
+          return this.disabled || disabled(this.formData)
+        } else {
+          return this.disabled || disabled
+        }
+      }
+    },
+    selectItems: function() {
+      const defaultDate = this.dealWithDefaultData()
+      const defaultDateValue = defaultDate.map(item => {
+        return item.label
+      })
+      const list = this.remoteOption.filter(item => {
+        return !defaultDateValue.includes(item.label)
+      })
+      return [...list, ...defaultDate]
+    }
+  },
+  data() {
+    return {
+      yourShowState: false,
+      elId: '',
+      value_inner: '',
+      jsoneditorVisible: false,
+      isInputed: false,
+      clearable: true,
+      defaultConfig: {
+        ref: {
+          table_name: '',
+          columns: '',
+          remote_condition: ''
+        },
+        disabled: false,
+        size: 'mini',
+        clearable: true,
+        title: '',
+        label: '',
+        placeholder: '请选择或者输入'
+      },
+      remoteOption: []
+    }
+  },
+  methods: {
+    remoteMethodsDebounce: _.debounce(async function(query) {
+      if (this.is_mock) return
+      const data = await this.$listeners.queryRef(
+        this.configData,
+        query || '',
+        this.formData
+      )
+      this.remoteOption = this.tansLate(data || [])
+    }, 1000),
+    async remoteMethod_(query) {
+      await this.remoteMethodsDebounce(query, this.configData)
+    },
+    dealWithDefaultData() {
+      const { sourceData } = _.cloneDeep(this.allSourceData)
+      const sourceData_ = _.cloneDeep(sourceData)
+      return Array.isArray(sourceData_)
+        ? this.tansLate(sourceData_)
+        : this.translate_json(sourceData_)
+    },
+    translate_json(data = {}) {
+      const list = []
+      for (const prop in data) {
+        const parm = {}
+        parm.value = data[prop]
+        parm.label = prop
+        list.push(parm)
+      }
+      return list
+    },
+    tansLate(data) {
+      const arr = data
+      const list = []
+      const { label } = this.configData
+      arr.forEach(element => {
+        const parm = {}
+        parm.value = element[label]
+        parm.label = element[label]
+        list.push(parm)
+      })
+      return list
+    },
+    activeItemhandle(item) {
+      if (this.innerValue === item.label) {
+        return true
+      } else {
+        return false
+      }
+    },
+    itemClick(item) {
+      if (this.getDisabled) {
+        this.yourShowState = false
+        return
+      }
+      this.innerValue = item.label
+      this.yourShowState = false
+    },
+    btKeyUp(e) {},
+    validateHandle(value) {
+      const { validateRegex, validateAction } = this.configData
+      if (typeof validate === 'function') {
+        const v = validateAction(this.value, this.formData, this.prop, e)
+        return v
+      } else if (validateRegex) {
+        const r = this.regExpFun(validateRegex, value)
+        if (r) {
+          return value
+        } else {
+          return this.value
+        }
+      } else {
+        return value
+      }
+    },
+    regExpFun(expression, value) {
+      const regxp = new RegExp('^' + expression + '$', 'gi')
+      return regxp.test(value)
+    },
+    inputFocus() {
+      this.getRemoteData(this.value)
+    },
+    inputBlur() {
+      this.isInputed = false
+      setTimeout(() => {
+        this.yourShowState = false
+      }, 300)
+
+      // this.formData[`_${this.prop}_`] = false
+    },
+    execAction(actionName, value) {
+      const type = typeof actionName
+      if (type === 'function') {
+        actionName(value, this.formData)
+      }
+    },
+    valueChange(value) {
+      const { changing } = this.configData
+      this.execAction(changing, value)
+    },
+    clear(value) {
+      const { clear } = this.configData
+      this.execAction(clear, value)
+    },
+    inputComputed(value) {
+      const { computed } = this.configData
+      this.execAction(computed, value)
+    },
+    changeFun(value) {
+      const { changeed } = this.configData
+      this.execAction(changeed, value)
+    },
+    async getRemoteData(value) {
+      if (this.configData.ref.remote_condition) {
+        await this.remoteMethod_(value)
+      }
+    },
+    async inputFun(value) {
+      this.isInputed = true
+      this.getRemoteData(value)
+      const { inputed } = this.configData
+      this.execAction(inputed, value)
+    },
+    submitInput(val) {
+      const { entered } = this.configData
+      this.execAction(entered, val, this.elInfo)
+      this.$emit('enterInput', this.value_inner, this.elInfo)
+    }
+  }
+}
+</script>
+<style scoped>
+.itemSelect {
+  font-size: 14px;
+  padding: 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  height: 34px;
+  line-height: 34px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.itemSelect:hover {
+  background-color: #f5f7fa;
+}
+.hsInputBox {
+  padding: 1px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.inputTitle {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.inputCurr {
+  position: relative;
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  } /*初始状态 透明度为0*/
+  40% {
+    opacity: 0.8;
+  } /*过渡状态 透明度为0*/
+  100% {
+    opacity: 1;
+  } /*结束状态 透明度为1*/
+}
+@-webkit-keyframes fade-in {
+  /*针对webkit内核*/
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.keywordDiv {
+  /* animation: fade-in;
+  animation-duration: 0.5s;
+  -webkit-animation:fade-in 0.5s;*/
+  text-align: left;
+  min-width: 100px;
+  width: 100%;
+  max-height: 300px;
+  min-height: 100px;
+  background-color: #ffffff;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.keywordDiv::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+.activeItem {
+  color: #409eff;
+  font-weight: 700;
+  background-color: #f5f7fa;
+}
+.notData {
+  min-width: 100px;
+  width: 100%;
+  max-height: 300px;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.popper {
+  width: 100%;
+  background-color: #fff;
+  text-align: left;
+}
+</style>

src/packages/hs-input-select/index.vue

+<template>
+  <hs-component-shell
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <child
+      v-bind="$attrs"
+      v-on="$listeners"
+    ></child>
+  </hs-component-shell>
+</template>
+<script>
+import child from './child'
+export default {
+  components: {
+    child
+  },
+  name: 'hs-input-select'
+}
+</script>

src/packages/hs-jsoneditor/index.vue

 <template>
   <el-dialog
+    top="10px"
     id="jsonEditorBox"
     @opened="dialogOpen"
     :title='pageTitle'

src/packages/hs-lookup/child.vue

@@ -11,6 +11,7 @@
       placeholder="请输入"
     ></el-input>
     <el-dialog
+      top="10px"
       @open='openDialog'
       :close-on-click-modal='false'
       :before-close='beforeClose'

src/packages/hs-select-list/child.vue

@@ -16,20 +16,22 @@
     <el-button slot="append" icon="el-icon-search" @click='showDialog' ></el-button>
     </el-input>
   </div>
+
     <el-dialog
       @open='openDialog'
+      top='10px'
       :close-on-click-modal='false'
       :before-close='beforeClose'
       append-to-body
       center
       title="查询"
       :visible.sync="dialogTableVisible"
-      width="95%"
+      :width="dialogWidth"
     >
       <div class="contentBox">
         <div
           class="leftBox"
-          :style="{'max-width':tableWithLeft}"
+          :style="{'width':tableWithLeft}"
         >
          <el-divider content-position="left">所有项</el-divider>
           <hs-dync-form
@@ -42,7 +44,8 @@
           >
           </hs-dync-form>
           <hs-table
-            maxHeight="400px"
+            :width='tableWithLeft'
+            :maxHeight="tableHeightLeft"
             :allSourceData='hsTableFormConfigLeft'
             :elInfo='hsTableElLeft'
             @paginationFun="paginationFunLeft"
@@ -66,7 +69,7 @@
         </div>
         <div
           class="rightBox"
-          :style="{'max-width':tableWithRight}"
+          :style="{'width':tableWithRight}"
         >
          <el-divider content-position="left">已选区</el-divider>
           <hs-dync-form
@@ -79,10 +82,11 @@
           >
           </hs-dync-form>
           <hs-table
-             maxHeight="400px"
+            :width='tableWithRight'
+            :maxHeight="tableHeightRight"
             :allSourceData='hsTableFormConfigRight'
             :elInfo='hsTableElRight'
-             @paginationFun="paginationFunRight"
+            @paginationFun="paginationFunRight"
           >
           </hs-table>
         </div>
@@ -111,7 +115,6 @@
             @click="showAddPage"
           >新增</el-button>
         </div>
-
       </div>
     </el-dialog>
     <hs-iframe-dialog
@@ -250,6 +253,7 @@ export default {
   },
   data() {
     return {
+      elId: '',
       dialogTableVisible: false,
       searchFormLeft: {
         queryArea: 'left'
@@ -266,13 +270,16 @@ export default {
       ],
       tableWithLeft: '100%',
       tableWithRight: '100%',
+      tableHeightLeft: '400px',
+      tableHeightRight: '400px',
       searchFormRight: {
         queryArea: 'right'
       },
       rightTabeData: [],
       pagingRight: null,
       leftTabeData: [],
-      pagingLeft: null
+      pagingLeft: null,
+      dialogWidth: '95%'
 
     }
   },
@@ -333,13 +340,13 @@ export default {
       if (f) { // f:true 时 是iframe返回的数据,如果回写字段中有 filed 则使用配置的,否则 要给filed 设置值
         const taregtFiled = writebackfield.find(item => {
           const [key] = item.split('=')
-          if (key === this.prop) {
+          if (key === this.filed) {
             return item
           }
         })
         if (!taregtFiled) {
           console.warn('未设置回绑定字段,则默认从返回的数据中回写filed')
-          this.$set(this.formData, this.prop, data[this.prop])
+          this.$set(this.formData, this.filed, data[this.filed])
         }
       }
     },
@@ -365,9 +372,34 @@ export default {
     },
     async showDialog() {
       console.log('showDialog')
-      const getClientWidth = hsUtil.SystemModule.getClientWidth()
-      this.tableWithLeft = getClientWidth / 2 + 'px'
-      this.tableWithRight = getClientWidth / 2 - 66 + 'px'
+      const { dialogWidth, tableHeight } = this.configData
+      let dialogWidth_ = dialogWidth || this.dialogWidth
+      if (typeof dialogWidth === 'string') {
+        if (dialogWidth.includes('%')) {
+          const getClientWidth = hsUtil.SystemModule.getClientWidth()
+          dialogWidth_ = (getClientWidth * (dialogWidth.substring(0, dialogWidth.length - 1) / 100))
+        } else if (dialogWidth.includes('px')) {
+          dialogWidth_ = dialogWidth.substring(0, dialogWidth.length - 2)
+        }
+      }
+      if (dialogWidth) {
+        this.dialogWidth = dialogWidth_ + 'px'
+      }
+      this.tableWithLeft = (dialogWidth_ - 100) / 2 + 'px'
+      this.tableWithRight = (dialogWidth_ - 100) / 2 + 'px'
+      if (tableHeight) {
+        if (typeof tableHeight === 'string' && tableHeight.includes('px')) {
+          this.tableHeightLeft = tableHeight
+          this.tableHeightRight = tableHeight
+        } else if (typeof tableHeight === 'number') {
+          this.tableHeightLeft = tableHeight + 'px'
+          this.tableHeightRight = tableHeight + 'px'
+        }
+      } else {
+        const getClientHeight = hsUtil.SystemModule.getClientHeight()
+        this.tableHeightLeft = getClientHeight - 260 + 'px'
+        this.tableHeightRight = getClientHeight - 260 + 'px'
+      }
       if (this.value) {
         await this.queryRight()
       }
@@ -593,13 +625,28 @@ export default {
           selectIndexData.push(index)
         }
       })
-      hsUtil.TableHandleModule.batchDown(this.rightTabeData, selectIndexData)
+       hsUtil.TableHandleModule.batchDown(this.rightTabeData, selectIndexData)
     }
   },
   mounted() {}
 }
 </script>
 <style scoped>
+.showBox {
+  position: relative;
+  width: 100%;
+  border: 1px solid #e6e6e6;
+  border-radius: 5px;
+  padding-left: 10px;
+  height: 28px;
+  line-height: 28px;
+  text-align: left;
+}
+.hslookupClose {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
 .contentBox {
   display: flex;
 }
@@ -617,11 +664,8 @@ export default {
   flex-direction: column;
   flex: 1;
 }
-.cacelSubmit {
-  /* display: flex;
-    justify-content: flex-end; */
-}
 .rightLeftIcon {
+  width: 100px;
   display: flex;
   align-items: center;
 }

src/packages/hs-table/ItemComponentChild.vue

@@ -213,6 +213,19 @@
       >
       </hs-drag-list>
     </template>
+    <template v-if="item.showType==='hsInputSelect'">
+      <hs-input-select
+        v-model="formParms[item.prop]"
+        :allSourceData='item.allSourceData'
+        :elInfo='item.elInfo'
+        :disabled='getDisabled||isFromHdrDtl()'
+        :formData='formParms'
+        :prop='item.prop'
+        v-on="$listeners"
+        v-bind="$attrs"
+      >
+      </hs-input-select>
+    </template>
   </div>
 
 </template>