<template>
    <hr>
    <h3>居民健康档案列表</h3>

    <table border="1">
        <tbody>
        <tr>
            <td>身份证</td>
            <td>姓名</td>
            <td>sbp</td>
            <td>dbp</td>
            <td>操作</td>
        </tr>
        <tr v-for="person in persons" :key="person.id">
            <td>{{person.id}}</td>
            <td>{{person.name}}</td>
            <td>{{person.sbp}}</td>
            <td>{{person.dbp}}</td>
            <td>
                <router-link :to="{path:'/person_881_1/EditPerson',query:{id:person.id}}">编辑</router-link>|
                <router-link :to="{path:'/person_881_1/DeletePerson',query:{id:person.id}}">删除</router-link>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <!--                AddPerson在route表中还是指向的edit-->
                <router-link :to="{path:'/person_881_1/AddPerson',query:{id:''}}">新增</router-link>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script>
    export default {
        name: "ListPerson",
        data() {
            return {
                proxy: "/springbootServer",
                urlSelectAll: "/PersonBaseInfo_881_1/selectAll",
                //id, name, gender, password, address, create_time, update_time
                persons: [{id: "", name: "", sbp: "",dbp:""}],
            }
        },
        methods: {
            selectAll() {
                let url = this.proxy + this.urlSelectAll;
                //console.log(url);
                let that = this;
                this.axios.get(url).then(
                    function (response) {
                        //console.log(response.data.responseData);
                        that.persons = response.data.responseData;
                    },
                    function (error) {
                        let errorMessage="有可能是springboot服务没有启动,或是端口配置错误,或是防火墙没有开";
                        console.log(errorMessage);
                        that.persons[0].id=errorMessage;
                        console.log(error.data);
                    }
                )
            },
        },
        mounted() {
            this.selectAll();
            window.myVue=this;
        }
    }
</script>

<style scoped>
    table {
        border-collapse: collapse;
        margin: auto;
    }

    td {
        padding: 2px;
    }



</style>


