manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/components/departmentSelectionPersonnel.vue

<template>
    <el-dialog :title="$t('selectingParticipants')" :visible.sync="participantsVisible" :close-on-click-modal="false"
        customClass="customWidth" width="500px" :before-close="changeVisable">
        <div class="tree" style="height:400px">
            <el-scrollbar style="height:100%">
                <el-input v-if="user.userNameNeedTranslate != 1" :placeholder="$t('keywordfiltering')"
                    v-model="participantsFilterText">
                </el-input>

                <div v-if="user.userNameNeedTranslate == '1'">
                    <el-input :placeholder="$t('qingShuShuRuGuanJianZiGuoLv')" v-model.trim="participantsFilterText"
                        class="input-with-select" @keyup.enter.native="echartDepartment()">
                        <el-button slot="append" icon="el-icon-search" @click="echartDepartment()"></el-button>
                    </el-input>
                </div>

                <el-tree :data="deptMembData" show-checkbox :props="defaultProps" node-key="id" ref="chooseMembTree2"
                    @check-change="onTreeItemChange" :default-checked-keys="alreadyPartArray" highlight-current
                    :filter-node-method="filterNode" v-loading="filterNodeFlag">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span v-if="user.userNameNeedTranslate == '1'">
                            <span v-if="node.data.children">
                                <TranslationOpenDataText type='departmentName' :openid='node.label'>
                                </TranslationOpenDataText>
                            </span>
                            <span v-else>
                                <TranslationOpenDataText type='userName' :openid='node.label'></TranslationOpenDataText>
                            </span>
                        </span>
                        <span v-if="user.userNameNeedTranslate != '1'">
                            {{ node.label }}
                        </span>
                    </span>
                </el-tree>
            </el-scrollbar>
        </div>
        <div>{{ $t('btn.choose') }}&nbsp;{{ chosenMembCount }}&nbsp;{{ $t('other.people') }}</div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="changeVisable()">{{ $t('btn.cancel') }}</el-button>
            <el-button type="primary" @click="submitData()">{{ $t('btn.determine') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            participantsFilterText: '',
            participantsVisible: false,
            filterNodePersonnel: [],
            chosenMembCount: 0,
            alreadyPartArray: [], // 已参与的人员
            filterNodeFlag: false,
            user: JSON.parse(sessionStorage.getItem("user")),
            permissions: JSON.parse(sessionStorage.getItem("permissions")),
            deptMembData: [
                {
                    id: 0,
                    label: this.$t('lable.unassigned'),
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
        }
    },
    computed: {},
    watch: {
        visible(val) {
            console.log('执行')
            this.participantsVisible = val
        },
        participantsFilterText(val) {
            let { userNameNeedTranslate } = JSON.parse(sessionStorage.getItem("user"))
            if (userNameNeedTranslate != 1) {
                this.$refs.chooseMembTree2.filter(val);
            }
            if (!val) {
                this.$refs.chooseMembTree2.filter(val);
            }
        }
    },
    created() { },
    mounted() {
        this.getDepartmentList()
    },
    methods: {
        submitData() {
            let chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
            let chose2 = chosenList.filter(item => item.isUser == 1)
            if((chose2 || []).length == 0) {
                this.$message({
                    message: this.$t('pleaseselectpersonnel'),
                    type: "error"
                });
                return
            }
            this.$refs.chooseMembTree2.setCheckedKeys([]);
            this.$emit("submitParticipant", chose2)
        },
        changeVisable(done) {
            this.$refs.chooseMembTree2.setCheckedKeys([]);
            this.$emit("changeParticipant", false)
            if (done) {
                done()
            }
        },
        // 筛选逻辑
        filterNode(value, data) {
            let { userNameNeedTranslate } = this.user
            if (!value) return true;
            if (userNameNeedTranslate != '1') {
                return data.label.indexOf(value) !== -1;
            } else {
                return this.filterNodePersonnel.some(item => item.includes(data.label))
            }
        },
        // 选中改变
        onTreeItemChange() {
            var chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
            var list = chosenList.filter(item => item.isUser == 1);
            this.chosenMembCount = list.length;
        },
        echartDepartment() {
            if (this.participantsFilterText != '') {
                this.filterNodeFlag = true
                this.http.post("/user/getEmployeeList", {
                    keyword: this.participantsFilterText,
                    cursor: '',
                    departmentId: -1,
                    pageIndex: 1,
                    pageSize: 1000
                },
                    res => {
                        if (res.code == "ok") {
                            this.filterNodePersonnel = res.data.records.map(item => item.name)
                            this.$refs.chooseMembTree2.filter(this.participantsFilterText);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                        this.filterNodeFlag = false
                    },
                    error => {
                        this.filterNodeFlag = false
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            }
        },
        getDepartmentList() {
            this.http.post('/department/listAllMemb', {
            }, res => {
                if (res.code == 'ok') {
                    let list = res.data
                    this.haveUsersList(list)
                    this.deptMembData = JSON.parse(JSON.stringify(list))
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            }, error => {
                this.$message({
                    message: error,
                    type: 'error'
                })
            })
        },
        haveUsersList(list) {
            for (var i in list) {
                if (list[i].children != null) {
                    this.haveUsersList(list[i].children);
                }
                if (list[i].userList != null) {
                    if (list[i].children == null) {
                        list[i].children = [];
                    }
                    list[i].userList.forEach(element => {
                        var obj = { id: element.id, label: element.name, parentId: element.departmentId, isUser: 1 };
                        list[i].children.push(obj);
                    });
                }
            }
        },
    },
}
</script>
<style scoped lang='scss'></style>