TelpoUserManageAdmin/src/views/off-limits-manage/common-exception/index.vue

<!--
 * @Date: 2021-11-30 09:44:24
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-22 18:19:16
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\common-exception\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-select
                v-model="model"
                placeholder="类别"
                style="width: 130px; margin-left: 10px;"
                filterable
                @change="outSelecChange"
                clearable
                v-show="false"
            >
                <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="placeholder"
                style="width: 200px; margin-left: 10px;"
                class="filter-item"
                @keyup.enter.native="onSearch"
                @clear="onClear"
                clearable
            />
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="onSearch"
            >搜索</el-button>
        </div>
        <!-- 表格 -->
        <!-- <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            @sort-change="sortChange"
        ></el-table>-->
        <TTable :tableData="list" :columns="columns" @update="onUpdate" @delete="onDelete"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="total>0"
            :total="total"
            ref="pages"
            :page.sync="page"
            :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"
            >
                <!-- 类别 -->
                <el-form-item label="类别" prop="model">
                    <el-select
                        v-model="form.model"
                        class="filter-item"
                        filterable
                        @change="onSelectChange"
                        clearable
                    >
                        <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" clearable>
                    <el-input v-model="form.content" style="width: 100%" />
                </el-form-item>
                <!-- 状态 -->
                <el-form-item label="状态" prop="status" required>
                    <el-switch v-model="form.status" active-text="例外" inactive-text="启用"></el-switch>
                    <!-- <el-radio-group v-model="form.status" size="medium">
                        <el-radio border :label="0">未启用</el-radio>
                        <el-radio border :label="1">黑名单</el-radio>
                        <el-radio border :label="2">白名单</el-radio>
                    </el-radio-group> -->
                </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"
                    @click="dialogStatus === 'update' ? update('form') : add('form')"
                >确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import TTable from "../../../components/TTable/TTable";
import Pagination from "@/components/Pagination";
import APIExceptionGen from "@/api/common-exception";
import APILimits from "@/api/off-limits-manage";
export default {
    name: "",
    components: { TTable, Pagination },
    data() {
        return {
            model: "",
            searchValue: "",
            columns: [
                { prop: "type", title: "类型", fixed: 'left'},
                { prop: "model", title: "类别" },
                { prop: "content", title: "内容名称" },
                { prop: "createTime", title: "创建时间" },
                { prop: "status", title: "状态" },
                {
                    action: true,
                    title: "操作",
                    actions: [
                        { fnName: "update", title: "修改", type: "primary", icon: 'el-icon-edit' },
                        { fnName: "delete", title: "删除", type: "danger", icon: 'el-icon-delete'}
                    ]
                }
            ],
            list: [],
            total: 1,
            page: 1,
            limit: 10,
            type: "error",
            dialogPvVisible: false,
            dialogStatus: "",
            dialogTitle: "修改通用例外",
            modelOptions: [], //页面下拉框数据
            formOptions: [], //弹窗下拉数据
            form: {
                model: "",
                content: "",
                createTime: "",
                status: 0,
                id: ""
            },
            formRules: {
                content: [
                    {
                        required: true,
                        message: "请输入内容名称",
                        trigger: "blur"
                    }
                ],
                model: [
                    { required: true, message: "请选择类别", trigger: "change" }
                ]
            },
            placeholder: '请输入内容'
        };
    },
    watch: {
        model(value) {
            if (value === "") {
                this.getList();
            }
        },
        searchValue(value) {
            if (value === "") {
                this.getList();
            }
        }
    },
    methods: {
        // 清空表单
        resetForm() {
            this.form = {
                model: "",
                content: "",
                createTime: "",
                categoryId: "",
                status: false
            };
        },
        // 添加
        onAdd() {
            this.resetForm();
            this.dialogTitle = "添加通用例外";
            this.dialogPvVisible = true;
            this.dialogStatus = "add";
            this.getAreaCategoryQuery();
        },
        add(formName) {
            this.searchValue = '';
            let reqBody = {
                id: 0,
                categoryId: this.form.categoryId,
                keyword: this.form.content,
                status: this.checkoutStatusToNum(this.form.status),
                glat: 0,
                glng: 0,
                address: "",
                postCode: ""
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APIExceptionGen.changeRecognitionGen(reqBody).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.dialogPvVisible = false;
                            this.$message({
                                message: "增加成功",
                                type: "success"
                            });
                            this.getList();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 搜索
        onSearch() {
            this.$refs['pages'].currentPage = 1;
            this.getList();
        },
        // 修改
        onUpdate(row) {
            console.log(row);
            this.dialogPvVisible = true;
            this.dialogStatus = "update";
            this.dialogTitle =
                "修改通用例外"; /*  this.form.createTime = new Date(this.form.createTime); */ // 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 === '启用' ? false : true;
        },
        update(formName) {
            console.log("update");
            let reqBody = {
                id: this.form.id,
                categoryId: this.form.categoryId,
                keyword: this.form.content,
                status: this.checkoutStatusToNum(this.form.status),
                glat: 0,
                glng: 0,
                address: "",
                postCode: ""
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APIExceptionGen.changeRecognitionGen(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: "general"
                    };
                    APIExceptionGen.delRecognitionGen(reqBody).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        } else {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        }
                    });
                })
                .catch(() => {});
        },
        // 获取分页数据
        getList() {
            let reqBody = {
                pageNumber: this.page,
                begNumber: this.limit,
                categoryId: this.model,
                keyword: this.searchValue
            };
            APIExceptionGen.getRecognitionGen(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 === 1 ? '启用' : '例外',
                        id: m.id
                    };
                });
                this.total = res.count;
            });
        },
        // 获取类型分类
        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;
            });
        },
        // 弹窗选择框值变化时
        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>