auth-web/src/pages/data-auth-module/auth-object-manage/appfun-resource-manage/app-list.vue

<!--
应用列表
@Author: linqian
@Date: 2021-05-17 15:59
-->
<template>
    <dg-card header="应用列表">
        <!-- 搜索项 -->
        <el-form :inline="true" class="search-form">
            <el-form-item label="应用系统名称">
                <el-input v-model="form.name.value" clearable></el-input>
            </el-form-item>
            <el-form-item label="应用在用标识">
                <dg-select v-model="form.name.value" 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>

        <!-- 操作 -->
        <dg-row zebra="10px">
            <dg-button type="primary" icon="el-icon-upload2" @click="handleImport">导入</dg-button>
            <dg-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</dg-button>
            <dg-button type="primary" icon="el-icon-refresh" @click="handleSync">同步</dg-button>
        </dg-row>
        <!-- 表格 -->
        <dg-table
            ref="table"
            url="/authsvr/v2/roleauthinfo/staffUserPage/_search"
            :condition="form"
            border
            row-key="id"
        >
            <dg-table-column type="index" width="75" label="序号" align="center"></dg-table-column>
            <dg-table-column prop="levelCode" label="应用系统编码" align="center"></dg-table-column>
            <dg-table-column prop="levelName" label="应用系统名称" align="center"></dg-table-column>
            <dg-table-column prop="levelName" label="应用英文名称" align="center"></dg-table-column>
            <dg-table-column prop="levelName" label="应用在用标识" align="center"></dg-table-column>
            <dg-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="u-table__operation">
                        <el-tooltip
                            v-for="(item, index) in optList"
                            :key="index"
                            :content="item.tooltip"
                            effect="dark"
                            placement="top-end"
                        >
                            <i :class="item.icon" @click="item.on(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </dg-table-column>
        </dg-table>
    </dg-card>
</template>

<script>
import importFile from "@/pages/common/import";
import addAppForm from "./add-app-form";
export default {
    components: {},
    data() {
        return {
            form: {
                name: {
                    value: "",
                    op: "="
                }
            },
            optList: [
                { icon: "el-icon-edit", tooltip: "修改", on: this.handleEdit },
                { icon: "el-icon-document", tooltip: "详情", on: this.handleViewDetail },
                { icon: "el-icon-delete", tooltip: "删除", on: this.handleDelete }
            ]
        };
    },
    computed: {},
    methods: {
        /**
         * 编辑
         */
        handleEdit(row) {
            this.handleOpenForm(row.id, "编辑");
        },
        /**
         * 查看详情
         */
        handleViewDetail(row) {
             this.handleOpenForm(row.id, "详情", true);
        },
        /**
         * 删除
         */
        handleDelete(row) {
            this.$dgConfirm(`是否确认删除该条应用！`, "提示", {}).then(() => {});
        },
        /**
         * 查询
         */
        handleSearch() {
            this.$refs.table.searchForm();
        },
        /**
         * 重置
         */
        handleReset() {
            for (const key in this.form) {
                this.form[key].value = "";
            }
        },
        /**
         * 导入
         */
        handleImport() {
            const vm = this;
            const layer = this.$dgLayer({
                title: "导入",
                content: importFile,
                props: {
                    temp: "模板",
                    action: "action"
                },
                on: {
                    success(params) {
                        layer.close(layer.dialogIndex);
                    }
                },
                cancel: function (index, layero) {
                    // 关闭对应弹窗的ID
                    layer.close(index);
                    return false;
                },
                area: ["550px", "500px"]
            });
        },
        /**
         * 新增
         */
        handleAdd() {
            this.handleOpenForm(void 0, "新增");
        },
        handleOpenForm(id, title, isDetail = false) {
            const layer = this.$dgLayer({
                title,
                content: addAppForm,
                props: {
                    id,
                    isDetail
                },
                btn: ["确定", "取消"],
                btnAlign: "r",
                yes: (index) => {
                    let _layer = layer.$children[0];
                    _layer.saveForm();
                    layer.close(index);
                },

                area: ["900px", "600px"]
            });
        },
        /**
         * 同步
         */
        handleSync() {}
    },
    created() {},
    mounted() {}
};
</script>

<style lang='scss'>
</style>