programs_info/三资项目/删除前备份/前段代码/workflow/auditorSelect.vue

<template>
  <div style="width: 100%;height: 100%">
    <div class="custom-tree-container">
      <div class="block-l">
        <div class="title">选择下一步节点</div>
        <el-card shadow="hover">
          <div v-for="(item, index) in DataRole" :key="index">
            <el-radio v-model="selectRole" :label="item.value" class="space-vertical" border>{{ item.label }}</el-radio>
          </div>
        </el-card>
      </div>
      <div class="block-r">
        <div class="title">选择下一步审核人</div>
        <el-card shadow="hover">
          <el-tree
            v-if="FlowDeptTree.length>0"
            ref="deptTree"
            :data="FlowDeptTree"
            node-key="id"
            :indent="24"
            accordion
            :expand-on-click-node="expandClick"
            :default-expanded-keys="expandedKey"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <i v-if="data.type == 'USER'" class="el-icon-user-solid p-blue" />
                <i v-if="data.type == 'DEPT'" class="el-icon-office-building" />
                {{ node.label }}
              </span>
              <span v-if="data.level == 0">
                <el-link
                  class="space"
                  type="primary"
                  @click="() => unFoldAll()"
                >展开
                </el-link>
                <el-link
                  class="space"
                  type="primary"
                  @click="() => collapseAll()"
                >折叠
                </el-link>
              </span>
            </span>
          </el-tree>
        </el-card>
      </div>
    </div>
    <div class="el-dialog__footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleUserSelectCommit()">确 定</el-button>
    </div>
  </div>
</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
    name: 'AuditorSelect',
    mixins: [Base, BaseData],
    props: {
        dataRoles: {
            type: Array,
            required: () => []
        },
        deptId: { // 选择部门
            type: String,
            default: ''
        }
    },
    data() {
        return {
            DataRole: [],
            selectRole: '',
            FlowDeptTree: [],

            // 树组件相关
            selectNode: {},
            selectUserInfo: {},
            expandClick: false,
            expandedKey: []
        }
    },

    watch: {
        dataRoles: {
            deep: true,
            handler(val) {
                this.initRoleSelect(val)
            }
        },
        selectRole: {
            deep: true,
            handler(val) {
                this.roleSelectChange(val)
            }
        }
    },
    created() {
        this.initRoleSelect(this.dataRoles)
        // this.roleSelectChange(this.selectRole)
    },
    mounted() {
        this.$nextTick(() => {
            this.unFoldAll()
        })
    },
    methods: {
        initRoleSelect: function(_dataRoles) {
            // console.log('DataRole', _dataRoles, this.DataRole)
            this.DataRole = []
            this.selectRole = ''
            if (_dataRoles) {
                _dataRoles.forEach(role => {
                    this.DataRole.push({
                        value: role,
                        label: this.getRoleName(role)
                    })
                })

                if (this.DataRole.length > 0) {
                    this.selectRole = this.DataRole[0].value
                }
            }
        },
        roleSelectChange: function(val) {
            this.initFlowStaff(val).then(() => {
                this.initFlowDeptTree(this.deptId)
            })
        },
        getRoleName: function(_role) {
            let info = ''
            switch (_role) {
                case 'DJ_AUDIT':
                    info = '代建单位经办人'
                    break
                case 'DJ_AUDIT_LEADER':
                    info = '代建单位负责人'
                    break
                case 'DJ_AUDIT_OTHER':
                    info = '代建单位其他审核'
                    break
                case 'DJ_AUDIT_BOSS':
                    info = '代建单位终审'
                    break
                case 'JG_AUDIT':
                    info = '建设单位初审'
                    break
                case 'JG_AUDIT_MISSION':
                    info = '建设单位会审'
                    break
                case 'ZJ_AUDIT':
                    info = '住建局审定'
                    break
            }

            return info
        },
        initFlowDeptTree: function(_deptId) {
            const _this = this
            return this.pubRequest('listByDeptId', { deptId: _deptId }).then((res) => {
                _this.FlowDeptTree = []
                _this.DeptTreeUserMap = {}
                if (res.data.data) {
                    const deptData = []
                    let topNode = {
                        id: '0',
                        name: '组织结构',
                        label: '组织结构',
                        level: 0
                    }
                    res.data.data.forEach(function(item) {
                        const jsonMap = _this.getDeptJson(item)
                        deptData.push(jsonMap)

                        if (item.id === _deptId) {
                            topNode = _this.getDeptNode(item)
                            topNode.level = 0
                        }
                    })

                    topNode.children = _this.getDeptChildren(deptData, _deptId, _this.StaffData)
                    _this.expandedKey = []
                    _this.expandedKey.push(_deptId)

                    _this.FlowDeptTree.push(topNode)
                }
            })
        },
        initFlowStaff: function(_roleKey) {
            const _this = this
            this.StaffData = []
            return this.pubRequest('listUserByDataRole', { roleKey: _roleKey }).then((res) => {
                console.log('listUserByDataRole', res)
                if (res.data.data) {
                    res.data.data.forEach(function(item) {
                        const json = {
                            id: item.id,
                            value: item.id,
                            label: item.truename,
                            deptId: item.department,
                            sequenceNo: item.sequenceNo
                        }
                        _this.StaffData.push(json)
                    })
                }
            }).catch(() => {
            })
        },
        handleNodeClick: function(data, node, ocx) {
            this.selectNode.id = data.id
            this.selectNode.level = data.level
            this.selectNode.name = data.label
            this.selectNode.type = data.type

            if (data.type === 'USER') {
                this.selectUserInfo = data
            } else {
                this.selectUserInfo = {}
            }

            // console.log(this.selectNode)
        },
        // 全部展开
        unFoldAll: function() {
            const _this = this
            // 将没有转换成树的原数据
            const keyList = this.DeptTreeMap
            for (const _id in keyList) {
                // 将没有转换成树的原数据设置key为... 的展开
                _this.$refs.deptTree.store.nodesMap[_id].expanded = true
            }
        },
        // 全部折叠
        collapseAll: function() {
            const _this = this
            const keyList = this.DeptTreeMap
            for (const _id in keyList) {
                // 将没有转换成树的原数据设置key为... 的展开
                _this.$refs.deptTree.store.nodesMap[_id].expanded = false
            }
        },
        handleClose: function() {
            this.$emit('handleUserSelectClose')
        },
        handleUserSelectCommit: function() {
            // console.log(this.DeptTreeUserMap)
            if (!this.selectRole) {
                this.$alert('请选择下一步节点')
                return
            }

            if (Object.keys(this.DeptTreeUserMap).length > 0 && !this.selectUserInfo.id) {
                this.$alert('请选择下一步处理人')
                return
            }

            this.confirm('是否确认执行？').then(() => {
                this.$emit('handleUserSelectCommit', this.selectRole, this.selectUserInfo)
            })
        },
        pubRequest(opUrl, postData) {
            return this.$channel.globleRequest('PubController', opUrl, postData, 'Public Controller')
        }
    }
}
</script>

<style lang="scss" scoped>
    .custom-tree-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding-right: 8px;

        .block-l {
            flex: 1;
            padding: 8px 12px 8px 24px;
        }

        .block-r {
            flex: 1;
            padding: 8px 24px 8px 12px;
        }

        .title {
            font-family: "Microsoft YaHei UI",serif;
            font-weight: 300;
            text-align: center;
            padding: 10px;
            background-color: #f5f7fa;
            border: 1px solid #ebeef5;
        }

        .el-card {
            min-height: 300px;
        }
    }
</style>