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.name"
                placeholder="请输入部门名称"
                clearable
                size="small"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryByName"
                >搜索</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="treeList"
            :default-expand-all="isExpandAll"
            v-if="refreshTable"
            row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
            <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
            <el-table-column prop="sort" label="排序" width="260"></el-table-column>
            <el-table-column prop="agencyName" label="组织名称" width="260"></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>
                </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 listSimple"
                        :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="请输入名称"></el-input>
                </el-form-item>
                <!-- 下拉框组织的参数 -->
                <el-form-item label="绑定组织" v-show="orgListSwitch">
                    <el-select v-model="addOrgForm.agencyName" placeholder="请选择要绑定的组织" @change="handelAgencyTree">
                        <el-option
                        v-for="item in agencytree"
                        :key="item.orgId"
                        :label="item.orgName"
                        :value="item.orgId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 网格党支部下拉框 -->
                <el-form-item label="所属上级网格党支部">
                    <el-select placeholder="请选择所属上级网格党支部">
                        <el-option
                        v-for="item in GridPartyBranchList"
                        :key="item.orgId"
                        :label="item.orgName"
                        :value="item.orgId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="排序">
                    <el-input v-model="addOrgForm.sort" placeholder="请输入排序"></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";
export default {
    data(){
        return{
            // 删除标签
            delId:'',
            // 客户Id
            customerId:'',
            agencyId:'',
            // 查询参数
            queryParams:{
                name:''
            },
            // 新增表单
            addOrgForm:{
                name:'',
                customerId:'',
                agencyId:'',
                agencyName:'',
                agencyType:'',
                pid:'',
                categoryCode:'',
                sort:''
            },
            // 树状结构列表
            treeList:[],
            // 查询动力主轴机构标签
            listSimple:[],
            // 绑定组织列表
            agencytree:[],
            // 上级网格党支部列表
            GridPartyBranchList:[],
            // 重新渲染表格状态
            refreshTable: true,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 新增对话框
            addDialogBox:false,
            // 组织列表开关
            orgListSwitch:false,
            // 确认删除弹窗
            delWindow:false,
        }
    },
    created(){
        // this.getTreeList()
        this.getList4Tree()
    },
    mounted(){
        this.customerId = localStorage.getItem('customerId')
        this.agencyId = localStorage.getItem('agencyId')
    },
    methods:{
        // 查询按钮操作
        async queryByName(){
            const url = '/pli/power/axisStruct/queryDeptByName'

            let params = {
                name:this.queryParams.name
            }

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

            if(code === 0){
                this.treeList = data
            } else {
                this.$message.error(msg)
            }
        },
        
        // 获取树状列表数据
        // async getTreeList(){
        //     const url = '/pli/power/axisStruct/getTreeList'

        //     let params = {}

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

        //     if(code === 0){
        //         this.treeList = data
        //     } else {
        //         this.$message.error(msg)
        //     }
        // },
        // 确定新增按钮
        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
            }

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

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

            let params = {}

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

            if (code === 0) {
                this.listSimple = 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 = data[0].subOrgList
            } else {
                this.$message.error(msg)
            }
        },
        // 获取组织树
        async getList4Tree(){
            const url = '/pli/power/axisStruct/list4Tree'

            let params = {}

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

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

            let params = {}

            
        },

        // 新增按钮
        addNewOrg(){
            this.addDialogBox = true
            this.getListSimple()
            this.getAgencyTree()
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.name = ''
            this.getList4Tree()
        },
        /** 展开/折叠操作 */
        toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        },
        // 关闭对话框
        handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                this.addOrgFormRest()
                done();
            })
            .catch(_ => {});
        },
        // 取消新增按钮
        cancelAdd(){
            this.addDialogBox = 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
            } 
            if(val === 'grid_party') {
                this.orgListSwitch = false
            }
        },
        handelAgencyTree(val){
            let obj = {}
            obj = this.agencytree.find(item => {
                return item.orgId === val
            })
            this.addOrgForm.agencyName = obj.orgName
            this.addOrgForm.agencyType = obj.orgType
            this.addOrgForm.agencyId = val
        },
        // 删除按钮
        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.delWindow = false
                this.getList4Tree()
            } else {
                this.$message.error(msg)
            }
        },
        // 取消删除按钮
        canceldelWindow(){
            this.delWindow = false
        },
        

        
    }
}
</script>

<style scoped>

</style>