FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/approvalProcess/index.vue

<!--审批流程-->
<template>
  <div class="app-container approvalProcess">
    <div class="title-box">
      <p>化学品申购审批流程</p>
      <p class="inquire-button-one" @click="submitForm">提交</p>
    </div>
    <div class="approvalProcess-page scrollbar-box">
      <div class="process-max-box">
        <div class="process-big-box">
          <div class="process-text-box">
            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_splc_fqr.png">
            <p>发起人</p>
          </div>
          <p class="process-name-p">申购人</p>
          <div class="process-img-box">
            <img v-if="dataList[0]" class="process-img-bottom" src="@/assets/ZDimages/medicUniversity-3_1/img_splc_xyb.png">
            <img v-if="!dataList[0]" @click="listAddButton" class="process-add-button-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_splc_tj.png">
          </div>
        </div>
      </div>
      <div class="process-max-box-for" :class="index==dataList.length-1?'process-max-box-for-over':''" v-for="(item,index) in dataList" :key="index">
        <div class="process-big-box">
          <div class="process-text-box">
            <img src="@/assets/ZDimages/medicUniversity-3_1/icon_splc_fqr.png">
            <p>审批人</p>
            <i class="el-icon-close" @click="listDelButton(index)"></i>
          </div>
          <div class="process-name-box" @click="openDialogButton(index)">
            <p class="process-name-p">{{!item.actAudituserInfo[0]?'请选择审批人':(item.actAudituserInfo[0]&&!item.actAudituserInfo[1]?item.actAudituserInfo[0].nickName:(item.actAudituserInfo[1]?'已选择'+item.actAudituserInfo.length+'人':''))}}</p>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="process-img-box">
            <img v-if="index!=dataList.length-1" class="process-img-bottom" src="@/assets/ZDimages/medicUniversity-3_1/img_splc_xyb.png">
            <img v-if="index==dataList.length-1" class="process-img-bottom" src="@/assets/ZDimages/medicUniversity-3_1/img_splc_lcjs.png">
            <img v-if="index==dataList.length-1&&dataList.length<5" @click="listAddButton" class="process-add-button-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_splc_tj.png">
          </div>
          <p class="over-text-one" v-if="index==dataList.length-1">流程结束</p>
          <p class="over-text-two" v-if="index==dataList.length-1">审批不能超过5级</p>
        </div>
      </div>
    </div>
    <el-dialog title="选择人员" :visible.sync="userDialogType" 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="title-list-box scrollbar-box">
              <div class="title-for" v-for="(item,index) in titleList" :key="index" @click="titleClick(index)">
                <span :class="index!=titleList.length-1?'spanColor':''">{{item.label}}</span>
                <span v-if="index!=titleList.length-1" class="el-icon-arrow-right"></span>
              </div>
            </div>
            <!--可滚动数据部分-->
            <div class="list-max-box scrollbar-box">
              <!--部门部分-->
              <div class="dept-box" @click="deptClick(item)"
                   v-for="(item,index) in deptList" :key="item.deptId">
                <img src="@/assets/ZDimages/medicUniversity-3_1/icon-mc.png">
                <p>{{item.label}}</p>
                <img src="@/assets/ZDimages/medicUniversity-3_1/icon-mc-xj.png">
                <p>下级</p>
              </div>
              <!--人员部分-->
              <div class="user-box" v-for="(item,index) in userList" :key="index" @click="addObjButton(item)">
                <img v-if="item.type" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                <img v-if="!item.type" src="@/assets/ZDimages/personnelManagement/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/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 "@/api/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: {
      //提交
      submitForm(){
        let self = this;
        if(!this.dataList[0]){
          this.msgError('至少添加一个审批流程')
          return
        }
        self.$confirm('确认要提交吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          for(let i=0;i<self.dataList.length;i++){
            if(!self.dataList[i].actAudituserInfo[0]){
              self.msgError('第'+(i+1)+'个审批流程未添加人员')
              return
            }
          }
          let list = [];
          for(let i=0;i<self.dataList.length;i++){
            let bigObj = {
              auditType:self.dataList[i].auditType,
              actAudituser:[],
            };
            for(let o=0;o<self.dataList[i].actAudituserInfo.length;o++){
              let obj = {
                auditUserId:self.dataList[i].actAudituserInfo[o].userId,
              };
              bigObj.actAudituser.push(obj);
            }
            list.push(bigObj);
          }
          auditconfig(list).then(response => {
            self.msgSuccess(response.msg);
            self.getConfigList();
          });
        }).then(() => {
        }).catch(() => {});
      },
      //确认
      upDataButton(){
        this.dataList[this.userDialogTypeIndex] = JSON.parse(JSON.stringify(this.userDialogRightList));
        this.userDialogType = false;
      },
      //关闭弹窗
      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);
      },
      //添加流
      listAddButton(){
        let obj = {
          actAudituser:[],
          actAudituserInfo:[],
          auditType:1,
        };
        this.dataList.push(obj);
      },
      //删除流
      listDelButton(index){
        let self = this;
        this.$confirm('是否确认删除该流程?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.dataList.splice(index,1);
        }).then(() => {
        }).catch(() => {});
      },
    }
  }
</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>