kahaokami/src/renderer/src/App.vue

<template>
  <div class="appClass" v-if="isVip">
    <div class="mainClass">
      <el-row>
        <el-col :span="8">
          <el-upload :show-file-list="false" :before-upload="beforeUpload" :http-request="fachuSubmit"
            accept=".xls,.xlsx,.csv">
            <el-button type="success">
              <el-icon>
                <Upload />
              </el-icon>
              <span>发出导入</span>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :span="8">
          <el-upload :show-file-list="false" :before-upload="beforeUpload" :http-request="huishouSubmit"
            accept=".xls,.xlsx,.csv">
            <el-button type="success">
              <el-icon>
                <Upload />
              </el-icon>
              <span>回收导入</span>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :span="4">
          <el-button type="danger" @click="delData">
            <el-icon>
              <el-icon>
                <Delete />
              </el-icon>
            </el-icon>
            <span>删除</span>
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-tag type="success">总数据：{{ tableData.length }}条</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :data="tableData" class="tableClass" ref="kahaoTable">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="85" label="序号" />
            <el-table-column v-for="(item, index) in tableHeader" :label="item.lable" :key="index">
              <template #default="scope">{{ scope.row[item.prop] }}</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
  <div v-else class="noVip">
    <h3>
      <el-tag type="danger" class="noVipTag">体验已过期，请联系管理员。</el-tag>
    </h3>
  </div>
</template>

<script>
import _ from 'lodash'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx';
export default {
  name: 'app',
  data() {
    return {
      _: _,
      dayjs: dayjs,
      isVip: false,
      tableHeader: [
        {
          lable: '卡号',
          prop: 'kahao',
          type: "text",
        },
        {
          lable: '卡密',
          prop: 'kami',
          type: "text",
        },
        {
          lable: '创建时间',
          prop: 'createTime',
          type: "time",
        }
      ],
      fachu: [],
      huishou: [],
      tableData: [],
      selectionData: [],
    }
  },
  methods: {
    /**
       * 上传表格检查
       */
    beforeUpload(rawFile) {
      let imgList = ['text/csv', 'application/vnd.ms-excel', "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
      if (imgList.indexOf(rawFile.type) === -1) {
        this.$msgbox.alert('请上传excel,csv格式的表格文件!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 50) {
        this.$msgbox.alert('表格文件的大小为小于50MB,数据过多时会处理过慢')
        return true
      }
      return true
    },
    //发出表格数据
    async fachuSubmit(opts) {
      let that = this
      let file = opts.file
      this.fileDealData = []
      let fileReader = new FileReader()
      fileReader.onload = async function () {
        let data = this.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let sheetName = workbook.SheetNames[0]
        let sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName])
        let list = []
        for (let i = 0; i < sheetData.length; i++) {
          let element = sheetData[i];
          list.push({
            kahao: element.卡号,
            kami: element.卡密,
            createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
          })
        }
        // 自定义比较函数
        let compareObjects = (obj1, obj2) => {
          return obj1.kahao === obj2.kahao && obj1.kami === obj2.kami;
        };
        // 使用自定义比较函数去重
        that.tableData = _.unionWith(that.tableData, list, compareObjects);
      }
      fileReader.onerror = function (error) {
        console.error('Error reading file:', error)
      }
      fileReader.readAsArrayBuffer(file)
    },
    //回收表格数据
    async huishouSubmit(opts) {
      let that = this
      let file = opts.file
      this.fileDealData = []
      let fileReader = new FileReader()
      fileReader.onload = async function () {
        let data = this.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let sheetName = workbook.SheetNames[0]
        let sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName])
        let list = []
        for (let i = 0; i < sheetData.length; i++) {
          let element = sheetData[i];
          list.push({
            kahao: element.卡号,
            kami: element.卡密,
            createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
          })
        }
        // 自定义比较函数
        let compareObjects = (obj1, obj2) => {
          return obj1.kahao === obj2.kahao && obj1.kami === obj2.kami;
        };
        // 使用自定义比较函数计算差值
        that.tableData = _.differenceWith(that.tableData, list, compareObjects);
      }
      fileReader.onerror = function (error) {
        console.error('Error reading file:', error)
      }
      fileReader.readAsArrayBuffer(file)
    },
    //初始化表格数据
    dealTableData() {
      let tableDataLocalTemp = localStorage.getItem('tableDataLocal')
      if (tableDataLocalTemp) {
        try {
          this.tableData = JSON.parse(tableDataLocalTemp)
        } catch (e) {
          this.tableData = []
        }
      }
    },
    // 删除表格选中的数据
    delData() {
      if (this.$refs.kahaoTable) {
        let list = this.$refs.kahaoTable.getSelectionRows()
        ElMessageBox.confirm(`是否删除卡号为（${_.join(_.map(list, 'kahao'), '、')}）的数据`, '警告', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error',
          draggable: true,
        }).then(() => {
          // 自定义比较函数
          let compareObjects = (obj1, obj2) => {
            return obj1.kahao === obj2.kahao && obj1.kami === obj2.kami;
          };
          // 使用自定义比较函数计算差值
          this.tableData = _.differenceWith(this.tableData, list, compareObjects);
          ElMessage({
            type: 'success',
            message: `已删除卡号为（${_.join(_.map(list, 'kahao'), '、')}）的数据`,
          })
        })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除操作',
            })
          })
      }
    },
  },
  async mounted() {
    let fiveDay = dayjs('2024-08-05T00:00:00').valueOf()
    if (!this.isVip) {
      if (dayjs().valueOf() > fiveDay) {
        this.isVip = false
        return
      } else {
        this.isVip = true
      }
    }
    this.dealTableData()
  },
  watch: {
    "tableData": {
      handler(nvl, ovl) {
        localStorage.setItem('tableDataLocal', JSON.stringify(nvl))
      },
      deep: true
    }
  },
  computed: {}
}
</script>
<style scoped>
.appClass {
  width: 100vw;
  height: 100vh;
  color: #000;
}

.mainClass {
  padding: 8px 20px;
}

.tableClass {
  width: 100%;
  height: calc(100vh - 56px);
}

.noVip {
  text-align: center;
  margin-top: 40vh;
}

.noVipTag {
  font-size: 3em;
  line-height: 1.6em;
  height: 1.6em;
}
</style>