From a91519cd3be79b5a0a9b23a5993de9d3039fd5bc Mon Sep 17 00:00:00 2001
From: aoshiguchen <1052045476@qq.com>
Date: Thu, 8 Sep 2022 22:48:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EDropdownTable2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=9A=20=E6=94=AF=E6=8C=81=E5=8D=95=E9=80=89?=
 =?UTF-8?q?=E3=80=81=E5=A4=9A=E9=80=89=E3=80=81=E6=90=9C=E7=B4=A2=E3=80=81?=
 =?UTF-8?q?backspace=E9=94=AE=E5=88=A0=E9=99=A4=E5=B7=B2=E9=80=89=E3=80=81?=
 =?UTF-8?q?=E7=A6=81=E7=94=A8=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dropdown/DropdownTable2.vue    | 228 ++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 neutrino-proxy-admin/src/components/Dropdown/DropdownTable2.vue

diff --git a/neutrino-proxy-admin/src/components/Dropdown/DropdownTable2.vue b/neutrino-proxy-admin/src/components/Dropdown/DropdownTable2.vue
new file mode 100644
index 00000000..6931399a
--- /dev/null
+++ b/neutrino-proxy-admin/src/components/Dropdown/DropdownTable2.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="drop-down-table">
+    <div class="input-tag-box">
+      <div id="tag-list-box">
+        <el-tag class="elTag" v-show="tags.length > 0" v-for="(tag,index) in tags" closable type="info" size="mini" @close="handeCloseTag(index,tag)">{{tag.name}}</el-tag>
+        <el-input v-model="inputValue"
+                  :placeholder="tags.length > 0 ? '':'请选择'"
+                  @focus="editor = true"
+                  @keyup.backspace.native="keyup"
+                  :style="{width:inputWidth}"/>
+      </div>
+      <i :class="editor ? iconUp : iconDown" @click="editor = !editor" style="color: #C0C4CC;"/>
+    </div>
+    <div class="popup-class" :style="{'width':width}" v-show="editor">
+      <el-table
+        border
+        :columns="columns"
+        :data="getData"
+        @row-click="handeRowClick"
+        max-height="500"
+        :row-class-name="tableRowClassName"
+        header-cell-class-name="table_header_class"
+      >
+        <el-table-column v-for="item in columns" align="center" :prop="item.key" :label="item.title" :min-width="item.minWidth"/>
+      </el-table>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '400px'
+    },
+    data: {
+      type: Array,
+      default: []
+      // required: true
+    },
+    columns: {
+      type: Array,
+      default: []
+      // required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getData() {
+      if (!this.multiple) {
+        return this.data
+      } else {
+        return this.data.filter(item => !this.inputValue || item.name.toLowerCase().includes(this.inputValue.toLowerCase()))
+      }
+    }
+  },
+  data() {
+    return {
+      editor: false,
+      inputValue: '',
+      iconUp: 'el-select__caret el-input__icon el-icon-arrow-up',
+      iconDown: 'el-select__caret el-input__icon el-icon-arrow-down',
+      tags: [],
+      inputWidth: '100%'
+    }
+  },
+  created() {
+    this.inputValue = this.value
+  },
+  watch: {
+    editor() {
+      if (this.editor) {
+        document.getElementsByClassName('input-tag-box')[0].style.borderColor = '#409EFF'
+      } else {
+        this.inputValue = ''
+        document.getElementsByClassName('input-tag-box')[0].style.borderColor = '#909399'
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      row.index = rowIndex
+      let className = 'success-row'
+      if (row.disabled) {
+        className = 'disabled-row'
+      }
+      const _index = this.tags.findIndex(item => item === row)
+      if (_index > -1) {
+        return className + ' select-row'
+      }
+      return className
+    },
+    handeRowClick(row, column, event) {
+      if (row.disabled) {
+        return
+      }
+      if (this.multiple) {
+        const _index = this.tags.findIndex(item => item === row)
+        if (_index > -1) {
+          this.tags.splice(_index, 1)
+        } else {
+          this.tags.push(row)
+        }
+        setTimeout(() => {
+          this.getInputWidth()
+        })
+      } else {
+        this.editor = false
+        this.inputValue = row.name
+        this.tags = [row]
+      }
+      this.$emit('rowClick', row, this.tags, column, event)
+    },
+    handeCloseTag(index, tag) {
+      this.tags.splice(index, 1)
+      this.inputValue = ''
+    },
+    keyup() {
+      if (this.inputValue.length <= 0 && this.tags.length > 0) {
+        const list = document.getElementsByClassName('elTag')
+        if (list[list.length - 1].style.borderColor !== '') {
+          this.handeCloseTag(this.tags.length - 1)
+        } else {
+          list[list.length - 1].style.borderColor = '#909399'
+        }
+      }
+    },
+    getInputWidth() {
+      let tagMaxWidth = 0
+      const offsetWidth = document.getElementById('tag-list-box').offsetWidth
+      const elTagName = document.getElementsByClassName('elTag')
+      elTagName.forEach(item => {
+        const width = item.offsetWidth + 5.5
+        if (width + tagMaxWidth < offsetWidth) {
+          tagMaxWidth = width + tagMaxWidth
+        } else {
+          tagMaxWidth = width
+        }
+      })
+      this.inputWidth = (offsetWidth - tagMaxWidth) + 'px'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.drop-down-table{
+  .input-tag-box{
+    display: flex;
+    background: #fff;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid #DCDFE6;
+    #tag-list-box{
+      padding: 0;
+      width: ~"calc(100% - 30px)";;
+      .elTag{
+        margin-left: 5px;
+        margin-top: 5px;
+      }
+    }
+    /deep/.el-input{
+      display: inline-block;
+    }
+    /deep/.el-input__inner{
+      border: 0px!important;
+      padding-right: 0;
+    }
+    /deep/.el-input__icon{
+      line-height: 34px!important;
+    }
+  }
+  .popup-class{
+    padding: 8px;
+    margin-top: 5px;
+    width: 100%;
+    background: white;
+    border: 1px solid #f0f2f5;
+    box-shadow: 1px 1px 10px #f0f2f5;
+    position: absolute;
+    z-index: 9;
+    /deep/.ivu-table-tip{
+      overflow-x: hidden!important;
+    }
+  }
+  /deep/.table_header_class{
+    font-weight: bolder;
+    color: black;
+    background-color: #ebeef5!important;
+  }
+  /deep/.gutter{
+    background-color: #ebeef5!important;
+  }
+  /deep/.el-table .success-row {
+    &:hover{
+      cursor: pointer!important;
+    }
+  }
+  /deep/.el-table .disabled-row {
+    color: #c0c4cc !important;
+    &:hover{
+      cursor: not-allowed!important;
+    }
+    &:hover>td{
+      background-color: #FFF!important;
+    }
+  }
+  /deep/.el-table .select-row {
+    color: #409eff;
+    font-weight: 700;
+  }
+}
+</style>