epmet-work-pc/src/views/modules/plugins/power/poweraxis.vue

<template>
    <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="queryParams.axisName" placeholder="请输入部门名称" clearable size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="initTreeData"
                >搜索</el-button
                >
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="addNewOrg"
                >新增</el-button
                >
            </el-col>
        </el-row>

        <!-- 列表表格 -->
        <el-table
            height="500px"
            :data="powerAxisTreeList"
            :default-expand-all="isExpandAll"
            v-if="refreshTable" row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
            <el-table-column prop="name" label="动力主轴"></el-table-column>
            <el-table-column prop="sort" label="排序" ></el-table-column>
            <el-table-column prop="categoryCode" :formatter="categoryCodeFormatter" label="类别" ></el-table-column>
            <el-table-column prop="leaderName" label="负责人"></el-table-column>
            <el-table-column prop="leaderMobile" label="联系方式" ></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="row">
                    <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="del(row)">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-user">负责人</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 新增弹窗 -->
        <el-dialog
        title="新增"
        :visible.sync="addDialogBox"
        width="30%"
        :before-close="handleClose">
            <el-form>   
                <el-form-item label="动力主轴标签">
                    <el-select v-model="addOrgForm.categoryCode" placeholder="请选择动力主轴标签"  
                    @change="handelChange">
                        <el-option
                        v-for="item in tagCategoryArr"
                        :key="item.categoryCode"
                        :label="item.categoryName"
                        :value="item.categoryCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input  v-model="addOrgForm.name" placeholder="请输入名称" style="width:250px"></el-input>
                </el-form-item>
                <!-- 下拉框组织的参数 -->
                <el-form-item label="绑定组织" v-show="orgListSwitch">
                    <el-cascader
                        v-model="addOrgForm.agencyName"
                        :options="agencytree"
                        placeholder="请选择要绑定的组织"
                        :props="{ expandTrigger: 'hover', label: 'orgName', value: 'orgId', children: 'subOrgList' }"
                        ></el-cascader>
                </el-form-item>
                <!-- 网格党支部下拉框 -->
                <el-form-item label="所属上级网格党支部" v-show="GridPartyBranchSwitch">
                    <el-select v-model="addOrgForm.pid" placeholder="请选择所属上级网格党支部">
                        <el-option
                        v-for="item in GridPartyBranchList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 党委下拉框 -->
                <el-form-item label="所属党委" v-show="partyCommSwitch">
                    <el-select v-model="addOrgForm.pid" placeholder="请选择所属党委">
                        <el-option
                        v-for="item in PartyCommList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="排序">
                    <el-input v-model="addOrgForm.sort" placeholder="请输入排序" style="width:250px"></el-input>
                </el-form-item>

            </el-form>
            <div>
                <el-button @click="cancelAdd">取 消</el-button>
                <el-button type="primary" @click="submitAddNewOrg">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 删除弹窗 -->
        <el-dialog 
        title="确认删除"
        :visible.sync="delWindow"
        width="30%"
        :before-close="handleClose"
        >
            <span>确认删除吗？</span>
            <div slot="footer" >
                <el-button @click="canceldelWindow">取 消</el-button>
                <el-button type="primary" @click="submitDelete">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { handleTree } from "@/utils/treeSelect";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components: { Treeselect },
    data(){
        return{
            // 删除标签
            delId:'',
            // 客户Id
            customerId:'',
            agencyId:'',
            // 查询参数
            queryParams:{
                // 组织ID
                agencyId: '',
                // 动力主轴节点名称
                axisName: '',
                // 动力主轴节点负责人
                leaderName: ''
            },
            // 新增表单
            addOrgForm:{
                name:'',
                customerId:'',
                agencyId:'',
                agencyName:'',
                agencyType:'',
                pid:'',
                categoryCode:'',
                sort:''
            },
            // 树状结构列表
            powerAxisTreeList: [],
            // 查询动力主轴标签类别
            tagCategoryArr: [],
            // 绑定组织列表
            agencytree: [],
            // 上级网格党支部列表
            GridPartyBranchList:[],
            // 党委列表
            PartyCommList:[],
            // 重新渲染表格状态
            refreshTable: true,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 新增对话框
            addDialogBox:false,
            // 组织列表开关
            orgListSwitch:false,
            // 上级网格党支部列表
            GridPartyBranchSwitch:false,
            // 党委下拉框列表开关
            partyCommSwitch:false,
            // 确认删除弹窗
            delWindow:false,
            
        }
    },
    created(){
        // this.getTreeList()
        this.initTreeData()
        this.getTagCategoryArr()
        this.getAgencyTree()
    },
    mounted(){
        this.customerId = localStorage.getItem('customerId')
        this.agencyId = localStorage.getItem('agencyId')
    },
    methods:{
        
        // 确定新增按钮
        async submitAddNewOrg(){
            const url = '/pli/power/axisStruct/addOrg'

            let params = {
                name:this.addOrgForm.name,
                sort:this.addOrgForm.sort,
                customerId:this.customerId,
                agencyId:this.addOrgForm.agencyId,
                agencyName:this.addOrgForm.agencyName,
                agencyType:this.addOrgForm.agencyType,
                categoryCode:this.addOrgForm.categoryCode,
                pid:this.addOrgForm.pid
            }

            const { data, code, msg } = await requestPost(url,params)

            if (code === 0) {
                this.$message.success("新增成功")
                this.addDialogBox = false
                this.orgListSwitch = false
                this.GridPartyBranchSwitch = false
                this.initTreeData()
                this.addOrgFormRest()
            } else {
                this.$message.error(msg)
            }
        },
        // 获取动力主轴标签
        async getTagCategoryArr(){
            const url = '/pli/power/axisTag/listSimple/struct'

            let params = {}

            const { data, code, msg } = await requestPost(url, params)

            if (code === 0) {
                this.tagCategoryArr = data
            } else {
                this.$message.error(msg)
            }
        },
        // 获取组织列表
        async getAgencyTree(){
            const url = '/data/aggregator/org/agencytree'

            let params = {
                agencyId:this.agencyId,
                client:'gov'
            }

            const { data, code, msg } = await requestPost(url,params)

            if (code === 0) {
                this.agencytree = this.removeEmptySubOrgList(data)
            } else {
                this.$message.error(msg)
            }
        },
        // 获取上级网格党支部
        async getGridPartyBranchList(){
            const url = '/pli/power/axisStruct/GridPartyBranchList'

            let params = {}

        },
        // 初始化动力主轴组织树
        async initTreeData () {
            const url = '/pli/power/axisStruct/list4Tree'

            const { data, code, msg } = await requestPost(url, this.queryParams)

            if (code === 0) {
                this.powerAxisTreeList = handleTree(data, 'id', 'pid');
            } else {
                this.$message.error(msg)
                
            }
        },
        // 获取上级网格党支部
        async getGridPartyBranchList(){
            const url = '/pli/power/axisStruct/GridPartyBranchList'

            let params = {}

            const { data, code, msg } = await requestPost(url,params)

            if (code === 0) {
                console.log(data)
                this.GridPartyBranchList = data
            } else {
                this.$message.error(msg)
            }
        },
        // 获取上级组织党委
        async getPartyCommList(){
            const url = '/pli/power/axisStruct/getPartyCommList'

            let params = {}

            const { data, code, msg } = await requestPost(url,params)

            if (code === 0) {
                this.PartyCommList = data
            } else {
                this.$message.error(msg)
            }
        },
        // 查父id
        // async getPid(){
        //     const url = '/pli/power/axisStruct/getPid'

        //     let params = {}

        //     const { data, code, msg } = await requestPost(url,params)

        //     if (code === 0) {
        //         this.addOrgForm.pid = data
        //     } else {
        //         this.$message.error(msg)
        //     }
        // },

        // 新增按钮
        addNewOrg(){
            this.addDialogBox = true
            this.addOrgForm.pid = ''
            this.getTagCategoryArr()
            this.getAgencyTree()
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.name = ''
            this.initTreeData()
        },
        /** 展开/折叠操作 */
        // toggleExpandAll() {
        // this.refreshTable = false;
        // this.isExpandAll = !this.isExpandAll;
        //     this.$nextTick(() => {
        //         this.refreshTable = true;
        //     });
        // },
        // 关闭对话框
        handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                this.addOrgFormRest()
                this.orgListSwitch = false
                this.GridPartyBranchSwitch = false
                done();
            })
            .catch(_ => {});
        },
        // 取消新增按钮
        cancelAdd(){
            this.addDialogBox = false
            this.orgListSwitch = false
            this.GridPartyBranchSwitch = false
            this.addOrgFormRest()
        },
        // 清空新增表单
        addOrgFormRest(){
            this.addOrgForm.name = ''
            this.addOrgForm.customerId = ''
            this.addOrgForm.sort = ''
            this.addOrgForm.agencyId = '',
            this.addOrgForm.agencyName = '',
            this.addOrgForm.agencyType = '',
            this.addOrgForm.pid = ''
            this.addOrgForm.categoryCode = ''
        },
        // 动力主轴选中后的操作
        handelChange(val){
            this.addOrgForm.categoryCode = val
            if (val === 'community_party') {
                this.orgListSwitch = true
                this.GridPartyBranchSwitch = false
                this.partyCommSwitch = false
                this.addOrgForm.pid = 0
            } 
            if(val === 'grid_party') {
                this.orgListSwitch = false
                this.GridPartyBranchSwitch = false
                this.partyCommSwitch = true
                this.getPartyCommList()
                this.addOrgForm.pid = ''
            }
            if(val === 'group_party') {
                this.GridPartyBranchSwitch = true
                this.partyCommSwitch = false
                this.addOrgForm.pid = ''
                this.getGridPartyBranchList()
            }
        },

        // 删除按钮
        del(row){
            this.delWindow = true
            this.delId = row.row.id
        },
        async submitDelete(){
            const url = '/pli/power/axisStruct/deleteById/'+this.delId
            
            let params = {}

            const { data, code, msg } = await requestPost(url,params)

            if (code === 0) {
                this.$message.success("删除成功")
                this.initTreeData()
                this.delWindow = false
            } else {
                this.$message.error(msg)
            }
        },
        // 取消删除按钮
        canceldelWindow(){
            this.delWindow = false
        },
        handelGridParty(val){
            console.log(val)
        },
        categoryCodeFormatter (row, column) {
            let ca = ''
            this.tagCategoryArr.forEach((tagCategory) => {
                if (tagCategory.categoryCode === row.categoryCode) {
                    ca = tagCategory.categoryName
                }
            })
            return ca
        },
        removeEmptySubOrgList (orgArray) {
            orgArray.forEach((orgInfo) => {
                if (orgInfo && orgInfo.subOrgList) {
                    if (orgInfo.subOrgList.length === 0) {
                        orgInfo.subOrgList = undefined
                    } else {
                        this.removeEmptySubOrgList(orgInfo.subOrgList)
                    }
                }
            })
            return orgArray;
        }
        
    }
}
</script>

<style scoped>
</style>