dashboard.blade.php
6.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="{{ asset('AdminLTE/plugins/summernote/summernote-bs4.min.css') }}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.min.js"></script>
<script src="{{ asset("assets/js/vue.min.js") }}"></script>
<style type="text/css">
.loading {
width: 100%;
position: absolute;
background-color: rgb(0 0 0 / 23%);
height: 100%;
z-index: 999;
}
.spinner-container {
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
</style>
</head>
<body id="adminlte" class="hold-transition sidebar-mini sidebar-collapse layout-fixed custom-scrollbar sidebar-collapse">
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-white navbar-light position-relative">
</nav>
<div class="content-wrapper position-relative">
<section class="contents">
<div id="app" class="">
<div v-if="isLoading" class="loading text-center"><div class="spinner-container"><div role="status" class="spinner-border text-primary"><span class="sr-only">Loading...</span></div></div></div>
<div class="card p-2 p-md-3">
<h4 class="text-bold color-main">FAX受信</h4>
<div class="row"><div class="col">
<button class="btn btn-primary" @click="$refs.pdf.click()"><i class="fas fa-upload"></i>Upload</button>
<input type="file" ref="pdf" accept=".pdf" style="display:none" @change="upload_pdf">
</div></div>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el : '#app',
data:{
isLoading:false,
ocr : {!! json_encode($ocr) !!},
ocr_window : null
},
mounted() {
},
methods:{
upload_pdf(e){
const file = e.target.files[0];
if(!file) return;
let formData = new FormData();
formData.append('attached_file', file);
this.isLoading=true;
axios.post("{{route('import_pdf')}}", formData, {
headers:{
'Content-Type':'multipart/form-data'
}
}).then(res => {
if(res.data.status){
alert('Upload thành công');
this.ocr=res.data.data
this.openPdfWindow()
}
else alert('Upload false');
}).finally(() => {
this.$refs.pdf.value = '';
this.isLoading=false;
});
},
openPdfWindow(options = {}){
if(!(!!this.ocr && this.ocr.json_data)) return
const params = new URLSearchParams({disable: 1,...options});
const url = `/preview-pdf?${params.toString()}`;
let form = document.createElement('form')
form.method = 'POST'
form.action = url
form.target = 'slave_window'
const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
if (csrf) {
const csrfInput = document.createElement("input");
csrfInput.type = "hidden";
csrfInput.name = "_token";
csrfInput.value = csrf;
form.appendChild(csrfInput);
}
function appendFormData(form, obj, parentKey = "") {
Object.entries(obj).forEach(([key, value]) => {
const fullKey = parentKey ? `${parentKey}[${key}]` : key;
if(key === 'json_data') return
if (typeof value === "object" && value !== null) {
appendFormData(form, value, fullKey);
} else {
const input = document.createElement( "input");
input.type = "hidden";
input.name = fullKey;
input.value = value;
form.appendChild(input);
}
});
}
appendFormData(form, this.ocr);
document.body.appendChild(form)
this.ocr_window = window.open(url,'slave_window','width=1200,height=800')
form.submit()
form.remove()
window.addEventListener('message', e => {
if(e.data.type === 'mapping-field'){
this.handle_map_field(e.data.template_field,e.data.text)
}
if(e.data.type === 'mapping-customer'){
this.handle_map_customer(e.data.customer)
}
});
window.addEventListener('beforeunload', () => {
if(this.ocr_window && !this.ocr_window.closed){
this.ocr_window.close();
}
});
},
}
})
</script>
</body>
</html>