群控系统服务端开发模式-应用开发-前端部门功能开发

一、添加视图

在根目录下src文件夹下views文件夹下param文件夹下department文件夹下，新建index.vue，代码如下

<template>
    <div class="app-container">
        <div class="filter-container" style="float:left;">
            <el-form :inline="true" :model="searchParams" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchParams.id" style="width: 160px;" placeholder="请输入ID" clearable />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchParams.title" style="width: 180px;" placeholder="请输入部门名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button class="search-btn el-button--infoSearch" type="primary" @click="search()">搜索</el-button>
                    <el-button class="search-btn el-button--infoSearch" style="background:#F2F6FC;" @click="clearSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="filter-container" style="float:right;">
            <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexAdd')" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleAdd">添加</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="search(currentPage)">刷新</el-button>
            <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button>
            <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button>
            <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexDelete')" class="filter-item" @click="handleDelete" type="danger">删除</el-button>
        </div>
        <el-table
                ref="resTable"
                v-loading="listLoading"
                :data="list"
                row-key="id"
                highlight-current-row
                max-height="750"
                default-expand-all
                style="width: 100%;margin-top:10px;"
                border
                :default-sort="{prop: 'id', order: 'descending'}"
        >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column align="center" label="ID" sortable prop="id">
                <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="部门名称">
                <template slot-scope="{row}">
                    <span>{{ row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="{row}">
                    <el-tag type="success" v-if="row.status === 1">启用</el-tag>
                    <el-tag type="warning" v-if="row.status === 0">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="添加时间">
                <template slot-scope="{row}">
                    <span>{{ row.create_time }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="修改时间">
                <template slot-scope="{row}">
                    <span>{{ row.update_time }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="{row}">
                    <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button>
                    <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexEdit')" type="primary" size="mini" @click="handleEdit(row.id)">编辑</el-button>
                    <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexDelete')" size="mini" @click="handleDelete(row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    :hide-on-single-page="true"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="currentSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <transition name="dialog-fade">
            <el-dialog :visible.sync="dialogVisible" :title="resTemp.id === 0 ? '添加' : '编辑'" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form ref="resForm" :rules="formRules" :model="resTemp" label-position="right" label-width="100px">
                    <el-form-item label="部门名称" prop="title">
                        <el-input v-model="resTemp.title" placeholder="请填写部门名称" />
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-switch
                                v-model="resTemp.status"
                                active-value="1"
                                inactive-value="0"
                        />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible=false">取消</el-button>
                    <el-button v-if="$store.getters.butts.includes('ParamDepartmentIndexSave')" type="primary" @click="saveInfo()">提交</el-button>
                </div>
            </el-dialog>
        </transition>
        <transition name="dialog-fade">
            <el-dialog :visible.sync="dialogDetails" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form ref="resForm" :model="resTemp" label-position="right" label-width="100px">
                    <el-form-item label="部门名称">
                        <el-input v-model="resTemp.title" placeholder="请填写部门名称" disabled />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch
                                v-model="resTemp.status"
                                active-value="1"
                                inactive-value="0"
                                disabled
                        />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogDetails=false">取消</el-button>
                </div>
            </el-dialog>
        </transition>
    </div>
</template>
<script>
    import { succ, warn, err } from '@/utils/message'
    import { getInfo, getList, saveInfo, deleteInfo, statusInfo } from '@/api/param/department'
    export default {
        name: 'ParamDepartmentIndex', // 名空间
        // 初始化数据
        data() {
            return {
                list: [], // 初始化管理员列表
                pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500],
                currentPage: 1, // 当前页数
                currentSize: 10, // 每页条数
                dataTotal: 0, // 总数据
                searchParams: {
                    id: '',
                    title: ''
                },
                // 要提交数据
                resTemp: {
                    id: 0, // 0 添加 >0 编辑
                    title: '',
                    status: '1'
                },
                // 要验证数据
                formRules: {
                    title: [
                        { required: true, trigger: 'blur', message: '部门名称必须填写' },
                        { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                    ]
                },
                listLoading: true, // 显示list加载框
                dialogVisible: false, // 初始化弹窗是否显示
                dialogDetails: false
            }
        },
        // 初始化执行的
        created() {
            this.getList()// 获取管理员数据
        },
        // 所有的方法都需要放到这个里面
        methods: {
            // 搜索
            search() {
                this.getList(1)
            },
            // 管理员数据 --异步
            async getList(page = 0) {
                this.listLoading = true
                const params = {
                    currentPage: page === 0 ? this.currentPage : page,
                    currentSize: this.currentSize,
                    ...this.searchParams
                }
                await getList(params).then(res => {
                    this.list = res.data.list
                    this.dataTotal = res.data.meat.total * 1
                })
                // 延时
                setTimeout(() => {
                    this.listLoading = false
                }, 0.5 * 1000)
            },
            // 清除搜索功能
            clearSearch() {
                this.searchParams = {
                    id: '',
                    title: ''
                }
                this.getList()
            },
            // 重置表单数据 ---添加时候需要使用
            resetTemp() {
                this.resTemp = {
                    id: 0, // 0 添加 >0 编辑
                    title: '',
                    status: '1'
                }
            },
            // 添加方法
            handleAdd() {
                this.resetTemp()
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs['resForm'].clearValidate()
                })
            },
            // 编辑方法
            handleEdit(id) {
                getInfo({ id: id }).then(res => {
                    const row = res.data
                    this.resTemp = Object.assign({}, row)
                    this.resTemp.status = row.status + ''// 将数字强行转换成字符串
                    this.dialogVisible = true
                    this.$nextTick(() => {
                        this.$refs['resForm'].clearValidate()
                    })
                })
            },
            // 详情
            handleDetails(id){
                getInfo({ id: id }).then(res => {
                    const row = res.data
                    this.resTemp = Object.assign({}, row)
                    this.resTemp.status = row.status + ''// 将数字强行转换成字符串
                    this.dialogDetails = true
                    this.$nextTick(() => {
                        this.$refs['resForm'].clearValidate()
                    })
                })
            },
            // 新建保存数据
            async saveInfo() {
                this.$refs.resForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveInfo(this.resTemp).then(res => {
                            this.loading = false
                            succ(res.message)
                            this.getList()
                            this.dialogVisible = false
                        })
                    } else {
                        return false
                    }
                })
            },
            // 删除
            handleDelete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(async() => {
                    const ids = []
                    if (id > 0) { // 单个删除
                        ids.push(id)
                    } else { // 批量删除
                        const select = this.$refs.resTable.selection
                        if (select.length === 0) {
                            warn('批量删除必须选择指定产品')
                            return false
                        }
                        // 组合数据
                        select.forEach(item => {
                            ids.push(item.id)
                        })
                    }
                    // 删除
                    deleteInfo({ id: ids }).then(res => {
                        this.getList()// 更新列表
                        succ(res.message)// 提示结果
                    })
                }).catch(err => {
                    err(err.message)
                    return false
                })
            },
            // 启禁用
            handleStatus(status){
                let statusText = status == 1 ? '启用' : '禁用';
                this.$confirm('此操作将永久'+ statusText +'该产品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(async() => {
                    const ids = []
                    const select = this.$refs.resTable.selection
                    if (select.length === 0) {
                        warn('批量'+ statusText +'必须选择指定产品')
                        return false
                    }
                    // 组合数据
                    select.forEach(item => {
                        ids.push(item.id)
                    })
                    // 删除
                    statusInfo({ id: ids, status:status }).then(res => {
                        this.getList()//更新列表
                        succ(res.message)// 提示结果
                    })
                }).catch(err => {
                    err(err.message)
                    return false
                })
            },
            // 每页条数切换
            handleSizeChange(val) {
                this.currentSize = val
                this.getList()
            },
            // 页数切换
            handleCurrentChange(val) {
                this.currentPage = val
                this.getList()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .app-container {
        padding:10px;
        .roles-table {
            margin-top: 30px;
        }
        .permission-tree {
            margin-bottom: 30px;
        }
    }
    .el-image-viewer__close{
        color: #fff;
    }
    .roleId .el-select{
        width:100%;
    }
</style>

二、添加ajax请求

在根目录下src文件夹下api文件夹下param文件夹下department.js，代码如下

import request from '@/utils/request'
// 列表
export function getList(params) {
    return request({
        url: '/param/department/get_list',
        method: 'get',
        params:params
    })
}
// 所有
export function getAll() {
    return request({
        url: '/param/department/get_all',
        method: 'post'
    })
}
// 获取
export function getInfo(data) {
    return request({
        url: '/param/department/get_info',
        method: 'post',
        data
    })
}
// 保存
export function saveInfo(data) {
    return request({
        url: '/param/department/save_info',
        method: 'post',
        data
    })
}
// 删除
export function deleteInfo(data) {
    return request({
        url: '/param/department/delete_info',
        method: 'post',
        data
    })
}
// 启禁用
export function statusInfo(data) {
    return request({
        url: '/param/department/status_info',
        method: 'post',
        data
    })
}