Vue Layout

By ukmodak | May 18th 2022 09:26:00 AM | viewed 16 times

Create a InventoryLayout.vue in the location: resources\js\components\layout

<template>
    <b-container fluid class="contentbg">
      <ProgressBarBlock />
      <notifications group="message1" position="top center"/>
      <notifications group="message2" position="bottom right" />
      <b-row class="headTitle">
         <b-col cols="1" md="4">
           
         </b-col>
        <b-col cols="12" md="4">
               <div class="img-fluid logoAlign">
                   <img class="logoSize" v-bind:src="showLogo">
                </div>
        </b-col>
        
        <b-col cols="12" md="4">
             
              <b-row class="headTitle">
                    <b-col>
                           <div v-if="userData">
                                <p>Welcome: {{userData.full_name}}  <a href="#" return="false" v-on:click="logout">Logout</a></p>      
                           </div>
                           <div v-else>

No User</p></div> </b-col> </b-row> </b-col> </b-row> <b-row class="p-0 m-0"> <b-col cols="12" class="p-0"> <b-row class="bgWhite p-0"> <b-col cols="12" md="12" class="breadcrm" align="center"> <ResponsiveMenu2 /> </b-col> </b-row> </b-col> </b-row> <b-row class="contentHeight p-0 m-0"> <b-col cols="12" class="bgWhite contentHead contentHeight p-0"> <div class="adminpanel pl-0 pr-0"> <slot></slot> </div> </b-col> </b-row> <b-row> <b-col cols="12" class="p-0 m-0"> <div class="footer"> <div class="innerFooter"> <p>© 2021 Hongbao. All rights reserved. </p> </div> </div> </b-col> </b-row> </b-container> </template> <script> import ResponsiveMenu2 from "../block/ResponsiveMenu2.vue" import ProgressBarBlock from "../block/ProgressBarBlock.vue" import {mapActions,mapState,mapGetters} from "vuex"; import manualConfig from "../config/configManual"; export default { data:() =>({ userData:null, inputs: { email:'', pass:'' }, inputName: "email", imagePath:process.env.MIX_API_URL, }), components:{ ResponsiveMenu2, ProgressBarBlock }, created(){ }, updated(){ }, mounted() { this.userData =(localStorage.getItem('userData'))? JSON.parse(localStorage.getItem('userData')):''; }, methods:{ logout() { localStorage.removeItem('userData') localStorage.removeItem('menuData') this.$router.push('/'); }, onChange(input) { this.inputs[this.inputName] = input; }, onKeyPress(button) { console.log("button", button); }, onInputChange(input) { console.log("Input changed directly:", input.target.id); this.inputs[input.target.id] = input.target.value; }, onInputFocus(input) { console.log("Focused input:", input.target.id); this.inputName = input.target.id; } }, computed:{ showLogo(){ return manualConfig.sitePath+'/public/images/hongbao_logo.png' }, } }; </script> <style scoped> </style>

Create a ItemAddPage.vue in the location: resources\js\components\page

<template>
       <div class="widthHeight">
         <InventoryLayout>
            <ItemAddForm />
         </InventoryLayout>
        </div>
</template>

<script>

 import InventoryLayout from "../layout/InventoryLayout.vue"

 import ItemAddForm from "../block/item/ItemAddForm.vue"

  export default {
        data:()=>({
          }),
          components:{
           InventoryLayout,
           ItemAddForm
          }
  };
</script>

<style scopped>
  .widthHeight{
    width:100%;
    height:100%;
   }
</style>

Create a ItemAddForm.vue in the location: resources\js\components\block\item\


<template>
<div>
 <div class="infoHeader">
    <b-row>
         <b-col cols="8" md="6"><h4>Item Information[add]</h4></b-col>
         <b-col cols="4" md="6">
             <div class="rightAlign">
                <router-link :to="{name:'ad_item_list'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"> List</b-button></router-link>
             </div>
       </b-col>
     </b-row>
   
 </div>
   
  </b-jumbotron>

  <b-card bg-variant="light">

  <b-row>
        <b-col cols="0" md="4" class="bgtransparent"></b-col>
        <b-col cols="12" md="4" class="formStyle">

                    
                        <b-form @submit.prevent="onSubmit" @reset="onReset">
                      
                         <b-form-group
                          id="input-group-2"
                          label="Item Code"
                          label-for="input-2"
                          description=""
                        >
                        <b-form-input
                          id="short_name"
                          v-model="form.item_code"
                          type="text"
                          placeholder=""
                          required
                          readOnly
                        ></b-form-input>
                          
                        </b-form-group>

                        <b-form-group
                          id="input-group-1"
                          label="Item Name"
                          label-for="input-1"
                          description=""
                        >
                          <b-form-input
                            id="company_name"
                            v-model="form.item_name"
                            type="text"
                            placeholder="enter item name"
                            required
                          >  
                         </b-form-input>
                        </b-form-group>

                         <b-form-group
                          id="input-group-2"
                          label="Short Name"
                          label-for="input-2"
                          description=""
                        >
                          <b-form-input
                            id="short_name"
                            v-model="form.short_name"
                            type="text"
                            placeholder="enter short name"
                            required
                          ></b-form-input>
                        </b-form-group>

                         <b-form-group id="input-group-3" label="Category" label-for="input-3">
                               <b-form-select
                                 id="is_active"
                                 v-model="form.category_id"
                                 :options="defaultOption.concat(categoryListObject)"
                                 @change="getVatCharge"
                                 required
                               ></b-form-select>
                          </b-form-group>

                          <b-form-group id="input-group-3" label="Unit" label-for="input-3">
                               <b-form-select
                                 id="is_active"
                                 v-model="form.unit_id"
                                 :options="defaultOption.concat(unitListObject)"
                                 required
                               ></b-form-select>
                          </b-form-group>

                       

                         <b-form-group
                          id="input-group-2"
                          label="Rate"
                          label-for="input-2"
                          description=""
                        >
                          <b-form-input
                            id="short_name"
                            v-model="form.rate"
                            type="number"
                            placeholder="enter rate"
                            required
                          ></b-form-input>
                        </b-form-group>
               <b-row>
                  <b-col cols="12" md="6">
                        <b-form-group
                          id="input-group-2"
                          label="VAT(%)"
                          label-for="input-2"
                          description=""
                        >
                          <b-form-input
                            id="short_name"
                            v-model="form.vat"
                            type="number"
                            placeholder=""
                             readOnly
                          ></b-form-input>
                        </b-form-group>
                    </b-col>
                    <b-col cols="12" md="6">
                        <b-form-group
                          id="input-group-2"
                          label="S Charge(%)"
                          label-for="input-2"
                          description=""
                        >
                          <b-form-input
                            id="short_name"
                            v-model="form.scharge"
                            type="number"
                            placeholder=""
                            readOnly
                          ></b-form-input>
                        </b-form-group>
                  </b-col>
                </b-row>
                        <b-form-group id="input-group-3" label="Is Active:" label-for="input-3">
                               <b-form-select
                                 id="is_active"
                                 v-model="form.is_active"
                                 :options="activeOptions"
                                 required
                               ></b-form-select>
                        </b-form-group>


                        <b-form-group
                          id="input-group-2"
                          label="Upload Image"
                          label-for="input-2"
                          description=""
                        >
                            <b-row>
                                 <b-col cols="12" md="6">
                                       <template v-if="preview">
                                           <img :src="preview" class="img-fluid" />
                                           <p class="mb-0">file name: {{ image.name }}

<p class="mb-0">size: {{ image.size/1024 }}KB

</template> </b-col> <b-col cols="12" md="6"> <b-form-file accept="image/*" ref="file" class="mb-2" @change="previewImage"></b-form-file> </b-col> </b-row> </b-form-group> <b-button type="submit" variant="outline-primary">Submit</b-button> <b-button type="reset" variant="outline-danger">Reset</b-button> </b-form> </b-col> <b-col cols="0" md="4" class="bgtransparent"></b-col> </b-row> </b-card> </div> </template> <script> import manualConfig from "../../config/configManual"; export default { data() { return { form: { item_code:null, item_name: '', short_name: '', company_id:'', category_id:'', unit_id:'', rate:0, vat:0, scharge:0, is_active:'1', file:null, vat:0, scharge:0, create_by:'', }, activeOptions: [{ text: 'Yes', value: 1 },{ text: 'No', value: 0 }], defaultOption:[{ text: 'Select One', value:'' }], companyListObject:[], categoryListObject:[], unitListObject:[], item_image_file:null, item_image_object:null, preview: null, image: null, selectedFile: null } }, created(){ this.checkIsLog(); this.selectBoxList(); }, updated(){ }, methods: { checkIsLog(){ if(localStorage.getItem('userData') == null){ this.$router.push({name:'/',query:{msg:['pl']}}); } }, onSubmit(event) { event.preventDefault(); if(JSON.parse(localStorage.getItem('userData')).id && this.form.company_id && this.form.item_code && this.form.item_name){ let imgOb = new FormData(); imgOb.append('file',this.$refs.file.files[0]); imgOb.append('item_code',this.form.item_code); imgOb.append('item_name',this.form.item_name); imgOb.append('short_name', this.form.short_name); imgOb.append('company_id',this.form.company_id); imgOb.append('category_id',this.form.category_id); imgOb.append('unit_id',this.form.unit_id); imgOb.append('rate',this.form.rate); imgOb.append('vat',this.form.vat); imgOb.append('scharge',this.form.scharge); imgOb.append('is_active',this.form.is_active); imgOb.append('create_by',JSON.parse(localStorage.getItem('userData')).id); /*const data = { item_code:this.form.item_code, item_name: this.form.item_name, short_name: this.form.short_name, company_id:this.form.company_id, category_id:this.form.category_id, unit_id:this.form.unit_id, rate:this.form.rate, vat:this.form.vat, scharge:this.form.scharge, is_active:this.form.is_active, file:this.form.file, //item_image_file:this.item_image_file, create_by:JSON.parse(localStorage.getItem('userData')).id }*/ this.$store.dispatch('addItem',imgOb) .then(() => { if(this.$store.getters.getNotifications.type){ this.$notify({ group: this.$store.getters.getNotifications.group, type: this.$store.getters.getNotifications.type, title: 'Message', text: this.$store.getters.getNotifications.message, duration: 3000, speed: 300 }); } this.$store.commit('remove_notification'); }); /*const config = { headers: { 'content-type': 'multipart/form-data', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, } }; axios.post(manualConfig.sitePath+"/api/item_insert",imgOb,config) .then(function (response) { alert("okk"); }) .catch(function (error) { }); */ }else{ this.$router.push({page:'home'}); this.$notify({ group:'message1', type: 'error', title: 'Message', text:'Please login first', duration: 3000, speed: 300 }); } }, onReset(event) { event.preventDefault(); this.form.item_name = '', this.form.short_name = '', this.form.company_id ='', this.form.category_id ='', this.form.unit_id ='', this.form.rate = 0, this.form.is_active ='1', this.form.file = null, this.form.item_image_file = null, this.form.item_image_object = null, this.form.vat = 0, this.form.scharge = 0, this.preview = null, this.image = null, this.selectedFile = null }, selectBoxList(){ this.$store.dispatch('getPosCategoryFilterList',{}) .then(()=>{ if(this.$store.getters.allPosCategory[0].id){ let allCom =[]; this.$store.getters.allPosCategory.forEach(function(value, key){ let comLis ={ text:value.category_name, value:value.id }; allCom.push(comLis); }); this.categoryListObject = allCom; } }); this.$store.dispatch('getPosUnitFilterList',{}) .then(()=>{ if(this.$store.getters.allPosUnit[0].id){ let allCom =[]; this.$store.getters.allPosUnit.forEach(function(value, key){ let comLis ={ text:value.unit_name, value:value.id }; allCom.push(comLis); }); this.unitListObject = allCom; } }); this.$store.dispatch('getLastItemCode') .then(()=>{ if(this.$store.getters.lastItemCode.code){ this.form.item_code = this.$store.getters.lastItemCode.code; } }); if(JSON.parse(localStorage.getItem('userData')).id){ this.form.company_id = JSON.parse(localStorage.getItem('userData')).company_id; } }, getVatCharge(event){ if(this.form.category_id){ this.$Progress.start(); this.$store.dispatch('editPosCategory',{id:this.form.category_id}) .then(()=>{ this.$Progress.finish(); if(this.$store.getters.editPosCategoryList.vat_percent){ this.form.vat = this.$store.getters.editPosCategoryList.vat_percent; this.form.scharge = this.$store.getters.editPosCategoryList.scharge_percent; }else{ this.form.vat = 0; this.form.scharge = 0; } }).catch(()=>{ this.$Progress.finish(); }); } }, previewImage: function(event) { //var data = new FormData(); var input = event.target; if (input.files) { var reader = new FileReader(); reader.onload = (e) => { this.preview = e.target.result; } this.image=input.files[0]; this.selectedFile = input.files[0]; this.item_image_file = input.files[0]; this.item_image_object = input.files[0].data; reader.readAsDataURL(input.files[0]); } const config = { headers: { 'content-type': 'multipart/form-data', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, } } /* let formData = new FormData(); formData.append('file', input.files[0]); axios.post(manualConfig.sitePath+"/api/productUpload", formData, config) .then(function (response) { //alert("okk"); }) .catch(function (error) { }); */ }, uploadImage() { var data = new FormData(); data.append('image', this.selectedFile, this.selectedFile.data) var token = sessionStorage.getItem('token') const config = { headers: { 'Content-Type': 'multipart/form-data' } } window.API.post('https://110.10.56.10:8000/images/?token=' + token, data, config) .then(response => this.$router.push('/listImage')) .catch((error) => { console.log(JSON.stringify(error)) }) } }, computed:{ }, watch:{ } } </script>
bONEandALL
Visitor

Total : 4244

Today :40

Today Visit Country :

  • United States