|
|
@@ -1,603 +0,0 @@
|
|
|
-<!--审批流程-->
|
|
|
-<template>
|
|
|
- <div class="app-container approvalProcess">
|
|
|
- <el-dialog title="选择人员" :visible.sync="userDialogType" :close-on-click-modal="false" v-if="userDialogType"
|
|
|
- width="900px" append-to-body id="approvalProcess-dialog-box">
|
|
|
- <div class="dialog-max-big-box">
|
|
|
- <div class="dialog-left-max-big-box">
|
|
|
- <p class="title-p">选择:</p>
|
|
|
- <div class="big-box">
|
|
|
- <!--input部分-->
|
|
|
- <div class="input-box">
|
|
|
- <input type="text" placeholder="搜索姓名或工号、身份"
|
|
|
- v-model="queryParamsData.searchValue">
|
|
|
- <p class="el-icon-search" @click="handleQuery"></p>
|
|
|
- </div>
|
|
|
- <!--可滚动数据部分-->
|
|
|
- <div class="list-max-box scrollbar-box">
|
|
|
- <!--人员部分-->
|
|
|
- <div class="user-box" v-for="(item,index) in userList" :key="index" @click="addObjButton(item)">
|
|
|
- <img v-if="item.type" src="@/assets/ZDimages/basicsModules/icon_xzqx_xz.png">
|
|
|
- <img v-if="!item.type" src="@/assets/ZDimages/basicsModules/icon_xzqx_zc.png">
|
|
|
- <p>{{item.nickName}}</p>
|
|
|
- <p>{{item.positionName}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="dialog-right-max-big-box">
|
|
|
- <p class="title-p">已选:</p>
|
|
|
- <div class="big-box scrollbar-box">
|
|
|
- <div class="user-for-box" v-for="(item,index) in userDialogRightList.actAudituserInfo" :key="index">
|
|
|
- <img v-if="item.avatar" :src="item.avatar">
|
|
|
- <img v-if="!item.avatar" src="@/assets/ZDimages/basicsModules/tx_cion.png">
|
|
|
- <p>{{item.nickName}}</p>
|
|
|
- <p class="el-icon-circle-close" @click="delRightUser(index)"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="dialog-bottom-box">
|
|
|
- <div class="pagination-box">
|
|
|
- <pagination :page-sizes="[20, 30, 40, 50]"
|
|
|
- v-show="total>0"
|
|
|
- :total="total"
|
|
|
- :pager-count="5"
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getUserList()"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="radio-box">
|
|
|
- <el-radio-group v-model="userDialogRightList.auditType">
|
|
|
- <el-radio :label="1" style="color:#999;">依次审批</el-radio>
|
|
|
- <el-radio :label="2" style="color:#999;">或签</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <div class="text-box">选择不能超过10人</div>
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <p class="dialog-footer-null-p"></p>
|
|
|
- <el-button @click="offDialog">取 消</el-button>
|
|
|
- <el-button type="primary" @click="upDataButton">确 定</el-button>
|
|
|
- <p class="dialog-footer-null-p"></p>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { getConfigList,treeselect,listUser,auditconfig } from "@/apiDemo/medicUniversity-3_1/index";
|
|
|
- export default {
|
|
|
- name: "index",
|
|
|
- data(){
|
|
|
- return{
|
|
|
- //流程数据
|
|
|
- dataList:[],
|
|
|
- //人员选择页面开关
|
|
|
- userDialogType:false,
|
|
|
- //选中流程的index
|
|
|
- userDialogTypeIndex:null,
|
|
|
- //窗口右侧已选中人员数据
|
|
|
- userDialogRightList:{},
|
|
|
- //面包屑数据
|
|
|
- titleList:[],
|
|
|
- //院系数据
|
|
|
- deptList:[],
|
|
|
- //人员数据
|
|
|
- userList:[
|
|
|
- {name:"柴云龙1",type:true,text:"安全责任人",id:1,},
|
|
|
- {name:"柴云龙2",type:false,text:"安全责任人",id:2,},
|
|
|
- {name:"柴云龙3",type:true,text:"安全责任人",id:3,},
|
|
|
- {name:"柴云龙4",type:false,text:"安全责任人",id:4,},
|
|
|
- {name:"柴云龙5",type:true,text:"安全责任人",id:5,},
|
|
|
- {name:"柴云龙6",type:false,text:"安全责任人",id:6,},
|
|
|
- ],
|
|
|
- //查询数据
|
|
|
- queryParamsData:{
|
|
|
- pageNum:1,
|
|
|
- pageSize:20,
|
|
|
- },
|
|
|
- // 搜索实际发送数据
|
|
|
- queryParams:{
|
|
|
- pageNum:1,
|
|
|
- pageSize:20,
|
|
|
- },
|
|
|
- //数据数量
|
|
|
- total:0,
|
|
|
- deptId:"",
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.getConfigList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //关闭弹窗
|
|
|
- offDialog(){
|
|
|
- this.$set(this,'userDialogType',false);
|
|
|
- this.$set(this.queryParamsData,'searchValue',"");
|
|
|
- this.$set(this.queryParams,'nickName',"");
|
|
|
- this.$set(this,'deptId',"");
|
|
|
- this.$set(this,'userDialogRightList',[]);
|
|
|
- this.$set(this,'userDialogTypeIndex',"");
|
|
|
- },
|
|
|
- // 查询设置
|
|
|
- getConfigList(){
|
|
|
- getConfigList().then(response => {
|
|
|
- this.dataList = response.rows
|
|
|
- });
|
|
|
- },
|
|
|
- //添加勾选人员
|
|
|
- addObjButton(item){
|
|
|
- if(!item.type){
|
|
|
- if(this.userDialogRightList.actAudituserInfo.length<10){
|
|
|
- this.userDialogRightList.actAudituserInfo.push(item);
|
|
|
- this.checkDataProcess();
|
|
|
- }else{
|
|
|
- this.msgError('选择不能超过10人')
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //删除选中人员
|
|
|
- delRightUser(index){
|
|
|
- this.userDialogRightList.actAudituserInfo.splice(index,1);
|
|
|
- this.checkDataProcess();
|
|
|
- },
|
|
|
- // 勾选数据处理
|
|
|
- checkDataProcess(){
|
|
|
- let self = this;
|
|
|
- for(let i=0;i<self.userList.length;i++){
|
|
|
- let num = 0;
|
|
|
- for(let o=0;o<self.userDialogRightList.actAudituserInfo.length;o++){
|
|
|
- if(self.userList[i].userId == self.userDialogRightList.actAudituserInfo[o].userId){
|
|
|
- num++
|
|
|
- }
|
|
|
- }
|
|
|
- self.userList[i].type = num != 0;
|
|
|
- }
|
|
|
- self.$forceUpdate();
|
|
|
- },
|
|
|
- //面包屑点击事件
|
|
|
- titleClick(index){
|
|
|
- let self = this;
|
|
|
- this.getCatalogListOne(this.titleList[index].id);
|
|
|
- this.$set(this.queryParams,'pageNum',1);
|
|
|
- this.$set(this,'deptId',this.titleList[index].id);
|
|
|
- this.getUserList();
|
|
|
- let list = [];
|
|
|
- let data = JSON.parse(JSON.stringify(self.titleList))
|
|
|
- for(let i=index;i>=0;i--){
|
|
|
- list.unshift(data[i]);
|
|
|
- }
|
|
|
- this.$set(this,'titleList',list);
|
|
|
- },
|
|
|
- // 目录点击事件
|
|
|
- deptClick(item){
|
|
|
- this.titleList.push(item);
|
|
|
- this.getCatalogListOne(item.id);
|
|
|
- this.$set(this.queryParams,'pageNum',1);
|
|
|
- this.$set(this,'deptId',item.id);
|
|
|
- this.getUserList();
|
|
|
- },
|
|
|
- // 查询目录
|
|
|
- getCatalogListOne(id){
|
|
|
- treeselect({parentId:id}).then(response => {
|
|
|
- this.deptList = response.data;
|
|
|
- });
|
|
|
- },
|
|
|
- // 查询目录初始化
|
|
|
- getCatalogList(id){
|
|
|
- treeselect({parentId:id}).then(response => {
|
|
|
- this.deptList = response.data[0].children;
|
|
|
- this.$set(this,'titleList',[response.data[0]]);
|
|
|
- });
|
|
|
- },
|
|
|
- // 查询人员列表
|
|
|
- getUserList(){
|
|
|
- this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
|
|
|
- this.queryParamsData.deptId = this.deptId;
|
|
|
- listUser(this.queryParamsData).then(response => {
|
|
|
- this.userList = response.rows;
|
|
|
- this.total = response.total;
|
|
|
- this.checkDataProcess();
|
|
|
- });
|
|
|
- },
|
|
|
- handleQuery() {
|
|
|
- this.$set(this.queryParamsData,'pageNum',1);
|
|
|
- this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
|
|
|
- this.getUserList();
|
|
|
- },
|
|
|
- // 编辑人员页面开启
|
|
|
- openDialogButton(index){
|
|
|
- let self = this;
|
|
|
- this.$set(this.queryParamsData,'searchValue',"");
|
|
|
- this.$set(this.queryParams,'nickName',"");
|
|
|
- this.$set(this,'deptId',"");
|
|
|
- this.getCatalogList("");
|
|
|
- this.getUserList("");
|
|
|
- this.$set(this,'userDialogRightList',JSON.parse(JSON.stringify(this.dataList[index])));
|
|
|
- this.$set(this,'userDialogTypeIndex',index);
|
|
|
- this.$set(this,'userDialogType',true);
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .approvalProcess{
|
|
|
- flex:1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden!important;
|
|
|
- p{
|
|
|
- margin:0;
|
|
|
- padding:0;
|
|
|
- }
|
|
|
- .title-box{
|
|
|
- display: flex;
|
|
|
- height:90px;
|
|
|
- border-bottom: 1px solid #D8D8D8;
|
|
|
- p:nth-child(1){
|
|
|
- flex:1;
|
|
|
- font-size:16px;
|
|
|
- line-height:90px;
|
|
|
- margin-left:18px;
|
|
|
- color:#0045AF;
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- margin:25px 25px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .approvalProcess-page{
|
|
|
- flex:1;
|
|
|
- font-weight:500;
|
|
|
- padding:40px 0;
|
|
|
- .process-max-box{
|
|
|
- width:350px;
|
|
|
- height:215px;
|
|
|
- margin:0 auto;
|
|
|
- .process-big-box{
|
|
|
- width:350px;
|
|
|
- height:130px;
|
|
|
- .process-text-box{
|
|
|
- width:350px;
|
|
|
- height:50px;
|
|
|
- background: #0183fa;
|
|
|
- display: flex;
|
|
|
- img{
|
|
|
- width:24px;
|
|
|
- height:24px;
|
|
|
- margin:13px 8px 13px 20px;
|
|
|
- }
|
|
|
- p{
|
|
|
- flex:1;
|
|
|
- font-size:16px;
|
|
|
- color:#fff;
|
|
|
- line-height:50px;
|
|
|
- }
|
|
|
- }
|
|
|
- .process-name-p{
|
|
|
- width:350px;
|
|
|
- height:80px;
|
|
|
- border:1px solid #e0e0e0;
|
|
|
- line-height:80px;
|
|
|
- font-size:16px;
|
|
|
- padding-left:20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .process-img-box{
|
|
|
- position: relative;
|
|
|
- height:85px;
|
|
|
- .process-img-bottom{
|
|
|
- display: block;
|
|
|
- width:17px;
|
|
|
- height:85px;
|
|
|
- margin:0 auto;
|
|
|
- }
|
|
|
- .process-add-button-img{
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- bottom:36px;
|
|
|
- left:163px;
|
|
|
- width:24px;
|
|
|
- height:24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .process-max-box-for-over{
|
|
|
- height:300px!important;
|
|
|
- }
|
|
|
- .process-max-box-for{
|
|
|
- width:350px;
|
|
|
- height:215px;
|
|
|
- margin:0 auto;
|
|
|
- .process-big-box{
|
|
|
- width:350px;
|
|
|
- height:130px;
|
|
|
- .process-text-box{
|
|
|
- width:350px;
|
|
|
- height:50px;
|
|
|
- background: #FFA50A;
|
|
|
- display: flex;
|
|
|
- img{
|
|
|
- width:24px;
|
|
|
- height:24px;
|
|
|
- margin:13px 8px 13px 20px;
|
|
|
- }
|
|
|
- p{
|
|
|
- flex:1;
|
|
|
- font-size:16px;
|
|
|
- color:#fff;
|
|
|
- line-height:50px;
|
|
|
- }
|
|
|
- i{
|
|
|
- cursor: pointer;
|
|
|
- color:#fff;
|
|
|
- font-size:24px;
|
|
|
- line-height:50px;
|
|
|
- margin:0 18px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .process-name-box{
|
|
|
- display: flex;
|
|
|
- border:1px solid #e0e0e0;
|
|
|
- cursor: pointer;
|
|
|
- .process-name-p{
|
|
|
- width:350px;
|
|
|
- height:80px;
|
|
|
- line-height:80px;
|
|
|
- font-size:16px;
|
|
|
- padding-left:20px;
|
|
|
- }
|
|
|
- .el-icon-arrow-right{
|
|
|
- line-height:80px;
|
|
|
- font-size:24px;
|
|
|
- margin-right:13px;
|
|
|
- color:#999;
|
|
|
- }
|
|
|
- }
|
|
|
- .process-img-box{
|
|
|
- position: relative;
|
|
|
- height:85px;
|
|
|
- .process-img-bottom{
|
|
|
- display: block;
|
|
|
- width:17px;
|
|
|
- height:85px;
|
|
|
- margin:0 auto;
|
|
|
- }
|
|
|
- .process-add-button-img{
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- bottom:36px;
|
|
|
- left:163px;
|
|
|
- width:24px;
|
|
|
- height:24px;
|
|
|
- }
|
|
|
- }
|
|
|
- .over-text-one{
|
|
|
- text-align: center;
|
|
|
- font-size:16px;
|
|
|
- line-height:20px;
|
|
|
- color:#3D3D3D;
|
|
|
- margin:15px 0 10px 0;
|
|
|
- }
|
|
|
- .over-text-two{
|
|
|
- text-align: center;
|
|
|
- font-size:14px;
|
|
|
- line-height:20px;
|
|
|
- color:#999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
- #approvalProcess-dialog-box{
|
|
|
- p{
|
|
|
- margin:0;
|
|
|
- }
|
|
|
- .el-dialog__body{
|
|
|
- padding:0 30px;
|
|
|
- .dialog-max-big-box{
|
|
|
- display: flex;
|
|
|
- .dialog-left-max-big-box{
|
|
|
- flex:1;
|
|
|
- .title-p{
|
|
|
- margin:18px 0 14px 0;
|
|
|
- font-size:16px;
|
|
|
- color:#333;
|
|
|
- }
|
|
|
- .big-box{
|
|
|
- width: 400px;
|
|
|
- height:515px;
|
|
|
- background: #F5F5F5;
|
|
|
- border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
- .input-box{
|
|
|
- width:358px;
|
|
|
- height:40px;
|
|
|
- margin:21px 21px 0;
|
|
|
- display: flex;
|
|
|
- border-radius:6px;
|
|
|
- overflow: hidden;
|
|
|
- input{
|
|
|
- border:none;
|
|
|
- outline:none;
|
|
|
- color:#333;
|
|
|
- height:40px;
|
|
|
- width:300px;
|
|
|
- padding-left:10px;
|
|
|
- }
|
|
|
- input::placeholder{
|
|
|
- color:#CCCCCC;
|
|
|
- }
|
|
|
- p{
|
|
|
- cursor: pointer;
|
|
|
- width:58px;
|
|
|
- line-height:40px;
|
|
|
- font-size:24px;
|
|
|
- background: #fff;
|
|
|
- color:#E0E0E0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-list-box{
|
|
|
- width:400px;
|
|
|
- padding:0 20px;
|
|
|
- height:54px;
|
|
|
- overflow-x: scroll;
|
|
|
- overflow-y: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- .title-for{
|
|
|
- display: inline-block;
|
|
|
- /*display: flex;*/
|
|
|
- .spanColor{
|
|
|
- color:#0045AF;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- line-height:54px;
|
|
|
- font-size:14px;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- display: inline-block;
|
|
|
- width:24px;
|
|
|
- text-align: center;
|
|
|
- line-height:54px;
|
|
|
- color:#333333;
|
|
|
- font-size:14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-max-box{
|
|
|
- height:400px;
|
|
|
- .dept-box:hover{
|
|
|
- background: rgba(0,69,175,0.1);
|
|
|
- }
|
|
|
- .dept-box{
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- img:nth-child(1){
|
|
|
- width:30px;
|
|
|
- height:30px;
|
|
|
- margin:11px 16px 0 23px;
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- flex:1;
|
|
|
- line-height:52px;
|
|
|
- font-size:14px;
|
|
|
- color:#333;
|
|
|
- }
|
|
|
- img:nth-child(3){
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
- margin: 16px 9px;
|
|
|
- }
|
|
|
- p:nth-child(4){
|
|
|
- line-height:52px;
|
|
|
- font-size:14px;
|
|
|
- color:#0045af;
|
|
|
- margin-right:22px;
|
|
|
- }
|
|
|
- }
|
|
|
- .user-box:hover{
|
|
|
- background: rgba(0,69,175,0.1);
|
|
|
- }
|
|
|
- .user-box{
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- img:nth-child(1){
|
|
|
- width:14px;
|
|
|
- height:14px;
|
|
|
- margin:12px 13px 0 28px;
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- line-height:40px;
|
|
|
- color:#333;
|
|
|
- font-size:14px;
|
|
|
- flex:1;
|
|
|
- }
|
|
|
- p:nth-child(3){
|
|
|
- line-height:40px;
|
|
|
- color:#333;
|
|
|
- font-size:14px;
|
|
|
- margin-right:30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog-right-max-big-box{
|
|
|
- flex:1;
|
|
|
- .title-p{
|
|
|
- margin:18px 0 14px 20px;
|
|
|
- font-size:16px;
|
|
|
- color:#333;
|
|
|
- }
|
|
|
- .big-box{
|
|
|
- width: 400px;
|
|
|
- height:515px;
|
|
|
- background: #F5F5F5;
|
|
|
- border-radius: 6px;
|
|
|
- margin-left:20px;
|
|
|
- .user-for-box:hover{
|
|
|
- background: rgba(0,69,175,0.1);
|
|
|
- }
|
|
|
- .user-for-box{
|
|
|
- display: flex;
|
|
|
- img{
|
|
|
- width:40px;
|
|
|
- height:40px;
|
|
|
- margin:10px 23px 0 26px;
|
|
|
- border-radius:50%;
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- flex:1;
|
|
|
- line-height:60px;
|
|
|
- font-size:14px;
|
|
|
- color:#333;
|
|
|
- }
|
|
|
- p:nth-child(3){
|
|
|
- cursor: pointer;
|
|
|
- line-height:60px;
|
|
|
- font-size:24px;
|
|
|
- color:#A2A2A2;
|
|
|
- margin-right:27px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog-bottom-box{
|
|
|
- height:56px;
|
|
|
- display: flex;
|
|
|
- .pagination-box{
|
|
|
- width:400px;
|
|
|
- }
|
|
|
- .radio-box{
|
|
|
- flex:1;
|
|
|
- font-size:14px;
|
|
|
- margin-left:50px;
|
|
|
- margin-top:22px;
|
|
|
- }
|
|
|
- .text-box{
|
|
|
- margin-top:20px;
|
|
|
- font-size:14px;
|
|
|
- color:#999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog-footer{
|
|
|
- display: flex;
|
|
|
- .dialog-footer-null-p{
|
|
|
- flex:1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
dedsudiyu
