auth-web/src/pages/auth-subject-manage/subject-prop-manage/application-list.vue

<!--
 * @Author: Liugh
 * @Date: 2021-05-19 15:48:57
 * @LastEditTime: 2021-05-20 09:32:34
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\data-auth-module\auth-subject-manage\subject-prop-manage\application-list.vue
 * @Description: 
-->
<template>
    <dg-card class="box-card" header="关联应用资源">
        <el-form ref="form" label-suffix=":" inline>
            <el-form-item label="应用系统名称">
                <el-input clearable placeholder="请输入应用系统名称" v-model="form.applyName.value"></el-input>
            </el-form-item>
            <el-form-item label="应用系统在用标识">
                <dg-select
                    code="DM_APPLY_STATUS"
                    v-model="form.applyStatus.value"
                    placeholder="请选择应用系统在用标识"
                    style="width: 13rem"
                    clearable
                >
                </dg-select>
            </el-form-item>
            <el-form-item>
                <dg-button type="primary" icon="el-icon-search" @click="handleSearch">查询</dg-button>
                <dg-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</dg-button>
            </el-form-item>
        </el-form>
        <Table
            ref="table"
            :url="tableUrl"
            :headerData="cardApplicationList"
            :condition="form"
            :lazyLoad="true"
            @handleRowClick="handleRowClick"
        >
        </Table>
    </dg-card>
</template>

<script>
import Table from "@/components/table";
import * as dynamicManageApi from "@/api/dynamic-manage";
import { cardApplicationList } from "../DataConfig";
import addDialog from "./add-dialog";
const editorArea = ["1200px", "660px"];
export default {
    name: "personnelList", // 组件名称
    props: {
        // 接收父组件的数据
    },
    data() {
        // 组件内部参数
        return {
            // 参数名称及默认值
            cardApplicationList,
            tableUrl: dynamicManageApi.tableUrl,
            form: {
                applyName: {
                    value: "",
                    op: "like"
                },
                applyStatus: {
                    value: "",
                    op: "="
                }
            }
        };
    },
    computed: {}, // 计算属性
    watch: {}, // 侦听器（扩展的计算属性）
    components: { Table }, // 注册局部组件
    methods: {
        /**
         * @description: 查询
         */
        handleSearch() {
            this.$refs.table.handleSearchClick();
        },
        /**
         * @description: 单击表格行
         */
        handleRowClick() {},
        /**
         * @description: 添加
         */
        handleAdd() {
            const layer = this.$dgLayer({
                title: "添加应用",
                shade: [0.4, "#FFF"],
                content: addDialog,
                props: {
                    type: "application"
                },
                on: {
                    success() {
                        layer.close(layer.dialogIndex);
                    }
                },
                area: editorArea
            });
        }
    }, // 内部方法
    beforeCreate() {}, // 组件创建前
    created() {}, // 组件创建完成后
    beforeMount() {}, // 组件挂载前
    mounted() {}, // 组件挂载完成后
    beforeUpdate() {}, // 组件更新前
    updated() {}, // 组件挂载完成后
    beforeDestroy() {}, // 组件销毁前
    destroyed() {} // 组件销毁完成后
};
</script>
<style lang="scss" scoped></style>