From 9e7067f3c86db9ed689583e578e15d9043f680c4 Mon Sep 17 00:00:00 2001
From: qiezi <15576055375@163.com>
Date: Mon, 24 Mar 2025 15:19:14 +0800
Subject: [PATCH] 20250324

---
 src/api/pallet/index.js            |  11 +
 src/assets/scss/global.scss        |   8 +
 src/views/modules/pallet/index.vue | 403 +++++++++++++++++++++++++++++
 3 files changed, 422 insertions(+)
 create mode 100644 src/api/pallet/index.js
 create mode 100644 src/views/modules/pallet/index.vue

diff --git a/src/api/pallet/index.js b/src/api/pallet/index.js
new file mode 100644
index 0000000..63f077b
--- /dev/null
+++ b/src/api/pallet/index.js
@@ -0,0 +1,11 @@
+import {createAPI} from '../../utils/httpRequest'
+
+export const exportPallet = (data) => createAPI(`/catch/pallet/export`,'post',data,'download')
+
+export const savePallet = (data) => createAPI(`/catch/pallet/save`,'post',data)
+export const saveBatchPallet = (data) => createAPI(`/catch/pallet/save/batch`,'post',data)
+export const removePallet = (data) => createAPI(`/catch/pallet/remove`,'post',data)
+export const removeAllPallet = (data) => createAPI(`/catch/pallet/remove/all`,'post',data)
+export const removePalletById = (data) => createAPI(`/catch/pallet/remove/${data.id}`,'post',data)
+export const queryPallet = (data) => createAPI(`/catch/pallet/list`,'post',data)
+export const queryPalletPage = (data) => createAPI(`/catch/pallet/${data.no}/${data.size}`,'post',data)
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 9f79ec4..f8d7b17 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -459,3 +459,11 @@ a:hover{
   height: auto;
   line-height: 1.5;
 }
+
+//盒子高度
+.box-container{
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  min-height: 200px;
+}
diff --git a/src/views/modules/pallet/index.vue b/src/views/modules/pallet/index.vue
new file mode 100644
index 0000000..761e0be
--- /dev/null
+++ b/src/views/modules/pallet/index.vue
@@ -0,0 +1,403 @@
+<script>
+import {
+  exportPallet,
+  queryPalletPage, removeAllPallet,
+  removePallet,
+  removePalletById,
+  saveBatchPallet,
+  savePallet
+} from '../../../api/pallet'
+
+export default {
+  name: 'pallet',
+  data(){
+    return{
+      span:3,
+      queryParams:{
+        palletNo:'',
+        type:'add',
+        no:1,
+        size:50,
+      },
+      dataList:[],
+      queryLoading:false,
+      total:0,
+      palletList:[],
+      batchVisible:false,
+      batchParams:{
+        palletNo:'',
+      },
+      saveLoading:false,
+      columnList:[
+        {
+          userId: this.$store.state.user.name,
+          functionId: 40000,
+          serialNumber: '40000TablePalletNo',
+          tableId: "40000Table",
+          tableName: "Pallet Table",
+          columnProp: "palletNo",
+          headerAlign: "center",
+          align: "center",
+          columnLabel: "Pallet Label",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 10,
+          status: true,
+          fixed: '',
+          columnWidth: 80
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 40000,
+          serialNumber: '40000TableSN',
+          tableId: "40000Table",
+          tableName: "Pallet Table",
+          columnProp: "sn",
+          headerAlign: "center",
+          align: "center",
+          columnLabel: "SN",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 10,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 40000,
+          serialNumber: '40000TableSKU',
+          tableId: "40000Table",
+          tableName: "Pallet Table",
+          columnProp: "sku",
+          headerAlign: "center",
+          align: "left",
+          columnLabel: "SKU",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 10,
+          status: true,
+          fixed: '',
+          columnWidth: 80
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 40000,
+          serialNumber: '40000TablePartDesc',
+          tableId: "40000Table",
+          tableName: "Pallet Table",
+          columnProp: "partDesc",
+          headerAlign: "center",
+          align: "left",
+          columnLabel: "Part Description",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          sortLv: 10,
+          status: true,
+          fixed: '',
+          columnWidth: 120
+        },
+      ],
+    }
+  },
+  methods:{
+    handleScanPallet(){
+      if (this.queryParams.type === 'add'){
+        this.handleSave();
+      }else {
+        this.handleRemove();
+      }
+    },
+    handleSave(){
+      let params = {
+        site:this.$store.state.user.site,
+        palletNo:this.queryParams.palletNo,
+        createBy:this.$store.state.user.name,
+      }
+      savePallet(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.$message.success('success')
+          this.handleQuery();
+        }else {
+          this.$message.warning(data.msg);
+        }
+        this.queryParams.palletNo = '';
+      }).catch((error)=>{
+        this.$message.error(error)
+        this.queryParams.palletNo = '';
+      })
+    },
+    handleRemove(){
+      let params = {
+        site:this.$store.state.user.site,
+        palletNo:this.queryParams.palletNo,
+        createBy:this.$store.state.user.name,
+      }
+      removePallet(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.$message.success('success')
+          this.handleQuery();
+        }else {
+          this.$message.warning(data.msg);
+        }
+        this.queryParams.palletNo = '';
+      }).catch((error)=>{
+        this.$message.error(error)
+        this.queryParams.palletNo = '';
+      })
+    },
+    handleRemoveById(row){
+      this.$confirm(`Are you sure you want to remove Pallet Label?`, 'Tips', {
+        confirmButtonText: 'Yes',
+        cancelButtonText: 'No',
+        type: 'warning'
+      }).then(()=>{
+        let params = {
+          id: row.id,
+        }
+        this.queryLoading = true;
+        removePalletById(params).then(({data})=>{
+          if (data && data.code === 0){
+            this.$message.success('success')
+            this.handleQuery();
+          }else {
+            this.$message.warning(data.msg);
+            this.queryLoading = false;
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+          this.queryLoading = false;
+        })
+      })
+    },
+    handleRemoveAll(){
+      this.$confirm(`Are you sure you want to remove Pallet Label?`, 'Tips', {
+        confirmButtonText: 'Yes',
+        cancelButtonText: 'No',
+        type: 'warning'
+      }).then(()=>{
+        let params = {
+          site:this.$store.state.user.site,
+          createBy:this.$store.state.user.name,
+        }
+        removeAllPallet(params).then(({data})=>{
+          if (data && data.code === 0){
+            this.$message.success('success')
+            this.handleQuery();
+          }else {
+            this.$message.warning(data.msg);
+          }
+        }).catch((error)=>{
+          this.$message.error(error)
+        })
+      })
+    },
+    handleExport(){
+      if (this.dataList.length === 0){
+        this.$message.warning('Pallet Label data does not exist')
+        return
+      }
+      exportPallet({}).then(response => {
+        const blob = new Blob([response.data], { type: response.headers['content-type'] });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // 解析后端返回的文件名
+        //const contentDisposition = response.headers['content-disposition'];
+        //const fileName = contentDisposition ? decodeURIComponent(contentDisposition.split('filename*=utf-8')[1]) : 'pallet_data.xlsx';
+        a.download = "Pallet Label.xlsx";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      })
+    },
+    handleQuery(){
+      let params = {
+        site:this.$store.state.user.site,
+        createBy:this.$store.state.user.name,
+        no:this.queryParams.no,
+        size:this.queryParams.size,
+      }
+      this.queryLoading = true;
+      queryPalletPage(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.dataList = data.rows
+          this.total = data.total
+        }else {
+          this.$message.warning(data.msg);
+        }
+        this.queryLoading = false;
+      }).catch((error)=>{
+        this.$message.error(error);
+        this.queryLoading = false;
+      })
+    },
+    handleCurrentChange(val){
+      this.queryParams.no = val;
+      this.handleQuery();
+    },
+    handleSizeChange(val){
+      this.queryParams.size = val;
+      this.handleQuery();
+    },
+    handleBatchProcessing(){
+      this.batchVisible = true
+      this.$nextTick(()=>{
+        this.$refs.batchPalletNo.focus();
+      })
+    },
+    handleScanBatchPallet(){
+      if (!this.batchParams.palletNo || this.batchParams.palletNo.trim().length === 0){
+        this.$message.warning('please input Pallet Label')
+        return
+      }
+      if (this.palletList.some(item=>item.palletNo === this.batchParams.palletNo)){
+        this.batchParams.palletNo = ''
+        this.$message.warning('The Pallet Label already exists')
+        return
+      }
+      let params = {
+        ...this.batchParams,
+        site:this.$store.state.user.site,
+        createBy:this.$store.state.user.name,
+      }
+      this.palletList.unshift(params)
+      this.batchParams.palletNo = ''
+      this.$refs.batchPalletNo.focus();
+      this.$message.success('success')
+    },
+    removePalletList(i){
+      this.palletList.splice(i,1);
+      this.$message.success('success')
+    },
+    saveBatchPallet(){
+      if (this.palletList.length === 0){
+        this.$message.warning('please scan Pallet Label')
+        return
+      }
+      this.saveLoading = true;
+      saveBatchPallet(this.palletList).then(({data})=>{
+        if (data && data.code === 0){
+          this.$message.success('success')
+          this.batchVisible = false;
+          this.handleQuery();
+        }else {
+          this.$message.warning(data.msg);
+        }
+        this.saveLoading = false
+      }).catch((error)=>{
+        this.$message.error(error)
+        this.saveLoading = false
+      })
+    }
+  },
+  watch:{
+    'queryParams.type'(newVal,oldVal){
+      this.$refs.scanPallet.focus()
+    },
+    batchVisible(newVal,oldVal){
+      if (newVal === false){
+        this.palletList = [];
+        this.$refs.scanPallet.focus()
+      }
+    },
+    saveLoading(newVal,oldVal){
+      if (newVal === true){
+        setTimeout(()=>{
+          this.saveLoading = false
+        },3000)
+      }
+    }
+  },
+  mounted () {
+    this.$refs.scanPallet.focus()
+    this.handleQuery();
+  },
+}
+</script>
+
+<template>
+  <div class="box-container">
+    <el-form label-position="top" :model="queryParams" @submit.native.prevent style="max-width: 1200px">
+      <el-row :gutter="10">
+        <el-col :span="span+1">
+          <el-input ref="scanPallet" v-model="queryParams.palletNo" @keydown.enter.native="handleScanPallet" placeholder="Please scan Pallet Label"></el-input>
+        </el-col>
+        <el-col :span="span*3">
+          <el-button type="primary" @click="handleBatchProcessing">Batch Processing</el-button>
+          <el-button type="primary" @click="handleRemoveAll">Clear All Data</el-button>
+          <el-button type="primary" @click="handleExport">Export</el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" style="margin-top: 5px">
+        <el-col :span="span-2">
+          <el-checkbox v-model="queryParams.type" label="Add" true-label="add" false-label="remove"></el-checkbox>
+        </el-col>
+        <el-col :span="span-2">
+          <el-checkbox v-model="queryParams.type" label="Remove" true-label="remove" false-label="add"></el-checkbox>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div style="height: calc(100% - 100px);margin-top: 5px">
+      <el-table :data="dataList" border height="100%" v-loading="queryLoading">
+        <el-table-column label="Actions" align="center" width="100">
+          <template slot-scope="scope">
+            <a style="cursor:pointer;" @click="handleRemoveById(scope.row)">Delete</a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(item,index) in columnList" :key="index"
+          :sortable="item.columnSortable"
+          :prop="item.columnProp"
+          :header-align="item.headerAlign"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+          :align="item.align"
+          :fixed="item.fixed==''?false:item.fixed"
+          :min-width="item.columnWidth"
+          :label="item.columnLabel">
+          <template slot-scope="scope">
+            <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
+            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                               style="width: 100px; height: 80px"/></span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="queryParams.no"
+      :page-sizes="[50,100, 200, 300, 400]"
+      :page-size="queryParams.size"
+      layout="total,sizes, prev, pager, next"
+      :total="total">
+    </el-pagination>
+
+    <el-dialog :visible.sync="batchVisible" v-drag title="Batch Processing - Add" width="500px" :close-on-click-modal="false">
+      <el-input v-model="batchParams.palletNo" ref="batchPalletNo"  placeholder="Please scan Pallet Label" @keydown.enter.native="handleScanBatchPallet"></el-input>
+
+      <el-table :data="palletList" border height="220px">
+        <el-table-column align="center" width="100" label="Actions">
+          <template slot-scope="scope">
+            <a @click="removePalletList(scope.$index)">Delete</a>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="Pallet Label" prop="palletNo"></el-table-column>
+      </el-table>
+      <div slot="footer">
+        <el-button type="primary" :loading="saveLoading" @click="saveBatchPallet">Save</el-button>
+        <el-button @click="batchVisible = false">Cancel</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+
+</style>