级联选择器提交

fhKeeper/formulahousekeeper/timesheet/src/components/cascader.vue

@@ -0,0 +1,388 @@
+<template>
+  <div tabindex="0" @blur="selectClihide()" style="display: inline-block;position: relative;">  
+    <div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
+        <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
+            <div :style="'line-height: '+selectHeight+'px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
+                <!-- <ww-open-data type='userName' :openid='selectName'></ww-open-data> -->
+                {{selectName}}
+            </div>
+            <i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
+            <i v-if="moveIon" class="el-icon-circle-close iostu" @click.stop="clearDelete"></i>
+        </div>
+    </div>
+    <transition name="el-zoom-in-top">
+      <div v-show="show" style="position: relative;z-index: 99;">
+        <div class="transitionBox">
+            <ul class="transitionBoxUl">
+                <li :class="transitionBoxLiIdx == index ? 'liHover' : ''" v-for="(item, index) in options" :key="index" @mouseover="liMouseOver(index, item)" @click.stop="liClist(item)"> 
+                    <span :class="item.children ? 'idxspan' : ''" v-if="!radios">{{item.label}}</span>
+                    <span v-if="radios" style="margin-left: -15px">
+                        <el-radio v-model="optionsOId" :label="item.value">
+                            <span class="idxspan" style="margin-left: -10px"> {{item.label}} </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" style="position: absolute;left: 200px;top: 6px">
+                <cascaderOption :subject="item.children" :radios="radios" v-show="transitionBoxLiIdx == index" @cascaderOptionClick="cascaderOptionClick"></cascaderOption>
+            </div>
+        </div>
+
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+// 引入里面的
+import cascaderOption from "@/components/cascaderOption.vue"
+export default {
+    components: {
+        cascaderOption
+    },
+    props: {
+        subject:{
+            type: Array
+        },
+        size: {
+            type: String,
+        },
+        subjectId: {
+            type: [String, Number]
+        },
+        // 是否为单选
+        radios: {
+            type: Boolean,
+            default: false
+        },
+        // 当前页面用到的第几个
+        distinction: {
+            type: String,
+            default: '1',
+        },
+        // 真对填写日报单独处理
+        idx: {
+            type: String
+        },
+        flg: {
+            type: Boolean,
+            default: false, // 默认值，不是填写日报
+        },
+        // 剩下统一索引
+        index: {
+            type: String
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // 是否可清空
+        clearable: {
+            type: Boolean,
+            default: false
+        },
+        // 是否可搜索
+        filterable: {
+            type: Boolean,
+            default: false
+        },
+        // 其他数据
+        other: {
+            type: [String, Number, Boolean],
+            default: false
+        },
+        // 宽度
+        widthStr: {
+            type: String,
+            default: false
+        }
+    },
+    data() {
+        return {
+            selectWidth: '150',
+            selectHeight: '28',
+            show: false, // 下拉框
+            options: [], // 列表数据
+            transitionBoxLiIdx: '-1', // hover 背景色
+            selectName: this.$t('defaultText.pleaseChoose'), // 显示的文字
+            classDiv: false, // 获得焦点样式
+            optionsOId: '', // 选中人的id
+            dailyListObj: null, // 填写日报的数据
+            dailyListIndex: null, // 日报点的索引
+            move: false,
+            moveIon: false,
+            hoverValIdx: '-1', // 鼠标移入的值 
+            hoverList: [],
+            radioVal: ''
+        };
+    },
+    computed: {},
+    watch: {
+        subject: {
+            handler(newValue, oldValue) {
+                console.log(newValue, '看看值')
+                this.options = newValue
+                if(newValue) {
+                    
+                }
+            },
+        },
+        // 日报点的索引, 真对填写的日报
+        idx: {
+            handler(newValue, oldValue) {
+                console.log(newValue, oldValue)
+                this.dailyListIndex = newValue
+            },
+        },
+        subjectId: {
+            handler(newValue, oldValue) {
+                console.log(newValue, oldValue)
+                this.optionsOId = newValue
+                if(this.optionsOId) {
+                    for(let i in this.options) {
+                        if(this.options[i].id == this.optionsOId || this.options[i].auditorId == this.optionsOId) {
+                            this.selectName = this.options[i].name || this.options[i].auditorName
+                        }
+                    }
+                }
+            },
+        },
+        widthStr: {
+            handler(newValue, oldValue) {
+                console.log('卧槽')
+                this.selectWidth = newValue
+            },
+        }
+    },
+    created() {},
+    mounted() {
+        if(this.size == 'mini') {
+            this.selectWidth = '150'
+            this.selectHeight = '28'
+        } else if(this.size == 'small') {
+            this.selectWidth = '191'
+            this.selectHeight = '32'
+        } 
+        if(this.widthStr) {
+            console.log('one')
+            this.selectWidth = this.widthStr
+        }
+        if(this.subject) {
+            this.options = JSON.parse(JSON.stringify(this.subject))
+        }
+        if(this.subjectId) {
+            this.optionsOId = JSON.parse(JSON.stringify(this.subjectId))
+            for(let i in this.options) {
+                if(this.options[i].id == this.optionsOId || this.options[i].auditorId == this.optionsOId) {
+                     this.selectName = this.options[i].name || this.options[i].auditorName
+                }
+            }
+        }
+        console.log(this.subjectId)
+        this.dailyListIndex = this.idx
+        // this.moveIon = JSON.parse(JSON.stringify(this.clearable))
+    },
+    methods: {
+        selectCli() {
+            console.log('我被你触发了')
+            if(!this.disabled) {
+                this.$refs.selectDiv.focus()
+                this.classDiv = !this.classDiv
+                this.show = !this.show
+                this.move = !this.move
+            }
+        },
+        selectClihide() {
+            if(this.classDiv) {
+                this.transitionBoxLiIdx = ''
+                this.show = !this.show
+                this.classDiv = false
+                this.move = false
+            }
+        },
+        liMouseOver(index, item) {
+            this.transitionBoxLiIdx = index
+            if(item.children) {
+                this.hoverList = []
+                this.hoverList = item.children
+                this.$forceUpdate()
+            } else {
+                this.hoverList = []
+            }
+        },
+        // 点击
+        liClist(item) {
+            if(!item.children) {
+                this.selectName = item.label
+                let obj = {
+                    id: item.value,
+                    distinction: this.distinction
+                }
+                this.$emit('vueCasader', obj)
+            }
+            if(this.radios) {
+                this.selectName = item.label
+                let obj = {
+                    id: item.value,
+                    distinction: this.distinction
+                }
+                this.$emit('vueCasader', obj)
+            }
+            this.transitionBoxLiIdx = ''
+            this.show = !this.show
+            this.classDiv = false
+            this.move = false
+        },
+        // 接受子组件传过来的值
+        cascaderOptionClick(item) {
+            this.liClist(item)
+        },
+        moveIonDiv() {
+            console.log(this.selectName)
+            if(this.clearable) {
+                if(this.selectName != this.$t('defaultText.pleaseChoose')) {
+                    this.moveIon = true
+                }
+            }
+        },
+        outIonDiv() {
+            if(this.clearable) {
+                this.moveIon = false
+            }
+        },
+        clearDelete() {
+            this.selectName = this.$t('defaultText.pleaseChoose')
+            let obj = {
+                label: this.$t('defaultText.pleaseChoose'),
+                value: ''
+            }
+            this.show = true
+            this.liClist(obj)
+        }
+    },
+    triggerOption(){
+
+    },
+    choose(item,value){
+      
+    },
+
+};
+</script>
+
+<style scoped lang="scss">
+    .selectDiv {
+        border-color: #409EFF !important;
+    }
+    .disabledTrue {
+        background: #F5F7FA !important;
+        border-radius: 4px;
+        cursor: not-allowed !important;
+        position: relative;
+    }
+    .disabledFalse .select {
+        background: #FFF;
+        border-radius: 4px;
+    }
+    .select {
+        -webkit-appearance: none;
+        // background-color: #FFF;
+        background-image: none;
+        border-radius: 4px;
+        border: 1px solid #DCDFE6;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        color: #606266;
+        display: inline-block;
+        font-size: inherit;
+        height: 40px;
+        line-height: 40px;
+        outline: 0;
+        padding: 0 15px;
+        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+        width: 100%;
+        position: relative;
+        cursor: pointer;
+    }
+    .selecttex {
+        height: 28px;
+        line-height: 28px;
+        text-overflow: ellipsis;
+        font-size: 12px;
+    }
+    .iostu {
+        position: absolute;
+        top: 50%;
+        margin-top: -4px;
+        right: 8px;
+        color: #C0C4CC;
+        transition: All 0.2s ease-in-out;
+    }
+    .iostuHover {
+        transform: rotate(-180deg);
+    }
+    .transitionBox {
+        background: #FFF;
+        position: absolute; 
+        min-width: 200px;
+        border-radius: 2em;
+        border: 1px solid #E4E7ED;
+        border-radius: 4px;
+        background-color: #FFF;
+        box-sizing: border-box;
+        margin: 5px 0;
+        // box-shadow: 0 2px 12px #dfdfdf;
+        max-height: 274px;
+        overflow: auto;
+        z-index: 500 !important;
+    }
+    .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;
+        // color: #409eff !important;
+    }
+    .liHover .idxspan {
+        color: #409eff !important;
+        font-weight: 700;
+    }
+    .transitionBoxUl span {
+        flex: 1;
+        width: 110px;
+        width: 20px;
+        padding: 0 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .selecttexXuan {
+        color: #C0C4CC;;
+    }
+</style>

fhKeeper/formulahousekeeper/timesheet/src/components/cascaderOption.vue

@@ -0,0 +1,172 @@
+<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="liClick(item)"> 
+                <span :class="item.children ? 'idxspan' : ''" v-if="!radios">{{item.label}}</span>
+                <span v-if="radios" style="margin-left: -15px">
+                    <el-radio v-model="departmentId" :label="item.value">
+                        <span class="idxspan" style="margin-left: -10px"> {{item.label}} </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" :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
+    },
+  },
+  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.$emit("cascaderOptionClick", item);
+        }
+        if(this.radios) {
+            this.$emit("cascaderOptionClick", item);
+        }
+    },
+    cascaderOptionClick(item) {
+        this.liClick(item)
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+    .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;
+    }
+    .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;
+        // color: #409eff !important;
+    }
+    .liHover .idxspan {
+        color: #409eff !important;
+        font-weight: 700;
+    }
+    .transitionBoxUl span {
+        flex: 1;
+        width: 110px;
+        width: 20px;
+        padding: 0 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+</style>

fhKeeper/formulahousekeeper/timesheet/src/components/select.vue

@@ -241,8 +241,8 @@ export default {
         cursor: not-allowed !important;
         position: relative;
     }
-    .disabledTrue {
-        background: #FFF;
+    .disabledFalse .select {
+        background: #FFF !important;
         border-radius: 4px;
     }
     .select {

fhKeeper/formulahousekeeper/timesheet/src/views/workReport/list.vue

@@ -4,14 +4,11 @@
         <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
             <el-form :inline="true">
                 <el-form-item :label="$t('lable.department')" style="width: 165px">
-                    <el-cascader v-model="search.departmentIdArray" :placeholder="$t('defaultText.pleaseChoose')" style="width: 125px"
+                    <el-cascader v-if="user.userNameNeedTranslate == 1" v-model="search.departmentIdArray" :placeholder="$t('defaultText.pleaseChoose')" style="width: 125px"
                     :options="option" :props="{ checkStrictly: false,expandTrigger: 'hover' }" :show-all-levels="false" clearable
-                    @change="getList(1)" size="mini">
-                        <template slot-scope="{ data }">
-                            <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='departmentName' :openid='data.label'></ww-open-data></span>
-                            <span v-if="user.userNameNeedTranslate != '1'">{{data.label}}</span>
-                        </template>
-                    </el-cascader>
+                    @change="getList(1)" size="mini"></el-cascader>
+
+                    <vueCascader :size="'mini'" :widthStr="'125'" :clearable="true" :subject="option" :radios="false" :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
                 </el-form-item>
 
                 <el-form-item :label="$t('ren-yuan')" style="width: 210px">
@@ -59,9 +56,7 @@
                     </el-form-item>
 
                     <!-- 调试 -->
-                    <!-- <el-form-item :label="$t('ren-yuan')" style="width: 215px">
-                        <selectCat :size="'mini'" :subject="searchUsersList"/>
-                    </el-form-item> -->
+                    <!-- <cascaderOption></cascaderOption> -->
                 <!-- </div> -->
             </el-form>
         </el-col>
@@ -385,9 +380,15 @@
     // 引入自定义组件
     import selectCat from "@/components/select.vue"
 
+    // 引入自定义级联组件
+    import vueCascader from "@/components/cascader.vue"
+    import cascaderOption from "@/components/cascaderOption.vue"
+
     export default {
         components: {
-            selectCat
+            selectCat,
+            vueCascader,
+            cascaderOption
         },
         data() {
             return {
@@ -548,6 +549,7 @@
                         var list1 = JSON.parse(JSON.stringify(res.data));
                         
                         this.option = this.changeArr(list1);
+                        console.log(this.option, '部门')
                     } else {
                         this.$message({
                             message: res.msg,
@@ -897,6 +899,20 @@
                     this.search.endDate = null
                 }
                 this.getList()
+            },
+            // 自定义部门选择
+            vueCasader(obj) {
+                console.log(obj, '组件传过来的')
+                if(obj.distinction == '1') {
+                    if(obj.id != '') {
+                        let arr = []
+                        arr.push(obj.id)
+                        this.search.departmentIdArray = arr
+                    } else {
+                        this.search.departmentIdArray = []
+                    }
+                    this.getList(1)
+                }
             }
         },
         created() {