manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_mld/src/components/cascaderOption.vue

<template>
  <div class="childComponents">
    <div class="child">
        <ul class="transitionBoxUl">
            <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index, item)" @click.stop="liClick(item)"> 
                <span :class="item.children ? 'idxspan idxSpanspan' : 'idxSpanspan'" v-if="!radios">
                    <!-- {{item.label}} -->
                    <span v-if="userName">
                        <span v-if="item.type == 'dep'">
                            <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText>
                        </span>
                        <span v-if="item.type == 'user'">
                            <TranslationOpenDataText type='userName' :openid='item.label'></TranslationOpenDataText>
                        </span>
                    </span>
                    <span v-if="!userName">
                        <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText>
                    </span>
                    <!-- <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText> -->
                </span>
                <span v-if="radios" style="margin-left: -15px">
                    <el-radio v-model="departmentId" :label="item.value">
                        <span class="idxspan idxSpanspan" style="margin-left: -10px"> 
                            <!-- {{item.label}}  -->
                            <span v-if="userName">
                                <span v-if="item.type == 'dep'">
                                    <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText>
                                </span>
                                <span v-if="item.type == 'user'">
                                    <TranslationOpenDataText type='userName' :openid='item.label'></TranslationOpenDataText>
                                </span>
                            </span>
                            <span v-if="!userName">
                                <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText>
                            </span>
                            <!-- <TranslationOpenDataText type='departmentName' :openid='item.label'></TranslationOpenDataText> -->
                        </span>
                    </el-radio>
                </span>
                <i class="el-icon-arrow-right" v-if="item.children"></i>
            </li>
        </ul>
    </div>

    <div v-for="(item, index) in options" :key="index">
        <div v-if="item.children">
            <cascaderOption :subject="item.children" :userName="userName" :radios="radiosFlg" :subjectId="departmentId" v-show="transitionBoxLiIdx == index" @cascaderOptionClick="cascaderOptionClick"></cascaderOption>
        </div>
    </div>
  </div>
</template>

<script>
// 引入里面的
import cascaderOption from "@/components/cascaderOption.vue"
export default {
  name: 'cascaderOption',
  components: {
    cascaderOption
  },
  props: {
    subject:{
        type: Array
    },
    subjectId: {
        type: [String, Number]
    },
    // 是否为单选
    radios: {
        type: Boolean,
        default: false
    },
    userName: {
        type: Boolean,
        default: false
    }
  },
  watch: {
    subject: {
        handler(newValue, oldValue) {
            console.log(newValue, '子组件')
            this.options = newValue
            if(newValue) {
                this.options = newValue
            }
        },
        deep: true,
    },

  },
  data() {
    return {
        options: [],
        transitionBoxLiIdx: '0',
        hoverList: [],
        radiosFlg: false, // 是否为单选
        departmentId: '',
        radioVal: ''
    };
  },
  computed: {},
  watch: {
    radios: {
        handler(newValue, oldValue) {
            this.radiosFlg = newValue
        },
    }
  },
  created() {},
  mounted() {
    if(this.subject) {
        this.options = JSON.parse(JSON.stringify(this.subject))
    }
    this.radiosFlg = JSON.parse(JSON.stringify(this.radios))
    if(this.subjectId) {
        this.departmentId = JSON.parse(JSON.stringify(this.subjectId))
    }
  },
  methods: {
    liMouseOver(index, item) {
        this.transitionBoxLiIdx = index
        if(item.children) {
            this.hoverList = item.children
        } else {
            this.hoverList = []
        }
    },
    liClick(item) {
        if(!item.children || this.radios) {
            this.$emit("cascaderOptionClick", item);
        }
    },
    cascaderOptionClick(item) {
        this.liClick(item)
    }
  },
};
</script>

<style scoped lang="scss">
    @import "../assets/scss/handle";
    .childComponents {
        width: 200px;
        position: absolute;
        top: -6px;
        right: -200px;
        height: 274px;
        background: #fff;
        border: 1px solid #E4E7ED;
        border-radius: 4px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        box-sizing: border-box;
        margin: 5px 0;
        // box-shadow: 0 2px 12px #dfdfdf;
    }
    .idxSpanspan span{
        padding: 0 !important;
    }
    .child {
        width: 100%;
        max-height: 270px;
        overflow: auto;
    }
    .transitionBoxUl {
        list-style: none;
        padding: 6px 0;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .transitionBoxUl li {
        font-size: 14px;
        padding: 0 20px;
        // position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .liHover {
        background-color: #F5F7FA;
    }
    .liHover .idxspan {
        @include font_color("color");
        font-weight: 700;
    }
    .transitionBoxUl span {
        flex: 1;
        width: 110px;
        width: 20px;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>