csc-szls-vue/shanXiPlatform/src/views/systemManagement/userManagement/approverManagement/index.vue

<template>
    <div class="container  treebox">
        <el-tree id="mainLeft" class="filter-tree" :data="treeData" :props="defaultProps" @node-click="handTreeClick" :highlight-current="true" node-key="depotCode" default-expand-all ref="userManageTree" :expand-on-click-node="false" :filter-node-method="filterNode"></el-tree>
        <div id="mainRight" v-if=" this.dhierarchy  != 1">
            <div class="select">
                <el-form>
                    <el-form-item label="选择具体的审批流程">
                        <el-select v-model="type" @change="headChange()">
                            <el-option v-for="item in process" :key="item.type" :label="item.label" :value="item.type" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ background: '#f8f8f8' }">
                    <el-table-column label="工作项" prop="title" align="center" />
                    <el-table-column label="处理角色" align="center" prop="content">
                        <template slot-scope="scope">
                            <div v-if="scope.row.content == 0">保管员</div>
                            <!-- <div v-else>{{scope.row}}</div> -->
                            <el-select v-else v-model="scope.row.content" placeholder="请选择审批人">
                                <el-option v-for="item in scope.row.approverSelect" :key="item.uId" :label="item.personnelName" :value="item.uId" />
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="btns">
                <el-button type="savebtn" @click="btnSave()" :loading="loading">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
// import {tableHeaderColor} from "@/utils/tableHeaderColor"
import { getUser } from "@/utils/auth"
import {
    roleList,
    approverSubmit,
    checkList
} from "@/api/system/userManagement/approver"
import { findbyTreeData } from "@/api/branchoff/index.js"
export default {
    name: "ApproverManagement",
    data() {
        return {
          dhierarchy:'',
            defaultProps: {
                children: "children",
                label: "depotName",
                value: "depotCode"
            },
            treetotal: [],
            treeData: [],
            //进度条
            loading: false,
            //存储用户信息
            userInfo: {},
            //库id
            depotId: 1,
            roleArr: [],
            //33--主管科长   35---分管副总经理   34---总经理  37--分公司主管
            //角色id
            rolesId: "33,34,35,37",
            //初始化审批人下拉选
            approverSelect: [],
            // 表格数据初始化
            tableData: [],
            // 头部下拉选的值
            type: "tf",
            loading: false,
            // 流程下拉选
            process: [
                {
                    label: "机械通风",
                    type: "tf"
                },
                {
                    label: "熏蒸计划",
                    type: "xzjh",
                },
                {
                    label: "熏蒸散气",
                    type: "xzsq",
                },
                {
                    label: "药剂采购",
                    type: "yjcg"
                },
                {
                    label: "药剂领用",
                    type: "yjly"
                },
                {
                  label: "设备采购",
                  type: "sbcg",
                },
                {
                  label: "设备领用",
                  type: "sbly",
                },
                  {
                  label: "设备归还",
                  type: "sbgh",
                },
                 {
                  label: "设备维修",
                  type: "sbwx",
                },
                {
                  label: "设备报废",
                  type: "sbbf",
                },
                {
                  label: "设施维修计划",
                  type: "sswxjh",
                },
                {
                  label: "设施维修预算",
                  type: "sswxys",
                },
            ],

            // 机械通风数据
            meVentilation: [
                {
                    step: "1",
                    form: "container",
                    title: "制定通风方案",
                    content: 0
                },
                {
                    step: "2",

                    title: "主管科长审批",
                    content: null,
                    approverSelect: []
                },
                {
                    step: "3",

                    title: "分管副总经理审批",
                    content: null,
                    approverSelect: []
                },
                {
                    step: "4",

                    title: "通风方案实施",
                    content: 0
                }
            ],
            // 熏蒸数据

            fumigation: [
                {
                    step: "1",
                    type: "container",
                    title: "制定熏蒸计划",
                    content: "保管员"
                },
                {
                    step: "2",
                    type: "select",
                    title: "熏蒸计划主管科长审批",
                    content: ""
                },
                {
                    step: "3",
                    type: "select",
                    title: "熏蒸计划分管副总经理审批",
                    content: ""
                },
                {
                    step: "4",
                    type: "container",
                    title: "熏蒸计划总经理审批",
                    content: "总经理（刘亮）"
                },
                {
                    step: "5",
                    type: "select",
                    title: "熏蒸计划分公司主管处室审批",
                    content: ""
                },

                {
                    step: "6",
                    type: "container",
                    title: "熏蒸计划报备与实施",
                    content: "保管员"
                },
            ],
            fumigation1: [
                {
                    step: "7",
                    type: "container",
                    title: "提交散气作业申请",
                    content: "保管员"
                },
                {
                    step: "8",
                    type: "select",
                    title: "散气作业主管科长审批",
                    content: ""
                },
                {
                    step: "9",
                    type: "select",
                    title: "散气作业分管副总经理",
                    content: ""
                }
            ],

            //  药剂采购
            drugPurchase: [
                {
                    step: "1",
                    content: 0,
                    title: "采购申请提交"
                },
                {
                    step: "2",

                    title: "主管科长审批",
                    content: null
                },
                {
                    step: "3",

                    title: "分管副总经理审批",
                    content: null
                },
                {
                    step: "4",

                    title: "总经理审批",
                    content: null
                },
                {
                    step: "5",

                    title: " 分公司主管处室审批",
                    content: null
                }
            ],

            // 药剂领用

            drugCollect: [
                {
                    step: "1",

                    title: "填写药品领用单",
                    content: 0
                },
                {
                    step: "2",

                    title: "主管科长审批",
                    content: null
                },
                {
                    step: "3",

                    title: "分管副总经理审批",
                    content: null
                },
                {
                    step: "4",

                    title: "药剂领用",
                    content: 0
                }
            ],

            // 设备采购
            devicePurchase: [
                {
                    step: "1",
                    type: "container",
                    title: "制定采购计划",
                    content: "设备设施保管员"
                },
                {
                    step: "2",
                    type: "select",
                    title: "主管科长审批",
                    content: ""
                },
                {
                    step: "3",
                    type: "select",
                    title: "分管副总经理审批",
                    content: ""
                },
                {
                    step: "4",
                    type: "container",
                    title: "总经理审批",
                    content: "总经理（张立）"
                },

                {
                    step: "5",
                    type: "select",
                    title: "分公司审批",
                    content: ""
                },

                {
                    step: "6",
                    type: "container",
                    title: "采购计划执行",
                    content: "设备设施保管员"
                }
            ],

            // 设备领用
            deviceCollect: [
                {
                    step: "1",
                    type: "container",
                    title: "制定领用申请",
                    content: ""
                },
                {
                    step: "2",
                    type: "select",
                    title: "主管科长审批",
                    content: ""
                }
            ],


            // 设备归还
            devicetReturn: [
                {
                    step: "1",
                    type: "container",
                    title: "制定资产转移申请",
                    content: ""
                },
                {
                    step: "2",
                    type: "select",
                    title: "主管科长审批",
                    content: ""
                },
                 {
                    step: "3",
                    type: "select",
                    title: "分管副总经理审批",
                    content: ""
                }
            ],

            // 设备维修
            deviceRepair: [
                {
                    step: "1",
                    type: "container",
                    title: "制定维修计划",
                    content: "设备设施保管员"
                },
                {
                    step: "2",
                    type: "select",
                    title: "主管科长审核",
                     
                    content: ""
                },
                {
                    step: "3",
                    type: "select",
                    title: "分管副总经理审核",
                    content: ""
                },
                {
                    step: "4",
                    type: "container",
                    title: "总经理审批",
                    content: "总经理（张立）"
                },

                {
                    step: "5",
                    type: "select",
                    title: "分公司审批",
                    content: ""
                },

                {
                    step: "6",
                    type: "container",
                    title: "维修计划执行",
                    content: "设备设施保管员"
                }
            ],

            // 设备报废
            deviceScrap: [
                {
                    step: "1",
                    type: "container",
                    title: "制定报废计划",
                    content: "设备设施保管员"
                },
                {
                    step: "2",
                    type: "select",
                    title: "主管科长审核",
                    content: ""
                },
                {
                    step: "3",
                    type: "select",
                    title: "分管副总经理审核",
                    content: ""
                },
                {
                    step: "4",
                    type: "container",
                    title: "总经理审批",
                    content: "总经理（张立）"
                },

                {
                    step: "5",
                    type: "select",
                    title: "分公司审批",
                    content: ""
                },

                {
                    step: "6",
                    type: "container",
                    title: "报废计划执行",
                    content: "设备设施保管员"
                }
            ],

            // 设备维修改造
            deviceRepairReform: [
                {
                    step: "1",
                    type: "container",
                    title: "制定维修计划",
                    content: "设备设施保管员"
                },
                {
                    step: "2",
                    type: "select",
                    title: "维修计划主管科长审核",
                    content: ""
                },
                {
                    step: "3",
                    type: "select",
                    title: " 维修计划分管副总经理审核",
                    content: ""
                },
                {
                    step: "4",
                    type: "container",
                    title: "维修计划总经理审批",
                    content: "总经理（张立）"
                },

                {
                    step: "5",
                    type: "select",
                    title: "维修计划分公司审批",
                    content: ""
                },

                {
                    step: "6",
                    type: "container",
                    title: "制定维修预算",
                    content: "设备设施保管员"
                },

                {
                    step: "7",
                    type: "select",
                    title: "维修预算主管科长审核",
                    content: ""
                },

                {
                    step: "8",
                    type: "select",
                    title: "维修预算分管副总经理审核",
                    content: ""
                },

                {
                    step: "9",
                    type: "container",
                    title: "维修预算总经理审批",
                    content: "总经理（张立）"
                },

                {
                    step: "10",
                    type: "select",
                    title: "维修预算分公司审批",
                    content: ""
                },

                {
                    step: "11",
                    type: "container",
                    title: "维修计划实施",
                    content: "设备设施保管员"
                }
            ]
        }
    },

    methods: {
        //点击左侧树时
        handTreeClick(data) {
          this.dhierarchy  = data.dhierarchy
            this.depotId = data.depotCode
            this.getRoleSelect()
            this.approverList()
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        gettotaltree() {
            let depotId = JSON.parse(getUser()).depotId
            findbyTreeData(depotId).then(res => {
                this.treeData = res.data
                if( res.data[0].dhierarchy == 1){
                  this.depotId = res.data[0].children[0].depotCode
                this.$nextTick(() => {
                    this.$refs.userManageTree.setCurrentKey( res.data[0].children[0].depotCode )
                     this.approverList()
                })
                }else {
                  this.depotId= JSON.parse(getUser()).depotId
                   this.$nextTick(() => {
                    this.$refs.userManageTree.setCurrentKey(JSON.parse(getUser()).depotId )
                    this.approverList()
                })
                }
            })
        },
        //根据库id,角色查询用户下拉选
        getRoleSelect() {
            var params = {
                depotId: this.depotId,
                roleIds: this.rolesId
            }
            let resData = []
            roleList(params)
                .then(res => {
                    if (res.code == 200) {
                        resData = res.data
                        this.tableData.forEach(item => {
                            if (item.title.indexOf("主管科长") != -1) {
                                this.$set(item, "approverSelect", res.data[33])
                            } else if (
                                item.title.indexOf("分管副总经理") != -1
                            ) {
                                this.$set(item, "approverSelect", res.data[35])
                            } else if (item.title.indexOf("总经理") != -1) {
                                this.$set(item, "approverSelect", res.data[34])
                            }
                        })
                    }
                })
                .catch(err => {
                    console.log(err)
                })
            if(this.type == 'xzjh' || this.type == 'yjcg' || this.type == 'sswxjh' || this.type == 'sswxys' || this.type == 'sbcg' ||this.type == 'sbwx'){
                let paramsNew = {
                    depotId: 1,
                    roleIds: 37
                }
                roleList(paramsNew)
                    .then(res => {
                        if (res.code == 200) {
                            this.tableData.forEach(item => {
                                if ( (this.type == 'xzjh' || this.type == 'yjcg') && item.title.indexOf("分公司主管处室") != -1 ) {
                                    this.$set(item, "approverSelect", res.data[37])
                                }else if((this.type == 'sswxjh' || this.type == 'sswxys' || this.type == 'sbcg' ||this.type == 'sbwx') && item.title.indexOf("分公司") != -1){
                                    this.$set(item, "approverSelect", res.data[37])
                                }
                            })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }else{
                this.tableData.forEach(item => {
                    if ( item.title.indexOf("分公司主管处室") != -1 ) {
                        this.$set(item, "approverSelect", resData[37])
                    }
                })
            }
        },
        // 头部下拉选的值发生改变时
        headChange() {
            if (this.type == "tf") {
                this.tableData = this.meVentilation
            } else if (this.type == "xzjh") {
                // this.tableData = this.fumigation
            } else if (this.type == "xzsq") {
                // this.tableData = this.fumigation1
            } else if (this.type == "yjcg") {
                this.tableData = this.drugPurchase
            } else if (this.type == "yjly") {
                this.tableData = this.drugCollect
            } else if (this.type == "sbcg") {
                this.tableData = this.devicePurchase
            } else if (this.type == "sbly") {
                this.tableData = this.deviceCollect
            } else if(this.type == "sbgh"){
                 this.tableData = this.deviceReturn
            }else if (this.type == "sbwx") {
                this.tableData = this.deviceRepair
            } else if (this.type == "sbbf") {
                // 设备报废
                this.tableData = this.deviceScrap
            } else if (this.type == "sbwxgz") {
                // 设备维修改造
                this.tableData = this.deviceRepairReform
            }
            this.approverList()
        },
        btnSave() {
            this.loading = true
            var flag = true
            for (let index = 0; index < this.tableData.length; index++) {
                const ele = this.tableData[index]
                if (ele.content == null) {
                    flag = false
                    this.$message("请先选择人员")
                    this.loading = false
                    return
                }
            }
            if (flag) this.submit()
        },

        //审批人管理提交
        submit() {
            this.loading = true
            var data = {
                data: this.tableData,
                // type: "tf",
                type: this.type,
                depot_id: this.depotId
            }
            approverSubmit(data)
                .then(res => {
                    if (res.code == 200) {
                        this.loading = false
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        })
                        console.log(res.data, "res.data")
                    }
                })
                .catch(err => {
                    this.loading = false
                    console.log(err)
                })
        },

        //查看审批人列表
        approverList() {
            var type = this.type
            var userId = this.userInfo.uid
            var depotId = this.depotId
            checkList(type, userId, depotId)
                .then(res => {
                    if (res.code == 200) {
                        if (
                            res.data == null ||
                            res.data == "" ||
                            res.data == undefined ||
                            res.data == []
                        ) {
                            this.tableData = this.meVentilation
                        } else {
                            this.tableData = res.data
                        }
                        this.getRoleSelect()
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    created() {
        this.gettotaltree()
    },
    mounted() {
        this.userInfo = JSON.parse(getUser())
        // this.depotId = this.userInfo.depotId
        // this.approverList()
    }
}
</script>
<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    #mainLeft {
        width: 340px;
        height: calc(100vh - 200px);
        border: 1px solid #e6e6e6;
        .el-tree-node__label {
            color: seagreen;
        }
    }
    #mainRight {
        margin-left: 20px;
        width: calc(100% - 340px);
    }
}

.table {
    width: 100%;
    text-align: center;

    margin: 20px 0 50px;
}
.btns {
    text-align: right;
}
</style>