调整项目管理的所属部门

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

@@ -0,0 +1,235 @@
+<template>
+    <div class='cascadeSelection'>
+        <!-- 框框 -->
+        <div ref="focusDiv" tabindex="0" :class="`input ${size} ${disabled ? 'inputDisabled' : ''}`"
+            :style="`width: ${width}`" @focus="handleFocus" @blur="handleBlur">
+            <!-- 默认提示文字 -->
+            <span class="placeholderColor" v-if="resultText.length == 0">请选择</span>
+            <!-- 选中数据 -->
+            <div v-if="resultText.length > 0" class="textEllipsisNowrap">
+                <template v-for="(item, index) in resultText[0]">
+                    <TranslationOpenDataText type='departmentName' :openid='item'></TranslationOpenDataText>
+                    <span v-if="index < resultText[0].length - 1" class="textSpan">/</span>
+                </template>
+            </div>
+
+            <i v-if="resultText.length > 0" class="el-icon-circle-close iostu" @click.stop="clearDelete"></i>
+
+            <!-- 级联面板 -->
+            <div class="absoluteWeight" v-if="isFocused" :style="`top: ${sizeTop[size]}`">
+                <el-cascader-panel v-model="modelValue" ref="cascaderPanelRef" :options="options" :props="props"
+                    @change="panelChange">
+                    <template slot-scope="{ node, data }">
+                        <TranslationOpenDataText type='departmentName' :openid='data.label'></TranslationOpenDataText>
+                    </template>
+                </el-cascader-panel>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: '',
+    components: {},
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+        size: {
+            type: String,
+            default: 'default',
+        },
+        width: {
+            type: String,
+            default: '100%',
+        },
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        props: {
+            type: Object,
+            default: () => {
+                return { checkStrictly: true, expandTrigger: 'hover' }
+            }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            isFocused: false,
+            resultText: [],
+            sizeTop: {
+                default: '40px',
+                medium: '36px',
+                small: '32px',
+                mini: '24px'
+            }
+        }
+    },
+    computed: {},
+    watch: {},
+    created() { },
+    mounted() {
+        setTimeout(() => {
+            if ((this.modelValue || []).length > 0) {
+                this.resultText = this.findDepartmentNames(this.options, this.props.multiple ? this.modelValue : [this.modelValue]);
+            }
+        }, 500)
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'getValue'
+    },
+    methods: {
+        panelChange(val) {
+            this.resultText = this.findDepartmentNames(this.options, this.props.multiple ? val : [val]);
+            this.updateModelValue()
+        },
+        findDepartmentNames(data, values) {
+            const findLabels = (valueList) => {
+                return valueList.map(value => {
+                    const findLabel = (data, value) => {
+                        for (let item of data) {
+                            if (item.value === value) {
+                                return item.label;
+                            }
+                            if (item.children) {
+                                const label = findLabel(item.children, value);
+                                if (label) return label;
+                            }
+                        }
+                        return null;
+                    };
+                    return findLabel(data, value);
+                }).filter(label => label !== null);
+            };
+            return values.map(valueList => findLabels(valueList));
+        },
+        handleFocus() {
+            if(this.disabled) {
+                return
+            }
+            this.isFocused = true
+            this.$refs.focusDiv.classList.add('focused');
+        },
+        handleBlur(event) {
+            if(this.disabled) {
+                return
+            }
+            if (this.$refs.focusDiv.contains(event.relatedTarget)) {
+                this.$refs.focusDiv.focus();
+                event.preventDefault();
+                return;
+            }
+            this.isFocused = false
+            this.$refs.focusDiv.classList.remove('focused');
+        },
+        clearDelete() {
+            this.$refs.focusDiv.blur()
+            this.resultText = [];
+            this.$emit('getValue', []);
+            this.$emit('change', []);
+        },
+        updateModelValue() {
+            this.$emit('getValue', this.modelValue);
+            this.$emit('change', this.modelValue);
+        }
+    },
+}
+</script>
+<style scoped lang='scss'>
+.cascadeSelection {
+    position: relative;
+    max-height: 40px;
+
+    .default {
+        height: 40px;
+        line-height: 40px;
+    }
+
+    .medium {
+        height: 36px;
+        line-height: 36px;
+    }
+
+    .small {
+        height: 32px;
+        line-height: 32px;
+    }
+
+    .mini {
+        height: 28px;
+        line-height: 28px;
+    }
+
+    .input {
+        position: relative;
+        font-size: 14px;
+        background-color: #FFF;
+        background-image: none;
+        border-radius: 4px;
+        border: 1px solid #DCDFE6;
+        box-sizing: border-box;
+        color: #606266;
+        display: inline-block;
+        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%;
+    }
+
+    .input:focus {
+        border-color: #409EFF;
+    }
+
+    .placeholderColor {
+        color: #C0C4CC;
+    }
+
+    .absoluteWeight {
+        position: absolute;
+        z-index: 99;
+        background: #fff;
+        left: 0;
+    }
+
+    .textSpan {
+        display: inline-block;
+        padding: 0 3px
+    }
+
+    .textEllipsisNowrap {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .iostu {
+        position: absolute;
+        top: 50%;
+        margin-top: -4px;
+        right: 8px;
+        color: #C0C4CC;
+        transition: All 0.2s ease-in-out;
+    }
+
+    .iostuHover {
+        transform: rotate(-180deg);
+    }
+
+    .inputDisabled {
+        background-color: #f5f7fa !important;
+        border-color: #e4e7ed !important;
+        color: #c0c4cc !important;
+        cursor: not-allowed !important;
+    }
+}
+</style>

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

@@ -276,7 +276,7 @@ export default {
                     }
                 }
             }
-            console.log(this.options, this.subjectId)
+            // console.log(this.options, this.subjectId)
             if(this.multiSelect) { 
                 for(var i in this.options) {
                     for(var j in this.subjectId) {
@@ -288,7 +288,7 @@ export default {
                 }
             }
         }
-        console.log(this.subject, this.subjectId)
+        // console.log(this.subject, this.subjectId)
 
         var thats = this
         var phoneArr = []
@@ -300,7 +300,7 @@ export default {
         }, 500)
         
         thats.fistArrList = phoneArr
-        console.log(thats.fistArrList)
+        // console.log(thats.fistArrList)
         this.dailyListIndex = this.idx
     },
     methods: {
@@ -315,9 +315,9 @@ export default {
                     "selectedDepartmentIds": [],// 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id
                     "selectedUserIds": []// 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id
                         },function(res){
-                            console.log(res)
+                            // console.log(res)
                             if (res.err_msg == "selectEnterpriseContact:ok"){
-                                console.log(res, '数据来源')
+                                // console.log(res, '数据来源')
                                 if(typeof res.result == 'string'){
                                     res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
                                 }
@@ -328,7 +328,7 @@ export default {
                                         var user = selectedUserList[i];
                                         userId = user.id; // 已选的单个成员ID
                                         userName = user.name;// 已选的单个成员名称
-                                        console.log(userId, userName)
+                                        // console.log(userId, userName)
                                 }
                                 for(var s in that.options) {
                                     if(that.options[s].name == userId) {
@@ -349,7 +349,7 @@ export default {
                 other: this.other,
                 name: this.selectName
             }
-            console.log(obj)
+            // console.log(obj)
             this.$emit("selectCal", obj)
         },
         selectCli() {
@@ -400,11 +400,11 @@ export default {
             this.transitionBoxLiIdx = index
         },
         liClick(item, itemIndex) {
-            console.log(item, '进来的')
+            // console.log(item, '进来的')
             let nameId = item.auditorId || item.id
             this.selectName = item.auditorName || item.name
             if(!this.multiSelect) {
-                console.log('我进来了', this.flg)
+                // console.log('我进来了', this.flg)
                 if(this.flgs) {
                     let obj = {
                         id: nameId,
@@ -540,7 +540,7 @@ export default {
                         }
                     })
                     // this.options = arr
-                    console.log('将要赋值')
+                    // console.log('将要赋值')
                     var newArr = arr.length > 0 ? arr : res.data.records
                     this.$set(this, 'options', newArr)
                     this.cursor = res.data.nextCursor

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

@@ -471,13 +471,13 @@
                             </el-select>
                         </div>
                     </el-form-item>
-
                     <el-form-item :label="$t('subordinatedepartments')" :prop="user.companyId == 936 ? 'deptId' : false" :class="title == $t('newproject') && user.companyId == 936 ? 'wpgCssClass' : ''" v-if="user.timeType.projectWithDept">
                         <el-cascader v-model="addForm.deptId" :options="departmentList" :placeholder="$t('defaultText.pleaseChoose')" :disabled="canOnlyModParticipator"
                             :props="{ checkStrictly: true, expandTrigger: 'hover' }" clearable filterable @change="cascaderChange" style="width: 100%"
-                            v-if="user.userNameNeedTranslate != 1">
+                            v-if="user.userNameNeedTranslate != 1"
                         ></el-cascader>
-                        <vueCascader :size="'medium'" :widthStr="'430'" :filterable="true" :clearable="true" :subject="departmentList" :subjectId="addForm.deptId" :radios="true" :distinction="'20'" :disabled="canOnlyModParticipator" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1" ></vueCascader>
+                        <!-- <vueCascader :size="'medium'" :widthStr="'430'" :filterable="true" :clearable="true" :subject="departmentList" :subjectId="addForm.deptId" :radios="true" :distinction="'20'" :disabled="canOnlyModParticipator" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1" ></vueCascader> -->
+                        <vueCascadeSelection v-model="addForm.deptId" :options="departmentList" :props="{ checkStrictly: true, expandTrigger: 'hover' }" :disabled="canOnlyModParticipator" v-if="user.userNameNeedTranslate == 1"></vueCascadeSelection>
                     </el-form-item>
 
                     <!-- 供应商 -->
@@ -509,25 +509,25 @@
                     </el-form-item> -->
                     <el-form-item :label="$t('Allparticipants')" v-show="addForm.isPublic == 0" :class="title == $t('newproject') && user.companyId == 936 ? 'wpgCssClass' : ''">
                         <el-tooltip placement="top" effect="light" v-if="user.userNameNeedTranslate != 1">
-
                             <div slot="content" style="width:780px">{{addForm.userNames}}</div>
                             <el-input  @focus="showChooseMembTree" v-model="addForm.userNames"></el-input>
                         </el-tooltip>
 
                         <el-tooltip placement="top" effect="light" v-if="user.userNameNeedTranslate == 1">
-                            <div slot="content" style="width:780px">
+                            <div slot="content" style="max-width: 780px;max-height: 400px;overflow-y: auto;">
                                 <span v-for="(item, index) in addFormUserNames" :key="index">
-                                    <!-- {{item}} -->
                                     <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
                                     <span v-if="index < addFormUserNames.length - 1">,</span>
                                 </span>
                             </div>
                             <div @click="showChooseMembTree" style="width: 800px;overflow:hidden;white-space:nowrap;height:40px;border: 1px solid #DCDFE6;border-radius: 4px;box-sizing: border-box;padding: 0 10px">
-                                <span v-for="(item, index) in addFormUserNames" :key="index">
-                                    <!-- {{item}} -->
-                                    <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
-                                    <span v-if="index < addFormUserNames.length - 1">,</span>
-                                </span>
+                                <template v-for="(item, index) in addFormUserNames">
+                                    <template v-if="index <= 13">
+                                        <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
+                                        <span v-if="index < addFormUserNames.length - 1">,</span>
+                                        <span v-if="(addFormUserNames || []).length > 13 && index == 13">...</span>
+                                    </template>
+                                </template>
                             </div>
                         </el-tooltip>
                     </el-form-item>
@@ -1759,11 +1759,13 @@ a {
     // 自定义select组件
     import selectCat from "@/components/select.vue"
     import vueCascader from "@/components/cascader.vue"
+    import vueCascadeSelection from "@/components/cascadeSelection.vue"
     export default {
         components:{
             projectgantt,
             selectCat,
             vueCascader,
+            vueCascadeSelection
         },
         data() {
             return {
@@ -4672,7 +4674,7 @@ a {
                         var findUser = list[0];    
                         this.participator.push(findUser);
                     } else {
-                        console.log('未找到用户: '+u);
+                        // console.log('未找到用户: '+u);
                     }
                     
                 })