{"id":2706,"date":"2019-04-05T09:44:08","date_gmt":"2019-04-05T00:44:08","guid":{"rendered":"http:\/\/okamurax.com\/?p=2706"},"modified":"2020-05-05T13:24:00","modified_gmt":"2020-05-05T04:24:00","slug":"cjavascriptvue-js-%e5%b7%a5%e6%95%b0%e7%ae%a1%e7%90%86%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0","status":"publish","type":"post","link":"https:\/\/appbay.org\/?p=2706","title":{"rendered":"C#+JavaScript(Vue.js) \u5de5\u6570\u7ba1\u7406\u30d7\u30ed\u30b0\u30e9\u30e0"},"content":{"rendered":"

\u88fd\u9020\u696d\u3067\u306f\u4f5c\u696d\u6642\u9593(\u5de5\u6570)\u306e\u96c6\u8a08\u306f\u5fc5\u9808\u3002\u3057\u304b\u3057\u4e2d\u5c0f\u4f01\u696d\u3067\u306f\u4f5c\u696d\u8005\u304c\u7d19\u306b\u66f8\u3044\u3066\u3001\u5f8c\u3005\u30a8\u30af\u30bb\u30eb\u4e0a\u3067\u96c6\u8a08\u3068\u3044\u3046\u30d1\u30bf\u30fc\u30f3\u304c\u7d50\u69cb\u3042\u308b\u3002<\/p>\n

\u4eca\u56de\u306f\u30bf\u30d6\u30ec\u30c3\u30c8\u3092\u4f7f\u3063\u3066\u4f5c\u696d\u6642\u9593\u3092\u4f5c\u696d\u8005\u304c\u76f4\u63a5\u5165\u529b\u3059\u308b\u3053\u3068\u3092\u60f3\u5b9a\u3057\u305f\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u6210\u3057\u3066\u307f\u305f\u3002<\/p>\n

\u30bf\u30d6\u30ec\u30c3\u30c8\u306a\u306e\u3067Web\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u63a1\u7528\u3002\u5c02\u7528\u30b5\u30fc\u30d0\u30fc\u3092\u4fdd\u6709\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u3092\u60f3\u5b9a\u3057\u3001C#\u5185\u8535\u306e\u7c21\u6613\u30b5\u30fc\u30d0\u30fc\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3002\u666e\u901a\u306ePC\u3067\u3082\u30bd\u30d5\u30c8\u3092\u7acb\u3061\u4e0a\u3052\u3066\u304a\u3051\u3070\u51e6\u7406\u3067\u304d\u308b\u3002<\/p>\n

\u66f8\u304d\u51fa\u3057\u3082DB\u3067\u306f\u306a\u304f\u3001\u30d5\u30a9\u30eb\u30c0\uff0b\u30c6\u30ad\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u3001\u7ba1\u7406\u8005\u306ePC\u306e\u77e5\u8b58\u304c\u5c11\u306a\u304f\u3066\u3082\u4f55\u3068\u304b\u5bfe\u5fdc\u3067\u304d\u308b\u74b0\u5883\u306b\u3057\u305f\u3002<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <title>test<\/title>\r\n    <style>\r\n\r\n    \/* iOS *\/\r\n\r\n    input[type=text]{\r\n        -webkit-appearance: none;\r\n        border-radius: 0;\r\n    }\r\n\r\n    button[type=button] {\r\n        background-color: darkgrey;\r\n        -webkit-appearance: none;\r\n        border-radius: 0;\r\n    }\r\n\r\n    \/* \u5171\u901a\u30bf\u30b0 *\/\r\n\r\n    * {\r\n        padding: 0;\r\n        margin: 0;\r\n        font-size: 32px;\r\n    }\r\n\r\n    button, input, select, td, li{\r\n        padding: 10px;\r\n    }\r\n\r\n    button, input, select, div {\r\n        margin: 5px;\r\n    }\r\n\r\n    input, select {\r\n        vertical-align:middle;\r\n    }\r\n\r\n    div, td {\r\n        background-color: white;\r\n    }\r\n\r\n    table { \r\n        border-spacing: 0;\r\n        border-collapse: collapse;\r\n    }\r\n\r\n    td, li {\r\n        white-space: nowrap;\r\n        overflow-x: hidden;\r\n    }\r\n    \r\n    td {\r\n        border: 1px solid #bbb;\r\n        text-align: center;\r\n    }\r\n    \r\n    li {\r\n        border-bottom: 1px solid #bbb;\r\n        list-style: none;\r\n    }\r\n\r\n    button, select {\r\n        width: 170px;\r\n    }\r\n\r\n    \/* suggest *\/\r\n\r\n    #suggest {\r\n        padding: 20px;\r\n        position: absolute;\r\n        float: right;\r\n        top: 50px;\r\n        right: 0;\r\n        height: 75%;\r\n        width: 50%;\r\n        overflow-y: scroll;\r\n        box-shadow: 0 0 5px black;\r\n    }\r\n\r\n    #suggest_close_btn {\r\n        background-color: transparent;\r\n        position: absolute;\r\n        float: right;\r\n        top: 0;\r\n        right: 0;\r\n    }\r\n\r\n    \/* calendar *\/\r\n\r\n    #calendar td {\r\n        width: 80px;\r\n        height: 40px;\r\n    }\r\n    \r\n    #calendar td:first-child {\r\n        color: red;\r\n    }\r\n\r\n    #calendar td:last-child {\r\n        color: blue;\r\n    }\r\n\r\n    \/* list *\/\r\n\r\n    #list_header {\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    #list td:nth-of-type(1) {\r\n        min-width: 40px;\r\n        max-width: 40px;\r\n    }\r\n\r\n    #list td:nth-of-type(2) {\r\n        min-width: 220px;\r\n        max-width: 220px;\r\n    }\r\n\r\n    #list td:nth-of-type(3) {\r\n        min-width: 380px;\r\n        max-width: 380px;\r\n    }\r\n\r\n    #list td:nth-of-type(4),\r\n    #list td:nth-of-type(5) {\r\n        min-width: 75px;\r\n        max-width: 75px;\r\n    }\r\n\r\n    #list td:nth-of-type(6) {\r\n        min-width: 270px;\r\n        max-width: 270px;\r\n    }\r\n\r\n    \/* input *\/\r\n\r\n    #serial_input {\r\n        max-width: 220px;\r\n        min-width: 220px;\r\n    }\r\n\r\n    #note_input,\r\n    #note_input_cat {\r\n        max-width: 270px;\r\n        min-width: 270px;\r\n    }\r\n\r\n    #model_input {\r\n        max-width: 380px;\r\n        min-width: 380px;\r\n    }\r\n\r\n    #hour_input,\r\n    #qty_input {\r\n        max-width: 75px;\r\n        min-width: 75px;\r\n    }\r\n\r\n    \/* lock *\/\r\n\r\n    #lock {\r\n        background-color: transparent;\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n    }\r\n\r\n    <\/style>\r\n\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\r\n    \r\n<\/head>\r\n<body>\r\n\r\n<div id=\"app\">\r\n\r\n    <div id=\"lock\" v-show=\"show_lock\"><\/div>\r\n\r\n    <div id=\"header\">\r\n        <span id=\"stuff_name\"><\/span>    \r\n    <\/div>\r\n\r\n    <div id=\"left\" v-show=\"show_left\">\r\n        <button v-on:click=\"calendar_move\" id=\"prev\" type=\"button\">\u524d\u6708<\/button>\r\n        <button v-on:click=\"calendar_move\" id=\"home\" type=\"button\">\u5f53\u6708<\/button>\r\n        <button v-on:click=\"calendar_move\" id=\"next\" type=\"button\">\u7fcc\u6708<\/button>\r\n        <div id=\"calendar_header\"><\/div>\r\n        <div v-on:click=\"data_download\" id=\"calendar\"><\/div> \r\n    <\/div>\r\n\r\n    <div id=\"right\" v-show=\"show_right\"> \r\n\r\n        <button v-on:click=\"ini_view\" type=\"button\">\u623b\u308b<\/button>\r\n        <button v-on:click=\"data_upload\" type=\"button\">\u66f4\u65b0<\/button>\r\n        <button v-on:click=\"create_row\" type=\"button\">\u884c\u8ffd\u52a0<\/button>\r\n\r\n        <div id=\"right_header\"><\/div>\r\n\r\n        <input v-show=\"show_serial\" id=\"serial_input\" type=\"text\" v-on:input=\"input_serial_change\" v-model=\"model_serial\">\r\n\r\n        <input v-show=\"show_model\" id=\"model_input\" type=\"text\" v-on:input=\"input_model_change\" v-model=\"model_model\">\r\n\r\n        <input v-show=\"show_qty\" id=\"qty_input\" type=\"text\" v-on:input=\"input_qty_change\" v-model=\"model_qty\">\r\n        <br v-show=\"show_qty\">\r\n        <button v-show=\"show_qty\" v-on:click=\"click_qty_up\" type=\"button\">\uff0b1<\/button>\r\n        <button v-show=\"show_qty\" v-on:click=\"click_qty_down\" type=\"button\">\uff0d1<\/button>\r\n\r\n        <input v-show=\"show_hour\" id=\"hour_input\" type=\"text\" v-on:input=\"input_hour_change\" v-model=\"model_hour\">\r\n        <br v-show=\"show_hour\">\r\n        <button v-show=\"show_hour\" v-on:click=\"click_hour_up\" type=\"button\">\uff0b0.25<\/button>\r\n        <button v-show=\"show_hour\" v-on:click=\"click_hour_down\" type=\"button\">\uff0d0.25<\/button>\r\n\r\n        <select v-show=\"show_note\" id=\"note_input_cat\" v-on:change=\"input_note_change\" v-model=\"model_note_cat\">\r\n            <option v-for=\"s in select_cat\" v-bind:value=\"s.name\">{{s.name}}<\/option>\r\n        <\/select>\r\n\r\n        <input v-show=\"show_note\" id=\"note_input\" type=\"text\" v-on:input=\"input_note_change\" v-model=\"model_note\">\r\n        \r\n        <div id=\"list\">\r\n\r\n            <table id=\"list_header\">\r\n                <tr>\r\n                    <td>ID<\/td>\r\n                    <td>\u5de5\u756a<\/td>\r\n                    <td>\u578b\u5f0f<\/td>\r\n                    <td>\u6570\u91cf<\/td>\r\n                    <td>\u6642\u9593<\/td>\r\n                    <td>\u5099\u8003<\/td>\r\n                <\/tr>\r\n            <\/table>\r\n\r\n            <table id=\"list_body\">\r\n                <tr v-for=\"(m, counter) in main_list\" v-bind:id=\"m.ID\">\r\n                    <td v-on:click=\"delete_row\">{{ counter + 1 }}<\/td>\r\n                    <td v-on:click=\"click_serial_td\">{{ m.Serial }}<\/td>\r\n                    <td v-on:click=\"click_model_td\">{{ m.Model }}<\/td>\r\n                    <td v-on:click=\"click_qty_td\">{{ m.Qty }}<\/td>\r\n                    <td v-on:click=\"click_hour_td\">{{ m.Hour }}<\/td>\r\n                    <td v-on:click=\"click_note_td\">{{ m.Note }}<\/td>\r\n                <\/tr>\r\n            <\/table>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div v-show=\"show_suggest\" id=\"suggest\"> \r\n        <ul size=\"5\" v-on:click=\"click_suggest_select\">\r\n            <li v-for=\"s in suggest_list\" v-bind:value=\"s.ID\">{{s.Serial}} | {{s.Model}}<\/li>\r\n        <\/ul>  \r\n    <\/div>\r\n    <div v-show=\"show_suggest\" v-on:click=\"suggest_close\" id=\"suggest_close_btn\">[ \u2715 ]<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\nlet vm = new Vue({\r\n\r\n    el: '#app',\r\n    data:{\r\n\r\n        ep: 'http:\/\/xxx.xxx.xxx.xxx:xxx\/',\r\n        target_id: \"\",\r\n        stuff_name: \"\",\r\n\r\n        year: \"\",\r\n        month: \"\",\r\n\r\n        model_model: \"\",\r\n        model_serial: \"\",\r\n        model_qty: \"\",\r\n        model_hour: \"\",\r\n        model_note: \"\",\r\n        model_note_cat: \"\",\r\n\r\n        show_lock: true,\r\n        show_left: true,\r\n        show_right: false,\r\n        show_model: false,\r\n        show_serial: false,\r\n        show_suggest: false,\r\n        show_qty: false,\r\n        show_hour: false,\r\n        show_note: false,\r\n\r\n        suggest_list_back: [],\r\n        suggest_list: [],\r\n        \r\n        main_list: [],\r\n        select_cat: [],\r\n    },\r\n\r\n    methods: {\r\n\r\n        window: onload = function(){\r\n\r\n            vm.reset_date();\r\n            vm.check_query();\r\n            vm.load_suggest_list();\r\n            vm.calendar_show(vm.year, vm.month);\r\n            vm.unlock();\r\n        },\r\n\r\n        lock(){\r\n            vm.show_lock = true;\r\n        },\r\n\r\n        unlock(){\r\n            vm.show_lock = false;\r\n        },\r\n\r\n        check_query() {\r\n\r\n            let query = location.search.slice(1);\r\n            let query_arry = query.match(\/([^\/]+)\\\/(\\d){1}\\\/\/);\r\n            vm.stuff_name = \"\u540d\u7121\u3057\";\r\n            let cat_type = \"0\";\r\n\r\n            if(query_arry == null){\r\n                alert(\"URL\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093\");\r\n            } else {\r\n                vm.stuff_name = decodeURI(query_arry[1]);\r\n                cat_type = query_arry[2];\r\n            }\r\n\r\n            document.querySelector('#stuff_name').innerHTML = vm.stuff_name + \" \u3055\u3093\u306e\u30da\u30fc\u30b8\u3067\u3059\";\r\n            vm.setup_cat(cat_type);\r\n        },\r\n        \r\n        ini_view(){\r\n            vm.show_toggle(\"ini_view\");\r\n        },\r\n\r\n        setup_cat(cat_type) {\r\n\r\n            let cat_list = [];\r\n\r\n            switch (cat_type) {\r\n\r\n                case \"1\":\r\n                    cat_list = [\r\n                        {\"ID\": \"1\", \"name\": \"\"},\r\n                        {\"ID\": \"2\", \"name\": \"\u4f5c\u696d1\"},\r\n                        {\"ID\": \"3\", \"name\": \"\u4f5c\u696d2\"}\r\n                    ];\r\n                break;\r\n\r\n                case \"2\":\r\n                    cat_list = [\r\n                        {\"ID\": \"1\", \"name\": \"\"},\r\n                        {\"ID\": \"2\", \"name\": \"\u4f5c\u696d3\"},\r\n                        {\"ID\": \"3\", \"name\": \"\u4f5c\u696d4\"}\r\n                    ];\r\n                break;\r\n            }\r\n            \r\n            vm.select_cat = cat_list;\r\n        },\r\n\r\n        show_toggle(refer) {\r\n\r\n            vm.show_left = false;\r\n            vm.show_right = false;\r\n            vm.show_model = false;\r\n            vm.show_serial = false;\r\n            vm.show_suggest = false;\r\n            vm.show_qty = false;\r\n            vm.show_hour = false;\r\n            vm.show_note = false;\r\n\r\n            switch (refer) {\r\n\r\n                case \"ini_view\":\r\n                vm.show_left = true;\r\n                break;\r\n\r\n                case \"data_download\":\r\n                vm.show_right = true;\r\n                break;\r\n\r\n                case \"data_upload\":\r\n                vm.show_right = true;\r\n                break;\r\n\r\n                case \"create_row\":\r\n                vm.show_right = true;                 \r\n                break;\r\n\r\n                case \"click_serial_td\":\r\n                vm.show_right = true; \r\n                vm.show_serial = true;\r\n                vm.show_suggest = true;\r\n                break;\r\n\r\n                case \"click_model_td\":\r\n                vm.show_right = true; \r\n                vm.show_model = true;\r\n                vm.show_suggest = true;\r\n                break;\r\n\r\n                case \"click_qty_td\":\r\n                vm.show_right = true; \r\n                vm.show_qty = true;\r\n                break;\r\n\r\n                case \"click_hour_td\":\r\n                vm.show_right = true; \r\n                vm.show_hour = true;\r\n                break;\r\n\r\n                case \"click_note_td\":\r\n                vm.show_right = true; \r\n                vm.show_note = true;\r\n                break;\r\n\r\n                case \"delete_row\":\r\n                vm.show_right = true; \r\n                break;\r\n\r\n                case \"select_serial_suggest\":\r\n                vm.show_right = true; \r\n                break;\r\n\r\n                case \"suggest_close\":\r\n                vm.show_right = true; \r\n                break;\r\n            }\r\n        },\r\n\r\n        reset_date() {\r\n            vm.year = new Date().getFullYear();\r\n            vm.month = new Date().getMonth() + 1;\r\n        },\r\n\r\n        model_reset() {\r\n            vm.model_model = \"\";\r\n            vm.model_serial = \"\";\r\n            vm.model_qty = \"\";\r\n            vm.model_hour = \"\";\r\n            vm.model_note = \"\";\r\n            vm.model_note_cat = \"\";\r\n        },\r\n\r\n        calendar_create(year, month) {\r\n\r\n            let html = '<table>';\r\n\r\n            html += '<tr>';\r\n            let week = ['\u65e5', '\u6708', '\u706b', '\u6c34', '\u6728', '\u91d1', '\u571f'];\r\n            for (let col = 0; col < week.length; col++) {\r\n                html += '<td>' + week[col] + '<\/td>';\r\n            }\r\n            html += '<\/tr>';\r\n\r\n            let startWeekDay = new Date(year, month - 1, 1).getDay();\r\n            let endDay = new Date(year, month,  0).getDate();\r\n            let counter = 1;\r\n\r\n            for (let row = 0; row < 6; row++) {\r\n\r\n                html += '<tr>';\r\n                for (let col = 0; col < 7; col++) {\r\n\r\n                    if ((row == 0 && col < startWeekDay) || (counter > endDay)) {\r\n                        html += '<td>-<\/td>';\r\n                    } else {\r\n                        html += '<td class=\"calendar_td\" data-date=\"' + year + '\/' + month + '\/' + counter + '\">' + counter + '<\/td>';\r\n                        counter++;\r\n                    }\r\n                }\r\n                html += '<\/tr>';\r\n            }\r\n            html += '<\/table>';\r\n            return html;\r\n        },\r\n\r\n        calendar_show(year, month) {\r\n\r\n            document.querySelector('#calendar_header').innerHTML = year + \"\u5e74\" + month + \"\u6708\";\r\n            document.querySelector('#calendar').innerHTML = vm.calendar_create(year, month);\r\n        },\r\n\r\n        ConvertWide(target){\r\n            target = target.replace(\/\"\/g,'\u201d');\r\n            target = target.replace(\/'\/g,\"\u2019\");\r\n            return target;\r\n        },\r\n\r\n        create_json() {\r\n\r\n            let json = \"\";\r\n            let tbl = document.querySelector('#list_body');\r\n            for ( r = 0; r < tbl.rows.length; r++){\r\n                let id = tbl.rows[r].cells[0].innerHTML;\r\n                let serial = vm.ConvertWide(tbl.rows[r].cells[1].innerHTML);\r\n                let model = vm.ConvertWide(tbl.rows[r].cells[2].innerHTML);\r\n                let qty = vm.ConvertWide(tbl.rows[r].cells[3].innerHTML);\r\n                let hour = vm.ConvertWide(tbl.rows[r].cells[4].innerHTML);\r\n                let note = vm.ConvertWide(tbl.rows[r].cells[5].innerHTML);\r\n                json = json + '{\"ID\":\"' + id + '\",\"Serial\":\"' + serial + \r\n                    '\",\"Model\":\"' + model + '\",\"Qty\":\"' + qty + '\",\"Hour\":\"' + hour + '\",\"Note\":\"' + note + '\"},';\r\n            }\r\n            json = json.slice(0, json.length-1);\r\n            json = \"[\" + json + \"]\";\r\n            return json;\r\n        },\r\n        \r\n        check_date(){\r\n\r\n            if(document.querySelector('#right_header').innerHTML == \"\") {\r\n                alert(\"\u65e5\u4ed8\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u307e\u305b\u3093\");\r\n                return false;\r\n            }\r\n            return true;\r\n        },\r\n\r\n        suggest_close(){\r\n            vm.show_toggle(\"suggest_close\");\r\n        },\r\n\r\n        click_hour_up(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            if(isNaN(vm.model_hour) || vm.model_hour == \"\") {\r\n                vm.main_list[vm.target_id].Hour = \"0.00\";\r\n                vm.model_hour = \"0.00\";\r\n            } else {\r\n                vm.main_list[vm.target_id].Hour = (parseFloat(vm.main_list[vm.target_id].Hour) + 0.25).toFixed(2);\r\n                vm.model_hour = (parseFloat(vm.model_hour) + 0.25).toFixed(2);\r\n            }\r\n        },      \r\n        \r\n        click_hour_down(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            if(isNaN(vm.model_hour) || vm.model_hour == \"\") {\r\n                vm.main_list[vm.target_id].Hour = \"0.00\";\r\n                vm.model_hour = \"0.00\";\r\n            } else {\r\n                vm.main_list[vm.target_id].Hour = (parseFloat(vm.main_list[vm.target_id].Hour) - 0.25).toFixed(2);\r\n                vm.model_hour = (parseFloat(vm.model_hour) - 0.25).toFixed(2);\r\n            }\r\n        },\r\n\r\n        click_qty_up(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            if(isNaN(vm.model_qty) || vm.model_qty == \"\") {\r\n                vm.main_list[vm.target_id].Qty = \"1\";\r\n                vm.model_qty = \"1\";\r\n            } else {\r\n                vm.main_list[vm.target_id].Qty = (parseFloat(vm.main_list[vm.target_id].Qty) + 1);\r\n                vm.model_qty = (parseFloat(vm.model_qty) + 1);\r\n            }\r\n        },      \r\n\r\n        click_qty_down(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            if(isNaN(vm.model_qty) || vm.model_qty == \"\") {\r\n                vm.main_list[vm.target_id].Qty = \"1\";\r\n                vm.model_qty = \"1\";\r\n            } else {\r\n                vm.main_list[vm.target_id].Qty = (parseFloat(vm.main_list[vm.target_id].Qty) - 1);\r\n                vm.model_qty = (parseFloat(vm.model_qty) - 1);\r\n            }\r\n        },\r\n\r\n        click_serial_td(e){\r\n\r\n            if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"click_serial_td\");\r\n\r\n            vm.model_serial = e.target.innerHTML;\r\n            vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;\r\n\r\n            vm.reset_suggest_list();\r\n        },\r\n\r\n        click_model_td(e){\r\n\r\n            if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"click_model_td\");\r\n\r\n            vm.model_model = e.target.innerHTML;\r\n            vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;\r\n\r\n            vm.reset_suggest_list();\r\n        },\r\n\r\n        click_qty_td(e){\r\n\r\n        if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"click_qty_td\");\r\n\r\n            vm.model_qty = e.target.innerHTML;\r\n            vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;\r\n        },\r\n\r\n        click_hour_td(e){\r\n\r\n            if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"click_hour_td\");\r\n\r\n            vm.model_hour = e.target.innerHTML;\r\n            vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;\r\n        },\r\n\r\n        click_note_td(e){\r\n\r\n            if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"click_note_td\");\r\n\r\n            let cat = e.target.innerHTML.slice(0, e.target.innerHTML.indexOf(\" \")).trim();\r\n            let note = e.target.innerHTML.slice(e.target.innerHTML.indexOf(\" \") + 1, e.target.innerHTML.length).trim();\r\n\r\n            vm.model_note_cat = cat;\r\n            vm.model_note = note;\r\n            vm.target_id = e.target.parentNode.firstElementChild.innerHTML - 1;\r\n        },\r\n\r\n        input_serial_change(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            vm.main_list[vm.target_id].Serial = vm.model_serial;\r\n            vm.update_serial_suggest(\"serial\");\r\n        },\r\n\r\n        input_model_change(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            vm.main_list[vm.target_id].Model = vm.model_model;\r\n            vm.update_serial_suggest(\"model\");\r\n        },\r\n\r\n        input_qty_change(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            vm.main_list[vm.target_id].Qty = vm.model_qty;\r\n        },\r\n\r\n        input_hour_change(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            vm.main_list[vm.target_id].Hour = vm.model_hour;\r\n        },\r\n\r\n        input_note_change(){\r\n\r\n            if(vm.target_id === \"\") return;\r\n\r\n            let cat_and_note = \"\";\r\n            \r\n            if(vm.model_note_cat.length > 0 || vm.model_note.length > 0){\r\n                cat_and_note = vm.model_note_cat + \" \" + vm.model_note.replace(\/\\s\/g, \"\u3000\");\r\n            }\r\n            vm.main_list[vm.target_id].Note = cat_and_note;\r\n        },\r\n\r\n        backup_suggest_list(){\r\n\r\n            for(let r = 0; r < vm.suggest_list.length; r++){\r\n\r\n                Vue.set(vm.suggest_list_back, r, {\r\n                    \"ID\":r,\r\n                    \"Serial\":vm.suggest_list[r].Serial,\r\n                    \"Model\":vm.suggest_list[r].Model\r\n                });\r\n            }\r\n        },\r\n\r\n        reset_suggest_list(){\r\n\r\n            for(let r = 0; r < vm.suggest_list_back.length; r++){\r\n\r\n                Vue.set(vm.suggest_list, r, {\r\n                    \"ID\":r,\r\n                    \"Serial\":vm.suggest_list_back[r].Serial,\r\n                    \"Model\":vm.suggest_list_back[r].Model\r\n                });\r\n\r\n            }\r\n        },\r\n\r\n        update_serial_suggest(target){\r\n\r\n            vm.reset_suggest_list();\r\n\r\n            if(target == \"serial\"){\r\n\r\n                for(let r = 0; r < vm.suggest_list.length; r++){\r\n                 \r\n                    if (vm.suggest_list[r].Serial.indexOf(vm.model_serial) == -1){\r\n                        vm.suggest_list.splice(r, 1);\r\n                        r--;\r\n                    }\r\n                }\r\n            }\r\n\r\n            if(target == \"model\"){\r\n\r\n                for(let r = 0; r < vm.suggest_list.length; r++){\r\n                 \r\n                    if (vm.suggest_list[r].Model.indexOf(vm.model_model) == -1){\r\n                        vm.suggest_list.splice(r, 1);\r\n                        r--;\r\n                    }\r\n                }        \r\n            }\r\n        },\r\n\r\n        click_suggest_select(e){\r\n\r\n            if(e.target.nodeName == \"SELECT\") return;\r\n\r\n            let selected_value = e.target.innerHTML;\r\n            vm.select_serial_suggest(selected_value);\r\n        },\r\n\r\n        select_serial_suggest(selected_value){\r\n\r\n            let serial = selected_value.slice(0, selected_value.indexOf(\"|\")).trim();\r\n            let model = selected_value.slice(selected_value.indexOf(\"|\") + 1, selected_value.length).trim();\r\n\r\n            vm.main_list[vm.target_id].Serial = serial;\r\n            vm.model_serial = serial;\r\n\r\n            vm.main_list[vm.target_id].Model = model;\r\n            vm.model_model = model;\r\n\r\n            vm.show_toggle(\"select_serial_suggest\");\r\n        },\r\n\r\n        delete_row(e){\r\n\r\n            if(!vm.check_date()) return;\r\n            if(!confirm(\"\u524a\u9664\u3057\u307e\u3059\u304b\uff1f(\u524a\u9664\u5f8c\u78ba\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044)\")) return;\r\n\r\n            vm.show_toggle(\"delete_row\");\r\n            let counter = e.target.innerHTML - 1;\r\n            vm.main_list.splice(counter, 1);\r\n        },\r\n\r\n        create_row(){\r\n\r\n            if(!vm.check_date()) return;\r\n\r\n            vm.show_toggle(\"create_row\");\r\n            Vue.set(vm.main_list, vm.main_list.length, {\"ID\": vm.main_list.length, \"Serial\":\"\", \"Model\":\"\", \"Qty\":\"1\", \"Hour\":\"0.00\", \"Note\":\"\"});\r\n        },\r\n\r\n        reset_main_list(){\r\n\r\n            vm.main_list.splice(0,vm.main_list.length);\r\n            Vue.set(vm.main_list, 0, {\"ID\": \"0\", \"Serial\":\"\", \"Model\":\"\", \"Qty\":\"1\", \"Hour\":\"0.00\", \"Note\":\"\"});\r\n        },\r\n\r\n        calendar_move(e) {\r\n\r\n            if (e.target.id === 'home') vm.reset_date();\r\n            if (e.target.id === 'prev') vm.month--;\r\n            if (e.target.id === 'next') vm.month++;\r\n                \r\n            if (vm.month == 0) {\r\n                vm.year--;\r\n                vm.month = 12;\r\n            }\r\n\r\n            if (vm.month == 13) {\r\n                vm.year++;\r\n                vm.month = 1;\r\n            }\r\n            vm.calendar_show(vm.year, vm.month);\r\n        },\r\n\r\n        data_upload(){\r\n\r\n            if(document.querySelector('#right_header').innerHTML == \"\") {\r\n                alert(\"\u65e5\u4ed8\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u307e\u305b\u3093\");\r\n                return;\r\n            }\r\n\r\n            let ymd = document.querySelector('#right_header').innerHTML.split(\"\/\");\r\n            let y = (\"000\" + ymd[0]).slice(-4);\r\n            let m = (\"0\" + (ymd[1])).slice(-2);\r\n            let d = (\"0\" + ymd[2]).slice(-2);\r\n\r\n            vm.lock();\r\n            axios\r\n            .post(vm.ep + vm.stuff_name + '\/' + y + '\/' + m + '\/' + d + '\/', vm.create_json())\r\n            .then(response => {\r\n\r\n                vm.show_toggle(\"data_upload\");\r\n                vm.unlock();\r\n                alert(\"\u66f4\u65b0\u3057\u307e\u3057\u305f\");\r\n            })\r\n            .catch(error => {\r\n                alert(error);\r\n            });\r\n        },\r\n\r\n        data_download(e){\r\n\r\n            if(!e.target.classList.contains(\"calendar_td\")) return;\r\n\r\n            vm.model_reset();\r\n\r\n\r\n            vm.show_toggle(\"data_download\");\r\n\r\n            let ymd = e.target.dataset.date.split(\"\/\");\r\n            let y = (\"000\" + ymd[0]).slice(-4);\r\n            let m = (\"0\" + (ymd[1])).slice(-2);\r\n            let d = (\"0\" + ymd[2]).slice(-2);\r\n\r\n            document.querySelector('#right_header').innerHTML = y + \"\/\" + m + \"\/\" + d;\r\n\r\n            vm.lock();\r\n            axios\r\n            .post(vm.ep + vm.stuff_name + '\/' + y + '\/' + m + '\/' + d + '\/',\"\") \r\n            .then(response => {\r\n\r\n                vm.reset_main_list();\r\n                if(response.data != \"\"){\r\n                    Vue.set(vm, 'main_list', response.data);\r\n                }    \r\n                vm.reset_suggest_list();\r\n                vm.unlock();\r\n            })\r\n            .catch(error => {\r\n                alert(error);\r\n            });\r\n        },\r\n\r\n        load_suggest_list(){\r\n\r\n            axios\r\n            .post(vm.ep +'suggest\/',\"\") \r\n            .then(response => {\r\n\r\n                vm.suggest_list.splice(0,vm.suggest_list.length);\r\n\r\n                if(response.data != \"\"){\r\n                    Vue.set(vm, 'suggest_list', response.data);\r\n                    vm.backup_suggest_list();\r\n                }\r\n            })\r\n            .catch(error => {\r\n                alert(error);\r\n            });\r\n        }\r\n    } \r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
using System;\r\nusing System.Net;\r\nusing System.Text;\r\nusing System.Threading.Tasks;\r\nusing System.Windows.Forms;\r\nusing System.Text.RegularExpressions;\r\nusing System.IO;\r\n\r\nnamespace \u5de5\u6570SERVER\r\n{\r\n    public partial class Form1 : Form\r\n    {\r\n        HttpListener Listener;\r\n\r\n        public Form1()\r\n        {\r\n            InitializeComponent();\r\n            button2.Enabled = false;\r\n        }\r\n\r\n        private string LoadSuggest()\r\n        {\r\n            string json = \"\";\r\n\r\n            using (StreamReader sr = new StreamReader(Application.StartupPath + @\"\\suggest.txt\", \r\n                Encoding.GetEncoding(\"shift_jis\")))\r\n            {\r\n                json += \"{\\\"Serial\\\":\\\"001\\\", \\\"Model\\\":\\\"\u6253\u3061\u5408\u308f\u305b\\\"},\";\r\n\r\n                while (sr.Peek() > -1)\r\n                {\r\n                    string[] lineArray = sr.ReadLine().Split(',');\r\n                    json += \"{\\\"Serial\\\":\\\"\" + lineArray[0] + \"\\\", \\\"Model\\\":\\\"\" + lineArray[1] + \"\\\"},\";\r\n                }\r\n                json = json.TrimEnd(',');\r\n                json = \"[\" + json + \"]\";\r\n            }\r\n            return json;\r\n        }\r\n\r\n        private void button1_Click(object sender, EventArgs e)\r\n        {\r\n            this.label1.Text = \"\u5f85\u53d7\u4e2d\";\r\n\r\n            button1.Enabled = false;\r\n            button2.Enabled = true;\r\n\r\n            Listener = new HttpListener();\r\n            Listener.Prefixes.Add(\"http:\/\/*:30000\/\");\r\n\r\n            Task.Run(()=> {\r\n                \r\n                Listener.Start();\r\n                \r\n                while (true)\r\n                {\r\n                    var ctx = Listener.GetContext();\r\n                    var req = ctx.Request;\r\n                    var res = ctx.Response;\r\n\r\n                    string rawUrl = WebUtility.UrlDecode(req.RawUrl);\r\n                    string suggestPattern = @\"\\\/suggest\\\/\";\r\n                    string basePattern = @\"\\\/([^\/]+)\\\/(\\d{4})\\\/(\\d{2})\\\/(\\d{2})\\\/\";\r\n\r\n                    \/\/\u30b5\u30b8\u30a7\u30b9\u30c8\u7528POST\r\n                    if (new Regex(suggestPattern).IsMatch(rawUrl))\r\n                    {\r\n                        byte[] page = Encoding.UTF8.GetBytes(LoadSuggest());\r\n                        res.OutputStream.Write(page, 0, page.Length);\r\n                        res.Close();\r\n                        continue;\r\n                    }\r\n\r\n                    \/\/\u30c7\u30fc\u30bf\u30ea\u30af\u30a8\u30b9\u30c8\u7528POST\r\n                    if (new Regex(basePattern).IsMatch(rawUrl))\r\n                    {\r\n                        Match match = new Regex(basePattern).Match(rawUrl);\r\n                        string staffName = match.Groups[1].Value;\r\n                        string y = match.Groups[2].Value;\r\n                        string m = match.Groups[3].Value;\r\n                        string d = match.Groups[4].Value;\r\n\r\n                        string localPath = Application.StartupPath + \"\\\\folder\\\\\" + staffName + \"\\\\\" + y + \"\\\\\" + m + \"\\\\\" + d + \".txt\";\r\n\r\n                        if (!File.Exists(localPath))\r\n                        {\r\n                            string dir = Path.GetDirectoryName(localPath);\r\n                            if (!Directory.Exists(dir)) Directory.CreateDirectory(dir);\r\n                            \r\n                            File.Create(localPath).Close();\r\n                        }\r\n\r\n                        if (req.HasEntityBody)\r\n                        {\r\n                            using (StreamWriter sw = new StreamWriter(localPath,false,Encoding.GetEncoding(\"UTF-8\")))\r\n                            {\r\n                                using (StreamReader sr = new StreamReader(req.InputStream))\r\n                                {\r\n                                    string body = sr.ReadToEnd();\r\n                                    sw.Write(body);\r\n                                    sw.Flush();\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        byte[] page = File.ReadAllBytes(localPath);\r\n                        res.OutputStream.Write(page, 0, page.Length);\r\n                        res.Close();\r\n                        continue;\r\n                    }\r\n\r\n                    \/\/\u30d6\u30e9\u30a6\u30b6\u30a2\u30af\u30bb\u30b9\u7528\r\n                    ctx.Response.ContentType = \"text\/html; charset=UTF-8\";\r\n\r\n                    string indexPath = Application.StartupPath + @\"\\index.html\";\r\n                    byte[] inputPage = File.ReadAllBytes(indexPath);\r\n\r\n                    res.OutputStream.Write(inputPage, 0, inputPage.Length);\r\n                    res.Close();\r\n\r\n                }\r\n            });\r\n        }\r\n\r\n        private void button2_Click(object sender, EventArgs e)\r\n        {\r\n            if (Listener == null) return;\r\n\r\n            if(Listener.IsListening) Listener.Stop();\r\n            Listener.Close();\r\n            Listener = null;\r\n\r\n            this.label1.Text = \"\u505c\u6b62\u4e2d\";\r\n\r\n            button1.Enabled = true;\r\n            button2.Enabled = false;\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
C#\u306e\u30b5\u30fc\u30d0\u30fcVer2<\/p>\n
\u6700\u521d\u306fTask.Run\u3067\u975e\u540c\u671f\u306b\u3057\u3066While\u3067\u5f85\u53d7\u3057\u3066\u3044\u305f\u3002BeginGetContext\/EndGetContext\u3092\u5229\u7528\u3059\u308b\u5834\u5408\u3002<\/p>\n
using System;\r\nusing System.Net;\r\nusing System.Text;\r\nusing System.Threading.Tasks;\r\nusing System.Windows.Forms;\r\nusing System.Text.RegularExpressions;\r\nusing System.IO;\r\n\r\nnamespace \u5de5\u6570SERVER\r\n{\r\n    public partial class Form1 : Form\r\n    {\r\n        HttpListener Listener;\r\n\r\n        public Form1()\r\n        {\r\n            InitializeComponent();\r\n            button2.Enabled = false;\r\n        }\r\n\r\n        private string LoadSuggest()\r\n        {\r\n            string json = \"\";\r\n\r\n            using (StreamReader sr = new StreamReader(Application.StartupPath + @\"\\suggest.txt\", Encoding.GetEncoding(\"shift_jis\")))\r\n            {\r\n                json += \"{\\\"Serial\\\":\\\"001\\\", \\\"Model\\\":\\\"aaa\\\"},\";\r\n\r\n                while (sr.Peek() > -1)\r\n                {\r\n                    string line = sr.ReadLine();\r\n                    if (!line.Contains(\",\") || line == \"\") continue;\r\n                    string[] lineArray = line.Split(',');\r\n                    json += \"{\\\"Serial\\\":\\\"\" + lineArray[0] + \"\\\", \\\"Model\\\":\\\"\" + lineArray[1] + \"\\\"},\";\r\n                }\r\n\r\n                json = json.TrimEnd(',');\r\n                json = \"[\" + json + \"]\";\r\n            }\r\n            return json;\r\n        }\r\n\r\n        private void requested(IAsyncResult result)\r\n        {\r\n            HttpListener lsn = (HttpListener)result.AsyncState;\r\n\r\n            if (!lsn.IsListening) return;\r\n\r\n            var ctx = lsn.EndGetContext(result);\r\n            var req = ctx.Request;\r\n            var res = ctx.Response;\r\n\r\n            string rawUrl = WebUtility.UrlDecode(req.RawUrl);\r\n            string suggestPattern = @\"\\\/suggest\\\/\";\r\n            string basePattern = @\"\\\/([^\/]+)\\\/(\\d{4})\\\/(\\d{2})\\\/(\\d{2})\\\/\";\r\n\r\n            \/\/\u30b5\u30b8\u30a7\u30b9\u30c8\u7528POST\r\n            if (new Regex(suggestPattern).IsMatch(rawUrl))\r\n            {\r\n                byte[] page = Encoding.UTF8.GetBytes(LoadSuggest());\r\n                res.OutputStream.Write(page, 0, page.Length);\r\n                res.Close();\r\n\r\n                lsn.BeginGetContext(requested, lsn);\r\n                return;\r\n            }\r\n\r\n            \/\/\u30c7\u30fc\u30bf\u30ea\u30af\u30a8\u30b9\u30c8\u7528POST\r\n            if (new Regex(basePattern).IsMatch(rawUrl))\r\n            {\r\n                Match match = new Regex(basePattern).Match(rawUrl);\r\n                string staffName = match.Groups[1].Value;\r\n                string y = match.Groups[2].Value;\r\n                string m = match.Groups[3].Value;\r\n                string d = match.Groups[4].Value;\r\n\r\n                string localPath = Application.StartupPath + \"\\\\folder\\\\\" + staffName + \"\\\\\" + y + \"\\\\\" + m + \"\\\\\" + d + \".txt\";\r\n\r\n                if (!File.Exists(localPath))\r\n                {\r\n                    string dir = Path.GetDirectoryName(localPath);\r\n                    if (!Directory.Exists(dir)) Directory.CreateDirectory(dir);\r\n\r\n                    File.Create(localPath).Close();\r\n                }\r\n\r\n                if (req.HasEntityBody)\r\n                {\r\n                    using (StreamWriter sw = new StreamWriter(localPath, false, Encoding.GetEncoding(\"UTF-8\")))\r\n                    {\r\n                        using (StreamReader sr = new StreamReader(req.InputStream))\r\n                        {\r\n                            string body = sr.ReadToEnd();\r\n                            sw.Write(body);\r\n                            sw.Flush();\r\n                        }\r\n                    }\r\n                }\r\n\r\n                byte[] page = File.ReadAllBytes(localPath);\r\n                res.OutputStream.Write(page, 0, page.Length);\r\n                res.Close();\r\n\r\n                lsn.BeginGetContext(requested, lsn);\r\n                return;\r\n            }\r\n\r\n            \/\/\u30d6\u30e9\u30a6\u30b6\u30a2\u30af\u30bb\u30b9\u7528\r\n            res.ContentType = \"text\/html; charset=UTF-8\";\r\n\r\n            string indexPath = Application.StartupPath + @\"\\index.html\";\r\n            byte[] inputPage = File.ReadAllBytes(indexPath);\r\n\r\n            res.OutputStream.Write(inputPage, 0, inputPage.Length);\r\n            res.Close();\r\n\r\n            lsn.BeginGetContext(requested, lsn);\r\n        }\r\n\r\n        private void button1_Click(object sender, EventArgs e)\r\n        {\r\n            this.label1.Text = \"\u5f85\u53d7\u4e2d\";\r\n\r\n            button1.Enabled = false;\r\n            button2.Enabled = true;\r\n\r\n            Listener = new HttpListener();\r\n            Listener.Prefixes.Add(\"http:\/\/*:30000\/\");\r\n\r\n            Listener.Start();\r\n            Listener.BeginGetContext(requested, Listener);\r\n\r\n        }\r\n\r\n        private void button2_Click(object sender, EventArgs e)\r\n        {\r\n            if (Listener.IsListening) Listener.Stop();\r\n\r\n            this.label1.Text = \"\u505c\u6b62\u4e2d\";\r\n\r\n            button1.Enabled = true;\r\n            button2.Enabled = false;\r\n        }\r\n    }\r\n}\r\n<\/pre>\n