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-col :span="1.5">
                <el-button
                type="info"
                plain
                icon="el-icon-sort"
                size="mini"
                
                >展开/折叠</el-button
                >
            </el-col>
        </el-row>

        <el-table
            :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>
                </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="排序">
                    <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>

    </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
export default {
    data(){
        return{
            // 客户Id
            customerId:'',
            // 查询参数
            queryParams:{
                name:''
            },
            // 新增表单
            addOrgForm:{
                name:'',
                customerId:'',
                agencyId:'',
                agencyName:'',
                agencyType:'',
                pid:'',
                categoryCode:'',
                sort:0
            },
            // 树状结构列表
            treeList:[],
            // 查询动力主轴机构标签
            listSimple:[],

            // 重新渲染表格状态
            refreshTable: true,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 新增对话框
            addDialogBox:false,
        }
    },
    created(){
        this.getTreeList()
    },
    mounted(){
        this.customerId = localStorage.getItem('customerId')
    },
    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
            }

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

            if (code === 0) {
                this.$message.success("新增成功")
                this.addDialogBox = false
                this.addOrgFormRest()
                this.getTreeList()
            } 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) {
                console.log(data)
                this.listSimple = data
            } else {
                this.$message.error(msg)
            }
        },
        // 新增按钮
        addNewOrg(){
            this.addDialogBox = true
            this.getListSimple()
        },

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


    }
}
</script>

<style scoped>

</style>