auth-web/src/pages/log-manage/err-auth-earlywarning-manage/auth-earlywarning-info.vue

<template>
    <main class="auth-earlywarning-plan">
        <el-form ref="ruleForm" inline :rules="rules" :model="form">
            <el-form-item label="预警对象" prop="creater.value">
                <el-input v-model="form.creater.value" placeholder="请输入预警对象" clearable></el-input>
            </el-form-item>
            <el-form-item label="预警对象唯一标识" prop="createrId.value">
                <el-input v-model="form.createrId.value" placeholder="请输入预警对象唯一标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="预警类型" prop="programmeType.value">
                <dg-select
                    v-model="form.programmeType.value"
                    placeholder="请选择预警类型"
                    enum="WarningProgrammeTypeEnum"
                    style="width: 13rem"
                    clearable
                >
                </dg-select>
            </el-form-item>
            <el-form-item label="预警时间" prop="createTime.value">
                <dg-date-picker
                    v-model="form.createTime.value"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    value-format="yyyyMMddHHmmss"
                    :unlink-panels="true"
                >
                </dg-date-picker>
            </el-form-item>
            <el-form-item>
                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
                <dg-button type="primary" @click="handleReset" icon="el-icon-refresh-right">重置</dg-button>
            </el-form-item>
        </el-form>
        <Table ref="myTable" :url="tableUrl" :headerData="EarlyWarningInfo" :condition="form">
            <dg-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="u-table__operation">
                        <el-tooltip content="详情" effect="dark" placement="top-end">
                            <i class="el-icon-document" @click="handleViewDetail(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </dg-table-column>
        </Table>
    </main>
</template>

<script>
import Table from "@/pages/common/table";
import { EarlyWarningInfo } from "../DataConfig";
import { getAuthEarlyWarningDetail, authEarlyWarningInfo } from "@/api/log-manage";
import Detail from "./auth-earlywarning-info-detail";

export default {
    name: "auth-earlywarning-info",
    data() {
        return {
            EarlyWarningInfo,
            form: {
                creater: {
                    value: "",
                    op: "like"
                },
                createrId: {
                    value: "",
                    op: "like"
                },
                programmeType: {
                    value: "",
                    op: "="
                },
                createTime: {
                    value: "",
                    op: "between",
                    type: "DATE",
                    format: "yyyyMMddHHmmss"
                }
            },
            rules: {},
            tableUrl: authEarlyWarningInfo
        };
    },
    components: { Table },
    methods: {
        /**
         * @description:表单查询
         */
        handleSearch() {
            this.$refs.myTable.handleSearchClick();
        },
        /**
         * @description:表单重置
         */
        handleReset() {
            this.$refs.ruleForm.resetFields();
        },
        /**
         * @description:详情
         */
        handleViewDetail({ id }) {
            const that = this;
            getAuthEarlyWarningDetail(id)
                .then(res => {
                    const sizeForm = res;
                    const layer = this.$dgLayer({
                        title: `详情`,
                        shade: [0.4, "#FFF"],
                        content: Detail,
                        props: {
                            sizeForm
                        },
                        on: {
                            success() {
                                layer.close(layer.dialogIndex);
                            }
                        },
                        area: ["900px", "500px"]
                    });
                })
                .catch(error => {
                    that.$message.error("详情获取失败");
                });
        }
    }
};
</script>
<style lang="scss" scoped></style>