右键菜单

src/views/dataFilling/fillingAdd.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="app-container p-2">
-    <el-row :gutter="20" class="mb8" style="margin-top:5px">
+    <el-row :gutter="20" class="mb8" style="margin-top: 5px">
       <el-col :span="1.5">
-        <el-upload
-          class="upload-demo"
-          :http-request="handleFileUpload"
-          :before-upload="beforeUpload"
-          :file-list="fileList"
-          accept=".xlsx, .xls"
-        >
-          <el-button slot="trigger" size="big" type="primary">选择Excel文件</el-button>
+        <el-upload class="upload-demo" :http-request="handleFileUpload" :before-upload="beforeUpload" :file-list="fileList" accept=".xlsx, .xls">
+          <template #trigger>
+            <el-button size="big" type="primary">选择Excel文件</el-button>
+          </template>
         </el-upload>
       </el-col>
       <el-col :span="1.5">
@@ -54,7 +50,7 @@
           <!-- 截止时间 -->
           <el-col :span="8">
             <el-form-item label="截&nbsp止&nbsp时&nbsp间&nbsp：" prop="release_time">
-              <el-date-picker v-model="selectedTime" type="date" placeholder="选择截止时间" @change="handleTimeChange" style="width: 150px" />
+              <el-date-picker v-model="selectedTime" type="date" placeholder="选择截止时间" style="width: 150px" @change="handleTimeChange" />
               <span class="label" style="margin-left: 20px">前报送该表</span>
             </el-form-item>
           </el-col>
@@ -64,15 +60,14 @@
               <el-input v-model="table_name" placeholder="请输入表名" style="width: 300px"></el-input>
             </el-form-item>
           </el-col>
-<!--          <el-col :span="1.5">-->
-<!--            <el-button type="primary" @click="handleReport()"> 智能识别 </el-button>-->
-<!--          </el-col>-->
-
+          <!--          <el-col :span="1.5">-->
+          <!--            <el-button type="primary" @click="handleReport()"> 智能识别 </el-button>-->
+          <!--          </el-col>-->
         </el-row>
       </el-col>
     </el-row>
     <div style="height: 350px">
-      <hot-table v-if="showTable" :data="hotData" ref="wrapper" :settings="hotSettings2" />
+      <hot-table v-if="showTable" ref="wrapper" :data="hotData" :settings="hotSettings" />
     </div>
   </div>
 </template>
@@ -82,14 +77,14 @@ import { onMounted, ref } from 'vue';
 import { ElButton, ElCol, ElDatePicker, ElFormItem, ElInput, ElOption, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus';
 import * as XLSX from 'xlsx';
 import { fillingAdd } from '@/api/dataFilling/fillingManage';
-import { HotTable } from '@handsontable/vue3'
-import Handsontable from 'handsontable'
+import { HotTable } from '@handsontable/vue3';
+import Handsontable from 'handsontable';
 import 'handsontable/languages';
-import 'handsontable/dist/handsontable.full.css'
-import { registerAllModules } from 'handsontable/registry'
-registerAllModules()
+import 'handsontable/dist/handsontable.full.css';
+import { registerAllModules } from 'handsontable/registry';
+registerAllModules();
 
-const fileList = ref([])
+const fileList = ref([]);
 const { proxy } = getCurrentInstance();
 const emits = defineEmits(['close']);
 const detailData = ref({
@@ -122,7 +117,7 @@ function saveEdit(rowIndex, header, value) {
 const showTable = ref(false);
 const handleNewTemplate = () => {
   showTable.value = true;
-  created()
+  created();
 };
 
 const handleImportExcel = () => {
@@ -194,23 +189,12 @@ const handleReturn = () => {
   emits('close');
 };
 
-const hotSettings = reactive({
-  autoColumnSize:true,
-  language: 'zh-CN', // 语言设置
-  // colWidths:129, // 默认单元格宽度
-  // rowHeights:28, // 默认单元格高度
-  wordWrap:true, // 单元格文字是否换行展示
-  width:'100%', // auto  or  100%
-  height:'100%', // auto  or  100%
-  className:'htMiddle, htCenter',
-  licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
-});
 const created = () => {
-  let data = []
-  for(let i = 0; i < 10; i++) {
-    let arr = []
-    for(let x = 0; x < 10; x++) {
-      arr.push('')
+  let data = [];
+  for (let i = 0; i < 10; i++) {
+    let arr = [];
+    for (let x = 0; x < 10; x++) {
+      arr.push('');
     }
     data.push(arr);
   }
@@ -218,52 +202,76 @@ const created = () => {
   nextTick(() => {
     hotData.value = data;
     showTable.value = true;
-  })
-}
-
-//
-// const hotContainer = ref(null);
-// let hotInstance = null;
-// const handleFileUpload = (event) => {
-//   const file = event.target.files[0];
-//   const reader = new FileReader();
-//
-//   reader.onload = (e) => {
-//     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 });
-//
-//     // 如果Handsontable实例已经存在，销毁它以避免内存泄漏
-//     if (hotInstance) {
-//       hotInstance.destroy();
-//     }
-//
-//     // 初始化Handsontable实例
-//     hotInstance = new Handsontable(hotContainer.value, {
-//       data: jsonData,
-//       rowHeaders: true,
-//       colHeaders: true,
-//       // 其他Handsontable配置...
-//     });
-//   };
-//
-//   reader.readAsArrayBuffer(file);
-// };
-
-
-const hotSettings2 = reactive({
+  });
+};
+const hotSettings = reactive({
   language: 'zh-CN',
   colHeaders: true,
   rowHeaders: true,
-  autoColumnSize:true,
-  width:'100%', // auto  or  100%
-  height:'100%', // auto  or  100%
+  autoColumnSize: true,
+  width: '100%', // auto  or  100%
+  height: '100%', // auto  or  100%
   licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
-  colWidths:129, // 默认单元格宽度
-  rowHeights:28, // 默认单元格高度
-  wordWrap:true, // 单元格文字是否换行展示
+  colWidths: 129, // 默认单元格宽度
+  rowHeights: 28, // 默认单元格高度
+  wordWrap: true, // 单元格文字是否换行展示
+  contextMenu: {
+    // 自定义右键菜单
+    items: {
+      'row_above': {
+        name: '向上插一行'
+      },
+      'row_below': {
+        name: '向下插一行'
+      },
+      'col_left': {
+        name: '向左插一列'
+      },
+      'col_right': {
+        name: '向右插一列'
+      },
+      'hsep1': '---------', // 分隔线
+      'remove_row': {
+        name: '删除当前行'
+      },
+      'remove_col': {
+        name: '删除当前列'
+      },
+      'clear_column': {
+        name: '清空当前列'
+      },
+      'hsep2': '---------', // 必须和上次的变量名不一样
+      'undo': {
+        name: '撤销'
+      },
+      'cut': {
+        name: '剪切'
+      },
+      'copy': {
+        name: '复制'
+      },
+      'alignment': {
+        name: '对齐'
+      },
+      'hsep3': '---------',
+      'commentsAddEdit': {
+        // 必须开启 comments: true
+        name: '添加备注'
+      },
+      'commentsRemove': {
+        // 必须开启 comments: true
+        name: '删除备注'
+      },
+      'freeze_column': {
+        // 必须开启 manualColumnFreeze: true
+        name: '固定列'
+      },
+      'unfreeze_column': {
+        // 必须开启 manualColumnFreeze: true
+        name: '取消固定列'
+      }
+    }
+  }
 });
 const beforeUpload = (file) => {
   const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
@@ -284,7 +292,7 @@ const handleFileUpload = ({ file }) => {
       const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
       hotData.value = jsonData.slice(1); // 假设第一行是标题行，我们跳过它
       showTable.value = true;
-    })
+    });
   };
   reader.readAsArrayBuffer(file);
   fileList.value = [];