Initial commit
This commit is contained in:
6
.env
Normal file
6
.env
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
VITE_APP_API_URL=https://mcl2000.minicircuits.com
|
||||||
|
VITE_APP_API_TOKEN=TGlua1Rlc3Q6NDI1YTVkNzYtMjIwMC00MzgwLWFlNDMtNmM0ODg5ZDliNDlj
|
||||||
|
VITE_APP_API_ENDPOINT_FETCH=/FetchAPI/FetchAPIServlet
|
||||||
|
VITE_APP_API_ENDPOINT_FILE_UTILS=/FileUtils/IFSUtilsServlet
|
||||||
|
VITE_APP_API_MAPICS_ENV=QQ
|
||||||
|
VITE_APP_API_ENV=DEV
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
BIN
excelApp.zip
Normal file
BIN
excelApp.zip
Normal file
Binary file not shown.
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Data Flow Tables</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
package.json
Normal file
21
package.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "my-data-table",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@easytable/vue": "^0.0.6",
|
||||||
|
"naive-ui": "^2.41.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"vite": "^6.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
182
src/App.vue
Normal file
182
src/App.vue
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Data Flow Tables</h1>
|
||||||
|
<FileUpload v-if="currentStep === 'upload'" @file-processed="handleFileProcessed" />
|
||||||
|
<DataTable
|
||||||
|
v-if="currentStep === 'preview'"
|
||||||
|
:jsonData="tableData"
|
||||||
|
@reset="resetData"
|
||||||
|
@configure="currentStep = 'metadata'"
|
||||||
|
/>
|
||||||
|
<MetaData
|
||||||
|
v-if="currentStep === 'metadata'"
|
||||||
|
:jsonData="tableData"
|
||||||
|
@back="currentStep = 'preview'"
|
||||||
|
@sql-generated="handleSQLGenerated"
|
||||||
|
/>
|
||||||
|
<div v-if="currentStep === 'sql'" class="sql-preview">
|
||||||
|
<Navigation
|
||||||
|
@back="currentStep = 'metadata'"
|
||||||
|
:show-next="false"
|
||||||
|
/>
|
||||||
|
<pre>{{ sqlStatements }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FileUpload from './components/FileUpload.vue'
|
||||||
|
import DataTable from './components/DataTable.vue'
|
||||||
|
import MetaData from './components/MetaData.vue'
|
||||||
|
import Navigation from './components/Navigation.vue'
|
||||||
|
import { apiClient } from './services/ApiClient'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
FileUpload,
|
||||||
|
DataTable,
|
||||||
|
MetaData,
|
||||||
|
Navigation
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentStep: 'upload',
|
||||||
|
tableData: null,
|
||||||
|
sqlStatements: null,
|
||||||
|
tableName: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleFileProcessed(data) {
|
||||||
|
this.tableData = data
|
||||||
|
this.currentStep = 'preview'
|
||||||
|
},
|
||||||
|
async handleSQLGenerated(data) {
|
||||||
|
try {
|
||||||
|
this.sqlStatements = data.sql
|
||||||
|
this.tableName = data.tableName
|
||||||
|
this.currentStep = 'sql'
|
||||||
|
|
||||||
|
await apiClient.createTable(data.sql.createTable)
|
||||||
|
|
||||||
|
// Next steps would be:
|
||||||
|
// 1. Generate tab-delimited data
|
||||||
|
// 2. Upload to temp file
|
||||||
|
// 3. Import records
|
||||||
|
// 4. Verify record count
|
||||||
|
// 5. Create data load record
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating table:', error)
|
||||||
|
// Handle error - show message to user
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetData() {
|
||||||
|
this.tableData = null
|
||||||
|
this.sqlStatements = null
|
||||||
|
this.currentStep = 'upload'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--primary-color: #2563eb;
|
||||||
|
--primary-hover: #1d4ed8;
|
||||||
|
--background-color: #f8fafc;
|
||||||
|
--border-color: #e2e8f0;
|
||||||
|
--text-color: #1e293b;
|
||||||
|
--n-th-color: var(--primary-color) !important;
|
||||||
|
--n-th-text-color: white !important;
|
||||||
|
--n-th-font-weight: 500 !important;
|
||||||
|
--n-th-button-color-hover: white !important;
|
||||||
|
--n-th-icon-color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table styles */
|
||||||
|
.n-data-table .n-data-table-th {
|
||||||
|
background-color: var(--primary-color) !important;
|
||||||
|
color: white !important;
|
||||||
|
border-right: none !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-data-table .n-data-table-td {
|
||||||
|
border-right: none !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
border-bottom: 1px solid var(--border-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-data-table .n-data-table-th:last-child,
|
||||||
|
.n-data-table .n-data-table-td:last-child {
|
||||||
|
border-right: 1px solid var(--border-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-data-table .n-data-table-th:first-child,
|
||||||
|
.n-data-table .n-data-table-td:first-child {
|
||||||
|
border-left: 1px solid var(--border-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-data-table .n-data-table-sorter {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-data-table-th svg {
|
||||||
|
fill: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-buttons {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sql-preview {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sql-preview pre {
|
||||||
|
background: #f8fafc;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
159
src/components/DataTable.vue
Normal file
159
src/components/DataTable.vue
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-section">
|
||||||
|
<Navigation
|
||||||
|
@back="$emit('reset')"
|
||||||
|
@next="$emit('configure')"
|
||||||
|
/>
|
||||||
|
<div class="table-container">
|
||||||
|
<n-data-table
|
||||||
|
:columns="columns"
|
||||||
|
:data="data"
|
||||||
|
:pagination="{
|
||||||
|
page: currentPage,
|
||||||
|
pageSize: pageSize,
|
||||||
|
pageSizes: [10, 20, 50, 100],
|
||||||
|
showSizePicker: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
itemCount: data.length,
|
||||||
|
onUpdatePage: handlePageChange,
|
||||||
|
onUpdatePageSize: handlePageSizeChange
|
||||||
|
}"
|
||||||
|
:bordered="true"
|
||||||
|
:striped="true"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
style="max-width: 100%"
|
||||||
|
:single-line="false"
|
||||||
|
:bottom-bordered="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { h } from 'vue'
|
||||||
|
import Navigation from './Navigation.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DataTable',
|
||||||
|
components: {
|
||||||
|
Navigation
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
jsonData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['reset', 'configure'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns: [],
|
||||||
|
data: [],
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
scrollX: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
jsonData: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newData) {
|
||||||
|
if (newData && newData.length > 0) {
|
||||||
|
this.processData(newData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
processData(jsonData) {
|
||||||
|
const headers = jsonData[0]
|
||||||
|
|
||||||
|
// Calculate max width for each column
|
||||||
|
const columnWidths = headers.map((header, columnIndex) => {
|
||||||
|
let maxLength = header.toString().length
|
||||||
|
jsonData.slice(1).forEach(row => {
|
||||||
|
const cellContent = row[columnIndex]
|
||||||
|
if (cellContent) {
|
||||||
|
const contentLength = cellContent.toString().length
|
||||||
|
maxLength = Math.max(maxLength, contentLength)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return Math.min(Math.max(maxLength * 10, 80), 300)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create columns
|
||||||
|
this.columns = headers.map((header, index) => ({
|
||||||
|
title: () => h(
|
||||||
|
'span',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
color: 'white',
|
||||||
|
fontWeight: '500'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
header
|
||||||
|
),
|
||||||
|
key: header,
|
||||||
|
sortable: true,
|
||||||
|
width: columnWidths[index],
|
||||||
|
ellipsis: {
|
||||||
|
tooltip: true
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Process data
|
||||||
|
this.data = jsonData.slice(1).map(row => {
|
||||||
|
const rowData = {}
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
rowData[header] = row[index] || ''
|
||||||
|
})
|
||||||
|
return rowData
|
||||||
|
})
|
||||||
|
|
||||||
|
// Calculate total width
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0)
|
||||||
|
this.scrollX = Math.max(totalWidth + 100, 1200)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePageChange(page) {
|
||||||
|
this.currentPage = page
|
||||||
|
},
|
||||||
|
handlePageSizeChange(pageSize) {
|
||||||
|
this.pageSize = pageSize
|
||||||
|
this.currentPage = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.table-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
168
src/components/FileUpload.vue
Normal file
168
src/components/FileUpload.vue
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<div class="upload-container">
|
||||||
|
<div class="upload-box"
|
||||||
|
@dragover.prevent
|
||||||
|
@drop.prevent="handleDrop"
|
||||||
|
@click="triggerFileInput">
|
||||||
|
<div class="upload-content">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||||
|
<polyline points="17 8 12 3 7 8"/>
|
||||||
|
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||||
|
</svg>
|
||||||
|
<h3>Drop your Excel or CSV file here</h3>
|
||||||
|
<p>or click to browse</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref="fileInput"
|
||||||
|
@change="handleFileSelect"
|
||||||
|
accept=".csv,.xlsx,.xls"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
<div v-if="error" class="error-message">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as XLSX from 'xlsx'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FileUpload',
|
||||||
|
emits: ['file-processed'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
error: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
triggerFileInput() {
|
||||||
|
this.error = null
|
||||||
|
this.$refs.fileInput.value = ''
|
||||||
|
this.$refs.fileInput.click()
|
||||||
|
},
|
||||||
|
handleDrop(e) {
|
||||||
|
this.error = null
|
||||||
|
this.$refs.fileInput.value = ''
|
||||||
|
const file = e.dataTransfer.files[0]
|
||||||
|
if (file) {
|
||||||
|
this.processFile(file)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleFileSelect(e) {
|
||||||
|
this.error = null
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
this.processFile(file)
|
||||||
|
} else {
|
||||||
|
this.$refs.fileInput.value = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
processFile(file) {
|
||||||
|
const validTypes = [
|
||||||
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||||
|
'application/vnd.ms-excel',
|
||||||
|
'text/csv'
|
||||||
|
]
|
||||||
|
|
||||||
|
if (!validTypes.includes(file.type)) {
|
||||||
|
this.error = 'Please upload a valid Excel or CSV file.'
|
||||||
|
this.$refs.fileInput.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = new FileReader()
|
||||||
|
|
||||||
|
reader.onload = (e) => {
|
||||||
|
try {
|
||||||
|
const data = new Uint8Array(e.target.result)
|
||||||
|
const workbook = XLSX.read(data, { type: 'array' })
|
||||||
|
|
||||||
|
const firstSheetName = workbook.SheetNames[0]
|
||||||
|
const worksheet = workbook.Sheets[firstSheetName]
|
||||||
|
|
||||||
|
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
|
||||||
|
|
||||||
|
if (jsonData.length > 0) {
|
||||||
|
const headers = jsonData[0]
|
||||||
|
|
||||||
|
const hasBlankHeaders = headers.some(header =>
|
||||||
|
!header || header.toString().trim() === ''
|
||||||
|
)
|
||||||
|
|
||||||
|
if (hasBlankHeaders) {
|
||||||
|
this.error = 'Invalid file format: The first row contains blank columns. Please ensure all headers are filled.'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const uniqueHeaders = new Set(headers)
|
||||||
|
if (uniqueHeaders.size !== headers.length) {
|
||||||
|
this.error = 'Invalid file format: The file contains duplicate column headers. Please ensure all headers are unique.'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('file-processed', jsonData)
|
||||||
|
} else {
|
||||||
|
this.error = 'The file appears to be empty. Please upload a file with data.'
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
this.error = 'Error processing file. Please ensure it is a valid Excel or CSV file.'
|
||||||
|
console.error('File processing error:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.onerror = () => {
|
||||||
|
this.error = 'Error reading file. Please try again.'
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.readAsArrayBuffer(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.upload-container {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-box {
|
||||||
|
border: 2px dashed var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-box:hover {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
background-color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-content svg {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fee2e2;
|
||||||
|
color: #991b1b;
|
||||||
|
border: 1px solid #fecaca;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
398
src/components/MetaData.vue
Normal file
398
src/components/MetaData.vue
Normal file
@@ -0,0 +1,398 @@
|
|||||||
|
<template>
|
||||||
|
<div class="metadata-section">
|
||||||
|
<Navigation
|
||||||
|
@back="$emit('back')"
|
||||||
|
@next="confirmMetadata"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<n-data-table
|
||||||
|
:columns="metadataColumns"
|
||||||
|
:data="metadata"
|
||||||
|
:bordered="true"
|
||||||
|
:single-line="false"
|
||||||
|
:pagination="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { h, ref } from 'vue'
|
||||||
|
import { NSelect, NInputNumber, NButton } from 'naive-ui'
|
||||||
|
import Navigation from './Navigation.vue'
|
||||||
|
import { apiClient } from '../services/ApiClient'
|
||||||
|
import {
|
||||||
|
generateSQLAttribute,
|
||||||
|
generateSQLDefault,
|
||||||
|
sanitizeColumnName,
|
||||||
|
getExcelColumn
|
||||||
|
} from '../utils/sqlUtils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MetaData',
|
||||||
|
components: {
|
||||||
|
Navigation
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
jsonData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['back', 'sql-generated'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
metadata: [],
|
||||||
|
metadataColumns: [
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Excel'),
|
||||||
|
key: 'excelCol',
|
||||||
|
width: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Column Name'),
|
||||||
|
key: 'colName',
|
||||||
|
editor: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Description'),
|
||||||
|
key: 'colDesc',
|
||||||
|
editor: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Type'),
|
||||||
|
key: 'colType',
|
||||||
|
width: 120,
|
||||||
|
render: (row) => h(NSelect, {
|
||||||
|
value: row.colType,
|
||||||
|
options: [
|
||||||
|
{ label: 'String', value: 'String' },
|
||||||
|
{ label: 'Number', value: 'Number' },
|
||||||
|
{ label: 'Date', value: 'Date' }
|
||||||
|
],
|
||||||
|
onUpdateValue: (value) => {
|
||||||
|
// When switching from Number to String, add 1 for decimal point
|
||||||
|
let newLength = row.colLength
|
||||||
|
if (row.colType === 'Number' && value === 'String' && row.colScale > 0) {
|
||||||
|
newLength = row.colLength + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value !== 'Number') {
|
||||||
|
row.colScale = 0
|
||||||
|
}
|
||||||
|
if (value === 'Date') {
|
||||||
|
newLength = 10
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateRowSQL(row, value, newLength, row.colScale)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Length'),
|
||||||
|
key: 'colLength',
|
||||||
|
width: 100,
|
||||||
|
render: (row) => h(NInputNumber, {
|
||||||
|
value: row.colLength,
|
||||||
|
min: 1,
|
||||||
|
max: 999,
|
||||||
|
onUpdateValue: (value) => {
|
||||||
|
this.updateRowSQL(row, row.colType, value, row.colScale)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'Scale'),
|
||||||
|
key: 'colScale',
|
||||||
|
width: 100,
|
||||||
|
render: (row) => {
|
||||||
|
return row.colType === 'Number' ? h(NInputNumber, {
|
||||||
|
value: row.colScale,
|
||||||
|
min: 0,
|
||||||
|
max: row.colLength - 1,
|
||||||
|
onUpdateValue: (value) => {
|
||||||
|
this.updateRowSQL(row, row.colType, row.colLength, value)
|
||||||
|
}
|
||||||
|
}) : null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: () => h('span', { style: { color: 'white' }}, 'SQL Attribute'),
|
||||||
|
key: 'colSQLAttr',
|
||||||
|
width: 250
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.processMetadata()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isNumericColumn(columnIndex) {
|
||||||
|
const numTest = /^-?(\d{1,3}(,\d{3})*|\d+)(.\d+)?$/
|
||||||
|
let isNumeric = true
|
||||||
|
|
||||||
|
for (let i = 1; i < this.jsonData.length; i++) {
|
||||||
|
const cellValue = String(this.jsonData[i][columnIndex] || '')
|
||||||
|
|
||||||
|
if (!cellValue.trim()) continue
|
||||||
|
|
||||||
|
const cleanValue = cellValue.replace(/,/g, '')
|
||||||
|
|
||||||
|
if (!(numTest.test(cellValue) || !isNaN(cleanValue))) {
|
||||||
|
isNumeric = false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
const num = parseFloat(cleanValue)
|
||||||
|
if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
|
||||||
|
isNumeric = false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return isNumeric
|
||||||
|
},
|
||||||
|
isDateFormatColumn(columnIndex) {
|
||||||
|
const dateTest = new RegExp(/^\d{1,2}\/\d{1,2}\/(\d{4}|\d{2})$|^\d{4}-\d{1,2}-\d{1,2}$/)
|
||||||
|
let isDate = true
|
||||||
|
|
||||||
|
for (let i = 1; i < this.jsonData.length; i++) {
|
||||||
|
const cellValue = this.jsonData[i][columnIndex]
|
||||||
|
if (cellValue instanceof Date) continue
|
||||||
|
if (cellValue && !dateTest.test(String(cellValue))) {
|
||||||
|
isDate = false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return isDate
|
||||||
|
},
|
||||||
|
getMaxColumnLength(columnIndex) {
|
||||||
|
let length = 1
|
||||||
|
let scale = 0
|
||||||
|
|
||||||
|
for (let i = 1; i < this.jsonData.length; i++) {
|
||||||
|
const rawValue = this.jsonData[i][columnIndex]
|
||||||
|
const cellValue = String(rawValue || '').replace(/,/g, '')
|
||||||
|
|
||||||
|
if (cellValue && cellValue.length > length) {
|
||||||
|
length = cellValue.length
|
||||||
|
if (typeof rawValue === 'number' || !isNaN(cellValue)) {
|
||||||
|
if (cellValue.includes('.') && cellValue.split('.')[1].length > scale) {
|
||||||
|
scale = cellValue.split('.')[1].length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { length, scale }
|
||||||
|
},
|
||||||
|
updateRowSQL(row, newType, newLength, newScale) {
|
||||||
|
const updatedRow = { ...row }
|
||||||
|
updatedRow.colType = newType
|
||||||
|
|
||||||
|
// When switching from Number to String, just add 1 for decimal point
|
||||||
|
if (row.colType === 'Number' && newType === 'String' && row.colScale > 0) {
|
||||||
|
newLength = newLength + 1 // Add space just for decimal point
|
||||||
|
}
|
||||||
|
|
||||||
|
updatedRow.colLength = newLength
|
||||||
|
updatedRow.colScale = newScale
|
||||||
|
updatedRow.colSQLAttr = generateSQLAttribute(newType, newLength, newScale)
|
||||||
|
updatedRow.colSQLDefault = generateSQLDefault(newType)
|
||||||
|
|
||||||
|
const index = this.metadata.indexOf(row)
|
||||||
|
if (index !== -1) {
|
||||||
|
this.metadata[index] = updatedRow
|
||||||
|
this.metadata = [...this.metadata]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
processMetadata() {
|
||||||
|
if (!this.jsonData.length) return
|
||||||
|
|
||||||
|
const headers = this.jsonData[0]
|
||||||
|
this.metadata = headers.map((header, index) => {
|
||||||
|
const columnType = this.determineColumnType(index)
|
||||||
|
const { length, scale } = this.getMaxColumnLength(index)
|
||||||
|
|
||||||
|
return {
|
||||||
|
excelCol: getExcelColumn(index),
|
||||||
|
colNum: index + 1,
|
||||||
|
colName: sanitizeColumnName(header),
|
||||||
|
colDesc: header.substring(0, 50),
|
||||||
|
colType: columnType,
|
||||||
|
colLength: length,
|
||||||
|
colScale: scale,
|
||||||
|
colSQLAttr: this.generateSQLAttribute(columnType, length, scale),
|
||||||
|
colSQLDefault: this.generateSQLDefault(columnType)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
determineColumnType(columnIndex) {
|
||||||
|
if (this.isNumericColumn(columnIndex)) return 'Number'
|
||||||
|
if (this.isDateFormatColumn(columnIndex)) return 'Date'
|
||||||
|
return 'String'
|
||||||
|
},
|
||||||
|
generateSQLAttribute(type, length, scale) {
|
||||||
|
switch (type) {
|
||||||
|
case 'Number':
|
||||||
|
return `Num(${length}, ${scale})`
|
||||||
|
case 'Date':
|
||||||
|
return 'Date'
|
||||||
|
default:
|
||||||
|
return `Varchar(${length})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
generateSQLDefault(type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'Number':
|
||||||
|
return 'Not Null Default 0'
|
||||||
|
case 'Date':
|
||||||
|
return `Not Null Default '1980-01-01'`
|
||||||
|
default:
|
||||||
|
return `CCSID 37 Not Null Default ' '`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async generateCreateTableSQL() {
|
||||||
|
try {
|
||||||
|
const token = await apiClient.getToken()
|
||||||
|
const tableName = `QUERYFILES.${token}`
|
||||||
|
|
||||||
|
const columnDefinitions = this.metadata.map(col =>
|
||||||
|
`${col.colName} ${col.colSQLAttr} ${col.colSQLDefault}`
|
||||||
|
).join(',\n ')
|
||||||
|
|
||||||
|
const statements = [
|
||||||
|
`Begin`,
|
||||||
|
` Create Or Replace Table ${tableName} (`,
|
||||||
|
` ${columnDefinitions}`,
|
||||||
|
` );`,
|
||||||
|
` Label On Table ${tableName} Is 'Generated From Excel Upload';`,
|
||||||
|
` Label On Column ${tableName} (`,
|
||||||
|
` ${this.metadata.map(col => `${col.colName} Is '${col.colDesc}'`).join(',\n ')}`,
|
||||||
|
` );`,
|
||||||
|
` Label On Column ${tableName} (`,
|
||||||
|
` ${this.metadata.map(col => `${col.colName} Text Is '${col.colDesc}'`).join(',\n ')}`,
|
||||||
|
` );`,
|
||||||
|
`End`
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
tableName,
|
||||||
|
createTable: statements.join('\n')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error generating SQL:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async confirmMetadata() {
|
||||||
|
try {
|
||||||
|
const sqlStatements = await this.generateCreateTableSQL()
|
||||||
|
|
||||||
|
this.$emit('sql-generated', {
|
||||||
|
metadata: this.metadata,
|
||||||
|
sql: sqlStatements,
|
||||||
|
tableName: sqlStatements.tableName
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error confirming metadata:', error)
|
||||||
|
// You might want to show an error message to the user here
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.metadata-section {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
min-width: 120px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:hover {
|
||||||
|
background-color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn.primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn.primary:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-input-number) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-button) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-select) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-data-table .n-data-table-td) {
|
||||||
|
padding: 8px 12px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-data-table .n-data-table-th) {
|
||||||
|
padding: 8px 12px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-base-selection) {
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-input-number-input) {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-input-number), :deep(.n-select) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-select .n-base-selection__input) {
|
||||||
|
height: 28px;
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-select .n-base-selection__placeholder) {
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
82
src/components/Navigation.vue
Normal file
82
src/components/Navigation.vue
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div class="nav-controls">
|
||||||
|
<div class="nav-buttons">
|
||||||
|
<button
|
||||||
|
v-if="showBack"
|
||||||
|
@click="$emit('back')"
|
||||||
|
class="nav-btn"
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="showNext"
|
||||||
|
@click="$emit('next')"
|
||||||
|
class="nav-btn primary"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Navigation',
|
||||||
|
props: {
|
||||||
|
showBack: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showNext: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['back', 'next']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nav-controls {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
min-width: 100px;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: white;
|
||||||
|
color: var(--text-color);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:first-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:hover {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn.primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn.primary:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
border-color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
src/env.d.ts
vendored
Normal file
12
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_APP_API_URL: string
|
||||||
|
readonly VITE_APP_API_ENDPOINT_FETCH: string
|
||||||
|
readonly VITE_APP_API_ENDPOINT_FILE_UTILS: string
|
||||||
|
readonly VITE_APP_API_ENV: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv
|
||||||
|
}
|
||||||
7
src/main.js
Normal file
7
src/main.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import naive from 'naive-ui'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(naive)
|
||||||
|
app.mount('#app')
|
||||||
63
src/services/ApiClient.ts
Normal file
63
src/services/ApiClient.ts
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
class ApiClient {
|
||||||
|
private static instance: ApiClient;
|
||||||
|
private baseUrl: string;
|
||||||
|
private apiEndpoints: {
|
||||||
|
FETCH: string;
|
||||||
|
FILE_UTILS: string;
|
||||||
|
};
|
||||||
|
private isDev: boolean;
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
// Force to uppercase for comparison
|
||||||
|
this.isDev = import.meta.env.VITE_APP_API_ENV?.toUpperCase() === 'DEV';
|
||||||
|
console.log('API Client Mode:', this.isDev ? 'Development' : 'Production');
|
||||||
|
this.baseUrl = import.meta.env.VITE_APP_API_URL;
|
||||||
|
this.apiEndpoints = {
|
||||||
|
FETCH: import.meta.env.VITE_APP_API_ENDPOINT_FETCH,
|
||||||
|
FILE_UTILS: import.meta.env.VITE_APP_API_ENDPOINT_FILE_UTILS
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public static getInstance(): ApiClient {
|
||||||
|
if (!ApiClient.instance) {
|
||||||
|
ApiClient.instance = new ApiClient();
|
||||||
|
}
|
||||||
|
return ApiClient.instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async executeSQL<T>(sql: string): Promise<T> {
|
||||||
|
if (this.isDev) {
|
||||||
|
return {} as T; // Return empty success in dev mode
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`${this.baseUrl}${this.apiEndpoints.FETCH}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ sql })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
if (data.error) {
|
||||||
|
throw new Error(data.error);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async getToken(): Promise<string> {
|
||||||
|
if (this.isDev) {
|
||||||
|
return `DEV_TABLE_${Date.now().toString().slice(-6)}`;
|
||||||
|
}
|
||||||
|
const result = await this.executeSQL<any>(`Values getMCLTken('RMZ')`);
|
||||||
|
return result[0]['00001'];
|
||||||
|
}
|
||||||
|
|
||||||
|
public async createTable(sql: string): Promise<void> {
|
||||||
|
if (!this.isDev) {
|
||||||
|
await this.executeSQL(sql);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiClient = ApiClient.getInstance();
|
||||||
37
src/utils/sqlUtils.ts
Normal file
37
src/utils/sqlUtils.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
export const generateSQLAttribute = (type: string, length: number, scale: number): string => {
|
||||||
|
switch (type) {
|
||||||
|
case 'Number':
|
||||||
|
return `Num(${length}, ${scale})`;
|
||||||
|
case 'Date':
|
||||||
|
return 'Date';
|
||||||
|
default:
|
||||||
|
// For string type, if converting from number, account for decimal point and scale
|
||||||
|
const adjustedLength = scale > 0 ? length + scale + 1 : length;
|
||||||
|
return `Varchar(${adjustedLength})`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateSQLDefault = (type: string): string => {
|
||||||
|
switch (type) {
|
||||||
|
case 'Number':
|
||||||
|
return 'Not Null Default 0';
|
||||||
|
case 'Date':
|
||||||
|
return `Not Null Default '1980-01-01'`;
|
||||||
|
default:
|
||||||
|
return `CCSID 37 Not Null Default ' '`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const sanitizeColumnName = (name: string): string => {
|
||||||
|
return name.replace(/[^a-zA-Z0-9_]/g, '_').toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getExcelColumn = (index: number): string => {
|
||||||
|
let column = '';
|
||||||
|
let num = index;
|
||||||
|
while (num >= 0) {
|
||||||
|
column = String.fromCharCode(65 + (num % 26)) + column;
|
||||||
|
num = Math.floor(num / 26) - 1;
|
||||||
|
}
|
||||||
|
return column;
|
||||||
|
};
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user