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

<!--
 * @Date: 2021-11-30 09:44:24
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-16 10:20:45
 * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\user-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-input
                v-model="searchValue"
                :placeholder="placeholder"
                style="width: 200px; margin-left: 10px;"
                class="filter-item"
                @keyup.enter.native="onSearch"
                clearable
                @clear="onClear"
            />
            <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"
            @transform="onTransform"
        ></TTable>
        <!-- 分页 -->
<!--         <div class="page-container"> -->
            <pagination
                v-show="total>0"
                :total="total"
                ref="pages"
                :page.sync="page"
                :limit.sync="limit"
                @pagination="getList"
            />
        <!-- </div> -->
        <!-- 修改弹窗 -->
        <el-dialog :visible.sync="dialogPvVisible" :title="dialogTitle">
            <el-form
                ref="form"
                :model="form"
                :rules="formRules"
                label-position="left"
                label-width="70px"
                style="width: 400px"
            >
                <!-- IMEI -->
                <el-form-item label="IMEI" prop="imei" label-width="80px">
                    <el-input v-model="form.imei" style="width: 80%" clearable />
                </el-form-item>
                <!-- 内容名称 -->
                <el-form-item label="内容名称" prop="content" label-width="80px">
                    <el-input v-model="form.content" style="width: 80%" clearable />
                </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>
        <!-- 转通用弹窗 -->
        <el-dialog :visible.sync="dialogTrans" :title="dialogTransTitle">
            <p>请选择要转换的类别:</p>
            <!-- <el-radio v-model="radio1" label="1" border>关键字</el-radio>
            <el-radio v-model="radio1" label="2" border>固定地点</el-radio>-->
            <!-- 类别 -->
            <el-select
                v-model="model"
                placeholder="类别"
                style="width: 130px; margin-left: 10px;"
                filterable
                @change="outSelecChange"
                clearable
            >
                <el-option
                    v-for="item in modelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="filter-item"
                ></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="error" @click="dialogTrans = false">取消</el-button>
                <el-button type="primary" @click="onTransConfirm">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import TTable from "../../../components/TTable/TTable";
import Pagination from "@/components/Pagination";
import APIExceptionUser from "@/api/user-exception";
import APIExceptionGen from "@/api/common-exception";
import APILimits from "@/api/off-limits-manage";
export default {
    name: "",
    components: { TTable, Pagination },
    data() {
        return {
            model: "", //下拉框的值
            content: "", //内容
            modelOptions: [],
            searchValue: "",
            columns: [
                { prop: "imei", title: "IMEI", fixed: 'left' },
                { 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' },
                        {
                            fnName: "transform",
                            title: "转通用",
                            type: "success",
                            icon: 'el-icon-warning'
                        }
                    ]
                }
            ],
            list: [],
            total: 0,
            page: 1,
            limit: 10,
            dialogPvVisible: false,
            dialogStatus: "",
            dialogTitle: "修改用户例外",
            dialogTrans: false,
            dialogTransTitle: "转通用例外",
            form: {
                imei: "",
                content: "",
                createTime: "",
                status: 0
            },
            radio1: "1",
            formRules: {
                content: [
                    {
                        required: true,
                        message: "请输入内容名称",
                        trigger: "blur"
                    }
                ],
                imei: [
                    {
                        required: true,
                        message: "请输入imei",
                        trigger: "blur"
                    }
                ]
            },
            placeholder: '请输入内容'
        };
    },
    watch: {},
    methods: {
        // 清空表单
        resetForm() {
            this.form = {
                model: "",
                content: "",
                createTime: "",
                categoryId: "",
                status: 0
            };
        },
        // 增加
        onAdd() {
            this.resetForm();
            this.dialogTitle = "添加通用例外";
            this.dialogPvVisible = true;
            this.dialogStatus = "add";
        },
        add(formName) {
            this.searchValue = "";
            let reqBody = {
                keyId: 0,
                imei: this.form.imei,
                keyword: this.form.content,
                status: this.form.status,
                glat: 0,
                glng: 0,
                address: "",
                postCode: ""
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APIExceptionUser.changeRecognitionUser(reqBody).then(
                        res => {
                            console.log(res);
                            if (res.code === 0) {
                                this.dialogPvVisible = false;
                                this.$message({
                                    message: "增加成功",
                                    type: "success"
                                });
                                this.form.imei = "";
                                this.getList();
                            }
                        }
                    );
                } else {
                    return false;
                }
            });
        },
        // 搜索
        onSearch() {
            this.$refs["pages"].currentPage = 1;
            this.getList();
        },
        // 修改
        onUpdate(row) {
            this.dialogPvVisible = true;
            this.dialogStatus = "update";
            this.dialogTitle = "修改用户例外";
            this.form = Object.assign({}, row); // copy obj
            this.form.createTime = new Date(this.form.createTime);
            this.form.status = this.checkoutStatusToNum(row.status);
        },
        update(formName) {
            let reqBody = {
                keyId: this.form.keyId,
                imei: this.form.imei,
                keyword: this.form.content,
                status: this.form.status,
                glat: 0,
                glng: 0,
                address: "",
                postCode: ""
            };
            this.$refs[formName].validate(valid => {
                if (valid) {
                    APIExceptionUser.changeRecognitionUser(reqBody).then(
                        res => {
                            console.log(res);
                            if (res.code === 0) {
                                this.dialogPvVisible = false;
                                this.$message({
                                    message: "修改成功",
                                    type: "success"
                                });
                                this.form.imei = "";
                                this.getList();
                            }
                        }
                    );
                } else {
                    return false;
                }
            });
        },
        // 删除
        onDelete(row) {
            this.$confirm("是否删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let reqBody = {
                        keyId: row.keyId,
                        imei: row.imei
                    };
                    APIExceptionUser.delRecognitionUser(reqBody).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        } else {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        }
                    });
                })
                .catch(() => {});
        },
        // 转通用例外 todo 待接口说明
        onTransform(row) {
            console.log("row", row);
            this.dialogTrans = true;
            this.content = row.content;
            this.form.status = this.checkoutStatusToNum(row.status);
        },
        // 确定转通用例外
        onTransConfirm() {
            let reqBody = {
                id: 0,
                categoryId: this.model,
                keyword: this.content,
                status: this.form.status,
                glat: 0,
                glng: 0,
                address: "",
                postCode: ""
            };
            if (this.model != "") {
                APIExceptionGen.changeRecognitionGen(reqBody).then(res => {
                    console.log(res);
                    if (res.code === 0) {
                        this.dialogTrans = false;
                        this.$message({
                            message: "增加成功",
                            type: "success"
                        });
                        this.getList();
                    }
                });
            } else {
                this.$message({
                    message: "请选择一个类别!",
                    type: "error"
                });
            }
        },
        // 获取分页数据
        getList() {
            let reqBody = {
                pageNumber: this.page,
                begNumber: this.limit,
                type: "system",
                imei: this.searchValue.length === 15 ? this.searchValue : "",
                keyword: this.searchValue.length === 15 ? "" :this.searchValue
            };
            APIExceptionUser.getRecognitionUser(reqBody).then(res => {
                this.list = res.data.map(m => {
                    return {
                        imei: m.imei,
                        content: m.keyword,
                        createTime: m.createTime || "无",
                        glat: m.glat,
                        glng: m.glng,
                        keyId: m.keyId,
                        status: this.checkoutStatus(m.status)
                    };
                });
                this.total = res.count;
            });
        },
        // 获取类型分类
        getAreaCategoryQuery() {
            let reqBody = {
                pageNumber: 1,
                begNumber: 20,
                keyword: ""
            };
            APILimits.areaCategoryQuery(reqBody).then(res => {
                this.modelOptions = res.data.map(m => {
                    return {
                        value: m.categoryId,
                        label:
                            m.categoryName +
                            "--" +
                            `${this.transfromToType(m.kindId)}`
                    };
                });
            });
        },
        outSelecChange(value) {
            this.model = value;
            console.log("model", this.model);
        },
        // 点击清除按钮时
        onClear() {
            this.$refs["pages"].currentPage = 1;
            this.getList();
        }
    },
    mounted() {
        this.getList();
        this.getAreaCategoryQuery();
    }
};
</script>

<style scoped>
</style>