[update] 树形弹框

src/components/selection/TreeDataSelection.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="components-input-demo-presuffix">
-    <a-input @click="openModal" :placeholder="$t('pleaseSelect')" v-model="nameStr" :title="nameStr" readOnly>
+    <div class="user-organ-wrap">
-      <a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+      <a-input class="user-input" @click="openModal" :placeholder="placeholder" v-model="nameStr" :title="nameStr" readOnly>
-    </a-input>
+        <a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+      </a-input>
+      <a-button type="primary" class="button-box" @click="openModal" :disabled="disabled" v-if="showBtn && !disabled">
+        {{ $t('select') }}
+      </a-button>
+    </div>
 
     <tree-data-select-modal
       ref="selectModal"
@@ -59,6 +64,15 @@ export default {
       type: String,
       required: false,
       default: ''
+    },
+    showBtn: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
     }
   },
   watch: {
@@ -104,6 +118,28 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.user-organ-wrap {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  //height: 39.98px;
 
+  .user-input {
+    resize: none;
+    width: calc(100% - 70px);
+  }
+
+  // 因为需要加title，所以不能把鼠标事件去掉
+  /deep/ .ant-input-disabled {
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
+    cursor: default;
+  }
+
+  .button-box {
+    margin-left: 5px;
+  }
+}
 </style>