manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/workflow/report.vue

<template>
    <section >
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item label="审批流程设置">
                </el-form-item>
            </el-form>
        </el-col>
        <p style="padding-top:80px;margin: 0 0 10px 10px;color:#666;">工时审批流程</p>
        <div>
        <el-col :span="6" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-left:15px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" accordion></el-tree>
            </div>
            </el-scrollbar>
        </el-col>
        <el-col :span="18" >
            <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-right:20px;" >
            <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                <div style="padding:5px;color:#333;" v-if="depData != null && depData.children == null">设置 &lt;<span style="color:#20a0ff;">{{depData.label}}&gt;</span> 工时审批流程</div>
                <div style="padding:5px;" v-if="depData == null || depData.children != null">请选择最末级部门</div>
                <div style="width:100%;margin:0 auto;text-align: center; margin-top:50px;" v-if="depData != null && depData.children == null">
                    <span>员工填报</span>
                    <icon class="iconfont firerock-iconright"></icon>
                    <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(0)"></icon>
                    <icon class="iconfont firerock-iconright"></icon>
                    <span v-for="(item, index) in dataArray" :key="item.seq" >
                        
                        <el-button type="primary" v-if="item.type == 0" @click="editNodeDialog(index, item)">{{item.auditDeptName}}</el-button>
                        <el-button type="primary" v-if="item.type == 1" @click="editNodeDialog(index, item)">项目负责人</el-button>
                        <icon class="iconfont firerock-iconright"></icon>
                        <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(index+1)"></icon>
                        <icon class="iconfont firerock-iconright"></icon>
                    </span>

                    <!--结束点 -->
                    <icon class="iconfont firerock-iconApp_New_Line" style="color:#20A0FF;"></icon>
                    审批完成
                </div>

                <div style="width:100%;margin:0 auto;margin-bottom:30px;position: absolute;bottom: 0px;text-align: center; ">
                    <el-button type="primary" @click="submitInsert" :loading="addLoading">保存</el-button>
                </div>
            </div>
            </el-scrollbar>
            
        </el-col>
        </div>
        
        <!--部门选择列表 -->
        <el-dialog  title="请选择审批部门" v-if="dialogVisible" :visible.sync="dialogVisible"  width="400px">
              <el-form label-width="80px">
              <el-form-item label="选择部门" >
                  <el-cascader ref="deptCascader"  v-model="curDeptId" placeholder="请选择部门" style="width: 100%" @change="chooseDept"
                    :options="option" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
              </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="default" @click="deleteNode" v-if="!isAdd" style="float:left;">删除</el-button>
                <el-button type="primary" @click="addNode" >确定</el-button>
            </div>
        </el-dialog>

        <!--管理员设置 -->
        <el-dialog  title="请选择审批管理员" v-if="userDialogVisible" :visible.sync="userDialogVisible"  width="400px">
              <el-form label-width="100px">
              <el-form-item label="指定管理员" >
                  <el-select v-model="auditManagerId" >
                      <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
              </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="setAuditUser" >确定</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import util from "../../common/js/util";

    export default {
        data() {
            return {
                data: [
                ],
                option: [],
                depData:null,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                userDialogVisible: false,
                auditManagerId:null,
                isAdd: false,
                dataArray:[],
                curDeptId:null,
                curUserId: null,
                index:0,
                roleArray:[
                {label:"项目管理员",value:5},
                {label:"部门主管",value:6},
                {label:"人事管理员",value:4},
                ],
                dialogVisible:false,
                editNode:{},
                user: JSON.parse(sessionStorage.getItem("user")),
                userList:[],
                sysAuditUSer:{}
            };
        },
        methods: {
            setAuditUser() {
                this.http.post('/audit-workflow-time-setting/setAuditSysUser',{userId: this.auditManagerId},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.sysAuditUSer = res.data;
                            this.userDialogVisible = false;
                            this.$message({
                                message: '设置成功',
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },
            showUserDialog() {
                this.userDialogVisible = true;
                this.auditManagerId = this.sysAuditUSer.id;

            },
            getAuditSysUser() {
                this.http.post('/audit-workflow-time-setting/getAuditSysUser',{},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.sysAuditUSer = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },
            // 获取部门列表
            getDepartment() {
                this.http.post( this.port.manage.depList, {},
                res => {
                    if (res.code == "ok") {
                        var list = res.data , list1 = JSON.parse(JSON.stringify(res.data));
                        this.data = list;
                        this.option = this.changeArr(list1);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 修改数组
            changeArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    if(arr[i].id != -1 && arr[i].id != 0) {
                        if (arr[i].children != null && arr[i].children.length>0) {
                            arr[i].children = this.changeArr(arr[i].children);
                        }
                        arr[i].id && (arr[i].value = arr[i].id);
                        delete arr[i].id;
                    }
                }
                for(var i in arr) {
                    if(arr[i].id == -1 || arr[i].id == 0) {
                        arr.splice(i,1)
                    }    
                }
                return arr;
            },

            // 部门列表点击
            handleNodeClick(data) {
                if(this.depData == null || data.id != this.depData.id) {
                    this.depData = data;
                    console.log(this.depData);
                    if (this.depData.children == null) {
                        this.getSettings();
                    }
                }
            },

            deleteNode() {
              this.dialogVisible = false;
              this.dataArray.splice(this.index, 1);
            },

            addNode() {
              this.dialogVisible = false;
              if (this.curDeptId == null) return;
              var node = this.$refs.deptCascader.getCheckedNodes()[0];
              
              if (this.isAdd) {
                var node = {auditDeptId: node.value, auditDeptName: node.label, type:0};
                this.dataArray.splice(this.index, 0, node);
                console.log(this.dataArray);
              } else {
                //编辑
                this.dataArray[this.index].auditDeptId = node.value;
                this.dataArray[this.index].auditDeptName = node.label;
              }
            },
            editNodeDialog(index, item) {
                this.isAdd = false;
                this.index = index;
                this.curUserId = item.userId;
                this.dialogVisible = true;
                this.curDeptId = item.deptId;
            },
            showNodeDialog(index) {
              this.isAdd = true;
              this.index = index;
              this.curDeptId = null;
              this.curUserId = null;
              this.dialogVisible = true;
            },
            
            submitInsert() {
                this.http.post('/audit-workflow-time-setting/add',{json:JSON.stringify(this.dataArray), deptId: this.depData.id},
                            res => {
                                this.listLoading = false;
                                if (res.code == "ok") {
                                    this.$message({
                                        message: '保存成功',
                                        type: "success"
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            error => {
                                this.listLoading = false;
                                this.$message({
                                    message: error,
                                    type: "error"
                                });
                                }
                            );
            },

            // 获取本公司的工时日报审批流程设置
            getSettings() {
                this.http.post('/audit-workflow-time-setting/get',{deptId: this.depData.id},
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.dataArray = res.data;
                            console.log(this.data);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },

        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.getDepartment();

        }
    };
</script>

<style lang="scss" scoped>
.addNode {
  cursor:pointer;
}
.addNode:hover {
  color:#20a0ff;
}

.panel {
    padding:30px 15px ;box-shadow: 0 2px 4px rgba(3, 3, 3, 0.12), 0 0 6px rgba(0, 0, 0, .04);
    
}
.sample {
    margin-top:30px;
    color: #999;
}
.tip {
    margin-left:10px; color:gray;
    
}
</style>