auth-web/src/pages/log-manage/auth-risk-detection/index.vue

<!--
 * @Author: Liugh
 * @Date: 2021-05-25 13:49:40
 * @LastEditTime: 2021-05-25 14:36:52
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\log-manage\err-auth-earlywarning-manage\auth-earlywarning-plan.vue
 * @Description: 鉴权风险检测
-->
<template>
    <main>
        <el-form ref="ruleForm" inline :rules="rules" :model="form">
            <!-- <el-form-item label="鉴权风险检测名称">
                <el-input v-model="form.name.value" placeholder="请输入鉴权风险检测名称" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="方案状态" prop="state.value">
                <dg-select
                    v-model="form.state.value"
                    placeholder="请选择方案状态"
                    code="DM_APPLY_STATUS"
                    style="width: 13rem"
                    clearable
                >
                </dg-select>
            </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="RiskDetectionPlan" :condition="form">
            <dg-table-column fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <div class="u-table__operation">
                        <el-tooltip
                            v-for="(item, i) in optList"
                            :key="i"
                            :content="item.tooltip"
                            effect="dark"
                            placement="top-end"
                        >
                            <i :class="item.icon" @click="item.on(scope.row)" />
                        </el-tooltip>
                    </div>
                </template>
            </dg-table-column>
        </Table>
    </main>
</template>

<script>
import Table from "@/pages/common/table";
import { RiskDetectionPlan } from "../DataConfig";
import { authRiskDetectionUrl, getAuthRiskDetail } from "@/api/log-manage";
import Detail from "@/pages/log-manage/auth-risk-detection/detail";
import Editor from "@/pages/log-manage/auth-risk-detection/edit";

export default {
    name: "auth-risk-detection",
    props: {},
    data() {
        const that = this;
        return {
            RiskDetectionPlan,
            form: {
                // name: {
                //     value: "",
                //     op: "like"
                // },
                state: {
                    value: "",
                    op: "="
                }
            },
            rules: {},
            tableUrl: authRiskDetectionUrl,
            optList: [
                { icon: "el-icon-edit", tooltip: "修改", on: that.handleEditor },
                { icon: "el-icon-document", tooltip: "详情", on: that.handleDetail }
            ]
        };
    },
    components: { Table, Detail, Editor }, // 注册局部组件
    methods: {
        reloadTable() {
            const that = this;
            that.$refs.myTable.$refs.grid.reload();
        },
        handleEditor({ id }) {
            const that = this;
            getAuthRiskDetail(id)
                .then(res => {
                    const formData = res;
                    const layer = that.$dgLayer({
                        title: "修改风险检测方案",
                        shade: [0.4, "#FFF"],
                        area: ["830px", "660px"],
                        content: Editor,
                        props: {
                            formData
                        },
                        on: {
                            success(bool = false) {
                                layer.close(layer.dialogIndex);
                                if (bool) {
                                    that.reloadTable();
                                }
                            }
                        }
                    });
                })
                .catch(error => {
                    that.$message.error("详情获取失败");
                });
        },
        handleDetail({ id }) {
            const that = this;
            getAuthRiskDetail(id)
                .then(res => {
                    const layer = that.$dgLayer({
                        title: "风险检测方案详情",
                        shade: [0.4, "#FFF"],
                        content: Detail,
                        area: ["830px", "660px"],
                        props: { sizeForm: res },
                        on: {
                            success() {
                                layer.close(layer.dialogIndex);
                            }
                        }
                    });
                })
                .catch(error => {
                    that.$message.error("详情获取失败");
                });
        },
        /**
         * @description:表单查询
         */
        handleSearch() {
            this.$refs.myTable.handleSearchClick();
        },
        /**
         * @description:表单重置
         */
        handleReset() {
            this.$refs.ruleForm.resetFields();
        }
    }
};
</script>
<style lang="scss" scoped></style>