industry-data-platform/industry-admin/src/views/alarm/alarmLevel/index.vue

<template>
    <div class="sy-content">
        <el-row>
            <el-col>
                <!-- 操作按钮 -->
                <el-row class="czBtns" style="float: right;">
                    <el-col :span="1.5">
                        <el-button type="primary" icon="el-icon-plus" size="small"
                            @click="addAlarmLevelEvent">新增</el-button>
                    </el-col>
                </el-row>
                <!-- 数据组表格信息 -->
                <CommonTable ref="alarmLevelTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
                    :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableOperate="tableOperate"
                    @receiveCheckedData="receiveCheckedData" @updateAlarmLevelEvent="updateAlarmLevelEvent"
                    @delAlarmLevelEvent="delAlarmLevelEvent">
                </CommonTable>
                <!-- 分页信息 -->
                <pagination v-show="tableTotal > 0" small :total="tableTotal" :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit" align="right" @pagination="getAlarmLevelPage" />
            </el-col>
        </el-row>

        <!-- 报警级别，新增修改详情界面 -->
        <AlarmLevel ref="alarmLevel" @getAlarmLevelPage="getAlarmLevelPage"></AlarmLevel>
    </div>
</template>

<script>
import { showConfirmWin } from '@/utils/cqcy'
import { getAlarmLevelPage, delAlarmLevelById } from '@/api/system/alarmLevel'
import CommonTable from '@/components/CommonTable/index.vue'
import AlarmLevel from './alarmLevel.vue'

export default {
    name: 'Index',
    components: {
        CommonTable,
        AlarmLevel
    },
    created() {
        this.getAlarmLevelPage()
    },
    data() {
        return {
            // 是否展示复选框列
            isShowCheckbox: false,
            // 是否展示序号索引列
            isShowIndex: true,
            tableHeaderTitle: [
                {
                    propName: "levelName",
                    labelName: "报警等级",
                    align: "left"
                },
                {
                    propName: "alarmColor",
                    labelName: "报警颜色",
                    align: "left"
                },
                {
                    propName: "alarmRemark",
                    labelName: "备注",
                    align: "left"
                },
                {
                    propName: "sortNum",
                    labelName: "排序号",
                    align: "center",
                    width:80
                },
                // {
                //     propName: "createTime",
                //     labelName: "创建时间",
                //     align: "center"
                // }
            ],
            tableData: [],
            tableOperate: [
                {
                    btnName: '修改',
                    size: "mini",
                    style: '',
                    icon: 'el-icon-edit',
                    methodName: "updateAlarmLevelEvent",
                },
                {
                    btnName: '删除',
                    size: "mini",
                    style: 'color: red;',
                    icon: 'el-icon-delete',
                    methodName: "delAlarmLevelEvent",
                }
            ],
            queryParams: {
                page: 1,
                limit: 10
            },
            tableTotal: 0
        }
    },
    methods: {
        // 接收子组件勾选的行的数据
        receiveCheckedData(checked) {
            console.log('checked', checked);
        },
        /** 分页获取报警级别 */
        getAlarmLevelPage() {
            getAlarmLevelPage(this.queryParams).then(res => {
                if (!res || !res.data) {
                    this.$message({
                        message: '数据查询失败！',
                        type: 'warning'
                    })
                    return
                }
                this.tableTotal = res.data.count
                this.tableData = res.data.alarmLevelList
            }).catch((e) => {

            })
        },
        /** 新增报警级别事件 */
        addAlarmLevelEvent() {
            this.$refs.alarmLevel.title = '新增报警级别'
            this.$refs.alarmLevel.visible = true
            this.$refs.alarmLevel.alarmLevelForm.id = null
            this.$refs.alarmLevel.alarmLevelForm.levelName = ''
            this.$refs.alarmLevel.alarmLevelForm.alarmColor = ''
            this.$refs.alarmLevel.alarmLevelForm.sortNum = null
            this.$refs.alarmLevel.alarmLevelForm.alarmRemark = ''
        },
        /** 修改报警级别事件 */
        updateAlarmLevelEvent(row) {
            this.$refs.alarmLevel.title = '修改报警级别'
            this.$refs.alarmLevel.visible = true
            this.$refs.alarmLevel.alarmLevelForm.id = row.id
            this.$refs.alarmLevel.alarmLevelForm.levelName = row.levelName
            this.$refs.alarmLevel.alarmLevelForm.alarmColor = row.alarmColor
            this.$refs.alarmLevel.alarmLevelForm.sortNum = row.sortNum
            this.$refs.alarmLevel.alarmLevelForm.alarmRemark = row.alarmRemark
        },
        /** 删除报警级别事件 */
        delAlarmLevelEvent(row) {
            showConfirmWin(this, null, '您确定要删除该报警级别吗？', () => {
                delAlarmLevelById(row.id).then(res => {
                    if (res.data) {
                        this.$message({
                            message: '删除报警级别成功！',
                            type: 'success'
                        })
                        this.getAlarmLevelPage()
                    }
                }).catch((e) => {

                })
            })
        },
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table th{
  background-color: #e9e9e9;
  color: #676666;
}
</style>