# WebMthod WebForm VB.NET + Vue JS

## 需Import

Imports System.Web.Services

## 返回JSON格式資料

    Public Class ListData
        Public Property MODEL_NO() As String
        Public Property V() As String
        Public Property N() As String
        Public Property TOTAL() As String
        Public Property GRADE() As String
        Public Property STATUS() As String
        
    End Class

    <WebMethod()> _
    Public Shared Function Data() As List(Of ListData)

        Dim conn_PC05 As SqlConnection = New SqlConnection("Database=XXXXX;Server=XXXXX;UID=XXXXX;PWD=XXXXX")
        Dim sql As String = ""


        sql = sql & "  select a.*,(case when b.grade is null then '無' else b.grade end) grade,(case when b.status is null then '可入庫' else b.status end) status from"
        sql = sql & "  ("
        sql = sql & " select * from openquery(ORACLELINK,'"

        sql = sql & " select substr(model_no,1,9) model_no,count(case when grade = ''V'' then 1 else null end) V"
        sql = sql & " ,count(case when grade = ''N'' then 1 else null end) N"
        sql = sql & " ,count(*) total "
        sql = sql & " from celods.r_chip_wip_ods"

        sql = sql & " where grade in (''N'',''V'')"
        sql = sql & " group by substr(model_no,1,9) order by count(*) desc"
        sql = sql & " ') "

        sql = sql & " ) a"
        sql = sql & " Left Join "

        sql = sql & " [BEOL2].[dbo].[NV_禁入庫] b"

        sql = sql & " on a.model_no = b.model_no and b.status <> 'RLS'"

        Dim view As New SqlDataAdapter(sql, conn_PC05)
        Dim dt As New DataTable

        view.Fill(dt)

        Dim mydata As New List(Of ListData)()

        For i As Integer = 0 To dt.Rows.Count - 1
            mydata.Add(New ListData() With { _
            .MODEL_NO = dt.Rows(i).Item(0), _
            .V = dt.Rows(i).Item(1), _
            .N = dt.Rows(i).Item(2), _
            .TOTAL = dt.Rows(i).Item(3), _
            .GRADE = dt.Rows(i).Item(4), _
            .STATUS = dt.Rows(i).Item(5)
        })
        Next
        
              
        Return mydata
      
    End Function

## Vue axios 接 API

    var vm = new Vue({


    el: "#vm",
    data: {
        wip_data:"",
    },


    methods: {

        getdata: function () {


            axios.post('NV_DISABLE.aspx/Data', {

            })

                .then(function (response) {

                    vm.wip_data = response.data

                })
                .catch(function (error) {
                    this.response_data = 'API Error. ' + error

                })


        },

    },

    mounted: function () {
        
        this.getdata()
    }
})