ShowEasyFrontEnd/FrontEnd/components/newComponent/modal/multipleLevelModal.vue

<template>
  <modal :name="`${label}-multiple-level-modal`" width="100%" height="auto" :scrollable="true" :clickToClose="true">
    <div class="tw-p-[40px] tw-h-full tw-overflow-auto">
      <div class="modal-header tw-flex tw-justify-end tw-items-center tw-mb-[40px] md:tw-mb-[40px]">
        <button class="close tw-transition tw-btn-md" @click="$modal.hide(`${label}-multiple-level-modal`)"></button>
      </div>
      <div class="modal-content">
        <div class="tw-p-[30px] tw-border-solid tw-border-neutrals-200 tw-border-[1px] tw-rounded-[16px]">
          <h4 class="t16 tw-font-normal tw-mb-[22px]">{{ $t(label) }}</h4>
          <a-input-search style="margin-bottom: 22px" :placeholder="$t(placeholder)" @change="onChange" />
          <a-tree v-model="checkedKeys" checkable :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent"
            :tree-data="listData" @expand="onExpand" @select="onSelect">
            <template slot="title" slot-scope="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{
                title.substr(title.indexOf(searchValue) + searchValue.length)
                }}
              </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>
        </div>
      </div>
    </div>
  </modal>
</template>
<script>
  export default {
    props: {
      label: {
        type: String,
      },
      placeholder: {
        type: String,
      },
      list: {
        type: Array,
      },
      checked: {
        type: Array,
      },
    },
    data() {
      return {
        expandedKeys: [],
        checkedKeys: [],
        searchValue: "",
        autoExpandParent: true,
        listData: this.list,
        dataList: [],
      };
    },
    watch: {
      list: {
        handler: function () {
          this.listData = JSON.parse(JSON.stringify(this.list));
          this.generateList(this.listData);
        },
      },
      checked: {
        handler: function () {
          this.checkedKeys = this.checked;
        },
      },
      checkedKeys: {
        handler: function () {
          this.$emit("check", this.checkedKeys);
          // console.log("onCheck", this.checkedKeys);
        },
      },
    },
    methods: {
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) {
        const value = e.target.value;
        if (value != "") {
          const expandedKeys = this.dataList
            .map((item) => {
              if (item.title.indexOf(value) > -1) {
                return this.getParentKey(item.key, this.listData);
              }
              return null;
            })
            .filter((item, i, self) => item && self.indexOf(item) === i);
          Object.assign(this, {
            expandedKeys,
            searchValue: value,
            autoExpandParent: true,
          });
        } else {
          const expandedKeys = this.dataList;
          Object.assign(this, {
            expandedKeys,
            searchValue: value,
            autoExpandParent: false,
          });
        }
      },
      onSelect(selectedKeys, info) {
        // console.log("onSelect", info);
        this.selectedKeys = selectedKeys;
      },
      generateList(data) {
        var vm = this;
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          const title = node.title;
          vm.dataList.push({ key: key, title: title });
          if (node.children) {
            vm.generateList(node.children);
          }
        }
      },
      getParentKey(key, tree) {
        var vm = this;
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some((item) => item.key === key)) {
              parentKey = node.key;
            } else if (vm.getParentKey(key, node.children)) {
              parentKey = vm.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      },
    },
  };
</script>
<style lang="scss" scoped>
:deep() {
  .ant-input-search {
    &:hover {
      >.ant-input {
        border-color: #faae69;
      }
    }

    &:focus {
      >.ant-input {
        border-color: #f48800;
      }
    }

    >.ant-input {
      padding: 17px 12px;
      border-radius: 12px;
    }
  }

  .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
    border-color: #faae69;
  }

  .anticon-search.ant-input-search-icon {
    color: transparent;
    background-image: url("~/assets/svg/search.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
  }

  .ant-input {
    &:hover {
      border-color: #faae69;
    }

    &:focus {
      border-color: #f48800;
      box-shadow: 0 0 0 2px rgba(245, 135, 0, 0.2);
    }
  }

  .ant-tree-checkbox {
    .ant-tree-checkbox-inner {
      border: 1px solid #f48800;
    }

    &:hover {
      .ant-tree-checkbox-inner {
        border-color: #faae69;
      }
    }

    &:focus {
      .ant-tree-checkbox-inner {
        border-color: #f48800;
      }
    }
  }

  .ant-tree-checkbox-inner {
    width: 20px;
    height: 20px;
    border-radius: 4px;

    &:after {
      top: 50%;
      left: 27%;
    }
  }

  .ant-tree-checkbox-checked {
    &:after {
      border-color: transparent;
    }
  }

  .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
    border-color: #f48800;
    background-color: #f48800;
  }

  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after {
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #1890ff;
    border: 0;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    content: " ";
  }

  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after {
    background-color: #f48800;
  }

  .ant-tree {
    padding: 0 !important;
    margin-bottom: 11px;
  }

  .ant-tree>li {}

  .ant-tree li {
    position: relative;
    padding: 11px 0;

    .ant-tree-node-content-wrapper {
      height: 100%;

      &.ant-tree-node-selected {
        background-color: transparent;
      }

      &:hover {
        background-color: transparent;
      }
    }

    .ant-tree-checkbox {
      display: inline-flex;
      align-items: center;
      margin-right: 20px;
    }

    span.ant-tree-switcher {
      position: absolute;
      top: 8px;
      right: 0;

      &:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: inline-block;
        content: "";
        width: 11px;
        height: 9px;
        background-image: url("~/assets/svg/down-arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
      }

      i.ant-tree-switcher-icon {
        color: transparent;
      }

      &.ant-tree-switcher_open {
        &:after {
          transform: rotate(180deg);
        }
      }

      &.ant-tree-switcher-noop {
        &:after {
          background-image: none;
        }
      }
    }
  }

  .ant-tree-child-tree {
    padding-top: 11px;
  }

  span.ant-tree-title>span {
    display: block;
    max-width: 242px;
    white-space: initial;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #232323;
  }
}

.close {
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
}
</style>