Auto Commit

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "crypto-js": "^4.0.0",
+    "element-plus": "^2.3.14",
     "file-saver": "^2.0.5",
     "guess": "^1.0.2",
     "vue": "^3.2.37",
@@ -15,6 +16,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^3.0.1"
   }
 }

src/components/ExcelReader.vue

 <template>
-    <div class="excel-reader">
-      <input type="file" @change="handleFileSelect" />
-      <button  @click="exportToExcel" >导出</button>
-      ==================================================
-
-      <div>单行转换<input type="text" v-model="sqltext" style="margin: 0px 10px;"/> 
-        <button  @click="exportToExcelOneline" > 导出单行</button> <br/>
-        编译后数据  <input type="text" v-model="sqltext2">
-      </div>
-      <table>
-        <thead>
-          <tr>
-            <th v-for="(column, index) in headers" :key="index">{{ column }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) in rows" :key="index">
-            <td v-for="(item, i) in row" :key="i">{{ item }}</td>
-          </tr>
-        </tbody>
-      </table>
+  <div class="excel-reader">
+    <div class="excel-top">
+      <h4>方式一</h4>
+      <input type="file" @change="handleFileSelect" class="file-input" />
+      <el-button @click="exportToExcel" class="export-button">导出</el-button>
     </div>
-  </template>
+   
   
-  <script>
+
+    <div class="crypto-section excel-top">
+      <h4>方式二</h4>
+      <el-input type="text" v-model="sqltext" class="crypto-input" clearable/>
+      <el-button @click="exportToExcelOneline" class="crypto-button">导出单行</el-button> <br />
+      编译后数据 <el-input type="text" v-model="sqltext2" class="crypto-output" clearable/>
+    </div>
+    <br>
+    <h3>数据展示</h3>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th v-for="(column, index) in headers" :key="index">{{ column }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in rows" :key="index">
+          <td v-for="(item, i) in row" :key="i">{{ item }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
   import { read, utils ,write} from 'xlsx';
   import { saveAs } from 'file-saver';
   import CryptoJS from 'crypto-js';
@@ -39,7 +47,16 @@
     },
     methods: {
       exportToExcelOneline(){
-        if(!this.sqltext)return;
+        if(!this.sqltext){
+          ElMessage({
+            message: '单行编译字符不能为空',
+            type: 'warning',
+          })
+          return;
+        }
+
+
+
         this.sqltext2 = this.addCryto(this.sqltext)
       },
       addCryto(str){
@@ -78,6 +95,15 @@
         reader.readAsArrayBuffer(file);
       },
       exportToExcel() {
+        debugger
+        if(!this.rows.value|| !this.headers.value){
+          ElMessage({
+            message: 'excel数据不规范',
+            type: 'warning',
+          })
+          return;
+        }
+
         const worksheet = utils.json_to_sheet(this.rows, { header: this.headers });
         const workbook = utils.book_new();
         utils.book_append_sheet(workbook, worksheet);
@@ -89,22 +115,60 @@
   };
   </script>
   
-  <style scoped>
-  table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-  
-  th,
-  td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+
+
+<style scoped>
+.excel-top{
+  margin: 20px;
+  background-color: rgb(232, 224, 224);
+}
+.file-input {
+  margin-right: 10px;
+}
+
+.export-button {
+  background-color: #4caf50;
+  color: white;
+  margin-top: 10px;
+}
+
+.crypto-section {
+  margin-top: 20px;
+}
+
+.crypto-input {
+  margin-right: 10px;
+}
+
+.crypto-button {
+  background-color: #4caf50;
+  color: white;
+}
+
+.data-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #4caf50;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  /* 在小屏幕上调整样式 */
+  .crypto-section {
+    margin-top: 10px;
   }
-  
-  th {
-    background-color: #4caf50;
-    color: white;
+  .crypto-input {
+    margin-right: 5px;
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
-
-
-// let sql =addCryto(`SELECT id FROM df_03_test_0613_01.a1111 WHERE id = '1'`)
-// console.log(sql,'wwww')
-
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 import './assets/main.css'
+const app = createApp(App)
 
-
-// const encryptedMessage = CryptoJS.AES.encrypt('secret message', 'password');
-// console.log(encryptedMessage.toString());
-
-
-createApp(App).mount('#app')
+app.use(ElementPlus)
+app.mount('#app')
\ No newline at end of file

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue(),
+  
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),]
 })