finanzas_api/APP/pages/users.vue

<template>
<div>


    <card class="col-12">
        <el-table
          :data="Users"
          border
          empty-text="No hay Ingresos registrados"
          stripe
          
          style="width: 100%"
        >
          <el-TableColumn type="expand"> 
              <template slot-scope="props">
                   <p>Nombre: {{ props.row.name }}</p>
                   <p>Correo: {{ props.row.email }}</p>
                   <p>Permisos: {{ props.row.role }}</p> 
                   <div class="imagen"><img  :src=props.row.image.secure_url width="200" height="200" /></div>
       
      </template>
          </el-TableColumn>
          <el-TableColumn prop="name" label="Nombre" sortable></el-TableColumn>
          <el-TableColumn prop="email" label="Correo" sortable></el-TableColumn>
                 
          <el-TableColumn prop="role" label="Permisos" sortable></el-TableColumn>
         
         
                    <el-TableColumn fixed="right">
            <div slot-scope="{ row, $index }">
                      <el-tooltip content="Delete" effect="light">
                <base-button
                  type="danger"
                  icon
                  size="sm"
                  class="btn-link"
                  @click="deleteUser(row._id)"
                >
                  <i class="el-icon-delete-solid"></i>
                </base-button>
              </el-tooltip>
              </div>
</el-TableColumn>
  
        </el-table>
      </card>

      <card class="card-login card-white">
        <template slot="header">
         <h1 class="card-title">Nuevo usuario </h1>
        </template>

        <div>
          <base-input
            name="name"
            v-model="user.name"
            placeholder="Name"
            addon-left-icon="tim-icons icon-badge"
            required
          >
          </base-input>

          <base-input
            name="email"
            v-model="user.email"
            placeholder="Email"
            addon-left-icon="tim-icons icon-email-85"
          >
          </base-input>

          <base-input
            name="password"
            v-model="user.password"
            type="password"
            placeholder="Password"
            addon-left-icon="tim-icons icon-lock-circle"
          >
          </base-input>

            <base-input>
            <select class="form-control" v-model="user.role">
              <option>USER</option>
              <option>ADMIN</option>
            </select>
          </base-input>
           
      
      
      <input ref="upload"
       type="file"
       name="file-upload"
       multiple=""
       accept="image/jpeg, image/png"
       @change="handleFileUpload( $event )">

        </div>

 

        <div slot="footer">
          <base-button
            native-type="submit"
            type="info"
            class="mb-3"
            size="lg"
            @click="register()"
            block
          >
            Register
          </base-button>

        </div>
      </card>
    </div>
  </div>
</template>
<script>
import { Table, TableColumn } from "element-ui";
import { Select, Option } from "element-ui";
export default {
  middleware: ["authenticated","authenticatedAdmin"],
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Option.name]: Option,
    [Select.name]: Select,
  },
  //layout: "auth",
  data() {
    return {
      user: {
        name: "",
        email: "",
        password: "",
        role:"USER",
        files: "",
      },
      file: "",
      Users: [],
    };
  },
  mounted() {
    
    this.getUsers();
  },
  methods: {
    handleFileUpload(event) {
      this.user.files = event.target.files[0];
    },
    getUsers() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.$axios
        .get("/users", axiosHeader)
        .then((res) => {
          this.Users = res.data.data;
        })
        .catch((e) => console.log(e));
    },
    register() {
      let formData = new FormData();
      formData.append("File", this.user.files);
      this.user.files = "";
      formData.append("user", JSON.stringify(this.user));
      this.$axios
        .post("/register", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.$notify({
            type: "success",
            icon: "tim-icons icon-check-2",
            message: "Success! Now you can login...",
          });

          this.user.name = "";
          this.user.password = "";
          this.user.email = "";
          this.user.role="USER"
          this.getUsers();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message:
              "No esta permitido la creaciøn de usuarios, o ya existe !!!",
          });
        });
    },

        deleteUser(id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: id,
        },
      };
      this.$axios
        .delete("/user", axiosHeader)
        .then((res) => {
          this.getUsers();
          
        })
        .catch((e) => console.log(e));
    },
  },
};
</script>
<style>
</style>