<template> <div class="flexOne"> <div :class="{approval_page_layer:showlayer}" @click="closeLayer"> <div :class="{approval_person_set:true,approval_person_set_right:isTransition}" @click.stop> <p class="setTitle">审批人设置</p> <div class="approval_person_layerContent"> <div class="approval_page_title">审批人类别</div> <p style="padding-left: 20px;"> <el-radio-group v-model="approvalType" @change='clearValue'> <el-radio :label="1">主管</el-radio> <el-radio :label="2">指定成员</el-radio> <el-radio :label="3">岗位</el-radio> </el-radio-group> </p> <div class="approval_layer_info" v-if="approvalType==1"> 发起人的 <el-select v-model='zgObj.RoleOrInitiator' @change="changeValue"> <el-option v-for='item in zgList' :label='item.label' :value='item.value' :key='item.value'> </el-option> </el-select> </div> <div class="approval_layer_info" v-if="approvalType==2"> <div class="normalMember"> <ul> <li v-for="item in showMember">{{item.DepartmentName}}</li> <!-- @click="mySetCheckedKeys(item.DepartmentId)"--> </ul> </div> <input type="button" class="normalBtn" @click="getMember(),mySetCheckedKeys(-1)" value="添加成员" /> <div style="margin: 10px 0;" v-if="showMember.length>1"> <el-radio-group v-model="zgObj.AuditWay"> <el-radio :label="2">会签(须所有审批人同意)</el-radio> <el-radio :label="3">或签(一名审批人同意或拒绝即可)</el-radio> </el-radio-group> </div> </div> <div class="approval_layer_info" v-if="approvalType==3"> <div class="normalMember"> <ul> <li v-for="item in showRole">{{item.DepartmentName}}</li> </ul> </div> <input type="button" class="normalBtn" @click="getRole()" value="添加岗位" /> <div style="margin: 10px 0;"> <el-radio-group v-model="zgObj.AuditWay"> <el-radio :label="2">会签(须所有审批人同意)</el-radio> <el-radio :label="3">或签(一名审批人同意或拒绝即可)</el-radio> </el-radio-group> </div> </div> </div> <div class="approval_page_layer_bottom"> <input type="button" class="hollowFixedBtn" value="取消" @click="closeLayer" /> <input type="button" class="normalBtn" v-if='addBtn' value="确定" @click="addNode" /> <input type="button" class="normalBtn" v-if='!addBtn' value="修改节点" @click="saveUpdateNode" /> </div> </div> </div> <input type="button" class="hollowFixedBtn approval_back_btn" value="返回" @click="goback" /> <div class="approval_page_content" v-loading="loading" > <div> <p style="text-align: center; border-bottom:1px solid #f1f1f1; padding: 15px 0 10px 0;font-size: 16px;">{{TemplateTypeName}}流程设置</p> <p style="padding: 10px; font-size: 14px; overflow: hidden;">当审批同时满足以下条件时</p> <p v-if='askListType==1' class="processTimeP" style="overflow: hidden"> <span style="padding: 10px; font-size: 14px; float: left;">请假类型:</span> <el-checkbox-group class='fl' v-model="AskforleaveTypeArr"> <el-checkbox v-for="item in askList" :label="item.Id" :key='item.Id'>{{item.Name}}</el-checkbox> </el-checkbox-group> </p> <p class="processTime"> <span>时长<em v-if="askListType==2">(天)</em><em v-else>(小时)</em></span>: <el-select class='w120' v-model='addMsg.ConditionType'> <el-option label='小于' value='1'></el-option> <el-option label='大于' value='2'></el-option> <el-option label='等于' value='3'></el-option> <el-option label='小于等于' value='4'></el-option> <el-option label='大于等于' value='5'></el-option> <el-option label='介于(两个数之间)' value='6'></el-option> </el-select> <el-input-number v-if="addMsg.ConditionType!=6" class='w80' v-model="addMsg.StartValue" :controls="false" :min="0" :max="1000"></el-input-number> <span v-if="addMsg.ConditionType==6"> <el-input-number class='w80' v-model="addMsg.StartValue" :controls="false" :min="0" :max="1000"></el-input-number> <el-select class='w80' v-model='addMsg.StartType'> <el-option label='<' value='1'></el-option> <el-option label='≤' value='2'></el-option> </el-select> 时长 <el-select class='w80' v-model='addMsg.EndType'> <el-option label='<' value='1'></el-option> <el-option label='≤' value='2'></el-option> </el-select> <el-input-number class='w80' v-model="addMsg.EndValue" :controls="false" :min="0" :max="1000"></el-input-number> </span> </p> </div> <div class="approval_person_content"> <span class="approval_span_type" style="display: inline-block; margin: 10px 0;">审批人</span> <div class="approval_person_list fl"> <div class="approval_process_item" draggable="true" v-for="(item,index) in myAuditList" @click="getItemValue(item,index)"> <span style="position: relative;" @mouseenter="itemIndex=index" @mouseleave="itemIndex='-1'"> <i class="iconfont icon-user11"></i> {{item.AuditDescription}} <b class="bnotice" v-if="item.AuditWay!=1">({{item.AuditWay=="2"?'会签':'或签'}})</b> <em v-if='index==itemIndex' class="iconfont icon-guanbi approval_process_item_delete" @click.stop='deleteItem(item.Sort)'></em> </span> <i class="iconfont icon-jiantouyou"></i> </div> <input type="button" class="hollowFixedBtn" @click="addAppPerson" value="添加" /> </div> </div> <div class="approval_person_content"> <span class="approval_span_type" style="display: inline-block; margin: 10px 0;">抄送人</span> <div class="approval_person_list fl"> <div class="approval_process_item" v-for="(item,index) in myAuditUserList"> <span style="position: relative;" @mouseenter="itemIndex1=index" @mouseleave="itemIndex1='-1'"> <i class="iconfont icon-user11"></i> {{item.EmName}} <em v-if='index==itemIndex1' @click="deleteUser(item.EmployeeId)" class="iconfont icon-guanbi approval_process_item_delete" ></em> </span> </div> <input type="button" class="hollowFixedBtn" value="添加" @click='addAuditUser' /> </div> </div> <div style="margin: 30px 0;"> <input type="button" value="取消" class="hollowFixedBtn" @click="goback" /> <input type="button" value="保存" class="normalBtn" @click="saveApproval" /> </div> </div> <el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible" center> <div class="fl" style="width: 300px; margin: 0 20px;"> <p style="margin: 0 0 10px 0;">选择: <el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> </p> <el-tree class='ApprovalProcessBg' :filter-node-method="filterNode" :data="memberList" show-checkbox ref="tree" :props="defaultProps" :render-after-expand="false" node-key="DepartmentId" @check-change="handleNodeChange"> </el-tree> </div> <div class="fl"> <p style="margin: 0 0 20px 0;">已选:</p> <div class="Approval_yxList"> <li v-for="item in showMember">{{item.DepartmentName}} <i @click="mySetCheckedKeys(item.DepartmentId)" class="el-icon-circle-close showMemberIcon"></i> </li> </div> </div> <div slot="footer" class="dialog-footer"> <button class="hollowFixedBtn" @click="outerVisible = false">取 消</button> <button class="normalBtn" type="primary" @click="outerVisible = false">确定</button> </div> </el-dialog> <el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible1" center> <div class="fl" style="width: 300px; margin: 0 20px;"> <p style="margin: 0 0 10px 0;">选择岗位: <el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText1"> </el-input> </p> <el-tree class='ApprovalProcessBg' :filter-node-method="filterNode1" :data="roleList" ref="treeRole" show-checkbox :props="defaultProps1" @check-change="checkedRole"> </el-tree> </div> <div class="fl"> <p style="margin: 0 0 20px 0;">已选岗位:</p> <div class="Approval_yxList"> <li v-for="item in showRole">{{item.DepartmentName}} <i @click="deleteRole()" class="el-icon-circle-close showMemberIcon"></i> </li> </div> </div> <div slot="footer" class="dialog-footer"> <button class="hollowFixedBtn" @click="outerVisible1= false">取 消</button> <button class="normalBtn" type="primary" @click="outerVisible1 = false">确定</button> </div> </el-dialog> <el-dialog custom-class='w700' :title="dialogTitle" :visible.sync="outerVisible2" center> <div class="fl" style="width: 300px; margin: 0 20px;"> <p style="margin: 0 0 10px 0;">选择抄送人:<el-input class='w200' placeholder="输入关键字进行过滤" v-model="filterText2"> </el-input> </p> <el-tree class='ApprovalProcessBg' :filter-node-method="filterNode2" :data="userList" show-checkbox ref="treeUser" :props="defaultProps2" :render-after-expand="false" node-key="DepartmentId" @check-change="handleNodeChange1"> </el-tree> </div> <div class="fl"> <p style="margin: 0 0 20px 0;">已选:</p> <div class="Approval_yxList"> <li v-for="item in myAuditUserList1">{{item.EmName}} <i @click="deleteUser(item.EmployeeId)" class="el-icon-circle-close showMemberIcon"></i> </li> </div> </div> <div slot="footer" class="dialog-footer"> <button class="hollowFixedBtn" @click="outerVisible2 = false">取 消</button> <button class="normalBtn" type="primary" @click="saveAuditUser">确定</button> </div> </el-dialog> </div> </template> <script> export default { data() { return { filterText:"", filterText1:"", filterText2:"", defaultProps: { children: 'ChildList', label: 'DepartmentName', }, defaultProps1: { children: 'ChildList', label: 'DepartmentName', disabled: "Disabled" }, defaultProps2: { children: 'ChildList', label: 'DepartmentName', }, zgList: [{ value: '1', label: '直接主管' }, { value: '2', label: '第2级主管' }, { value: '3', label: '第3级主管' }, { value: '4', label: '第4级主管' }, { value: '5', label: '第5级主管' }, { value: '6', label: '第6级主管' }, ], askListType: '', askList: [], addBtn: true, loading: true, dialogTitle: '', outerVisible: false, outerVisible1: false, outerVisible2: false, itemIndex: -1, itemIndex1: -1, approvalType: 1, showlayer: false, isTransition: false, updateItem: [], updateItemIndex: -1, //修改节点 TemplateId: '', AskforleaveTypeArr: [], addMsg: { Id: '-1', TemplateId: '', AuditList: [], AuditUserList: [], AskforleaveType: [], DayHour: 1, ConditionType:'1', StartValue: '', StartType: '1', EndValue: '', EndType: '1', Sort: '', }, zgObj: { AuditDescription: '', RoleOrInitiator: '1', AuditType: '', AuditUserList: [], AuditWay: 2, Sort: '', }, tempChosenId: -1, //返回数据 TemplateTypeName:'', myAuditList: [], myAuditUserList: [], myAuditUserList1: [], memberList: [], sysUserKeys: [], userList: [], roleList: [], checkedMember: [], showMember: [], showRole: [], memberSetCheckedKeys: [], memberSetCheckedUserKeys: [], normalMember: [], } }, watch: { filterText(val) { this.$refs.tree.filter(val); }, filterText1(val) { this.$refs.treeRole.filter(val); }, filterText2(val) { this.$refs.treeUser.filter(val); } }, methods: { filterNode(value, data) { if (!value) return true; return data.DepartmentName.indexOf(value) !== -1; }, filterNode1(value, data) { if (!value) return true; return data.DepartmentName.indexOf(value) !== -1; }, filterNode2(value, data) { if (!value) return true; return data.DepartmentName.indexOf(value) !== -1; }, getAppType() { this.apipost('WorkFlow_get_GetAskForLeaveType', { TemplateId: this.TemplateId }, res => { if(res.data.resultCode == 1) { this.loading=false; this.askListType = res.data.data.TemplateType this.TemplateTypeName = res.data.data.TemplateTypeName this.askList = res.data.data.askList } }, err => {}) }, addAppPerson() { this.approvalType=1; this.addBtn = true; this.showLayer(); }, deleteUser(id) { if(this.memberSetCheckedUserKeys.findIndex(item => item === id) != -1) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1) } if(this.myAuditUserList.findIndex(item => item.EmployeeId === id) != -1) { this.myAuditUserList.splice(this.myAuditUserList.findIndex(item => item.EmployeeId === id), 1) } if(this.myAuditUserList1.findIndex(item => item.EmployeeId === id) != -1) { this.myAuditUserList1.splice(this.myAuditUserList1.findIndex(item => item.EmployeeId === id), 1) } }, addAuditUser() { let _arr = this.sysUserKeys.concat(this.memberSetCheckedUserKeys) this.dialogTitle = '选择人员'; this.outerVisible2 = true; let _this = this; this.apipost('WorkFlow_get_GetDepartMentEmployee', {}, res => { if(res.data.resultCode == 1) { this.userList = res.data.data _this.$refs.treeUser.setCheckedKeys(_arr); } }, err => {}) // }, saveAuditUser() { if(this.myAuditUserList1.length <= 10) { this.myAuditUserList = JSON.parse(JSON.stringify(this.myAuditUserList1)) this.outerVisible2 = false } else { this.$message.error('人数不能超过10人') return false; } }, clearValue(value) { if(value == '1') { this.zgObj.RoleOrInitiator = '1' } if(value == '2') { this.showMember = []; this.memberSetCheckedKeys = []; } if(value == '3') { this.showRole = [] this.zgObj.AuditWay=2 } }, getMember() { this.outerVisible = true; this.dialogTitle = '选择人员'; this.apipost('WorkFlow_get_GetDepartMentEmployee', {}, res => { this.memberList = res.data.data }, err => {}) }, getRole() { this.outerVisible1 = true; this.dialogTitle = '选择岗位'; this.apipost('WorkFlow_get_GetDepartMentPost', {}, res => { this.roleList = res.data.data }, err => {}) }, handleNodeChange1(data, checked) { data.IsCheck = checked; if(data.Type == 2 && data.IsCheck) { //是员工且选中 let isExsit = false this.myAuditUserList1.forEach(x => { if(x.EmployeeId == data.DepartmentId) { isExsit = true return false } }) if(!isExsit) { this.myAuditUserList1.push({ EmName: data.DepartmentName, EmployeeId: data.DepartmentId, Sort: '1' }) this.memberSetCheckedUserKeys.push(data.DepartmentId) } } else if(data.Type == 2 && !data.IsCheck) { if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) { this.myAuditUserList1.splice(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.DepartmentId), 1) this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1) if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.ParentId) != -1) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1) } } } if(data.Type != 2 && data.IsCheck) { if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) { this.memberSetCheckedUserKeys.push(data.DepartmentId) } } else if(data.Type == 2 && !data.IsCheck) { if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1) if(this.myAuditUserList1.findIndex(item => item.EmployeeId === data.ParentId) != -1) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1) } } } }, handleNodeChange(data, checked) { data.IsCheck = checked; if(data.Type == 2 && data.IsCheck) { //是员工且选中 let isExsit = false this.showMember.forEach(x => { if(x.DepartmentId == data.DepartmentId) { isExsit = true return false } }) if(!isExsit) { this.showMember.push({ DepartmentName: data.DepartmentName, DepartmentId: data.DepartmentId }) this.memberSetCheckedKeys.push(data.DepartmentId) } } else if(data.Type == 2 && !data.IsCheck) { if(this.showMember.findIndex(item => item.DepartmentId === data.DepartmentId) != -1) { this.showMember.splice(this.showMember.findIndex(item => item.DepartmentId === data.DepartmentId), 1) this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId), 1) if(this.showMember.findIndex(item => item.DepartmentId === data.ParentId) != -1) { this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1) } } } if(data.Type != 2 && data.IsCheck) { if(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId) == -1) { this.memberSetCheckedKeys.push(data.DepartmentId) } } else if(data.Type == 2 && !data.IsCheck) { if(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId) != -1) { this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.DepartmentId), 1) if(this.showMember.findIndex(item => item.DepartmentId === data.ParentId) != -1) { this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === data.ParentId), 1) } } } }, mySetCheckedKeys(id) { if(this.memberSetCheckedKeys.length == 0) return if(id == -1) { this.$refs.tree.setCheckedKeys(this.memberSetCheckedKeys) return } this.showMember.splice(this.showMember.findIndex(item => item.DepartmentId === id), 1) this.memberSetCheckedKeys.splice(this.memberSetCheckedKeys.findIndex(item => item === id), 1) this.$refs.tree.setCheckedKeys(this.memberSetCheckedKeys); }, mySetCheckedUsersKeys() { }, checkedRole(data, checked) { data.IsCheck = checked; if(data.Disabled == false && data.IsCheck) { this.showRole = []; this.showRole.push({ DepartmentName: data.DepartmentName, Id: data.DepartmentId }) } }, deleteItem(sort) { this.myAuditList.splice(this.myAuditList.findIndex(item => item.Sort === sort), 1) }, getItemValue(obj, index) { this.addBtn = false; this.updateItemIndex = index; this.updateItem = obj; this.showLayer(); this.approvalType = obj.AuditType; if(obj.AuditType == 1) { this.zgObj.RoleOrInitiator = obj.RoleOrInitiator.toString(); } if(obj.AuditType == 2) { this.showMember = []; this.memberSetCheckedKeys = []; this.zgObj.AuditWay = obj.AuditWay; obj.AuditUserList.forEach((item, index) => { this.showMember.push({ DepartmentName: item.EmName, DepartmentId: item.EmployeeId }) this.memberSetCheckedKeys.push(item.EmployeeId) }) } if(obj.AuditType == 3) { this.zgObj.AuditWay = obj.AuditWay; this.showRole = []; this.showRole.push({ DepartmentName: obj.AuditDescription }) } }, saveUpdateNode() { let zg = {} if(this.approvalType == 1) { zg.AuditType = 1; zg.AuditWay = 1; zg.AuditUserList = null, zg.Sort = this.myAuditList.length + 1; zg.RoleOrInitiator = this.zgObj.RoleOrInitiator let obj = {} if(this.tempChosenId != -1) { obj = this.zgList.find((item) => { return item.value === this.tempChosenId; }) zg.AuditDescription = obj.label } else { zg.AuditDescription = '直接主管' } this.myAuditList[this.updateItemIndex] = zg; } if(this.approvalType == 2) { //指定成员 let Au = this.showMember; let Auu = []; Au.forEach((item, index) => { Auu.push({ EmployeeId: item.DepartmentId, EmName: item.DepartmentName, Sort: index }) }) if(Auu.length==1){ zg.AuditWay = 1 zg.AuditDescription = Auu[0].EmName }else if(Auu.length>1){ zg.AuditWay = this.zgObj.AuditWay; zg.AuditDescription = '指定' + this.showMember.length + '人' } zg.AuditType = 2; zg.RoleOrInitiator = '-1'; zg.Sort = this.myAuditList.length + 1; zg.AuditUserList = Auu; if(Auu.length == 0) { this.$message.error("成员不能为空") return } else if(Auu.length > 10) { this.$message.error("人数不能超过10人!") return } this.myAuditList[this.updateItemIndex] = zg; } if(this.approvalType == 3) { //岗位 zg.AuditType = 3; zg.AuditWay = this.zgObj.AuditWay; zg.Sort = this.myAuditList.length + 1; zg.AuditUserList = ''; if(this.showRole.length == 0) { this.$message.error("请选择岗位") return } else { zg.RoleOrInitiator = this.showRole[0].Id; zg.AuditDescription = this.showRole[0].DepartmentName; } this.myAuditList[this.updateItemIndex] = zg; } this.closeLayer() }, deleteRole() { this.showRole = []; }, changeValue(value) { this.tempChosenId = value }, addNode() { //data>>AuditList>>AuditType 核人类型 1主管(指定一级) 2 指定成员 3角色 let zg = {} if(this.approvalType == 1) //主管 { zg.AuditType = 1; zg.AuditWay = 1; zg.AuditUserList = null, zg.Sort = this.myAuditList.length + 1; zg.RoleOrInitiator = this.zgObj.RoleOrInitiator let obj = {} if(this.tempChosenId != -1) { obj = this.zgList.find((item) => { return item.value === this.tempChosenId; }) zg.AuditDescription = obj.label } else { zg.AuditDescription = '直接主管' } this.myAuditList.push(zg); } if(this.approvalType == 2) { //指定成员 let Au = this.showMember; let Auu = []; Au.forEach((item, index) => { Auu.push({ EmployeeId: item.DepartmentId, EmName: item.DepartmentName, Sort: index }) }) if(Auu.length==1){ zg.AuditWay = 1 zg.AuditDescription = Auu[0].EmName }else if(Auu.length>1){ zg.AuditWay = this.zgObj.AuditWay; zg.AuditDescription = '指定' + this.showMember.length + '人' } zg.AuditType = 2; zg.RoleOrInitiator = '-1'; zg.Sort = this.myAuditList.length + 1; zg.AuditUserList = Auu; if(Auu.length == 0) { this.$message.error("成员不能为空") return } else if(Auu.length > 10) { this.$message.error("人数不能超过10人!") return } this.myAuditList.push(zg); } if(this.approvalType == 3) { //岗位 zg.AuditType = 3; zg.AuditWay = this.zgObj.AuditWay; zg.Sort = this.myAuditList.length + 1; zg.AuditUserList = ''; if(this.showRole.length == 0) { this.$message.error("请选择岗位") return } else { zg.RoleOrInitiator = this.showRole[0].Id; zg.AuditDescription = this.showRole[0].DepartmentName; } this.myAuditList.push(zg); } this.closeLayer() }, showLayer() { this.showlayer = true; this.isTransition = true; }, closeLayer() { let _this = this; setTimeout(function() { _this.showlayer = false; }, 300) this.isTransition = false; }, saveApproval() { if(this.askListType==1) { if(this.AskforleaveTypeArr.length == 0) { this.$message.error("请选择请假类型!") return } } if(this.addMsg.ConditionType!=6&&this.addMsg.StartValue==''){ this.$message.error("请输入时长!") return } if(this.addMsg.ConditionType==6) { if(this.addMsg.StartValue==''||this.addMsg.EndValue==''){ this.$message.error("请输入时长!") return } } this.addMsg.AuditList = this.myAuditList; this.addMsg.AuditUserList = this.myAuditUserList; this.ConditionSortList = [], this.addMsg.AskforleaveType = '[' + this.AskforleaveTypeArr.toString() + ']' this.loading = true; this.apipost('WorkFlow_post_SetOtherCondition', this.addMsg, res => { if(res.data.resultCode == 1) { this.loading = false; this.$message.success("操作成功!") this.goback() }else{ this.$message.success(res.data.message) } }, err => {}) }, goback() { history.back(-1) } }, mounted() { this.TemplateId = this.addMsg.TemplateId = this.$route.query.id this.getAppType() } } </script> <style> .processTimeP .el-checkbox+.el-checkbox { margin-left: 10px; margin-top: 10px; } .processTime { margin: 10px 0; font-size: 14px; padding-left: 10px; } .processTime .el-input { height: 38px; } .processTime em { font-style: normal; } .processTime .el-input .el-input__inner { border-radius: 4px!important; } .showMemberIcon { float: right; font-size: 20px; margin: 10px 20px 0 0; color: #999; cursor: pointer; } .normalMember { margin: 10px 0; width: 700px; max-height: 500px; overflow: auto } .normalMember li { display: inline-block; margin: 10px; padding: 5px 10px; background: #f8f8f8; border-radius: 4px; text-align: center; font-size: 14px; color: #333; } .approval_layer_info { padding: 20px 0 0 30px; } .ApprovalProcessBg { background: #f8f8f8; max-height: 400px; overflow-y: auto; } .Approval_yxList { width: 300px; background: #f8f8f8; min-height: 400px; max-height: 400px; overflow-y: auto; } .Approval_yxList li { line-height: 40px; text-indent: 15px; border-bottom: 1px dotted #eee; } .approval_page_content i { color: #999!important; } .approval_page_layer_bottom { position: absolute; bottom: 20px; padding-left: 20px; } .approval_span_type { float: left; width: 120px; margin-bottom: 10px; } .approval_process_item_delete { position: absolute; right: 2px; top: -11px; font-size: 5px; } .approval_process_item { display: inline-block; margin: 10px 5px 10px 0; cursor: pointer; } .approval_process_item b.bnotice { color: #E95252; } .approval_process_item>span { padding: 0 10px; min-width: 100px; height: 40px; line-height: 40px; text-align: center; font-size: 12px; background: #f8f8f8; border-radius: 4px; display: inline-block; } .approval_page_layer { position: fixed; width: 100%; left: 0; top: 0; z-index: 99; height: 100%; background: rgba(0, 0, 0, .2); } .approval_page_title { height: 14px; line-height: 14px; padding-left: 15px; border-left: 3px solid #E95252; margin: 20px 0 20px 0; } .approval_back_btn { margin: 20px 0; } .approval_page_content { width: 680px; min-height: 480px; overflow: hidden; padding: 0 20px; background: #fff; border-radius: 4px; } .approval_person_content { padding: 0 30px; overflow: hidden; margin-bottom: 30px; } .approval_person_content>span { font-size: 12px; color: #666; margin-right: 30px; } .approval_person_list { float: left; width: 550px; max-height: 400px; overflow: auto; } .approval_person_set { width: 800px; height: 100%; transition: right .3s; background: #fff; position: absolute; top: 0; right: -800px; box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1) } .approval_person_set_right { right: 0; } .approval_person_set .setTitle { height: 48px; line-height: 48px; background: #EDEEF0; font-size: 16px; color: #333; text-indent: 20px; } .approval_person_layerContent { padding-left: 20px; overflow: hidden; } </style>