TelpoUserManageAdmin/src/views/off-limits-manage/alarm-recognition/index.vue

<!--
 * @Date: 2021-11-30 09:44:24
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-08 15:16:20
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\alarm-recognition\index.vue
 * @description:
-->
<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-circle-plus"
                @click="onAdd"
            >添加</el-button>
            <el-button
                v-show="false"
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-folder-add"
                @click="onImportBatch"
            >批量导入</el-button>
            <!-- 下拉 -->
            <!-- 类别 -->
            <el-select
                v-model="model"
                placeholder="类别"
                style="width: 130px; margin-left: 10px;"
                filterable
                @change="outSelecChange"
                @clear="onClear"
                clearable
            >
                <el-option
                    v-for="item in modelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="filter-item"
                ></el-option>
            </el-select>
            <!-- 搜索 -->
            <el-input
                v-model="searchValue"
                placeholder="请输入关键字"
                style="width: 200px; margin-left: 10px;"
                class="filter-item"
                @keyup.enter.native="onSearch"
                clearable
            />
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="onSearch"
            >搜索</el-button>
        </div>
        <TTable :tableData="list" :columns="columns" @update="onUpdate" @delete="onDelete"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="page"
            ref="pages"
            :limit.sync="limit"
            @pagination="getList"
        />
        <el-dialog :visible.sync="dialogPvVisible" :title="dialogTitle">
            <el-form
                ref="form"
                :rules="formRules"
                :model="form"
                label-position="left"
                label-width="70px"
                style="width: 400px;"
            >
                <!-- 类型 -->
                <el-form-item label="类型" prop="typeRadio" v-show="false">
                    <el-radio-group v-model="form.typeRadio">
                        <el-radio :label="1" border>关键字</el-radio>
                        <el-radio :label="2" border>固定地点</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 类别 -->
                <el-form-item label="类别" prop="model">
                    <el-select v-model="form.model" class="filter-item" @change="onSelectChange">
                        <el-option
                            v-for="item in formOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!-- 内容名称 -->
                <el-form-item label="内容名称" prop="content" label-width="80px">
                    <el-input v-model="form.content" style="width: 80%"/>
                </el-form-item>
                <!-- 状态 -->
                <el-form-item label="状态" prop="status" required>
                    <el-switch v-model="form.status"  active-text="打开" inactive-text="关闭"></el-switch>
                </el-form-item>
                <!-- 创建时间 -->
                <el-form-item label="创建时间" prop="timestamp" v-show="false">
                    <el-date-picker v-model="form.createTime" type="datetime" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="error" @click="dialogPvVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="dialogStatus === 'update' ? update('form') : add('form')"
                >确认</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogUpload">
            <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
        </el-dialog>
    </div>
</template>

<script>
import TopMenu from "@/components/TopMenu";
import TTable from "../../../components/TTable/TTable";
import Pagination from "@/components/Pagination";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import APILimits from "@/api/off-limits-manage";
export default {
    name: "",
    components: { TTable, TopMenu, Pagination, UploadExcelComponent },
    data() {
        return {
            buttonList: [
                {
                    name: "添加",
                    type: "success",
                    click: () => {
                        this.onAdd();
                    }
                },
                {
                    name: "批量导入",
                    type: "success",
                    click: () => {
                        this.onImportBatch();
                    }
                }
            ],
            type: "",
            model: "",
            modelOptions: [],
            searchValue: "",
            columns: [
                { prop: "type", title: "类型" },
                { prop: "model", title: "类别" },
                { prop: "content", title: "内容名称" },
                { prop: "createTime", title: "创建时间" },
                { prop: "status", title: "状态" },
                {
                    action: true,
                    title: "操作",
                    actions: [
                        { fnName: "update", title: "修改", type: "primary" },
                        { fnName: "delete", title: "删除", type: "error" }
                    ]
                }
            ],
            list: [],
            total: 0,
            page: 1,
            limit: 10,
            dialogPvVisible: false,
            dialogStatus: "",
            dialogTitle: "修改告警识别内容",
            form: {
                typeRadio: 1,
                model: "",
                content: "",
                createTime: "",
                resource: "",
                categoryId: "",
                status: true,
                id: ""
            },
            formRules: {
                content: [
                    {
                        required: true,
                        message: "请输入内容名称",
                        trigger: "blur"
                    }
                ],
                typeRadio: [
                    { required: true, message: "请选择类型", trigger: "change" }
                ],
                model: [
                    { required: true, message: "请选择类别", trigger: "change" }
                ]
            },
            formOptions: [],
            dialogUpload: false,
            loading: false
        };
    },
    watch: {
        model(value) {
            if (value === "") {
                this.$refs['pages'].currentPage = 1;
                this.getList();
            }
        },
        searchValue(value) {
            if (value === "") {
                this.$refs['pages'].currentPage = 1;
                this.getList();
            }
        }
    },
    methods: {
        // 清空表单
        resetForm() {
            this.form = {
                typeRadio: 1,
                model: "",
                content: "",
                createTime: "",
                resource: "",
                categoryId: "",
                status: true
            };
        },
        // 添加
        onAdd() {
            this.resetForm();
            /*  this.form.typeRadio = 1; */
            this.dialogTitle = "添加告警识别内容";
            this.dialogPvVisible = true;
            this.dialogStatus = "add";
            this.form.status = true;
            this.getAreaCategoryQuery();
        },
        add(formName) {
            let reqBody = {
                id: 0,
                categoryId: this.form.categoryId,
                keyword: this.form.content,
                status: this.form.status
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APILimits.changeRecognition(reqBody).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.dialogPvVisible = false;
                            this.$message({
                                message: "增加成功",
                                type: "success"
                            });
                            this.getList();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 批量导入, ##注意 ,批量导入格式必须跟表格的一样
        onImportBatch() {
            this.dialogUpload = true;
        },
        // 搜索
        onSearch() {
            this.$refs['pages'].currentPage = 1;
            this.getList();
        },
        // 修改
        onUpdate(row) {
            console.log("row", row);
            this.getAreaCategoryQuery();
            this.dialogPvVisible = true;
            this.dialogStatus = "update";
            this.dialogTitle = "修改告警识别内容"; // copy obj
            /*  this.form = Object.assign({}, row); */ ;
            this.form.categoryId = row.categoryId;
            this.form.createTime = new Date(this.form.createTime);
            this.form.typeRadio = row.kindId;
            this.form.model = row.categoryId;
            this.form.id = row.id;
            this.form.content = row.content;
            this.form.status = row.status === '打开' ? true : false;
        },
        update(formName) {
            let reqBody = {
                id: this.form.id, //0 是新增  选中的rouw的id是修改
                categoryId: this.form.categoryId,
                kindId: this.form.typeRadio,
                keyword: this.form.content,
                status: this.form.status
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APILimits.changeRecognition(reqBody).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.dialogPvVisible = false;
                            this.$message({
                                message: "修改成功",
                                type: "success"
                            });
                            this.getList();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 删除
        onDelete(row) {
            console.log("删除", row);
            this.$confirm("是否删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let reqBody = {
                        id: row.id,
                        type: "system"
                    };
                    APILimits.delRecognition(reqBody).
                        then(res => {
                            if ((res.code === 0)) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!"
                                });
                                this.getList();
                            } else {
                                this.$message({
                                    type: "error",
                                    message: "删除失败!"
                                });
                            }
                        });
                })
                .catch(() => {});
        },
        // 获取分页数据
        getList() {
            this.loading = true;
            let reqBody = {
                pageNumber: this.page,
                begNumber: this.limit,
                categoryId: this.model,
                keyword: this.searchValue
            };
            APILimits.getRecognition(reqBody).then(res => {
                this.list = res.data.map(m => {
                    return {
                        type: this.transfromToType(m.kindId),
                        model: m.categoryName,
                        content: m.keyword,
                        createTime: m.createTime,
                        kindId: m.kindId,
                        categoryId: m.categoryId,
                        status: m.status === true ? '打开' : '关闭',
                        id: m.id
                    };
                });
                this.total = res.count;
            });
            this.loading = false;
        },
        // 获取分类数据
        getAreaCategoryQuery() {
            let reqBody = {
                pageNumber: 1,
                begNumber: 20,
                keyword: ""
            };
            APILimits.areaCategoryQuery(reqBody).then(res => {
                this.formOptions = res.data.map(m => {
                    return {
                        value: m.categoryId,
                        label:
                            m.categoryName +
                            "--" +
                            `${this.transfromToType(m.kindId)}`
                    };
                });
                this.modelOptions = this.formOptions;
            });
        },
        beforeUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1;

            if (isLt1M) {
                return true;
            }

            this.$message({
                message: "导入的文件不能超过1m",
                type: "warning"
            });
            return false;
        },
        handleSuccess({ results, header }) {
            this.list = results;
            this.columns = header.map(h => {
                return { prop: h, title: h };
            });
            this.dialogUpload = false;
        },
        // 弹窗选择框值变化时
        onSelectChange(value) {
            this.form.categoryId = value;
        },
        // 页面选择框变化
        outSelecChange(value) {
            this.model = value;
        },
        // 点击清除按钮时
        onClear() {
            this.$refs["pages"].currentPage = 1;
            this.getList();
        }
    },
    mounted() {
        this.getList();
        this.getAreaCategoryQuery();
    }
};
</script>

<style scoped>
</style>