gdy_pc_8/src/newPerformance/components/TemplateDetails/ResultInput.vue

<template>
    <div>
        <el-dialog :title="dialogTitle" center :visible.sync="resultInput" width="600px"
            :before-close="handleCloseDialog">
            <div v-if="currentNode">
                <el-form ref="form" label-width="80px" size="small">
                    <el-form-item label="启用">
                        <el-switch v-model="currentNode.enable"></el-switch>
                    </el-form-item>


                    <el-form-item :label="formLabel">
                        <el-radio-group v-model="currentNode.assigneeType" :disabled="!currentNode.enable">
                            <el-radio-button label="leader">管理员</el-radio-button>
                            <el-radio-button label="user">指定人员</el-radio-button>
                            <el-radio-button label="self">被考核人</el-radio-button>
                            <el-radio-button label="post">岗位</el-radio-button>
                            <el-radio-button label="deptLeader">部门</el-radio-button>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item v-if="currentNode.assigneeType === 'leader'">
                        <el-select :key="idGeneral()" v-model="selected_manager_ids" placeholder="请选择管理员"
                            :disabled="!currentNode.enable" filterable style="width: 300px;" @change="changeManagerIds">
                            <el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
                                :value="item.value" style="width: 300px;"></el-option>
                        </el-select>
                        <br>
                        <div class="fontColorC">(<span style="color: red"> * </span>组织架构中，所设置的部门管理员 )</div>
                    </el-form-item>

                    <el-form-item v-if="currentNode.assigneeType === 'user'">
                        <el-select :key="idGeneral()" v-model="selected_employee_ids" placeholder="请选择指定人员" multiple
                            :disabled="!currentNode.enable" filterable style="width: 300px;"
                            @change="changeEmployeeIds">
                            <el-option v-for="item in employeeMap" :key="item.id" :label="item.name" :value="item.id"
                                style="width: 300px;"></el-option>
                        </el-select>
                        <br>
                        <div class="fontColorC">(<span style="color: red"> * </span>组织架构中，所设置的部门管理员 )</div>

                    </el-form-item>

                    <el-form-item v-if="currentNode.assigneeType === 'post'">
                        <el-select :key="idGeneral()" v-model="selected_post_ids" placeholder="请选择岗位" multiple
                            :disabled="!currentNode.enable" filterable style="width: 300px;" @change="changePostIds">
                            <el-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.id"
                                style="width: 300px;"></el-option>
                        </el-select>
                        <br>
                        <div class="fontColorC">(<span style="color: red"> * </span>组织架构中，所设置的部门管理员 )</div>

                    </el-form-item>

                    <el-form-item v-if="currentNode.assigneeType === 'deptLeader'">
                        <el-cascader :key="idGeneral()" ref="deptSelectRef" v-model="selected_dept_ids" size="small"
                            style="width: 300px;" :options="deptList" :props="cascaderProps" placeholder="请选择部门"
                            filterable clearable @change="deptChange" :disabled="!currentNode.enable"></el-cascader>
                        <br>
                        <div class="fontColorC">(<span style="color: red"> * </span>组织架构中，所设置的部门管理员 )</div>
                    </el-form-item>

                    <el-form-item label="多人时">
                        <el-radio-group v-model="currentNode.multipleType" :disabled="!currentNode.enable">
                            <el-radio-button label="or">任一人确认(或签)</el-radio-button>
                            <el-radio-button label="parallel">按顺序确认(会签)</el-radio-button>
                            <el-radio-button label="sequence">同时确认(会签)</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <div
                        style=" width: 100%; height: 50px; display: flex; flex-direction: column; justify-content: space-around; font-size: 14px; color: #999; padding: 0 0 20px 50px; box-sizing: border-box;">
                        <div class="flex-box-ce">
                            <span style="color: red;">*</span><span>会签要求所有审批人一致同意</span>

                        </div>
                        <div class="flex-box-ce">
                            <span style="color: red;">*</span><span>或签只需任一审批人同意即可</span>
                        </div>
                    </div>


                    <!-- <el-form-item label="允许">
                        <el-checkbox-group v-model="currentNode.allows" :disabled="!currentNode.enable">
                            <el-checkbox-button label="transfer">转交</el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item> -->
                </el-form>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
                <el-button @click="handleCloseDialog" size="small">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import EmployeeSelector from '@/components/EmployeeSelector'; // 选择部门组件
// 引入lodash库
import _ from 'lodash';
export default {
    components: {
        EmployeeSelector,
    },
    model: {
        prop: 'resultInput',
        event: 'close-dialog'
    },
    props: {
        resultInput: {
            type: Boolean,
            default: false
        },
        dialogTitle: {
            type: String,
            default: ''
        },
        nodeType: {
            type: String,
            default: ''
        },
        formLabel: {
            type: String,
            default: ''
        },
        templateId: {
            type: String | Number,
            default: ''
        },
        indicatorId: {
            type: String | Number,
            default: ''
        },
        tagIndex: {
            type: String | Number,
            default: 0
        },
        selectNodes: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        ...mapGetters(['user_info'])
    },
    data() {
        return {
            cascaderProps: {
                multiple: true, // 启用多选
                checkStrictly: true, // 父子节点不联动
                emitPath: false, // 选中值只返回当前节点的值
            },
            levelOptions: [
                {
                    value: 1,
                    label: '直接管理员'
                },
                {
                    value: 2,
                    label: '二级管理员'
                },
                {
                    value: 3,
                    label: '三级管理员'
                },
                {
                    value: 4,
                    label: '四级管理员'
                },
                {
                    value: 5,
                    label: '五级管理员'
                },
                {
                    value: 6,
                    label: '六级管理员'
                }
            ],
            deptList: JSON.parse(localStorage.getItem("deptList")), // 部门列表 - 树形结构
            dept_list: JSON.parse(localStorage.getItem("dept_list")), // 部门列表
            employeeMap: this.$getEmployeeMap(), // 员工列表
            postList: JSON.parse(localStorage.getItem("postList")), // 岗位列表
            selected_dept_ids: [], // 选择的部门列表
            selected_manager_ids: '', // 选择的管理员列表
            selected_post_ids: [], // 选择的岗位列表
            selected_employee_ids: [], // 选择的员工列表
            childIndex: 0,
            currentNode: null
        }
    },
    
    watch: {
        'resultInput'(v) {
            if (v) this.initData()
        },

    },
    mounted() {
        this.initData();
    },
    methods: {

        idGeneral() {
            var s = [];
            var hexDigits = "0123456789abcdef";
            for (var i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = "4"; // 代表UUID版本
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // 时钟序列
            s[8] = s[13] = s[18] = s[23] = "-";
            var uuid = s.join("");
            return uuid;
        },

        

        initData() {
            this.selectNodes.forEach(select => {
                // 正在操作的节点
                if (select.type == this.nodeType) this.currentNode = _.cloneDeep(select)
            })
            console.log("操作节点")
            console.log(this.currentNode)
            this.currentNode.enable = false // 默认禁用
            this.selected_manager_ids = 1;
            this.selected_employee_ids = [];
            this.selected_post_ids = [];
            this.selected_dept_ids = [];
            this.selected_employee_ids = this.currentNode.assigneeType === 'user' ? this.currentNode.assigneeIds : [];
            this.selected_post_ids = this.currentNode.assigneeType === 'post' ? this.currentNode.assigneeIds : [];
            this.selected_dept_ids = this.currentNode.assigneeType === 'deptLeader' ? this.currentNode.assigneeIds : [];
        },


        // 选择管理员
        changeManagerIds(v) {
            this.currentNode.leaderLevel = v
        },


        // 选择员工
        changeEmployeeIds(v) {
            if (v && v.length > 0) {
                this.currentNode.assigneeIds = v
            }
        },

        // 选择岗位
        changePostIds(v) {
            if (v && v.length > 0) {
                this.currentNode.assigneeIds = v
            }
        },

        // 选择部门
        deptChange(val) {
            if (val && val.length > 0) {
                // 获取当前选中的节点
                const checkedNodes = this.$refs.deptSelectRef.getCheckedNodes();
                this.selected_dept_ids = checkedNodes.map((node) => node.value);
                this.currentNode.assigneeIds = this.selected_dept_ids
                this.currentNode.assigneeIds = Array.from(new Set(this.currentNode.assigneeIds)); // 去重
            }

        },

       
        handleCloseDialog() {
            this.currentNode = null
            this.selected_manager_ids = 1;
            this.selected_employee_ids = [];
            this.selected_post_ids = [];
            this.selected_dept_ids = [];
            this.$emit('close-dialog', false)
        },
        submitForm() {
            
            // 验证表单数据
            this.currentNode.assigneeIds = []
            // 回显选中的管理者
            if (this.currentNode.assigneeType == 'leader') {
                if (this.selected_manager_ids) this.currentNode.leaderLevel = this.selected_manager_ids
                else return this.$message.error("请选择管理员")
            }

            // 回显选中的被考核人
            if (this.currentNode.assigneeType == 'self') {
                this.currentNode.assigneeIds.push(this.user_info.id);
            }

            // 回显选中的岗位
            if (this.currentNode.assigneeType == 'post') {
                if (this.selected_post_ids && this.selected_post_ids.length > 0)
                    this.selected_post_ids.forEach(postId => {
                        this.currentNode.assigneeIds.push(postId);
                    })
                else return this.$message.error("请选择岗位")
            }

            // 回显选中的指定人员
            if (this.currentNode.assigneeType == 'user') {
                if (this.selected_employee_ids && this.selected_employee_ids.length > 0)
                    this.selected_employee_ids.forEach(employeeId => {
                        this.currentNode.assigneeIds.push(employeeId);
                    })
                else return this.$message.error("请选择指定人员")
            }

            // 回显选中的部门列表
            if (this.currentNode.assigneeType == 'deptLeader') {
                if (this.selected_dept_ids && this.selected_dept_ids.length > 0)
                    this.selected_dept_ids.forEach(dept_id => {
                        this.currentNode.assigneeIds.push(dept_id);
                    })
                else return this.$message.error("请选择部门")
            }

            // 去重
            this.currentNode.assigneeIds = Array.from(new Set(this.currentNode.assigneeIds))

            let nodes = []
            this.selectNodes.forEach(select => {
                // 正在操作的节点
                if (select.type == this.nodeType) {
                    select = this.currentNode
                }
                nodes.push(select)
            })
            let data = {
                indicatorId: this.indicatorId, // 指标ID
                nodes
            }
            this.$emit("onConfirm", data);
            this.handleCloseDialog();
        },
        handleFormData() {

        }
    }
}

</script>

<style lang="scss" scoped>
</style>