viernes, 31 de julio de 2015

Calcular la Depreciación de un Activo utilizando PHP - JQUERY EASYUI

El propósito de este tutorial es describir un proyecto completo paso a paso, donde se explicara la manera de hacer un modulo, donde se pueda crear, editar y eliminar un Activo Fijo y a su vez se genera la depreciación correspondiente usaremos la formula de Linea Recta. Las librerías de enfoque serán Jquery-EasyUI, usaremos php como base y aplicaremos MVC partiendo del javascript de las librerías. Primero les mostrare algunos significados y luego les mostrare el código. Manos a la obra.



Descargar Proyecto


DepreciaciónLa depreciación es el mecanismo mediante el cual se reconoce el desgaste que sufre un bien por el uso que se haga de el. La depreciación lineal es el método mas fácil y el más utilizado por las empresas,  consiste en dividir el valor del activo entre la vida útil del mismo. [Valor del activo/Vida útil].

Ejemplo: Supongamos un  cuyo valor es de $40.000.000. Se tiene entonces (40.000.000 /10) = 4.000.000.
Así como se determina la depreciación anual - También muestra otros métodos de depreciación como guía útiles para otra ocasión. Espero les sirva.

Esta es la forma en la que debe quedar al finalizar el Excel que calcule la depreciación - Este es un modelo a seguir para saber que se debe calcular al final en el Excel dentro del código.

Ya explicado un poco de teoría vamos a comenzar a utilizar algunas librerías externas, a continuación les dejo los links para que se den cuenta que son muy fáciles de utilizar, en la página podrán encontrar varios ejemplos y el código para cada caso.
LIBRERIAS EXTERNAS
**Librería EasyUI: Se debe descargar GPL Edition, en esta página podrán encontrar varios ejemplos que podrán utilizar en sus proyectos. 
**Notificaciones Messi: Estas notificaciones permiten que los mensajes en pantalla tengan mejor estilo.** http://marcosesperon.es/apps/messi/ aquí se explica como se puede utilizar este código.

LIBRERIAS USADAS EN EL PROYECTO
Common.css: Es la librería Principal usada para el diseño del formulario Principal.
easyui/themes/default/easyui.css: Tema por defecto usado, (acomodado a mi necesidad).
easyui/themes/icon.css: Diseño para los iconos de los botones.
notificaciones/messi.min.css: Diseño de los mensajes de Dialogo.
cssformulario.css: Librería Secundaria, usada para el diseño del Formulario de Editar.

Nota: Las librerías que les muestro aquí, son recopilaciones mías, de proyectos pasados, que me sirven para tener mas completo acceso al diseño. Las librerías de jquery que coloque aquí para descargar son acomodadas a mi necesidad por eso solo están las que yo modifique, es decir la mayoría de la estructura del diseño la acomode a lo que yo quería y necesitaba en ese momento. Al final podrán descargar todo el proyecto.



En primer lugar se debe crear las tablas que se van a usar con las siguientes columnas, como se muestra en el  Modelo de Datos Entidad Relación a continuación.

Aquí les dejo el pruebas.sql para que descarguen la base de datos.

1. Conexión - clase_principal.php
El código va de la siguiente manera, se va a usar MVC con jquery, lo primero es crear el script de conexión y luego las consultas, se va hacer sobre un servidor SQL.
Antes debes tener claras la instancia, el usuario  y la contraseña, tener instalado el driver ODBC si lo requiere ya que todas las consultas se harán de esta manera. Aqui podrás encontrar otros ejemplos de Conexión ODBC.
class principal
{
 var $tabla = "" ;
 var $consulta = "" ;
 var $conn;
//Conexión SQL Server
 var $connection_string = 'DRIVER={SQL Server};SERVER=192.168.1*.1**\SQLINSTANCIA;DATABASE=database'; 
 var $user = 'root'; 
 var $pass = ''; 
// crear conexion con sqlserver
 function conectar(){
  if (!($this->conn = odbc_connect($this->connection_string, $this->user, $this->pass))){
   echo 'error al conectarse con la Base de Datos' ;
  }else{
    //echo ' Conexion exitosa';
  }
 } 
// funcion para cerrar todas las conexiones
 function cerrar_todas_conexiones(){
  echo ' $result = $db->query("SHOW FULL PROCESSLIST");
  while ($row=odbc_fetch_array($result)) {
  $process_id=$row["Id"];
  if ($row["User"] != "root" ) {
  print("KILLED:  " . $process_id);
  $sql="KILL $process_id";
  odbc_exec($sql);
  }}
  }' ;
 } 

/*----------------------FUNCIONES DE PHP CON SQL SERVER ODBC ---------------  */
// consultar la base de datos
 function ejecutar($query){
 return odbc_exec($this->conn, $query);
 $this->cerrarConexion() ;
 }
// cierra una conexion con sqlserver
 function cerrarConexion(){
 odbc_close($this->conn) ;
 }
} 

2. Consultas - PPEquipo_modelo.php
Vamos a continuar con las consultas a la base de datos que van a permitirnos, realizar la creación, actualización, eliminación de activos fijos y a su vez la creación de la depreciación de cada activo fijo.
require_once('conexion/clase_principal.php');

//clase de conexión Activos
class Activos{
 private
  $objeto = NULL;
  
//instancio la calse de conexion y la llamo this para poderla utilizar en este archivo  
 public function __construct(){ //ceo un constructor para preparar la consulta
  $this->objeto = new principal();
  $this->objeto->conectar(); 
 }
Se comienza con una instancia de la clase conexión dentro del archivo, lo llamamos con require_once(); para poder ejecutar las consultas. Se coloca un __construct() para preparar la consulta y que nos permita llamar clase principal new principal() como un objeto y se pueda utilizar en este archivo la función conectar que es la encargada de conectarnos a la base de datos.

En este mismo archivo creamos las funciones que se encargan de llamar los datos que necesitamos.
//funcion para buscar un activo dependiente del código o nombre digitado
 public function GetActivo($sort, $order, $CodigoActivo, $NombreActivo){
  $Where = '';
  
  if($CodigoActivo != '' && $NombreActivo != ''){
   $Where = "WHERE CodigoActivo LIKE  '$CodigoActivo%'  AND NombreActivo LIKE '$NombreActivo%' "; 
  }
  else if($CodigoActivo != '' && $NombreActivo == ''){
   $Where = "WHERE CodigoActivo LIKE  '$CodigoActivo%'  "; 
  }
  else if($CodigoActivo == '' && $NombreActivo != ''){
   $Where = "WHERE NombreActivo LIKE '$NombreActivo%' ";  
  }
  else if($CodigoActivo == '' && $NombreActivo == ''){
   $Where = ''; 
  }
  else{
   //
  }   
  $sql="SELECT * FROM ActivosFijos $Where ORDER BY $sort $order";
  $result = $this->objeto->ejecutar($sql);
  return $result;
 }

Esta consulta lo que hace es llamar todos los datos que se han ingresado de activos fijos y adicional a esto también busca por $CodigoActivo o $NombreActivo de acuerdo a lo que el usuario haya ingresado en las cajas de texto. Este código va unido a una grilla que nos proporciona el EasyUI y que con una consulta nos llama todo los datos que necesitemos, mostrándolos en su totalidad y permitiendo hacer filtros de búsqueda por nombre y código como les mostraré cuando estemos viendo el script de la presentación.

Ahora vamos a insertar los Activos fijos nuevos, como ya sabemos que datos lleva la tabla comenzamos:

public function CrearActivo($CodigoActivo, $NombreActivo, $TipoActivoCuenta, $DescripcionSubcuenta, $NombreProveedor, $TipoIdentificacion, $Identificacion, $Direccion, $Telefono, $Pais, $Departamento, $Ciudad, $NumeroFactura, $FechaAdquisicion, $CostoActivo, $VidaUtil, $MarcaActivo, $ModeloActivo, $LocalizacionActivo, $SerialActivo, $UsuarioCreacion, $FechaModificacion){

$sql = "INSERT INTO ActivosFijos 
       (CodigoActivo, NombreActivo, TipoActivoCuenta, 
        DescripcionSubcuenta, NombreProveedor, TipoIdentificacion, 
        Identificacion, Direccion, Telefono, Pais, 
        Departamento, Ciudad, NumeroFactura, FechaAdquisicion,
        CostoActivo, VidaUtil, MarcaActivo, ModeloActivo, 
        LocalizacionActivo, SerialActivo, UsuarioCreacion, 
        FechaModificacion
       ) 
       VALUES 
       ('$CodigoActivo', '$NombreActivo', '$TipoActivoCuenta', 
        '$DescripcionSubcuenta', '$NombreProveedor', 
        '$TipoIdentificacion', $Identificacion, '$Direccion', 
        '$Telefono', '$Pais', '$Departamento', '$Ciudad', 
        '$NumeroFactura', '$FechaAdquisicion', $CostoActivo, 
         $VidaUtil, '$MarcaActivo', '$ModeloActivo', 
        '$LocalizacionActivo', '$SerialActivo','$UsuarioCreacion', 
        '$FechaModificacion'
       )";
$result = $this->objeto->ejecutar($sql);
return $result;
}
Con esta consulta se va a insertar los datos ingresados del Activo y a su vez enviamos por URL las variables hacia el controlador.

Para editar, es decir actualizar datos ya creados, la consulta es la siguiente, de la misma forma enviamos las variables a modificar:
public function EditarActivo($CodigoActivo, $NombreActivo, $TipoActivoCuenta, $DescripcionSubcuenta, $NombreProveedor, $TipoIdentificacion, $Identificacion, $Direccion, $Telefono, $Pais, $Departamento, $Ciudad, $NumeroFactura, $FechaAdquisicion, $CostoActivo, $VidaUtil, $MarcaActivo, $ModeloActivo, $LocalizacionActivo, $SerialActivo, $UsuarioCreacion, $FechaModificacion, $id){
 
 $sql = " UPDATE ActivosFijos 
          SET CodigoActivo = '$CodigoActivo', 
          NombreActivo = '$NombreActivo', 
          TipoActivoCuenta = '$TipoActivoCuenta',
          DescripcionSubcuenta = '$DescripcionSubcuenta', 
          NombreProveedor = '$NombreProveedor', 
          TipoIdentificacion = '$TipoIdentificacion', 
          Identificacion ='$Identificacion', 
          Direccion = '$Direccion', 
          Telefono = '$Telefono', 
          Pais = '$Pais', 
          Departamento = '$Departamento', 
          Ciudad = '$Ciudad', 
          NumeroFactura = '$NumeroFactura', 
          FechaAdquisicion = '$FechaAdquisicion', 
          CostoActivo = '$CostoActivo', 
          VidaUtil = '$VidaUtil', 
          MarcaActivo ='$MarcaActivo', 
          ModeloActivo = '$ModeloActivo', 
          LocalizacionActivo = '$LocalizacionActivo', 
          SerialActivo = '$SerialActivo', 
          UsuarioCreacion = '$UsuarioCreacion', 
          FechaModificacion = '$FechaModificacion'  
  WHERE id = '$id' ";
  $result = $this->objeto->ejecutar($sql);
  return $result;
 }

Y para eliminar, en tal caso de que se necesite y solo se envía por URL la variable id, que identifica el activo a borrar:

public function EliminarActivo($id){
 $sql = "DELETE FROM ActivosFijos WHERE id = $id ";
 $result = $this->objeto->ejecutar($sql);
 return $result;
 }

Ahora, en el EXCEL donde vamos a mostrar la depreciación de un activo en especifico, con todos su cálculos, se necesita identificar que cuenta y subcuenta utilizan.
Ejemplo: si un activo es un computador de escritorio, pertenece a la cuenta 1524 - Equipos de Oficina  y esta cuenta a su vez llama una subcuenta 152410 - Equipos. Al requerirse el nombre de las cuentas que maneja y como a la hora de crearse el activo fijo solo utilizamos el código de cuenta mas no el nombre como referencia para llenar el combo, debemos hacer dos funciones adicionales que llamen estos datos de acuerdo al código a los que pertenecen.

//función que trae el nombre de la cuenta y todos los datos del activo fijo para calcular la depreciación más adelante en el Excel.
public function Depreciacion($CodigoActivo){
 $sql = "SELECT 
           a.*, 
           p.NombreCuenta AS Cuenta 
         FROM ActivosFijos a 
         JOIN PUC p 
           ON a.TipoActivoCuenta = p.CodigoCuenta 
         WHERE CodigoActivo = '$CodigoActivo'  
        ";
 $result = $this->objeto->ejecutar($sql);
 return $result;
 }

//función que trae el nombre de subcuenta dependiendo del activo al que pertenece. 
public function Depreciacion2($CodigoActivo){
 $sql = "SELECT 
          p.NombreCuenta AS Subcuenta 
         FROM ActivosFijos a 
         JOIN PUC p 
          ON a.DescripcionSubcuenta = p.CodigoCuenta 
         WHERE CodigoActivo = '$CodigoActivo'   
        ";
 $result = $this->objeto->ejecutar($sql);
 return $result;
 } 

Con los datos que trae function Depreciación se calcula más adelante la Depreciación del activo fijo.
Recuerdan la tabla MovDepreciacionActivo, bueno vamos a crear la consulta con la que debemos insertar los datos. Porque se hace esto, es mas fácil crear un botón en el formulario que genere la depreciación y que se guarde en una tabla para luego traer los datos de allí y mostrarlos en un excel, que hacer todo el proceso de calculo cada vez que se abre un excel de un activo fijo especifico. Para eso son las bases de datos, guardan lo que necesitemos y almacenan información útil.

public function InsertMovDepreAct($CodigoActivo, $FechaAdquisicion, $CostoActivo, $VidaUtil,  $Meses, $CuotaDepreciacion, $DepreciacionAcumulada, $ValorNetoLibros, $FechaDepreciacion){
 
$sql = "INSERT INTO MovDepreciacionActivo 
        (CodigoActivo, FechaAdquisicion, CostoActivo, VidaUtil, Meses, 
         CuotaDepreciacion, DepreciacionAcumulada, ValorNetoLibros, FechaDepreciacion
         ) 
        VALUES 
        ('$CodigoActivo', '$FechaAdquisicion', $CostoActivo, $VidaUtil, $Meses, 
          $CuotaDepreciacion, $DepreciacionAcumulada, $ValorNetoLibros, '$FechaDepreciacion'
        ) ";
 $result = $this->objeto->ejecutar($sql);
 return $result;
 }

Como el código de inserción de los movimientos de depreciación se crean cada vez que se oprime el botón generar, este no debe sobrescribirse ni repetirse, para esto se crea la función Delete, para que antes de generar nuevamente la depreciación si esta existe se borre de la base de datos y ahí si libremente pueda crearse.
public function DeletMovDepreAct($CodigoActivo){
 $sql = "DELETE FROM MovDepreciacionActivo  WHERE CodigoActivo = '$CodigoActivo' ";
 $result = $this->objeto->ejecutar($sql);
 return $result;
 }

Recuerdan que también hablamos de depreciación por mes; resulta que a veces solo queremos ver la depreciación del estos últimos seis meses, solo para saber en que valor se encuentra este, y si ya se acabo su vida útil, para esto se deben seleccionar en el formulario de Easyui que mas adelante les mostrare como crearlo un rango de meses lo que generara un excel mas pequeño y útil para cuando se necesite la información mas precisa, para esto se crea la siguiente función:
public function DepreciacionMes($year, $mes){
 $FechaInicial='';
 $FechaFinal='';
  
 switch ($mes){
  case 1:
   $FechaInicial = $year.'-01-01';
   $FechaFinal = $year.'-01-31';
  break;
  case 2:
   $FechaInicial = $year.'-02-01';
   $FechaFinal = $year.'-02-28';
   break;
  case 3:
   $FechaInicial = $year.'-03-01';
   $FechaFinal = $year.'-03-31';
  break;
  case 4:
   $FechaInicial = $year.'-04-01';
   $FechaFinal = $year.'-04-30';
  break;
  case 5:
   $FechaInicial = $year.'-05-01';
   $FechaFinal = $year.'-05-31';
  break;
  case 6:
   $FechaInicial = $year.'-06-01';
   $FechaFinal = $year.'-06-30';
  break;
  case 7:
   $FechaInicial = $year.'-07-01';
   $FechaFinal = $year.'-07-31';
  break;
  case 8:
   $FechaInicial = $year.'-08-01';
   $FechaFinal = $year.'-08-31';
  break;
  case 9:
   $FechaInicial = $year.'-09-01';
   $FechaFinal = $year.'-09-30';
  break;
  case 10:
   $FechaInicial = $year.'-10-01';
   $FechaFinal = $year.'-10-31';
  break;
  case 11:
   $FechaInicial = $year.'-11-01';
   $FechaFinal = $year.'-11-30';
  break;
  case 12:
   $FechaInicial = $year.'-12-01';
   $FechaFinal = $year.'-12-31';
  break;
 }

 $sql="SELECT 
         m.*, 
         a.NombreActivo 
       FROM MovDepreciacionActivo m 
       INNER JOIN ActivosFijos a 
         ON m.CodigoActivo = a.CodigoActivo 
       WHERE m.FechaDepreciacion BETWEEN '$FechaInicial' 
         AND '$FechaFinal' 
      ";
$result = $this->objeto->ejecutar($sql);
return $result;
 }
En la función se llama un swith - case para definir el rango de fecha inicial y fecha final que conforman cada mes, colocando como variable a enviar por url los números de meses y el año utilizados en la consulta al final.
Bueno Con esto terminamos el script de PPEquipo_modelo.php.

Vamos a comenzar con el diseño y la presentación del modulo de Activos fijos Ahora si se puso divertido.

3. Presentación - PPEquipo_vista.php
Para comenzar debemos añadir las librerías que vamos a utilizar para que todo funcione.

Head
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../../images/icono2.ico" rel="icon" type="image/ico" />
<title>Propiedad, Planta y Equipo</title>

<link rel="stylesheet" type="text/css" href="css/Common.css">
<link rel="stylesheet" type="text/css" href="componentes/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="componentes/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="componentes/notificaciones/messi.min.css">
<link rel="stylesheet" type="text/css" href="css/cssformulario.css">

<!--<script src="componentes/easyui/jquery.easyui.min.js"></script>-->
<script src="componentes/easyui/jquery.min.js"></script>
<script src="componentes/easyui/jquery.easyui.min.js"></script>
<script src="componentes/easyui/locale/easyui-lang-es.js"></script>
<script src="componentes/notificaciones/messi.min.js"></script>
<script src="componentes/easyui/jquery.maskedinput.js"></script>

</head>
Deben buscar en la librería de EasyUI y la de messi para que añadan correctamente lo que necesitan.

Dentro de la etiqueta body  se colocan los estilos que necesitamos únicamente para este formulario:

Body - Style
<style type="text/css">
#fm{
 margin:0;
 padding:10px 30px;
}
.ftitle{
 font-size:14px;
 font-weight:bold;
 color:#666;
 padding:5px 0;
 margin-bottom:10px;
 border-bottom:1px solid #ccc;
}
.fitem{
 margin-bottom:5px;
}
.fitem label{
 display:inline-block;
 width:80px;
}
.borde{
 background:#bbd8e9;
 width:90%;
}
.borde td{
 padding:10px 0 10px 0;
}
.borde input, .borde select{
 margin-bottom:10px;
 margin-top:10px;
 padding:10px;
}
.datebox{
 background-color: rgba(255, 255, 255, 0.4); 
 border:1px solid #ccc ; 
 padding: 5px; 
 font-family: Keffeesatz, Arial; 
 color: #4b4b4b; 
 font-size: 14px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px;
 -moz-webkit-border-radius: 5px; 
 margin-bottom: 15px; 
 margin-top: -10px;
 margin-left:23px; 
}
.datebox input:focus{ 
 border: 1px solid #3498db;
 background-color: rgba(255, 255, 255, 1); 
 outline: none;
 -moz-box-shadow: 0 0 0 1px #9dd0f2 inset;
 -webkit-box-shadow: 0 0 0 1px #9dd0f2 inset;
 box-shadow: 0 0 0 1px #9dd0f2 inset;
}
.titulo{
 text-align:center; 
 width:600px; height:50px; 
 color:#FFFFFF; 
 background:#428bca; 
 vertical-align:middle; 
 margin:0 auto; 
 padding-left:50px; 
 padding-top:20px; 
 font-weight:300;
 font-size:20px;
 font-family:Arial, Helvetica, sans-serif;
}
.btn-info, .btn-success{
 margin-right:30px;
}

</style>

En este proyecto queremos colocar un logo en la parte de arriba que haga distinción sobre la pagina de la empresa o la marca personal, además del logo, también incluí una imagen hecha con código que se ajuste a la página web, una imagen con SVG (con este link pueden mirar otras imágenes hechas con SVG y un pequeño turorial de como se hacen.). Cualquiera de los dos esta bien dejar, yo incluí las dos formas para mostrarles.

Encabezado
<!------------------------------------->
<!-----------------Logo---------------->
<!------------------------------------->
<div style="text-align:center">
 <figure align="center" >
        <img src="../../images/LOGO PAGINA.png" width="203" height="120"alt="Logo" style="margin-right:80px">

    <svg  style="margin-bottom:-60px; text-align:center"  enable-background='new 0 0 260 300' height='100px' id='solution_icon' version='1.1' viewbox='0 0 260 300' width='70px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
    <g>
      <path d='M243.547,57.254l-97.224-53.49C141.911,1.336,136.112,0,129.998,0s-11.912,1.336-16.324,3.764l-97.221,53.49&#x000A; C7.228,62.327,0,74.508,0,84.986v130.029c0,10.478,7.228,22.66,16.453,27.733l97.221,53.489c4.412,2.427,10.21,3.763,16.324,3.763&#x000A; s11.913-1.336,16.325-3.764l97.224-53.492C252.772,237.67,260,225.489,260,215.012V84.986C260,74.511,252.774,62.33,243.547,57.254z&#x000A;  M42.944,248.017V134.048h125.395v124.565H62.205L42.944,248.017z M81.205,103.111h58.979c0.012,0.343,0.053,0.678,0.053,1.024&#x000A; v21.772H76.021v-18.883L81.205,103.111z M138.871,94.969h-30.066V72.274C123.004,72.569,134.958,82.045,138.871,94.969z&#x000A;  M182.682,222.498l-6.147,17.271V131.21l6.147-9.158V222.498z M189.313,228.29l15.373,4.934l-23.422,17.684L189.313,228.29z&#x000A;  M190.878,220.235V114.115l18.44-8.65v120.689L190.878,220.235z M182.161,109.2c-0.674,0.315-1.247,0.808-1.66,1.423l-10.257,15.285&#x000A; h-21.812v-21.772c0-0.343-0.018-0.683-0.025-1.024h46.734L182.161,109.2z M67.826,125.907H51.013l16.813-12.695V125.907z&#x000A;  M173.021,94.969h-25.667c-4.065-17.177-19.292-30.119-37.633-30.831c3.383-14.008,16.065-24.464,31.191-24.464&#x000A; c17.704,0,32.108,14.308,32.108,31.895V94.969z M100.609,94.969H79.825c-0.895,0-1.768,0.292-2.479,0.83l-0.216,0.163&#x000A; c3.011-11.253,12.051-20.063,23.479-22.803V94.969z M251.804,215.012c0,7.527-5.599,16.965-12.226,20.611l-97.225,53.492&#x000A; c-3.172,1.744-7.674,2.744-12.355,2.744c-4.681,0-9.183-1-12.354-2.744l-40.641-22.359h95.435c0.25,0,0.502-0.029,0.749-0.074&#x000A; c0.086-0.017,0.17-0.042,0.254-0.063c0.155-0.039,0.307-0.084,0.458-0.142c0.091-0.034,0.182-0.073,0.269-0.113&#x000A; c0.138-0.063,0.27-0.136,0.398-0.215c0.084-0.051,0.167-0.1,0.247-0.155c0.033-0.025,0.07-0.042,0.104-0.067l40.979-30.938&#x000A; c1.02-0.77,1.618-1.969,1.618-3.241V99.04c0-2.249-1.834-4.071-4.099-4.071h-32.2v-23.4c0-22.076-18.079-40.037-40.303-40.037&#x000A; c-19.865,0-36.407,14.355-39.698,33.168c-18.561,3.204-32.799,19.056-33.357,38.264l-31.49,23.773&#x000A; c-1.499,1.027-1.602,2.019-1.618,3.24v113.53l-14.326-7.882c-6.627-3.645-12.226-13.083-12.226-20.61V84.986&#x000A; c0-7.527,5.599-16.966,12.226-20.61l97.222-53.49c3.172-1.745,7.674-2.745,12.354-2.745c4.682,0,9.184,1,12.355,2.745l97.225,53.49&#x000A; c6.627,3.646,12.226,13.085,12.226,20.61V215.012z'></path>
   </g> 
        </svg>
 </figure> 
</div>

Seguimos con el Menú, este indicara los subniveles que tendrá la pagina web, por ahora solo colocaremos algunos ejemplos como guía. Si quieres ver como hacer este menú de 3 niveles entra aquí, o un menú mas sencillo de 2 Niveles entra aquí.

<!----------------------------------->
<!--------------Menú----------------->
<!----------------------------------->
<nav id="menu-wrap">
 <ul id="menu" style="margin-top:-1px;">
  <li><a href="#">INICIO</a></li>
  <li>
   <a href="#">ADMINISTRACIÓN</a>
   <ul>
             <li>
                 <a href="PPEquipo_vista.php">Propiedad Planta y Equipo</a>
                </li>
   </ul>
  </li>
        <li>
   <a href="#">REPORTES</a>
   <ul>
                 <li>
     <a href="#">Balances</a>
                    <ul>
                     <li>
             <a href="#">Balance Empresa</a>
                        </li>
                        <li>
             <a href="#">Balance Consolidado</a>
                        </li> 
                    </ul>  
     </li>  
      </ul> 
  </li>
  <li><a href="#">Salir</a></li>
 </ul>
</nav>

<h1 style="padding:10px">Propiedad, Planta y Equipo</h1>

Des esta manera se vería la primera parte del diseño:



Cuerpo
Ahora vamos a incluir el Datagrid del EasyUI - esta grilla se encargará de mostrar los datos consultados con un select a la tabla de Activos fijos. El datagrid, gracias a su librería nos provee de un formulario para crear y editar - (Basic CRUD Application) sin la necesidad de usar javascript. Ayuda mucho cuando necesitamos un formulario de este tipo sin tantos compliques. Si has leído la página del EasyUI que te mostré arriba entenderás fácilmente de que se trata las grillas que estamos usando.

Primero se crea el DataGrid sin código javascript, solo usando diseño y las clases correspondientes al DIV y a la tabla.

<!----------------------------------->
<!----------Datagrid del Easyui------>
<!----------------------------------->
<div align="center">
 <!--Forma general de la grilla principal-->
    <div class="demo-info"  style="margin-bottom:10px">
        <table id="dg" 
            title="Listado Activos Fijos" 
            class="easyui-datagrid" 
            style="width:950px;height:500px; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0;"
            url="PPEquipo_controlador.php?Action=GetActivo"
            toolbar="#toolbar" 
            pagination="false"  
            striped="true" 
            rownumbers="true" 
            fitColumns="true" 
            singleSelect="true"
            sortName="CodigoActivo" 
            sortOrder="asc"><!--Se coloca el titulo, la clase, el estilo que marca lo bordes redondeados,la URL que se envia para  traer del controlador los datos, se excluye la paginación y se colocan otras propiedades que ayudan a que la grilla mantenga su forma e información-->
            <thead>
                <tr>
                    <!--Son los titulos de las columnas que van dentro de la grilla ** en el FIELD colocar el nombre exacto de la columna tal y como se creo en la tabla, para que este pueda acomodar los datos cuando los traiga la consulta -->
                    <th field="CodigoActivo" width="25" style="font-weight:bold" sortable="true">Código</th>
                    <th field="NombreActivo" width="65" style="font-weight:bold" sortable="true">Nombre Activo</th>
                    <th field="FechaAdquisicion" width="35" style="font-weight:bold" sortable="true">Fecha de Compra</th>
                    <th field="CostoActivo" width="20%" style="font-weight:bold" sortable="true">Costo de Activo</th> 
                </tr>
            </thead>
        </table>
 </div>
 
    <!--Aquí se coloca las cajas de texto para realizar la busqueda por codigo o nombre y los iconos que llaman cada función como editar, crear, eliminar, depreciación.
    -->
    <div id="toolbar">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>Codigo:</span>
        <input id="CodigoActivo" name="CodigoActivo"  style="line-height:26px;border:1px solid #ccc; padding:2px; width:100px;"  onKeyUp="this.value = this.value.toUpperCase();">
        &nbsp;&nbsp;&nbsp;
        <span>Nombre:</span>
        <input id="NombreActivo" name="NombreActivo"  style="line-height:26px;border:1px solid #ccc; padding:2px;"  onKeyUp="this.value = this.value.toUpperCase();">
        <!--Iconos -> llaman la clase, es decir la imagen asociada y llama el function que envia la URL para obtener lo requerido-->
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch();">&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="NuevoActivo();">&nbsp;&nbsp;&nbsp;&nbsp;Nuevo</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="EditarActivo();">&nbsp;&nbsp;&nbsp;Editar</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="EliminarActivo();">&nbsp;&nbsp;&nbsp;&nbsp;Eliminar</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-excel2" plain="true" id="Excel" onclick="ExportarActivos();">&nbsp;&nbsp;&nbsp;&nbsp;Activos</a>
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-pesos" plain="true" id="Depreciacion" onclick="ExportarDepreciacion();">&nbsp;&nbsp;&nbsp;&nbsp;Depreciación</a>
        <br>
        <!--Este combo almacena los meses, ya que la depreciación depende de los meses que se hayan seleccionado y el año-->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <label for="LstMes">Mes: </label>
        <select  name="LstMes" id="LstMes" style="width:110px;" required>
            <option value="13" selected>Seleccione</option>
            <option value="1">Enero</option>
            <option value="2">Febrero</option>
            <option value="3">Marzo</option>
            <option value="4">Abril</option>
            <option value="5">Mayo</option>
            <option value="6">Junio</option>
            <option value="7">Julio</option>
            <option value="8">Agosto</option>
            <option value="9">Septiembre</option>
            <option value="10">Octubre</option>
            <option value="11">Noviembre</option>
            <option value="12">Diciembre</option>
         </select> 
         &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
        <label for="TxtYear">Año: </label>
        <input name="TxtYear" type="text" id="TxtYear" value="<?php echo date('Y'); ?>" size="4" maxlength="4"> 
        &nbsp;&nbsp;
        <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-infomes" plain="true" id="DepreciacionMes" onclick="DepreciacionXmes();">&nbsp;&nbsp;&nbsp;&nbsp;Informe Mes</a>
        <!--<button class="azul" plain="true" onclick="">Calcular</button>-->
    </div>

De esta manera se ve la estructura del EasyUI que acabamos de formar, con los iconos ubicados en el Tollbar (es decir la parte de arriba de la grilla):


Aquí podrán ver Como se modifican los iconos en el EasyUI, y como se insertan en el css.

Ahora vamos a ver como es el formulario Interno, es el modelo que usamos para Editar, Crear y generar la Depreciación, se utiliza el mismo formulario. Se incluye el código php para el llenado del combo de países *este es un combo dependiente que llena Departamentos y este a su vez llena ciudades.

<!-------------------------------------------------->
<!--------------FORMULARIO CREAR Y EDITAR----------->
<!-------------------------------------------------->       
    <div id="dlg" class="easyui-dialog" style="text-align:center;width:1250%; height:690%; padding:10px 20px; background:url(../../images/crud.png)"
            closed="true" buttons="#dlg-buttons">
        <div class="titulo">Detallado Activo Fijo</div>
        <div  class="form">
            <form id="fm" method="post" novalidate autocomplete="off"> 
                <p class="contact"><label for="CodigoActivo">Código</label></p> 
                <br>
                <input id="CodigoActivo" name="CodigoActivo"  required  onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" >
              <p class="contact"><label for="NombreActivo">Nombre</label></p> 
              <br>
                <input id="NombreActivo" name="NombreActivo" placeholder="Propiedad, planta y equipo" required="required"   onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" >
                    
               <fieldset>
                    <label for="TipoActivoCuenta">Tipo Activo - Cuenta <br>
                        <select class="select-style gender"  name="TipoActivoCuenta"  style="width:515px" required>
                            <option value="0">Selecione</option> 
                            <option value=""</option>
                        </select>
                    </label>
              </fieldset>
    
              <fieldset>                
                    <label for="DescripcionSubcuenta" >Descripción - Subcuenta<br>
                      <select class="select-style gender" name="DescripcionSubcuenta" style=" width:515px"" required>
                        <option value="0">Seleecione</option>
                            <option value=""</option>
                      </select>
                    </label>
                </fieldset>   
    
              <p class="contact"><label for="NombreProveedor">Nombre del Proveedor</label></p> 
                <p class="contact"><input  id="NombreProveedor" name="NombreProveedor" required onkeypress="return soloLetras(event);" onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></p>
               
               <fieldset>
                    <label for="TipoIdentificacion">Tipo Identificación <br>
                        <select class="select-style gender" style="width:170px" name="TipoIdentificacion" required class="easyui-validatebox" >
                            <option value="0">Selecione</option> 
                            <option value="NIT">NIT</option>
                            <option value="CEDULA">CEDULA</option>
                        </select>
                    </label>
                    <p class="contact"><label for="Identificacion" style="margin-left:30px" >Identificación</label></p><br>
                    <p class="contact"><input  id="Identificacion" name="Identificacion" style="width:300px; margin-left:2px " required onKeyPress="return SoloNumeros(event);" class="easyui-validatebox" ></p>       
              </fieldset>
                           
              <p class="contact"><label for="Direccion">Dirección</label></p> 
                <p class="contact"><input   id="Direccion" name="Direccion" placeholder="Kr 1 2 3 - Cll 1 2 3" required  onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></p> 
        
              <p class="contact"><label for="Telefono" >Teléfono</label></p><br><br>
                <p class="contact"><input  id="Telefono" name="Telefono"  placeholder="Móvil o Fijo" required   class="easyui-validatebox" ></p>
                
                
                <fieldset>      
                    <label for="Pais" >País <br>
                        <select class="select-style gender" style="width:240px" name="Pais" id="Pais" >
                            <option >Seleccione</option>
                            <option value=""></option>  
                        </select>
                    </label>
                    
                    <input type="hidden" name="Departamento" id="Departamento1">
                    <label for="Departamento" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Departamento <br>
                        <select class="select-style gender" style="width:250px; margin-left:22px" name="Departamento" id="Departamento" >
                         <option>Seleccione</option>
                        </select>
                    </label>
                    
                </fieldset>
                <br>
                <fieldset>
                    <input type="hidden" name="Ciudad" id="Ciudad1">
                    <label for="Ciudad" >Ciudad <br>
                        <select class="select-style gender" style="width:240px;" name="Ciudad" id="Ciudad" required>
                         <option value="0">Seleccione</option>
                        </select>
                    </label>
                    <label for="FechaAdquisicion" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fecha de Adquisición<br><br>
                     <input  id="FechaAdquisicion" class="easyui-datebox" name="FechaAdquisicion" style="width:240px;">              
                    </label>   
                </fieldset>
                
              <p class="contact"><label for="NumeroFactura" >Número Factura</label><br></p>
                <p class="contact"><input id="NumeroFactura" name="NumeroFactura"   required onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></p> 
                    
                <fieldset>
                    <label for="CostoActivo">Costo Activo ($)<br><br>
                    <input type="number" id="CostoActivo" name="CostoActivo" style="width:220px; margin-left:0px"  required  class="easyui-validatebox" ></label>
                    
                    <label for="VidaUtil" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Vida Util (meses)<br><br>
                    <input type="number" id="VidaUtil"  name="VidaUtil" style="width:240px; margin-left:22px" required onKeyPress="return SoloNumeros(event);"  class="easyui-validatebox" ></label>       
                </fieldset>
                
                <fieldset>
                    <label for="MarcaActivo" >Marca<br><br>
                    <input  id="MarcaActivo" name="MarcaActivo" style="width:220px; margin-left:0px"  required onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></label>
                    
                    <label for="ModeloActivo" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Modelo<br><br>
                    <input  id="ModeloActivo"  name="ModeloActivo" style="width:240px; margin-left:22px" required onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></label>       
                </fieldset>
                
                <fieldset>
                    <label for="LocalizacionActivo">Localización Activo <br>
                        <select class="select-style gender" style="width:240px" name="LocalizacionActivo" required>
                            <option value="0">Selecione</option> 
                            <option value="SISTEMAS">SISTEMAS</option>
                            <option value="MERCADEO">MERCADEO</option>
                            <option value="RECEPCION">RECEPCION</option>
                            <option value="RECURSOS_H">RECURSOS_HUMANOS</option>
                            <option value="COMPRAS">COMPRAS</option>
                            <option value="IMPORTACIONES">IMPORTACIONES</option>
                            <option value="FINANCIERO">FINANCIERO</option>
                            <option value="GERENCIA">GERENCIA</option>
                            <option value="PRODUCCION">PRODUCCION</option>
                            <option value="INVENTARIOS">INVENTARIOS</option>
                            <option value="BODEGA">BODEGA</option>
                            <option value="ALMACEN">ALMACEN</option>
                            <option value="CAFETERIA">CAFETERIA</option>
                        </select>
                    </label>
                    
                    <p class="contact"><label for="SerialActivo" style="margin-left:20px">Serial</label></p><br>
                    <p class="contact"><input  id="SerialActivo" name="SerialActivo" style="width:240px; margin-left:-5px " required onKeyUp="this.value = this.value.toUpperCase();"  class="easyui-validatebox" ></p>       
                </fieldset>
                
                <fieldset>
                  <label for="UsuarioCreacion" >Usuario<br><br>
                    <input type="text" id="UsuarioCreacion" name="UsuarioCreacion" style="width:220px; margin-left:0px" value="<?php //echo $_SESSION['nombrecompleto']; ?>" readonly></label>
                    
                    <label for="FechaModificacion" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fecha Modificación<br><br>
                    <input  id="FechaModificacion"  name="FechaModificacion"  style="width:240px; margin-left:22px"  readonly="true" value="<?php echo date("Y-m-d"); ?>"></label>       
              </fieldset>
            </form>
        </div>          
    </div>    
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton verde"  onclick="SaveDepreciacion()">Depreciación</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" class="easyui-linkbutton azul"  onclick="SaveActivo()">Guardar</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#" class="easyui-linkbutton rojo"  onclick="javascript:$('#dlg').dialog('close')">Cancelar</a>&nbsp;&nbsp;&nbsp;&nbsp;
    </div>

</div>

Así quedaría el formulario para Editar Activos Fijos:


Y de esta manera haré el Footer, que es el pie de pagina.

<!----------------------------------->
<!----------Pie de Página------------>
<!----------------------------------->   
<hr align="center" size="2" width="62%" color="#CCCCCC" height:"1px"  style="margin-top:35px"/>
<footer style="color:#333"><!--pie de pagina -->
 <a href="#">&copy; 2014 - <?php echo date ('Y')?> ProgramadoresSinOficio.Blogstpot.com</a>
    <br />
    <a href="#">Desarrollado e Implementado por LEIDY VANESSA BRICEÑO CACERES</a>
</footer>    

Es muy practico y ayuda de referencia para mostrar quien es al autor del proyecto. Si quieres ver más diseños de FOOTER entra aqui.

A continuación, voy a colocar todo el código javascript que se encuentra ubicado antes de finalizar la etiqueta Body. Este es el encargado de activar las URL y los botones creados con anterioridad. Es el beneficio de usar EasyUI.

Javascript
La variable var:url; almacena la dirección URL en la que el formulario publicará cuando guarde los datos del ActivoFijo.

Esta función habilita el cuadro de dialogo de NuevoActivo() y lo abre con los campos limpios, Al mismo tiempo envia una 'UR'L con el ?Action: que Crea el Activo es decir este ?Action: activa en el controlador el Objeto que crea los Activos Fijos en la Base de datos.

function NuevoActivo(){
 $('#dlg').dialog('open').dialog('setTitle','Crear Propiedad, Planta y Equipo');
 url ='PPEquipo_controlador.php?Action=CrearActivo';
 id_formulario = "#fm";
 
 $('#fm').each (function(){
   this.reset();
    });
}

Esta función habilita el cuadro de dialogo de EditarActivo() que es el mismo de NuevoActivo(), los datos del formulario de carga de la fila del datagrid que se ha seleccionado para editar.

function EditarActivo(){
 var row = $('#dg').datagrid('getSelected');
 if (row){
  $('#dlg').dialog('open').dialog('setTitle','Editar Propiedad, Planta y Equipo');
  $('#fm').form('load',row);
  url = 'PPEquipo_controlador.php?Action=EditarActivo&id='+row.id;
  id_formulario = "#fm";
 }
 else{
  //Cuadros de dialogo con mensajes y muy bonitos estilos.
  new Messi('No ha seleccionado ningun Activo Fijo para editar.', {title: 'Atención', titleClass: 'info',  buttons: [{id: 0, label: 'Cerrar', val: 'X'}]}); 
 } 
 
}

Esta función se utiliza para guardar los datos de ActivosFijos y se aplica en el Botón Guardar del Formulario Editar y Nuevo. Antes de enviar la URL del formulario, la función onSubmit:function() se llamará, en ese momento podemos validar el valor del campo de formulario. Cuando los valores de los campos del formulario se han Inscrito correctamente, se cierra el cuadro de diálogo y se vuelven a cargar los datos en el DataGrid.

function SaveActivo(){
 console.log(id_formulario);
 $(id_formulario).form('submit',{
  url: url,
  onSubmit: function(){
  return $(this).form('validate');
  //console.log($(id_formulario).serialize());
  },
  success: function(result){
   new Messi('Activo Fijo Creado o Actualizado Correctamente.', {title: 'Información', titleClass: 'success'});
   console.log("Resultado del submit"+result);
    $('#dg').datagrid('reload'); // reload the user data
    $('#dlg').dialog('close');
    //$('#dlg_editar').dialog('close'); // close the dialog
   
   if (result){
    $('#dg').datagrid('reload');
    $('#dlg').dialog('close');
    //$('#dlg_editar').dialog('close');
     // close the dialog
     // reload the user data
   } else {
    console.log ('error lanzado');
    $.messager.show({
     title: 'Error',
     msg: result.msg
    });
    new Messi('Error al guardar o actualizar Activo Fijo', {title: 'Error', titleClass: 'anim error'});
   }
  }
 });
}

Para eliminar un Activo Fijo se debe tener en cuenta seleccionar el Activo que se desea eliminar. Antes de eliminar una fila, vamos a mostrar un cuadro de diálogo de confirmación para permitir al usuario determinar si se debe eliminar realmente los datos de la fila. Al eliminar los datos con éxito, se llama al método datagrid('reload') para actualizar los datos DataGrid.. Para esto se utiliza el siguiente código.

function EliminarActivo(){
 var row = $('#dg').datagrid('getSelected');
 if (row){
  new Messi('Está seguro que desea eliminar este Activo Fijo?', {
   title: 'Confirmación', modal:true, buttons: [{
    id: 0, label: 'Si', val: 'Y', class: 'btn-info'},{
     id: 1, label: 'No', val: 'N'}],
  callback: function(r) { 
   if(r == "Y"){
    $.post('PPEquipo_controlador.php?Action=EliminarActivo',{id:row.id},function(result){
     if (result.success){
      new Messi('Activo Fijo eliminado correctamente', {title: 'Eliminar', titleClass: 'success'});
     $('#dg').datagrid('reload'); // reload the user data
     } else {
     $.messager.show({ // show error message
      title: 'Error',
      msg: result.msg
     });
     new Messi('Error al eliminar Activo Fijo', {title: 'Error', titleClass: 'anim error'});
    }
   },'json');
  }}
  });
 }
}

Esta función se utiliza para guardar los datos de Depreciación y se aplica en el Botón 'Depreciación' del Formulario Editar y Nuevo. Se envía la URL con los datos que permitirán calcular la depreciación en 'PPEquipo_controlador.php' para guardarse en la base de datos. Al momento de enviarse se valida que los dados hayan cargado correctamente en la tabla.

function SaveDepreciacion(){
 var row = $('#dg').datagrid('getSelected');
 if (row){
 console.log(id_formulario);
 $(id_formulario).form('submit',{
  url: 'PPEquipo_controlador.php?Action=InsertarDepreciacion&CodigoActivo='+row.CodigoActivo,
  onSubmit: function(){
  return $(this).form('validate');
  },
  success: function(result){   
   console.log("Resultado del submit"+result);
    //$('#dg').datagrid('reload'); // reload the user data
    $('#dlg').dialog('close');   
   if (result){
    //$('#dg').datagrid('reload');
    new Messi('Depreciacion Creada Correctamente.', {title: 'Información', titleClass: 'success'});
    $('#dlg').dialog('close');
   } else {
    /*console.log ('error lanzado');
    $.messager.show({
     title: 'Error',
     msg: result.msg
    });*/
    new Messi('Error crear la Depreciación', {title: 'Error', titleClass: 'anim error'});
   }
  }
 });
  }
}


Cuando el usuario ingresa los valores de código y nombre la función doSearch() se encarga de traer los valores y leerlos. Este código se llama con un método de load para cargar nuevos datos en el Datagrid, Tenemos que pasar #CodigoActivo y los parámetros #NombreActivo al servidor, es decir con este id se hace la consulta a la base de datos en PPEquipo_modelo.php y se llama la variable por POST en el PPEquipo_controlador.php *el nombre de la variable es igual al id de la caja de texto.

function doSearch(){
    $('#dg').datagrid('load',{
        CodigoActivo: $('#CodigoActivo').val(),
        NombreActivo: $('#NombreActivo').val()
    });
}

Estas funciones a continuación son las encargadas de llamar el documento en excel con los datos de la depreciación según se necesite. Por meses o de cada activo fijo.


function ExportarActivos(){//exporta el balance de prueba 
 document.getElementById('Excel').href = 'PPEquipo_controlador.php?Action=Excel';
}


function DepreciacionXmes(){ 
 var year = document.getElementById('TxtYear').value;
 var mes = document.getElementById('LstMes').value;
 
 if(mes==13)
 {
  new Messi('No ha seleccionado ningún Mes a depreciar.', {title: 'Atención', titleClass: 'info', buttons: [{id: 0, label: 'Cerrar', val: 'X'}]});
 }
 else{
  //la variable se envia por URL para que tome el Action del Controlador
  document.getElementById('DepreciacionMes').href = 'PPEquipo_controlador.php?Action=DepreciacionXmes&year=' + year + '&mes=' + mes;
 }   //
}


function ExportarDepreciacion(){ 
 var row = $('#dg').datagrid('getSelected');
 
 if (row){
  $('#').form('load',row);
  //la variable se envia por URL para que tome el Action del Controlador
  document.getElementById('Depreciacion').href = 'PPEquipo_controlador.php?Action=Depreciacion&CodigoActivo=' + row.CodigoActivo;
 }
 else
 {
  new Messi('No ha seleccionado ningun Activo Fijo para Depreciacion.', {title: 'Atención', titleClass: 'info', buttons: [{id: 0, label: 'Cerrar', val: 'X'}]});
 }
   //
}

Con esto terminamos el código del diseño y la presentación. Ahora vamos a explicar, el controlador que es donde llegan las url y los datos enviados y este ejecuta todo lo que necesitamos.

4. Controlador- PPEquipo_controlador.php
Este es el query que se encarga de controlar todos los procedimientos y ejecutarlos.
Comenzamos inicializando las variables Globales que necesitamos.

require_once('PPEquipo_modelo.php');
$ObjActivo = new Activos();

//traigo las paginas, y las filas por si se debe incluir numeracion de pagina en el Datagrid
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 20;

//Llamo el order para ordenar de forma ascendente toda la información de la tabla
$offset = ($page - 1) * $rows;//cuenta cuantas paginas hay y desde ahi organiza
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';

//Se recibe por Post las variables de código y nombre enviadas desde la capa presentación
$CodigoActivo = isset($_POST['CodigoActivo']) ? ($_POST['CodigoActivo']) : '';
$NombreActivo = isset($_POST['NombreActivo']) ? ($_POST['NombreActivo']) : '';

Este Código se encarga de traer todos los datos consultado en la tabla para mostrarlos en el Datagrid.

if($_REQUEST['Action'] == 'GetActivo'){
 $items = array();
 $result = array();
 //ordeno por codigo del activo
 $sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'CodigoActivo'; 
 //Recibo en $Rset las variables enviadas por URL desde las consultas de la capa MODELO
 $Rset = $ObjActivo->GetActivo($sort, $order, $CodigoActivo, $NombreActivo);
   
   //Recorre todos los datos que trae la consulta y los envia como archivo por JSON
 while($row = odbc_fetch_object($Rset)){ 
  array_push($items, $row);//arma el array leyendo cada fila
 }
 $result['rows'] = $items;
 //arma el archivo JSON_ENCODE (usado para escapar caracteres)
 echo json_encode($result);  
}

Este código se activa cuando oprimimos el Botón Nuevo, en ese momento se envía el ?Action=='CrearActivo' y el Controlador lo recibe con el $_REQUEST y ejecuta el Insert del Objeto ->CrearActivo()

else if($_REQUEST['Action'] == 'CrearActivo'){
 if ($ObjActivo->CrearActivo(
     $_REQUEST['CodigoActivo'], 
     $_REQUEST['NombreActivo'], 
     $_REQUEST['TipoActivoCuenta'], 
     $_REQUEST['DescripcionSubcuenta'], 
     $_REQUEST['NombreProveedor'], 
     $_REQUEST['TipoIdentificacion'], 
     $_REQUEST['Identificacion'], 
     $_REQUEST['Direccion'], 
     $_REQUEST['Telefono'], 
     $_REQUEST['Pais'], 
     $_REQUEST['Departamento'], 
     $_REQUEST['Ciudad'], 
     $_REQUEST['NumeroFactura'], 
     $_REQUEST['FechaAdquisicion'], 
     $_REQUEST['CostoActivo'],
     $_REQUEST['VidaUtil'], 
     $_REQUEST['MarcaActivo'], 
     $_REQUEST['ModeloActivo'], 
     $_REQUEST['LocalizacionActivo'], 
     $_REQUEST['SerialActivo'], 
     $_REQUEST['UsuarioCreacion'], 
     $_REQUEST['FechaModificacion'])){
  //el request hace las mismas del post llamando las variables que nombré en el sql del modelo
  echo json_encode(array('success'=>'Activo Fijo Creado exitosamente.'));
 }
 else{
  echo json_encode(array('msg'=>'Ocurrio un error al ingresar Nuevo Activo.'));
 }
}

Este código se activa cuando se envia por URL el ?Action == 'EditarActivo' el controlador lo recibe y ejecuta la Actualización.

else if($_REQUEST['Action'] == 'EditarActivo'){
 if ($ObjActivo->EditarActivo(
     $_REQUEST['CodigoActivo'], 
     $_REQUEST['NombreActivo'], 
     $_REQUEST['TipoActivoCuenta'], 
     $_REQUEST['DescripcionSubcuenta'], 
     $_REQUEST['NombreProveedor'], 
     $_REQUEST['TipoIdentificacion'], 
     $_REQUEST['Identificacion'], 
     $_REQUEST['Direccion'], 
     $_REQUEST['Telefono'], 
     $_REQUEST['Pais'], 
     $_REQUEST['Departamento'], 
     $_REQUEST['Ciudad'], 
     $_REQUEST['NumeroFactura'], 
     $_REQUEST['FechaAdquisicion'], 
     $_REQUEST['CostoActivo'],
     $_REQUEST['VidaUtil'], 
     $_REQUEST['MarcaActivo'], 
     $_REQUEST['ModeloActivo'], 
     $_REQUEST['LocalizacionActivo'], 
     $_REQUEST['SerialActivo'], 
     $_REQUEST['UsuarioCreacion'], 
     $_REQUEST['FechaModificacion'], $_REQUEST['id'])){ 
  echo json_encode(array('success'=>'Activo Fijo Actualizado exitosamente.') );
 }
 else{
  echo json_encode(array('msg'=>'Ocurrio un error al actualizar activo fijo.'));
 }
}

Con este código insertamos en la tabla de Depreciación el calculo que se le realiza al activo creado.

if($_REQUEST['Action'] == 'InsertarDepreciacion'){
 //Se elimina los datos que existan de ese activoantes de ser insertados
 $ObjActivo->DeletMovDepreAct($CodigoActivo); 
 
 $FechaAdquisicion = isset($_POST['FechaAdquisicion']) ? ($_POST['FechaAdquisicion']) : '';
 $CostoActivo = isset($_POST['CostoActivo']) ? ($_POST['CostoActivo']) : '';
 $VidaUtil = isset($_POST['VidaUtil']) ? ($_POST['VidaUtil']) : '';
 $Meses = 0;
 $CuotaDepreciacion = $CostoActivo / $VidaUtil; 
 

 for($Meses = 0; $Meses <= $VidaUtil; $Meses++){
  //Aplico las formular para calcular la Depreciación de un Activo.
  $ObjActivo->InsertMovDepreAct($CodigoActivo, $FechaAdquisicion, $CostoActivo, $VidaUtil, $Meses, $CuotaDepreciacion, $CuotaDepreciacion * $Meses, $CostoActivo - ($CuotaDepreciacion * $Meses), date("Y-m-d", strtotime("$FechaAdquisicion +$Meses month")));
  echo $VidaUtil;
 }
}

Ahora para crear el Excel. Solo vamos a mostrar el Reporte de Depreciación el código de los otros reportes los podrás descargar junto con el proyecto. El Reporte donde podremos ver todo el calculo de la Depreciación de un activo fijo se realiza lo siguiente:


/****************** D E P R E C I A C I O N  A C T I V O S  F I J O S************/
/********************************************************************************/

//verifica que el valor de la variable Action es = a Excel, si si ejecuta:
if($_REQUEST['Action'] == 'Depreciacion'){ 
 $CodigoActivo = (isset($_REQUEST['CodigoActivo']) == '') ? '' : $_REQUEST['CodigoActivo'];
 
 //doy el nombre al archivo excel
 $Name = 'Depreciacion_Activos.xls'; 
 $FileName = "./$Name";
 //creo las cabeceras de la tabla
 $Header = 'CodigoActivo;NombreActivo;FechaAdquisicion;CostoActivo;VidaUtil;NumeroFactura;MarcaActivo;ModeloActivo;LocalizacionActivo;SerialActivo';
 $Header .= "\r\n";
 
 //llamo la consulta del modelo
 $Rset = $ObjActivo->Depreciacion($CodigoActivo);
 $Reset =$ObjActivo->Depreciacion2($CodigoActivo);
  
 //Descarga el archivo desde el navegador
 header('Expires: 0');
 header('Cache-control: private');
 header('Content-Type: application/x-octet-stream'); // Archivo de Excel
 header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
 header('Content-Description: File Transfer');
 header('Last-Modified: '.date('D, d M Y H:i:s'));
 header('Content-Disposition: attachment; filename="'.$Name.'"');
 header("Content-Transfer-Encoding: binary");
 
 //echo $Header;
?> <!-- muestra con diseño la impresion en excel .xls -->
 <h1  align="center" style="
   color: #132679;
   font: normal 16px/1 Verdana, Helvetica;
   position: relative;">INDUSTRIAS PARTMO S.A<br />
            <strong style="color:#B8080B; font:normal 13px/1 Verdana, Helvetica;">CALCULO DEPRECIACIÓN <br />  ACTIVOS FIJOS   <?php echo date('Y'); ?></strong>

    </h1>
    <br>
    <!--Llamo el array en las variables que necesito mostrar-->
    <?php
        $Linea = odbc_fetch_array($Rset); 
 $NombreActivo_= $Linea['NombreActivo'];  
 $Cuenta_ =$Linea['Cuenta'];
 $CostoActivo_= $Linea['CostoActivo'];
 $VidaUtil_= $Linea['VidaUtil'];
 $TipoActivoCuenta_ = $Linea['TipoActivoCuenta'];
 $DescripcionSubcuenta_ = $Linea['DescripcionSubcuenta'];
 $FechaAdquisicion_ = $Linea['FechaAdquisicion'];
  
 $Linea2 = odbc_fetch_array($Reset);
 $Subcuenta_ = $Linea2['Subcuenta'];
?>
    <!--Llamo los datos para cada celda-->
    <table>    
        <tr>
         <td align="left" style="background:#ebf1c9; font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">Fecha de Compra:</td>
            <td align="left" style="background:#ebf1c9; font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold; color:#0076a8"><?php echo $FechaAdquisicion_; ?></td>
        </tr>
        <tr>
         <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">Nombre Activo:</td>
            <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold"><?php echo $NombreActivo_; ?></td>
        </tr>
        <tr>
         <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">Cuenta:</td>
            <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold"><?php echo $TipoActivoCuenta_; ?> - <?php echo $Cuenta_; ?></td>
        </tr>
        <tr>
         <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">SubCuenta:</td>
            <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold"><?php echo $DescripcionSubcuenta_; ?> - <?php echo $Subcuenta_; ?></td>
        </tr>
        <tr></tr>
        <tr>
         <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">Costo Activo:</td>
            <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold"><?php echo $CostoActivo_; ?></td>
        </tr>
        <tr>
         <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold">Vida Util (meses):</td>
            <td align="left" style="font:13px/1 Verdana, Geneva, sans-serif; font-weight:bold"><?php echo $VidaUtil_; ?></td>
        </tr>
        <tr></tr>
    </table>
    
    
 
 <table align="center" border="1px" bordercolor="#999999">
      <tr  style="border-color:#434343; border:1px;">
        <th rowspan="2" scope="col" align="center" style="background:#44b9d5; color: #FFFFFF; font:12px/1 Verdana, Geneva, sans-serif; ">MESES</th>
        <th rowspan="2" scope="col" align="center" style="background:#44b9d5; color: #FFFFFF; font:12px/1 Verdana, Geneva, sans-seri; ">CUOTA DEPRECIACIÓN</th>
        <th rowspan="2" scope="col" align="center" style="background:#44b9d5; color: #FFFFFF; font:12px/1 Verdana, Geneva, sans-serif; ">DEPRECIACIÓN ACUMULADA</th>
        <th rowspan="2" scope="col" align="center" style="background:#44b9d5; color: #FFFFFF; font:12px/1 Verdana, Geneva, sans-serif; ">VALOR NETO EN LIBROS</th>
        <th rowspan="2" scope="col" align="center" style="background:#44b9d5; color: #FFFFFF; font:12px/1 Verdana, Geneva, sans-serif; ">FECHAS</th>
      </tr>
 <tr></tr>
      <?php 
          $Rset = $ObjActivo->Depreciacion($CodigoActivo);
  
   $Linea = odbc_fetch_array($Rset);
   $CostoActivo_= $Linea['CostoActivo'];
   $VidaUtil_= $Linea['VidaUtil'];
   $FechaAdquisicion_ = $Linea['FechaAdquisicion'];
   //calculo de la depreciación
   $Depreciacion = $CostoActivo_ / $VidaUtil_;
   
   //con este FOR se incrementa desde cero hasta el tope de la vida util y hace que las demás columnas se repitan completando la tabla hacia abajo
   $i = 0;
   for($i = 0; $i<= $VidaUtil_; $i++){
?>
      <!--Llamo los datos para cada celda con los calculos-->
      <tr style="border-color:#999; border:1px;">
       <!--incremento de meses-->
        <td align="center" style="font:12px/1 Verdana, Geneva, sans-serif"><?php echo $i; ?></td> 
        <!--calculo de la deprecición en la cantidad de meses-->
        <td align="right" style="font:12px/1 Verdana, Geneva, sans-serif"><?php echo $Depreciacion; ?></td>
        <!--calculo de la depreciación acumulada en la cantidad de meses-->
        <td align="right" style="font:12px/1 Verdana, Geneva, sans-serif"><?php echo $Depreciacion * $i; ?></td>
        <!--calculo del saldo en libros-->
        <td align="right" style="font:12px/1 Verdana, Geneva, sans-serif"><?php echo $CostoActivo_ - ($Depreciacion * $i); ?></td>
        <!--suma la cantidad de incremento a la fecha en meses-->
        <td align="right" style="font:12px/1 Verdana, Geneva, sans-serif"><?php echo date("d/m/Y", strtotime("$FechaAdquisicion_ +$i month")); ?></td>
      </tr>
   <?php
   }
   ?>
    </table>
<?php
}  

Espero que les haya gustado este Post. Pueden descargarlo y dejen sus comentarios de cualquier duda.

Descargar Proyecto



29 comentarios:

  1. Wuaoo! Muchas gracias por compartir. :)

    ResponderEliminar
  2. Buenas noches, he intentado hacerlo correr pero no he podido.
    Talvez puedes hacer un manual para hacerlo funcionar. Gracias

    ResponderEliminar
    Respuestas
    1. Que parte no te funciona, para explicarme mejor, quizas las librerias del EasyUi?? Espero te haya funcionado si no solo avisame para saber que debo detallar mejor

      Eliminar
  3. De antemano te agradezco mucho.
    Para base de datos utilizo xampp, y el proyecto lo coloco en htdocs d ela carpeta xampp, debería funcionare ?? o que mas debo hacer?

    ResponderEliminar
    Respuestas
    1. Buenas tardes,
      Si, el proyecto debe ubicarlo en la carpeta htdocs del servidor (XAMPP en este caso), para poder visualizarlo debe digitar en el navegador "localhost/proyecto/pagina.php". Si el proyecto funciona con base de datos, obligatoriamente debe crearla y subir un backup para que funcione plenamente.

      Eliminar
    2. Muachas gracias por la ayuda excelente proyecto..

      Eliminar
    3. No hay problema, espero que le haya servido el ejercicio y lo haya podido visualizar correctamente. Estoy aquí para cualquier inquietud.

      Eliminar
    4. @franklin chamba como lo solucionaste __????

      Eliminar
  4. Buenos dias, le molesto nuevamente.
    Ya visualizo las ventanas y no hay problema con las librerias, pero tengo problema con la conexión a la base de datos, los combos no se cargan, nose si depende de la versión de Mysql porque la base de datos la cree en UTF8, pero en el script suyo esta en utf8mb4, deberia ser algun problema esto?? o depende de la conexion ODBC?? Ayudeme porfa... gracias

    ResponderEliminar
    Respuestas
    1. Ya revisó que en el archivo de conexión estén definidos el usuario y contraseña correctos para abrir la conexión o también podrían ser las funciones js que no se están cargando correctamente.

      Eliminar
    2. la BD. la cree tal como esta en el archivo pruebas osea el mismo código lo mande a correr y se creo la base de datos pruebas, esto lo hice en xampp, en phpmyadmin, de ahí no he realizado cambios en ninguna función.
      Ayúdame de pronto alguna sugerencia de cambio??

      Eliminar
    3. Debemos hacer una inspección desde el inicio, conexión, base de datos, código php y js. Te recomiendo que instales la extensión Firebug para Mozilla Firefox, la cual nos permite ver todo lo que se carga en la página desde que se lanza, permitiéndonos ver los errores de compilación de js por consola. Instala, ejecuta y dime que error sale. URL del complemento https://addons.mozilla.org/es/firefox/addon/firebug/. Recuerda activar primero el complemento antes de cargar la página de la aplicación.

      Eliminar
  5. hola una pregunta tengo que modificar la coneccion verdad ?

    ResponderEliminar
    Respuestas
    1. Claro, recuerda que debes definir el usuario y la contraseña para crear comunicación entre el PHP y el mysql asegúrate de descargar las librerias. Debes personalizar la conexión, y crear un base de datos propia. Cuéntame cómo te acabo de ir.

      Eliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Mira lo que tienes que hacer es cambiar la conexión a MySqli y las funciones que ejecutan las consultas. Guíate por este ejemplo:

      $mysqli = new mysqli("ejemplo.com", "usuario", "contraseña", "basedatos");
      if ($mysqli->connect_errno) {
      echo "Falló la conexión con MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
      }

      $resultado = $mysqli->query("SELECT id FROM test ORDER BY id ASC");

      while ($fila = $resultado->fetch_assoc()) {
      echo " id = " . $fila['id'] . "\n";
      }

      Eliminar
  7. Cómo sería la conexión si yo no tengo un servidor sql, si no estoy trabajando con uno mysql?

    ResponderEliminar
    Respuestas
    1. Hola, mira utiliza la conexión de mysqli que explico en el comentario anterior. Recuerda que debe ser mysqli debido a que ya no hay soporte con mysql para conexión a bases de datos. Si tienes alguna duda mira esta página: http://php.net/manual/es/mysqli.quickstart.connections.php

      Eliminar
  8. Buenas tardes, usé sql y todo como se indica, al momento de crear el activo me sale que se creó, pero no se está guardando que podría ser?

    ResponderEliminar
    Respuestas
    1. Revisa si puede estar fallando la librería del Easyui, o si estas llamando los campos de manera diferente. Esta librería es muy compleja pero fácil de usar.

      Eliminar
  9. Hola buenas tardes como haces el calculo del costo actual,
    tengo un problema parecido ..
    tengo la fecha de adquisición y saco la edad del bien y tengo mi costo inicial pero requiero sacar el porcentaje dependiendo los años que tenga .

    ResponderEliminar
    Respuestas
    1. Hola buenos días, mira si puedes observar en la parte inicial explico un poco el método de depreciación que use, en este caso seria el de Linee Recta, pero también muestro en un excel otros dos métodos de depreciación que suelen usar las empresas en el área contable. Usa el método SUMA DE DIGITOS (calcula el factor y el porcentaje % de la depreciación) o REDUCCIÓN DE SALDOS (calcula la tasa de depreciación %) este último se asemeja más a lo que creo puedes necesitar. En estos dos casos se maneja el porcentaje de depreciación. Debes revisar cual de dos casos te sirve. Suerte con eso, y me cuentas cual te sirvió.

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Hola a todos, para poder modificar la estructura de las grillas y de los botones que tiene el EasyUI deben ir al css que se encarga de esa grilla en especifico, es muy fácil saber donde esta ubicado ya que el .css que guarda la mayoría de los ajustes es el style, se debe revisar con el depurador en el navegador para ver que tipo de clase maneja y listo, con esa información solo es buscar el archivo y modificar al ancho que se necesita o el color de botón o de titulo que se requiere, deben recordar que es demasiado extenso el .css así que no se desesperen porque el diseño es cuestión de paciencia. Mucha suerte.

    ResponderEliminar
  12. Buenas noches una consulta, al momento de crear un nuevo activo y en el campo fecha de adquisicion selecciono una fecha del calendario, guardo el activo la fecha se me inserta 0000-00-00 , gracias por su ayuda

    ResponderEliminar
    Respuestas
    1. Hola, mira debes revisar si se está enviando correctamente la fecha en formato yyyy-mm-dd, captura los datos en una alerta o revisalos con el debug de firefox.

      Eliminar
    2. Hola, el problema es el formato de fechas que viene predefinido en el javascript de easyui-datebox intenté cambiarlo pero no funcionó.

      Eliminar
    3. Buena noche Manuel, en este link está el tutorial de como cambiar el formato de la fecha en easyui-datebox.
      http://www.jeasyui.com/demo/main/?plugin=DateBox&theme=default&dir=ltr&pitem=
      En la parte izquierda selecciona "Date Format" luego revisa la función "myformatter" en el return define el formato que necesitas, por defecto está en yyyy-mm-dd.

      Eliminar