<!--<template>
  <div>
    <h1>User List</h1>
    <table border="1" cellspacing="0" cellpadding="5">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Enabled</th>
          <th>effective_from</th>
          <th>effective_to</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.user_id">
          <td>{{ user.user_id }}</td>
          <td>{{ user.user_name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.first_name }}</td>
          <td>{{ user.last_name }}</td>
          <td>{{ user.enabled_flag }}</td>
          <td>{{ user.effective_from }}</td>
          <td>{{ user.effective_to }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    try {
      const response = await axios.get('http://150.158.130.176:28000/my_app/cbv/demo_user/');
      this.users = response.data;
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }
};
</script>-->



<template>
  <div>
    <h1>User List</h1>
    <button @click="queryData">Search</button>
    <button @click="clearData">Clear</button>
    <el-table :data="users" height="600" border>
      <el-table-column prop="user_id" label="ID" width="50"></el-table-column>
      <el-table-column prop="user_name" label="Name" width="150"></el-table-column>
      <el-table-column prop="first_name" label="First Name" width="120"></el-table-column>
      <el-table-column prop="last_name" label="Last Name" width="120"></el-table-column>
      <el-table-column prop="email" label="Email" width="250"></el-table-column>
      <el-table-column prop="enabled_flag" label="Enabled" width="80"></el-table-column>
      <el-table-column prop="effective_from" label="Effective From" width="200"></el-table-column>
      <el-table-column prop="effective_to" label="Effective To"></el-table-column>
    </el-table>
  </div>
</template>


<script>
import axios from 'axios';

export default {
    data() {
        return {
            users: [], // 初始化用户数据为空数组
        };
    },
    methods: {
        async queryData() {
            try {
                const response = await axios.get('http://150.158.130.176:28000/my_app/cbv/demo_user/');
                this.users = response.data;
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        },
        clearData() {
           this.users = []
        }
    }
  /*
  async created() {
    try {
      const response = await axios.get('http://150.158.130.176:28000/my_app/cbv/demo_user/');
      this.users = response.data;
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  },
  */
};
</script>