industry-data-platform/industry-admin/src/views/system/dept/chooseDept.vue

<template>
    <el-dialog v-if="visible" :title="title" width="50%" custom-class="dialog-med3" top="5vh" center
        :before-close="dialogClose" :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true">
        <!-- 搜索信息 -->
        <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="80px">
            <el-form-item label="部门名称" prop="deviceType">
                <el-input v-model="queryParams.departmentName" placeholder="请输入部门名称" clearable style="width: 230px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEvent">查询</el-button>
                <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <CommonTable ref="deviceTypeTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
            :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
            :tableOperate="tableOperate" @chooseDeptEvent="chooseDeptEvent"></CommonTable>
        <!-- 分页信息 -->
        <pagination v-show="tableTotal > 0" :total="tableTotal" :page.sync="queryParams.page"
            :limit.sync="queryParams.limit" align="right" @pagination="getDeptList" />
    </el-dialog>
</template>

<script>

import CommonTable from '@/components/CommonTable/index.vue'
import { getDeptList } from '@/api/system/dept'
export default {
    components: {
        CommonTable
    },
    created() {
        this.getDeptList()
    },
    data() {
        return {
            visible: false,
            title: '选择部门',
            //表格参数
            isShowCheckbox: false,
            isShowIndex: true,
            tableHight: '31vh',
            tableHeaderTitle: [
                {
                    propName: "departmentName",
                    labelName: "部门名称",
                },
                {
                    propName: "departmentNum",
                    labelName: "排序号",
                },
                // {
                //     propName: "deviceTypeRemark",
                //     labelName: "备注",
                // },
                {
                    propName: "createTime",
                    labelName: "创建时间",
                }
            ],
            tableData: [],
            tableOperate: [
                {
                    btnName: '选择',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-search',
                    methodName: "chooseDeptEvent",
                }
            ],
            queryParams: {
                page: 1,
                limit: 10,
                departmentName: null
            },
            tableTotal: 0
        }
    },
    methods: {
        /** 关闭弹出层 */
        dialogClose() {
            this.$refs['queryForm'].resetFields()
            this.visible = false
        },
        /** 搜索 */
        searchEvent() {
            this.queryParams.page = 1
            this.queryParams.limit = 10
            this.getDeptList()
        },
        /** 重置按钮操作 */
        resetQuery(event) {
            this.$refs['queryForm'].resetFields()
        },
        /** 分页查询部门信息 */
        getDeptList() {
            getDeptList(this.queryParams).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '数据查询失败！',
                        type: 'warning'
                    })
                    return
                }
                this.tableTotal = res.data.count
                this.tableData = res.data.departmentList
            })
        },
        /** 将选择部门传递给父组件 */
        chooseDeptEvent(row) {
            this.$emit('receiveChooseDept', row)
            this.visible = false
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dialog-med3 {
    height: 70vh;

    .el-dialog__body {
        height: 64vh;
        overflow: auto;
    }
}
</style>