mes-sdai-admin-backend-ui/src/view/inventory/pickinglist.vue

<template>
  <div>
	  <layout>
	    <layout-header>
<!-- 	      <div class="">
	      <el-input v-model="add_searchInfo" placeholder="请输入入库或出库单号模糊查询"  @input="handleInput"
	      		@keyup.enter="add_onSubmit" id="searchInput"  style="width: 340px;height: 50px;margin-left: 10px;">
	      	  </el-input>
	      	  <el-button type="primary" @click="Reporting_onSubmit" icon="view" style="height: 50px;font-size: 20px;">查看记录</el-button> 
	      	   <el-button type="primary" icon="reading" @click="details_onSubmit" style="height: 50px;font-size: 20px;">出库退还记录</el-button>
	      </div> -->
	    </layout-header>
	    <layout>
		  
		  <!-- 左侧树形结构 -->
		  <layout-sider :resize-directions="['right']" :width="190" style="margin: 0px;">
		    <div class="JKWTree-tree" style="height: 200px">
		      <h3>领用单记录</h3>
		      <el-tree :data="treeData" class="treecolor" @node-click="handleNodeClick"></el-tree>
		    </div>
		  </layout-sider>
		  
        <layout-content >
			<el-main>
			  <div class="gva-table-box">
			   <el-table ref="multipleTable" style="width: 100%;height: 36vh" tooltip-effect="dark"
						  :row-style="{ height: '20px' }"
						  :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						  :header-cell-style="{ padding: '0px' }"
						  :data="restableData"  border row-key="ID" size="small"  
						  :cell-class-name="tableDataCellClass"
						  highlight-current-row="true"  @row-dblclick="updateCompanyFunc"
						  @row-click="tableRowClick" :show-overflow-tooltip="true"
						  @selection-change="handleSelectionChange">
						<!-- <el-table-column type="selection" width="80" /> -->
				  <el-table-column  align="left" label="订单编号" prop="订单编号" width="160" />
				  <el-table-column  align="left" label="出库单" 	 prop="出库单" 	width="160"/>
				  <el-table-column  align="left" label="款号" prop="款号" width="100"/>
				  <el-table-column  align="left" label="物料名称" prop="物料名称" width="160"/>
				  <el-table-column  align="left" label="领料人员" prop="领料人员" width="160"/>
				  <el-table-column  align="left" label="操作机台" 	 prop="操作机台" 	width="160"/>
				  <el-table-column  align="left" label="日期" prop="日期:" width="160"/>
				</el-table>
			  </div>
		  
		  <el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="出库单详情"  @click="showTable('出库单详情')"  name="first">
			  <el-table ref="multipleTable"
						:row-style="{ height: '20px' }"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:header-cell-style="{ padding: '0px' }"
						:show-overflow-tooltip="true"
						highlight-current-row="true"
						@row-click="listtableclick"
						@row-dblclick="ysupdateCompanyFunc"
						@selection-change="selectionChange($event, '出库单详情')"
						style="width: 100%;height: 40vh" border show-summary
						:summary-method="getSummaries" tooltip-effect="dark" :data="listtableData" row-key="ID" >
					<!-- <el-table-column type="selection" width="30" /> -->
					<el-table-column  align="left" label="订单编号" prop="订单编号" width="160" />
					<el-table-column  align="left" label="款号" prop="款号" width="100"/>
					<el-table-column  align="left" label="出库单" 	 prop="出库单" 	width="160"/>
					<el-table-column  align="left" label="物料名称" prop="物料名称" width="160"/>
					<el-table-column  align="left" label="数量" prop="数量" width="160"/>
					<el-table-column  align="left" label="领料人员" prop="领料人员" width="160"/>
					<el-table-column  align="left" label="操作机台" 	 prop="操作机台" 	width="160"/>
					<el-table-column  align="left" label="日期" prop="日期:" width="160"/>
			  </el-table>
			</el-tab-pane>
		  </el-tabs>
		  
		  </el-main>
      </layout-content>
      </layout>
    </layout>
  </div>
  
  
</template>
<script>
//点击按钮显示下方表格
export default {
  data() {
    return {
      currentTable: '', // 当前展示的表格
      activeName: 'first',
      _ddhval:'',
	  add_gddialogFormVisible: true,
    };
  },
  methods: {
    
  }
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {ref, reactive} from 'vue'
import {getSpotList,getSpotTab,orderSearch,outReport,orderBomList,FabricDetail,getReceiptTab,
ReceiptList,
ReceiptDetail
} from '@/api/mes/job'
import {ElMessage} from "element-plus";
// import { get } from 'scriptjs';
defineOptions({name: 'Company'})
import { useUserStore } from '@/pinia/modules/user'
//获取用户登录信息
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
console.log('获取用户名称',_username.value)
//全局调用获取当前日期
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const currentDates = `${year}-${month}-${day}`;
//自动聚焦光标input
const getMachineMacdata = async () => {
	setTimeout(() => {
		const inputElement = document.getElementById('searchInput');
		if (inputElement) {
			inputElement.focus();		
		}
	}, 100); // 延迟100毫秒
}
getMachineMacdata();

// =========== 左侧树侧形结构 =========== 
const treeData = ref([]); 
const defaultProps = {  
  children: 'children',  
  label: 'label'  
};  

const getReceiptTabs = async () => {
  try {
    // 调用接口获取数据
    const response = await getReceiptTab();
    console.log(response);  // 查看接口返回的数据

    // 将接口返回的数据格式化为树形结构
    const formattedData = response.data.map(item => ({
      label: item.month,  // 显示月份
      children: []        // 如果需要，可以添加子节点，或者根据需求添加
    }));

    // 将格式化后的数据赋值给treeData
    treeData.value = formattedData;
  } catch (error) {
    console.error(error);
  }
};
getReceiptTabs();

const restableData = reactive([])
//点击左侧树形获取编号
const handleNodeClick = async (node) => {
	 restableData.splice(0, restableData.length);//清空表格
	 // 获取点击的节点的月份
	  const month = node.label; 
	  const response = await ReceiptList({mouth:month});
	  console.log(response)
	  restableData.splice(0,response.length,...response.data);
}


const listtableData = reactive([])
//表格行点击
const tableRowClick = async (row)=>{
	console.log(row['出库单'])
	const response = await ReceiptDetail({receipt:row['出库单']});
	console.log(response)
	listtableData.splice(0,response.length,...response.data);
}

const getSummaries = (param) => {  
    const { columns, data } = param;  
    const sums = {};  
	//选择你希望合计的列
    const summableLabels = ["数量"];
    columns.forEach((column, index) => {  
        if (index === 0) {  
            sums[index] = '总数量合计';  
            return;  
        }  
        if (summableLabels.includes(column.label)) {  
            const values = data.map(item => Number(item[column.property]));  
            if (!values.every(value => isNaN(value))) {  
                sums[index] = values.reduce((prev, curr) => {  
                    const value = Number(curr);  
                    if (!isNaN(value)) {  
                        return prev + value; 
                    }  
                    return prev;  
                }, 0);  
            } else {  
                 sums[index] = 'N/A';  
            }  
        }  
    });  
    return sums;  
};  

// =========== 分页 ===========
// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  _getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  page.value = 10;//默认显示
  pageSize.value = val;
  _getStaffList();
};
</script>
<style scoped>
/* 根据出库状态文字颜色 */
:deep(.status-plan-usage-low div) {
  color: #8c939d  !important;
}
:deep(.statusy-plan-usage-low div) {
  color: blue !important;
}
.form-container {
  display: flex;
  flex-wrap: wrap;
}
.form-column {
  /*flex: 1;*/
  margin-right: 15px; /* 调整列之间的间距 */
}
/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
  width: 150px; /* 调整左侧输入框的宽度 */
}
/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
  .form-column {
    flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
    margin-right: 0;
  }
}
.JKWTree-container {
  display: flex;
}
.JKWTree-tree {
  /*width: 300px;*/
  background-color: #fff;
  padding: 10px;
  margin-right: 20px;
}
.JKWTree-tree h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
}
.JKWTree-content {
  flex: 1;
}
/* 表格复选框大小调整 */
:deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
    width: 45px; /* 复选框宽度 */
    height: 23px; /* 复选框高度 */
}
/*bom参数背景*/
:deep(.el-table__body .background-plan-usage-low div div div) {
  background: #80FA80 !important;
}
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
:deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
    transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
    top: 5%; /* 调整对勾位置 */
    left: 40%; /* 调整对勾位置 */
    width: 5px; /* 调整对勾宽度 */
    height: 9px; /* 调整对勾高度 */
}
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
</style>
<style scoped>
:deep(.el-table td .cell) {
  line-height: 20px !important;
}
:deep(.el-tabs__header){
  margin-bottom: 0;
}
.search{
  margin-left: 0px !important;
  margin-right: 10px !important;
}
.bt{
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
.el-tabs__header{
  margin: 0px !important;
}
.gva-table-box{
  padding: 0px !important;
	margin-left: 5px !important;
}
.mab{
  margin-bottom: 5px;
}
/* 搜索样式 */
::v-deep .el-input__wrapper #searchInput {  
  font-size: 16px; 
}  
::v-deep(.el-descriptions__table tbody tr .is-bordered-label){
	width: 60px;
}
::v-deep(.el-descriptions__table tbody tr .el-descriptions__content){
	width: 120px;
}
</style>