<!--
 * @Author: Liugh
 * @Date: 2021-05-19 15:43:35
 * @LastEditTime: 2021-05-20 10:09:39
 * @LastEditors: Do not edit
 * @FilePath: \auth-web\src\pages\data-auth-module\auth-subject-manage\subject-prop-manage\personnel-list.vue
 * @Description: 
-->
<template>
    <dg-card class="box-card" header="人员列表">
        <el-form ref="form" :model="cardForm" label-suffix=":" inline>
            <el-form-item label="姓名">
                <el-input clearable placeholder="请输入姓名" v-model="cardForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
                <el-input clearable placeholder="请输入身份证号码" v-model="cardForm.name"></el-input>
            </el-form-item>
            <el-form-item label="单位名称">
                <dg-tree-select
                    v-model="cardForm.institution"
                    placeholder="请选择单位名称"
                    :data="options"
                    clearable
                    filterable
                    multiple
                ></dg-tree-select>
            </el-form-item>
            <el-form-item>
                <dg-button type="primary" icon="el-icon-search" @click="doSearchPersion">查询</dg-button>
                <dg-button type="primary" icon="el-icon-plus" @click="add">添加</dg-button>
            </el-form-item>
        </el-form>
        <Table
            ref="table"
            :url="tableUrl"
            :headerData="cardPersonnelList"
            :condition="reportForm"
            :lazyLoad="true"
            @handleRowClick="handleRowClick"
        >
        </Table>
    </dg-card>
</template>

<script>
import Table from "@/components/table";
import * as dynamicManageApi from "@/api/dynamic-manage";
import { cardPersonnelList } from "../DataConfig";
import addDialog from "./add-dialog";
const editorArea = ["1200px", "660px"];
export default {
    name: "personnelList", // 组件名称
    props: {
        // 接收父组件的数据
    },
    data() {
        // 组件内部参数
        return {
            // 参数名称及默认值
            cardPersonnelList,
            tableUrl: dynamicManageApi.tableUrl,
            reportForm: {},
            cardForm: {},
            options: [
                {
                    id: "fruits",
                    label: "Fruits",
                    children: [
                        {
                            id: "apple",
                            label: "Apple",
                            isNew: true
                        },
                        {
                            id: "grapes",
                            label: "Grapes",
                            disabled: true
                        },
                        {
                            id: "pear",
                            label: "Pear"
                        },
                        {
                            id: "strawberry",
                            label: "Strawberry 🍓"
                        },
                        {
                            id: "watermelon",
                            label: "Watermelon 🍉"
                        }
                    ]
                },
                {
                    id: "vegetables",
                    label: "Vegetables",
                    children: [
                        {
                            id: "corn",
                            label: "Corn 🌽"
                        },
                        {
                            id: "carrot",
                            label: "Carrot 🥕"
                        },
                        {
                            id: "eggplant",
                            label: "Eggplant 🍆"
                        },
                        {
                            id: "tomato",
                            label: "Tomato 🍅"
                        }
                    ]
                }
            ]
        };
    },
    computed: {}, // 计算属性
    watch: {}, // 侦听器（扩展的计算属性）
    components: { Table }, // 注册局部组件
    methods: {
        /**
         * @description: 查询
         */
        doSearchPersion() {},
        /**
         * @description: 单击表格行
         */
        handleRowClick() {},
        /**
         * @description: 添加
         */
        add() {
            const layer = this.$dgLayer({
                title: "添加人员",
                shade: [0.4, "#FFF"],
                content: addDialog,
                props: {
                    type: "personnel"
                },
                btn: ["保存", "关闭"],
                yes: () => {
                    console.log("我点击了保存");
                },
                btn2: () => {
                    layer.close(layer.dialogIndex);
                },
                area: editorArea
            });
        }
    }, // 内部方法
    beforeCreate() {}, // 组件创建前
    created() {}, // 组件创建完成后
    beforeMount() {}, // 组件挂载前
    mounted() {}, // 组件挂载完成后
    beforeUpdate() {}, // 组件更新前
    updated() {}, // 组件挂载完成后
    beforeDestroy() {}, // 组件销毁前
    destroyed() {} // 组件销毁完成后
};
</script>
<style lang="scss" scoped></style>
