{"id":138,"date":"2022-10-21T17:08:57","date_gmt":"2022-10-21T17:08:57","guid":{"rendered":"https:\/\/pacohunterdev.com\/blog\/?p=138"},"modified":"2022-10-21T17:08:57","modified_gmt":"2022-10-21T17:08:57","slug":"punto-de-venta-en-php-mysql-y-vue","status":"publish","type":"post","link":"https:\/\/pacohunterdev.com\/blog\/2022\/10\/21\/punto-de-venta-en-php-mysql-y-vue\/","title":{"rendered":"Punto de venta en PHP, MySQL y Vue"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Anteriormente te present\u00e9 un sistema de ventas realizado en PHP, MySQL y Bootstrap que puedes ver <a rel=\"noreferrer noopener\" href=\"https:\/\/pacohunterdev.com\/blog\/2022\/08\/31\/sistema-de-ventas-en-php-mysql-y-bootstrap\/\" target=\"_blank\">aqu\u00ed<\/a>. En este caso us\u00e9 lo mismo para el BackEnd, solo modificando algunas cosas en el consumo de la API. Pero para el FrontEnd he empleado Vue y Buefy, he tratado de hacerlo con componentes para poder reutilizarlos lo m\u00e1s posible. Adem\u00e1s de que tiene nuevas caracter\u00edsticas que veremos en este post. Tambi\u00e9n puedes ver un v\u00eddeo en donde explico esto <a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/8PPYzZkyRSM\" target=\"_blank\">aqu\u00ed <\/a>por si no quieres leer esto. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"833\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/pos-mini-1024x833.png\" alt=\"\" class=\"wp-image-141\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/pos-mini-1024x833.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/pos-mini-300x244.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/pos-mini-768x625.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/pos-mini.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Cosas que te permite realizar el punto de venta<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para empezar te menciono que con este punto de venta puedes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Administrar los datos del local.<\/li><li>Registrar clientes.<\/li><li>Registrar usuarios.<\/li><li>Registrar marcas y categor\u00edas de los productos.<\/li><li>Registrar productos.<\/li><li>Establecer productos para venderlos por mayoreo.<\/li><li>Vender productos.<\/li><li>Apartar productos.<\/li><li>Agregar a cuenta productos.<\/li><li>Imprimir cotizaciones.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora te mencionar\u00e9 de qu\u00e9 va cada apartado del sistema.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Administrar datos del local<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">En este apartado es similar al de los sistemas que te present\u00e9 anteriormente. Esto sirve para establecer la informaci\u00f3n que deseas que se muestre en el comprobante de compra.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/datos-1024x489.png\" alt=\"\" class=\"wp-image-142\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/datos-1024x489.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/datos-300x143.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/datos-768x367.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/datos.png 1346w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Registrar clientes<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/clientes-1024x490.png\" alt=\"\" class=\"wp-image-143\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/clientes-1024x490.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/clientes-300x144.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/clientes-768x367.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/clientes.png 1342w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">En este sistema los clientes s\u00ed son necesarios, ya que a ellos se les registran las cuentas o los apartados que realicen. Solo se coloca el nombre y el n\u00famero de tel\u00e9fono (Si t\u00fa lo deseas puedes agregar m\u00e1s datos o los que consideres necesarios). <\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Registrar usuarios<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">Los usuarios son quienes tienen acceso al sistema. Es decir, ellos inician sesi\u00f3n, realizan ventas y todo lo dem\u00e1s. En los sistemas anteriores cuando registrabas a un usuario y este iniciaba sesi\u00f3n se debe de cambiar la contrase\u00f1a, en este caso no es as\u00ed. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/usuarios-1024x498.png\" alt=\"\" class=\"wp-image-144\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/usuarios-1024x498.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/usuarios-300x146.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/usuarios-768x373.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/usuarios.png 1347w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pero cuando se registra a un usuario nuevo la contrase\u00f1a por defecto es <strong>PacoHunterDev. <\/strong>Despu\u00e9s el usuario puede cambiar su contrase\u00f1a en el apartado de perfil.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Registrar marcas y categor\u00edas de los producto<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/marcasss-1024x490.png\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/marcasss-1024x490.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/marcasss-300x144.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/marcasss-768x368.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/marcasss.png 1347w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">En este apartado, puedes registrar las marcas y categor\u00edas a la que pertenecen los productos que registres. Es un CRUD, y est\u00e1s  no son necesarias elegirlas cuando registras un producto nuevo, simplemente es para llevar un control de qu\u00e9 marcas o categor\u00edas se tienen m\u00e1s ventas.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Registrar productos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El inventario es la parte m\u00e1s importante, pues en el se registran los productos que se tienen. Adem\u00e1s ayuda a ver la existencia de los productos y ver cu\u00e1les se deben de resurtir y esas cosas.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para registrar el producto se piden los siguientes datos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>C\u00f3digo de barras *<\/li><li>Nombre del producto *<\/li><li>Precio de compra * (\u00bfCu\u00e1nto cuesta?)<\/li><li>Precio de venta * (\u00bfEn cu\u00e1nto lo das?)<\/li><li>Existencia *<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Si deseas vender a mayoreo se marca el switch <strong>\u00bfVendido al mayoreo?<\/strong>. En este caso se coloca a partir de cu\u00e1ntas unidades se aplica el mayoreo y el precio para el mayoreo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La categor\u00eda y la marca pueden seleccionarse o no.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-producto-1024x491.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-producto-1024x491.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-producto-300x144.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-producto-768x369.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-producto.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ver inventario<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">En la p\u00e1gina del inventario puedes ver un peque\u00f1o resumen de los totales del inventario. Dentro de la tablas, adem\u00e1s de los datos de los productos se puede, editar, eliminar, agregar unidades o quitar unidades. Para agregar los productos se pulsa el bot\u00f3n que dice <strong>Agregar producto.<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/inventario-1024x499.png\" alt=\"\" class=\"wp-image-147\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/inventario-1024x499.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/inventario-300x146.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/inventario-768x374.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/inventario.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Agregar productos a la lista de venta<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de realizar una venta, apartado, agregar a cuenta o imprimir la cotizaci\u00f3n es necesario agregar los productos a la lista. Para esto en el input de la b\u00fasqueda se escribe el c\u00f3digo de barras o el nombre del producto (En esencia, si se emplea un lector de c\u00f3digo de barras el producto se agregar\u00e1, no lo he probado con lector, so lo pruebas y sirve me avisas por favor). Se muestra una lista autocompletable en la que puedes seleccionar con el mouse o con las flechas de direcci\u00f3n del teclado el producto que deseas agregar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro de la lista puedes  modificar la cantidad de productos que se venden o quitarlos de la lista.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-a-lista-1024x462.png\" alt=\"\" class=\"wp-image-148\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-a-lista-1024x462.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-a-lista-300x135.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-a-lista-768x347.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/agregar-a-lista.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Vender productos a mayoreo<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/establecer-mayoreo-1024x445.png\" alt=\"\" class=\"wp-image-149\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/establecer-mayoreo-1024x445.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/establecer-mayoreo-300x130.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/establecer-mayoreo-768x334.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/establecer-mayoreo.png 1115w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">Para este caso, si se desea vender productos por mayoreo, primero debes colocar a vender, si esta cantidad es mayor o igual a la cantidad establecida cuando el producto es registrado, se preguntar\u00e1 si se desea aplicar el mayoreo. Si se elige que s\u00ed, entonces se colocar\u00e1 el precio puesto en venta a mayoreo, de lo contrario se colocar\u00e1 el precio normal.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Realizar venta<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hay cuatro acciones que se pueden realizar al terminar de agregar los productos que se vender\u00e1n. La primera es <strong>realizar una venta. <\/strong>En este caso el total es recibido y registrado adem\u00e1s de que el cliente se lleva los productos  y estos son descontados del inventario. El nombre del cliente puede o no colocarse, si no se colocar se marcar\u00e1 como <strong>MOSTRADOR.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/vender-1024x497.png\" alt=\"\" class=\"wp-image-150\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/vender-1024x497.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/vender-300x146.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/vender-768x373.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/vender.png 1168w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Agregar a cuenta<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La siguiente acci\u00f3n es agregar a cuenta. En este caso los productos son descontados del inventario pero no se recibe el total de la venta, simplemente se recibe un pago inicial. Para est\u00e1s s\u00ed es necesario colocar el nombre del cliente para saber qui\u00e9n se est\u00e1 llevando los productos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/a-cuenta-1024x497.png\" alt=\"\" class=\"wp-image-151\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/a-cuenta-1024x497.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/a-cuenta-300x146.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/a-cuenta-768x373.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/a-cuenta.png 1182w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Agregar apartado<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En este caso, como su nombre lo \u00edndica, los productos se apartan, es decir, no salen del inventario. Saldr\u00e1n hasta que el apartado se ha liquidado. Para este caso tambi\u00e9n ese necesario colocar el nombre del cliente y si se desea el pago inicial que est\u00e1 dejando.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartar-1024x470.png\" alt=\"\" class=\"wp-image-152\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartar-1024x470.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartar-300x138.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartar-768x352.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartar.png 1182w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Imprimir cotizaci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed nada m\u00e1s se registra la cotizaci\u00f3n, no se registra ning\u00fan ingreso o se descuentan productos del inventario. Se coloca el nombre del cliente que realiza la cotizaci\u00f3n para saber a qui\u00e9n est\u00e1 dirigida.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizar-1024x502.png\" alt=\"\" class=\"wp-image-153\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizar-1024x502.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizar-300x147.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizar-768x376.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizar.png 1137w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Reportes<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">El primer reporte es el de <strong>ventas<\/strong>, en este se presentan las ventas que se han realizado. Se puede filtrar por periodo de tiempo. Adem\u00e1s de eso es posible reimprimir el comprobante de compra de cualquier compra. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"685\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/ventas-1024x685.png\" alt=\"\" class=\"wp-image-154\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/ventas-1024x685.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/ventas-300x201.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/ventas-768x514.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/ventas.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cuentas-1024x655.png\" alt=\"\" class=\"wp-image-155\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cuentas-1024x655.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cuentas-300x192.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cuentas-768x491.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cuentas.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">El segundo reporte es el de <strong>cuentas<\/strong>, en este aparecen las cuentas que se han registrado. Se muestran todas pero si lo deseas puedes mostrar solo las que se deseen en cierto periodo de tiempo. En ellas el estado de <strong>PENDIENTE <\/strong>indica que a\u00fan no se ha acabado de pagar y <strong>LIQUIDADO <\/strong>indica que ya se ha pagado. En cada una de ellas se puede realizar un abono o liquidar directamente adem\u00e1s de imprimir el comprobante de compra.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">El tercer reporte es el de <strong>apartados<\/strong>, este es b\u00e1sicamente lo mismo que el anterior, tiene las mismas opciones. Solo que en este al liquidar el apartado los productos se descontar\u00e1n del inventario, ya que son entregados al cliente.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartados-1024x651.png\" alt=\"\" class=\"wp-image-156\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartados-1024x651.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartados-300x191.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartados-768x488.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/apartados.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"890\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizaciones-1024x890.png\" alt=\"\" class=\"wp-image-157\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizaciones-1024x890.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizaciones-300x261.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizaciones-768x667.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/cotizaciones.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">El \u00faltimo reporte es el de <strong>cotizaciones, <\/strong> para este solo se  puede eliminar o imprimir el comprobante.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Perfil<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed aparece informaci\u00f3n sobre los ingresos registrados del usuario que tiene la sesi\u00f3n activa. Se muestra una gr\u00e1fica que indica los totales de ingresos de cada mes del usuario.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/perfil-1024x450.png\" alt=\"\" class=\"wp-image-158\" srcset=\"https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/perfil-1024x450.png 1024w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/perfil-300x132.png 300w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/perfil-768x338.png 768w, https:\/\/pacohunterdev.com\/blog\/wp-content\/uploads\/2022\/10\/perfil.png 1348w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Descargar y usar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El c\u00f3digo del sistema lo encuentras en <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/pacohunterdev\/pos\" target=\"_blank\">GitHub<\/a>. El proceso de instalaci\u00f3n es el mismo que en el <a rel=\"noreferrer noopener\" href=\"https:\/\/pacohunterdev.com\/blog\/2022\/09\/03\/sistema-para-restaurante-en-php-mysql-y-vue\/\" target=\"_blank\">sistema de restaurantes<\/a> y el de <a rel=\"noreferrer noopener\" href=\"https:\/\/pacohunterdev.com\/blog\/2022\/09\/14\/sistema-para-gimnasios\/\" target=\"_blank\">gimnasios<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Recuerda que debes tener instalado MySQL y php si deseas emplearlo as\u00ed tal cual te lo presento. Si es as\u00ed solo basta con copiar las carpetas de <strong><code>dist <\/code><\/strong><code>y <\/code><strong>api<\/strong> en donde sirvas tus archivos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El siguiente pas\u00f3 ser\u00eda crear la base de datos, en este caso se debe de llamar <strong>pos <\/strong>(si le pones otro nombre debes de cambiar las variables de conexi\u00f3n dentro del archivo de <code><strong>funciones.php<\/strong><\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y ahora puedes importar la base de datos que se llama <strong><code>pos.sql <\/code><\/strong>y con esto ya puedes acceder a <strong><code>localhost\/pos\/dist<\/code><\/strong><code>. <\/code>Los datos para iinciar sesi\u00f3n que trae la base de datos son:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>usuario: paco_hunter_dev<\/li><li>contrase\u00f1a: Paco1234<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora que si lo que deseas es agregar o modificar cosas es necesario tener Node.js para instalar las dependencias. Para instalarlas navegas hacia donde tengas el proyecto y ejecutas <strong><code>npm install<\/code><\/strong> y cuando haya terminado de instalarlas <strong><code>npm run serve<\/code><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anteriormente te present\u00e9 un sistema de ventas realizado en PHP, MySQL y Bootstrap que puedes ver aqu\u00ed. En este caso us\u00e9 lo mismo para el BackEnd, solo modificando algunas cosas en el consumo de la API. Pero para el FrontEnd he empleado Vue y Buefy, he tratado de hacerlo con componentes para poder reutilizarlos lo m\u00e1s posible. Adem\u00e1s de que tiene nuevas caracter\u00edsticas que veremos en este post. Tambi\u00e9n puedes ver un v\u00eddeo en donde explico esto aqu\u00ed por si no quieres leer esto. Cosas que te permite realizar el punto de venta Para empezar te menciono que con este&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,14,9],"tags":[11],"class_list":["post-138","post","type-post","status-publish","format-standard","hentry","category-mysql","category-php","category-vue","tag-php"],"_links":{"self":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":3,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}