问获取此错误:无法读取未定义的属性'0‘

EN

<template>
  <div>
    <div id="mainjob">
      <div>
        <div class="secondarycolor">
          <h5 id="jobheader"> Job Center </h5>
        </div>
        <div>
          <p class="secondarycolor">Filter By:</p>
        </div>
        <div class="row justify-center">
          <q-tabs color="secondary" align="justify" inverted v-model="selectedtab">
            <q-tab default name="searchbyid" label="Search by ID" slot="title" @select="findrepair()"/>
            <q-tab name="customfilter" label="Custom Filters" slot="title" @select="findrepair()"/>
            <q-tab name="notpickedup" label="Machines Not Picked Up" slot="title" @select="findrepair()"/>
            <q-tab-pane name="searchbyid">
              <div class="row justify-center" id="repairidbox">
                <q-input type="text" placeholder="Repair ID" @input="findrepair()" class="inputspace" v-model="repairid" color="secondary"/>
              </div>
            </q-tab-pane>
            <q-tab-pane name="customfilter">
              <div id="filterbox">
                <div id="selectbox">
                  <div  id="selectboxsub">
                    <div class="row">
                      <div>
                        <q-select
                          class="inputspace"
                          multiple
                          color="secondary"
                          filter
                          placeholder="Select Filters"
                          v-model="filtersselected"
                          :options="filteroptions"
                          @input="filterchanged()"
                          :display-value="`${filtersselected.length} filters selected`"
                        />
                      </div>
                      <div class="row">
                        <q-btn icon="clear" color="secondary" @click="clearfilters()" class="inputspace">
                          <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                            Clear Filters
                          </q-tooltip>
                        </q-btn>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row justify-center" id="filterinput" v-if="filtersselected.length>0">
                  <div>
                    <q-input @input="findrepair()" type="text" placeholder="Customer First Name" color="secondary" v-model="fname" class="inputspace" id="fname" v-if="containsvar('cusfname')"/>
                    <q-input @input="findrepair()" type="text" placeholder="Customer Last Name" color="secondary" v-model="lname" class="inputspace" id="lname" v-if="containsvar('cuslname')"/>
                  </div>
                  <div>
                    <q-select
                      class="inputspace"
                      id="brand"
                      color="secondary"
                      filter
                      placeholder="Machine Brand"
                      v-model="brand"
                      :options="Brands"
                      @input="brandchanged(), findrepair()"
                      v-if="containsvar('brand')"
                    />
                    <q-select
                      class="inputspace"
                      id="color"
                      color="secondary"
                      filter
                      placeholder="Machine Color"
                      v-model="color"
                      :options="Colors"
                      @input="colorchanged(), findrepair()"
                      v-if="containsvar('color')"
                    />
                    <q-select
                      class="inputspace"
                      id="type"
                      color="secondary"
                      filter
                      placeholder="Machine Type"
                      v-model="type"
                      :options="Types"
                      @input="typechanged(), findrepair()"
                       v-if="containsvar('type')"
                    />
                    <q-input @input="findrepair()" type="text" placeholder="Model" color="secondary" v-model="model" class="inputspace" id="model"  v-if="containsvar('model')"/>
                  </div>
                  <div class="column">
                    <q-checkbox @input="findrepair()" label="Warranty" color="secondary" v-model="warranty" class="inputspace" id="warranty"  v-if="containsvar('warranty')"/>
                    <q-checkbox @input="findrepair()" label="Purchased Here" color="secondary" v-model="purchased" class="inputspace" id="purchased"  v-if="containsvar('purchased')"/>
                    <q-checkbox @input="findrepair()" label="Rush Service" color="secondary" v-model="rushservice" class="inputspace" id="rushservice"  v-if="containsvar('rushservice')"/>
                    <q-checkbox @input="findrepair()" label="Completed" color="secondary" v-model="completed" class="inputspace" id="completed"  v-if="containsvar('completed')"/>
                  </div>
                </div>
              </div>
            </q-tab-pane>
            <q-tab-pane name="notpickedup">
            </q-tab-pane>
          </q-tabs>
        </div>
        <div>
          <center v-if="jobarray.length==0">
            <h6 class="secondarycolor">No Results</h6>
          </center>
          <div class="row justify-center">
            <div class="row justify-center">
              <q-card color="secondary" dark class="q-ma-sm" v-for="(repair,index) in jobarray" :key="index">
                <q-card-title>
                  <i><span class="title"># </span></i>
                  <span class="title">{{ repair.RepairID }}</span>
                </q-card-title>
                <q-card-main>
                  <div class="row">
                    <div class="titles">
                      <span ><b>Name:</b></span><br>
                      <span><b>Phone Number:</b></span> <br>
                      <span><b>Brand:</b></span> <br>
                      <span><b>Type:</b></span> <br>
                      <span><b>Color:</b></span> <br>
                      <span><b>Model:</b></span> <br>
                      <span><b>Problem:</b></span> <br>
                      <span><b>Phone Number:</b></span> <br>
                      <span><b>Warranty:</b></span> <br>
                      <span><b>Purchased Here: </b></span> <br>
                      <span><b>Rush Service: </b></span> <br>
                      <span><b>Date Received: </b></span> <br>
                      <span><b>Received By: </b></span> <br>
                      <span><b>Status: </b></span> <br>
                      <span v-if="repair.Hours!=null"><b>Hours: </b></span> <br>
                      <span v-if="repair.Hours!=null"><b>Pick Up Date: </b></span> <br>
                    </div>
                    <div class="description">
                      <span>{{ repair.FirstName + " " + repair.LastName }}</span> <br>
                      <span>{{ repair.PhoneNumber }}</span> <br>
                      <span>{{ repair.Brand }}</span> <br>
                      <span>{{ repair.Type }}</span> <br>
                      <span>{{ repair.Color }}</span> <br>
                      <span>{{ repair.Model }}</span> <br>
                      <span>{{ repair.Problem }}</span> <br>
                      <span>{{ repair.PhoneNumber }}</span> <br>
                      <q-icon name="check_box" v-if="repair.Warranty==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.Warranty==0" /> <br>
                      <q-icon name="check_box" v-if="repair.Purchased==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.Purchased==0" /> <br>
                      <q-icon name="check_box" v-if="repair.RushService==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.RushService==0" /> <br>
                      <span> {{getdatestring(repair.DateReceived) }} </span> <br>
                      <span> {{ repair.Name }} </span> <br>
                      <span v-if="repair.Hours!=null"> Completed </span>
                      <span v-if="repair.Hours==null"> In Progress </span> <br> 
                      <span v-if="repair.Hours!=null"> {{repair.Hours}} </span> <br>
                      <span v-if="repair.Hours!=null&&repair.DatePickedUp!=null"> {{getdatestring(repair.DatePickedUp)}} </span>
                      <span v-if="repair.Hours!=null&&repair.DatePickedUp==null"> Pickup Pending </span> <br>
                    </div>
                  </div>
                </q-card-main>
                <q-card-separator />
                <q-card-actions>
                  <q-btn icon="playlist_add" class="inputspace" v-if="repair.Hours==null" @click="addpart(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Add Part
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="list_alt" color="secondary" class="inputspace" @click="getpartslist(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      View All Parts
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="done" color="secondary" class="inputspace" v-if="repair.Hours==null" @click="completejob(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Complete Job
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="local_shipping" color="secondary" class="inputspace" v-if="repair.Hours!=null&&repair.DatePickedUp==null" @click="pickupmachinery(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Pick Up Machine
                    </q-tooltip>
                  </q-btn>
                </q-card-actions>
              </q-card>
            </div>
          </div>
        </div>
      </div>
      <q-dialog
        v-model="addpartdialog"
        prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Add Parts </span>
          </span>
          <template slot="message"> 
            <div class="row justify-center addpartborder">
              <div class="column addpartsideborder">
                <center><p class="secondarycolor">Part Number: </p></center>
                <q-input type="text" placeholder="Part Number" v-model="partnumber" color="secondary" class="inputspace"/>
              </div>
              <div class="column addpartsideborder">
                <center><p class="secondarycolor"> Quantity: </p></center>
                <q-input type="number" placeholder="Quantity" v-model="numquantity" color="secondary" class="inputspace"/>
              </div>
              <div class="column">
                <center><p class="secondarycolor"> Description: </p></center>
                <q-input type="text" placeholder="Part Description" v-model="partdescription" color="secondary" class="inputspace"/>
              </div>
            </div><center>
            <div>
              <q-btn label="Add Part" color="secondary" @click="addparts()" :disable="disableaddparts"/>
            </div></center>
          </template>
          <span slot="buttons" slot-scope="props">
            <span>
              <q-btn label="Done" color="secondary" @click="done()" class="row justify-center"/>
            </span>
          </span>
        </q-dialog>
        <q-dialog
          v-model="terminatejob"
          color="secondary"
          prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Complete Job </span>
          </span>
          <span slot="message">
            <div class="row justify-center">
              <div class="column">
                <span class="secondarycolor justify-center row"> Hours Worked: </span>
                <q-input type="text" placeholder="Hours" color="secondary" v-model="hours" class="inputspace"/>
                <span v-if="isNaN(hours)" class="error"> Cannot contain letters </span>
              </div>
            </div>
          </span>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" class="inputspace" @click="finishjob()" :disable="disablefinishbtn"/>
            <q-btn label="Cancel" color="secondary" class="inputspace" @click="hoursgoback()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="pickup"
          color="secondary"
          prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Pick Up Machine </span>
          </span>
          <span slot="message">
            <div class="row justify-center">
              <div class="column">
                <span class="secondarycolor justify-center row"> Date Picked Up: </span>
                <q-datetime type="date" placeholder="Pick Up Date" color="secondary" v-model="pickupdate" class="inputspace"/>
              </div>
            </div>
          </span>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" class="inputspace" @click="pickupmachine()" :disable="disablepickupbtn"/>
            <q-btn label="Cancel" color="secondary" class="inputspace" @click="pickupgoback()"/>
          </span>
        </q-dialog>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
var async = require('async')
export default {
  // name: 'ComponentName',
  created() {
    this.$Socket.emit('getinfo', (data) => {
        this.servercolors=data.colors
        this.serverbrands=data.brands
        this.servertypes=data.types
    })
    this.$Socket.on('updatecolor', ({colors}) => {
      this.servercolors=colors
    })
    this.$Socket.on('updatebrand', ({brands}) => {
      this.serverbrands=brands
    })
    this.$Socket.on('updatetype', ({types}) => {
      this.servertypes=types
    })
    this.$Socket.on('repairsupdated', () => {
      this.findrepair()
    })
  },
  mounted() {
    this.$nextTick (() => {
    })
  },
  data () {
    return {
      selectedtab: 'searchbyid',
      repairid: null,
      filtersselected: [],
      model: "",
      fname: "",
      lname: "",
      brand: null,
      color: null,
      type: null,
      warranty: false,
      purchased: false,
      rushservice: false,
      completed: false,
      servercolors: [],
      serverbrands: [],
      servertypes: [],
      filteroptions: [
        {
          label: "Select All",
          value: "selectall"
        },
        {
          label:"Customer First Name",
          value:"cusfname"
        },
        {
          label:"Customer Last Name",
          value:"cuslname"
        },
        {
          label:"Brand of Machine",
          value:"brand"
        },
        {
          label:"Type of Machine",
          value:"type"
        },
        {
          label:"Model of Machine",
          value:"model"
        },
        {
          label:"Color",
          value:"color"
        },
        {
          label:"Warranty",
          value:"warranty"
        },
        {
          label:"Purchased Here",
          value:"purchased"
        },
        {
          label:"Rush Service",
          value:"rushservice"
        },
        {
          label: "Completed Jobs",
          value: "completed"
        }
      ],
      partnumber: "",
      numquantity: 0,
      partdescription: "",
      addpartdialog: false,
      addpartrepairidchosen: null,
      addpartsuccess: false,
      partslistdialog: false,
      partslistrepairidchosen: null,
      partslist: [],
      terminatejob: false,
      hours: '0',
      finishjobrepairid: null,
      finishjobsuccess: false,
      pickupdate: null,
      pickup: false,
      pickuprepairid: null,
      pickupsuccess: false,
      jobarray: []
    }
  },
  methods: {
    pickupmachinery: function (id) {
      this.pickup=true
      this.pickuprepairid=id
    },
    pickupmachine: function () {
      this.$Socket.emit('pickupmachine', {
        RepairID: this.pickuprepairid,
        DatePickedUp: this.pickupdate
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.pickupdate=""
          this.pickup=false
          this.pickupsuccess=true
          setTimeout( () => {this.pickupsuccess=false}, 1000)
        }
      })
    },
    pickupgoback: function () {
      this.pickup=false
      this.pickupdate=""
    },  
    completejob: function (id) {
      this.terminatejob=true
      this.finishjobrepairid=id
    },
    finishjob: function () {
      this.$Socket.emit('finishjob', {
        RepairID: this.finishjobrepairid,
        Hours: this.hours
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.terminatejob=false
          this.finishjobsuccess=true
          this.hours='0'
          setTimeout( () => {this.finishjobsuccess=false}, 1000)
        }
      })
    },
    hoursgoback: function () {
      this.terminatejob=false
      this.hours='0'
    },
    partslistgoback: function () {
      this.partslistdialog=false
    },
    getpartslist: function (id) {
      this.partslistdialog=true
      this.partslistrepairidchosen=id
      this.$Socket.emit('getpartslist', {
        RepairID: this.partslistrepairidchosen
      }, (data) => {
        this.partslist=data
      })
    },
    addparts: function () {
      this.$Socket.emit('addpart', {
        RepairID: this.addpartrepairidchosen,
        PartNumber: this.partnumber,
        PartName: this.partdescription,
        Quantity: this.numquantity
      }, ({authenticated}) => {
        if(authenticated==true)
        {
          this.partdescription=""
          this.numquantity=0
          this.partnumber=""
          this.addpartsuccess=true
          setTimeout( () => {this.addpartsuccess=false}, 1000)
        }
      })
    },
    done: function () {
      this.partnumber=""
      this.numquantity=0
      this.addpartdialog=false
    },
    addpart: function (id) {
      this.addpartdialog=true
      this.addpartrepairidchosen=id
    },
    notpickedup: function () {

    },
    converttobool: function (num) {
      if(num==1)
      {
        return true
      }
      else
      {
        return false
      }
    },
    brandchanged: function () {
      if(this.brand=="none")
      {
        this.brand=null
      }
    },
    colorchanged: function () {
      if(this.color=="none")
      {
        this.color=null
      }
    },
    typechanged: function () {
      if(this.type=="none")
      {
        this.type=null
      }
    },
    clearfilters: function () {
      this.filtersselected=[]
      this.customfilters=[]
      this.clearforms()
      this.jobarray=[]
    },
    filterchanged: function () {
      if(this.containsvar("selectall"))
      {
        this.filtersselected=[]
        this.filtersselected.push("completed", "rushservice", "purchased", "warranty", "type", "color", "brand", "cusfname", "cuslname", "model")
      }
      this.findrepair()
      if(this.containsvar("cusfname")==false)
      {
        this.fname=""
      }
      if(this.containsvar("cuslname")==false)
      {
        this.lname=""
      }
      if(this.containsvar("model")==false)
      {
        this.model=""
      }
      if(this.containsvar("warranty")==false)
      {
        this.warranty=false
      }
      if(this.containsvar("type")==false)
      {
        this.type=null
      }
      if(this.containsvar("completed")==false)
      {
        this.completed=false
      }
      if(this.containsvar("rushservice")==false)
      {
        this.rushservice=false
      }
      if(this.containsvar("purchased")==false)
      {
        this.purchased=false
      }
      if(this.containsvar("brand")==false)
      {
        this.brand=null
      }
      if(this.containsvar("color")==false)
      {
        this.color=null
      }
    },
    containsvar: function (variable) {
      for(var x=0; x<this.filtersselected.length; x++)
      {
        if(this.filtersselected[x]==variable)
        {
          return true
        }
      }
      return false
    },
    clearforms: function () {
      this.fname= ""
      this.lname= ""
      this.brand= ""
      this.color= ""
      this.type= ""
      this.model=""
      this.warranty= false
      this.purchased= false
      this.rushservice= false
      this.completed= false
    },
    getdatestring: function (date) {
      var fulldate=date.slice(8, 10) + "/" + date.slice(5,7) + "/" + date.slice(0,4)
      return fulldate
    },
    findrepair: function () {
      var vm=this
      this.jobarray=[]
      if(this.selectedtab=="notpickedup")
      {
        vm.$Socket.emit('machinesnotpickedup', (data) => {
          this.findsalesreps(data)
        })
      }
      else if(this.selectedtab=="customfilter")
      {
        var array=[]
        if(vm.containsvar('cusfname'))
        {
          if(vm.fname!=''&&vm.fname!=null)
          {
            array.push({
              name: "FirstName",
              type: "text",
              table: "",
              value: vm.fname
            })
          }
        }
        if(vm.containsvar('cuslname'))
        {
          if(vm.lname!=''&&vm.lname!=null)
          {
            array.push({
              name: "LastName",
              type: "text",
              table: "",
              value: vm.lname
            })
          }
        }
        if(vm.containsvar('brand'))
        {
          if(vm.brand!=''&&vm.brand!=null)
          {
            array.push({
              name: "BrandID",
              type: "number",
              table: "brands",
              value: vm.brand
            })
          }
        }
        if(vm.containsvar('color'))
        {
          if(vm.color!=''&&vm.color!=null)
          {
            array.push({
              name: "ColorID",
              type: "number",
              table: "colors",
              value: vm.color
            })
          }
        }
        if(vm.containsvar('type'))
        {
          if(vm.type!=''&&vm.type!=null)
          {
            array.push({
              name: "TypeID",
              type: "number",
              table: "types",
              value: vm.type
            })
          }
        }
        if(vm.containsvar('model'))
        {
          if(vm.model!=''&&vm.model!=null)
          {
            array.push({
              name: "Model",
              type: "text",
              table: "",
              value: vm.model
            })
          }
        }
        var integer=0
        if(vm.containsvar('warranty'))
        {
          if(vm.warranty!=null&&vm.warranty!=null)
          {
            if(vm.warranty==true)
            {
              integer=1
            }
            else if(vm.warranty==false)
            {
              integer=0
            }
            array.push({
              name: "Warranty",
              type: "number",
              table: "",
              value: integer
            })
          }
        }
        if(vm.containsvar('purchased'))
        {
          if(vm.purchased==true&&vm.purchased!=null)
          {
            integer=1
          }
          else
          {
            integer=0
          }
          array.push({
            name: "Purchased",
            type: "number",
            table: "",
            value: integer
          })
        }
        if(vm.containsvar('rushservice'))
        {
          if(vm.rushservice==true&&vm.rushservice!=null)
          {
            integer=1
          }
          else
          {
            integer=0
          }
          array.push({
            name: "RushService",
            table: "",
            type: "number",
            table: "",
            value: integer
          })
        }
        if(vm.containsvar('completed'))
        {
          var bool=false
          if(vm.completed==true)
          {
            bool=true
          }
          else
          {
            bool=false
          }
          array.push({
            name: "Hours",
            type: "bool",
            table: "",
            value: bool
          })
        }
        vm.$Socket.emit('findrepairbyfilters', {
          data: array
        }, ({data}) => {
          this.findsalesreps(data)
        })
      }
      else
      {
        if(this.repairid==null||this.repairid==""||isNaN(this.repairid))
        {
          this.jobarray=[]
        }
        else
        {
          vm.$Socket.emit('findrepairbyid', {
            RepairID: vm.repairid
          }, (data) => {
            this.findsalesreps(data)
          })
        }
      }
    },
    findsalesreps: function (data) {
      if(data.length>0)
      {
        this.$forceUpdate()
        var vm=this
        this.jobarray=data
        var y=0
        for(var x in this.jobarray) {
          vm.$Socket.emit('getsalesrep', {
            UserID: this.jobarray[x].UserID
          }, (emp) => {
            this.jobarray[y]['Name']=emp[0].FirstName + " " + emp[0].LastName
            ++y
            this.$forceUpdate()
          })
        }
      }
    }
  },
  computed: {
    ... mapState('example', ['UserID']),

  }
}
</script>