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

<template>
  <div>
    <el-form>
        <el-form-item>
          <el-input v-model="searchInfo" placeholder="搜索订单编号或生产款号" @keyup.enter="handleSearch()" style="width: 180px;" />
 		  <el-button type="primary" icon="search" class="search" @click="handleSearch">搜索</el-button>
          <el-button  type="primary" icon="Download" @click="exportToExcel" style="margin: 5px;float: right;">导出库存Excel</el-button>
        </el-form-item>
    </el-form>

    <layout>
			<layout-sider :resize-directions="['right']" :width="200" style="margin-right: 10px;">
				<div class="JKWTree-tree" style="height: 70vh;">
					<h3>面料库存</h3>
					<el-tree :data="treeData" class="treecolor" highlight-current="true" @node-click="handleNodeClick"  />
				</div>
			</layout-sider>

      <layout>
        <layout-content>
          <div class="gva-table-box">
           <el-table ref="multipleTable" style="width: 100%;height: 70vh" tooltip-effect="dark"
                      :row-style="{ height: '40px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="restableData"  border row-key="ID" size="small"  
					            :cell-class-name="tableDataCellClass" id="Fabricinventory"
                      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="90" />
				<el-table-column  align="left" label="关联号" prop="关联号" width="90" />
                <el-table-column  align="left" label="物料编号" prop="物料编号" width="150" />
                <el-table-column  align="left" label="物料名称" prop="物料名称" width="150"/>
				<el-table-column  align="left" label="颜色" prop="颜色" width="90"/>
				<!-- <el-table-column  align="left" label="计划用料" prop="计划用料" width="90"/> -->
				<!-- <el-table-column  align="left" label="计划门幅" prop="计划门幅" width="90"/> -->
				<el-table-column  align="left" label="定额用料" prop="定额用料" width="90"/>
				<el-table-column  align="left" label="定额门幅" prop="定额门幅" width="90"/>
				<el-table-column  align="left" label="实际门幅" prop="实际门幅" width="90"/>
                <el-table-column  align="left" label="入仓总量" prop="入仓总量" width="90"/>
                <el-table-column  align="left" label="库存数量" prop="库存数量" width="90"/>
                <el-table-column  align="left" label="领用数量" prop="领用数量" width="90"/>
                <el-table-column  align="left" label="裁切退还" prop="裁切退还" width="90"/>
                <!-- <el-table-column  align="left" label="状态" prop="状态" width="100"/> -->
				<el-table-column  align="left" label="单位" prop="单位" width="70"/>
                <el-table-column  align="left" label="关联订单" prop="关联订单" width="150"/>
				<el-table-column  align="left" label="入仓人员" prop="入仓人员" width="100"/>
				<el-table-column  align="left" label="入仓日期" prop="入仓日期" width="160"/>
				<el-table-column fixed="right" label="操作" width="130">
				<template #default="{ row, $index }">
				  <el-button @click="record_deleteRow(row,$index)" type="success" size="small" 
				  style="font-size: 16px;padding: 0px;width: 90px;">
					查看明细
				  </el-button>
				</template>
			  </el-table-column>
                </el-table>
                <div class="gva-pagination">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[10, 30, 50, 100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
            <div class="dialog-footer" style="text-align: left;margin-right: 60px;">
			    </div>
          </div>
      </layout-content>
      </layout>
    </layout>
  </div>


		<el-dialog v-model="FabricVisible" :before-close="FabricVisiblecloseDialog" title="入库、出库、退还详情数据" 
				style="width: 100%;height: 100%;margin: 0px;" top="0%" destroy-on-close>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="入库记录"   name="first">
					<el-table ref="multipleTable" style="width: 100%;height: 80vh" tooltip-effect="dark"
					   :row-style="{ height: '40px' }"  :header-cell-style="{ padding: '0px' }"
					   :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
					   :data="DetaillistrestableData"  border row-key="ID" size="small"  
					   :cell-class-name="tableDataCellClass" id="Fabricinventory"
					   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="90" />
					<el-table-column  align="left" label="单号" prop="单号" width="140" />
					<el-table-column  align="left" label="订单编号" prop="订单编号" width="110" />
					<el-table-column  align="left" label="客户编号" prop="客户编号" width="80" />
					<el-table-column  align="left" label="生产款号" prop="生产款号" width="115" />
					<el-table-column  align="left" label="款式" prop="款式" width="115" />
					<el-table-column  align="left" label="物料名称" prop="物料名称" width="115" />
					<!-- <el-table-column  align="left" label="计划用料" prop="计划用料" width="90" /> -->
					<!-- <el-table-column  align="left" label="计划门幅" prop="计划门幅" width="90" /> -->
					<el-table-column  align="left" label="定额用料" prop="定额用料" width="90" />
					<el-table-column  align="left" label="定额门幅" prop="定额门幅" width="90" />
					<el-table-column  align="left" label="入库数量" prop="入库数量" width="90" />
					<el-table-column  align="left" label="入库总量" prop="入库总量" width="90" />
					<el-table-column  align="left" label="库存数量" prop="面料结余" width="90" />
					<el-table-column  align="left" label="投料单位" prop="投料单位" width="90" />
					<el-table-column  align="left" label="入库人员" prop="入库人员" width="90" />
					<el-table-column  align="left" label="入库时间" prop="入库时间" width="160" />
					<el-table-column  align="left" label="备注" prop="备注" width="115" />
					</el-table>
				</el-tab-pane>
				
				<el-tab-pane label="出库记录"   name="second">
					<el-table ref="multipleTable" style="width: 100%;height: 80vh" tooltip-effect="dark"
					   :row-style="{ height: '40px' }"  :header-cell-style="{ padding: '0px' }"
					   :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
					   :data="chukutableData"  border row-key="ID" size="small"  
					   :cell-class-name="tableDataCellClass" id="Fabricinventory"
					   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="90" />
					<el-table-column  align="left" label="单号" prop="单号" width="140" />
					<el-table-column  align="left" label="订单编号" prop="订单编号" width="110" />
					<el-table-column  align="left" label="客户编号" prop="客户编号" width="80" />
					<el-table-column  align="left" label="生产款号" prop="生产款号" width="115" />
					<el-table-column  align="left" label="款式" prop="款式" width="115" />
					<el-table-column  align="left" label="物料名称" prop="物料名称" width="115" />
					<!-- <el-table-column  align="left" label="计划用料" prop="计划用料" width="90" /> -->
					<!-- <el-table-column  align="left" label="计划门幅" prop="计划门幅" width="90" /> -->
					<el-table-column  align="left" label="定额用料" prop="定额用料" width="90" />
					<el-table-column  align="left" label="定额门幅" prop="定额门幅" width="90" />
					<el-table-column  align="left" label="出库数量" prop="出库数量" width="90" />
					<el-table-column  align="left" label="入库总量" prop="入库总量" width="90" />
					<el-table-column  align="left" label="库存数量" prop="面料结余" width="90" />
					<el-table-column  align="left" label="投料单位" prop="投料单位" width="90" />
					<el-table-column  align="left" label="出库人员" prop="出库人员" width="90" />
					<el-table-column  align="left" label="出库时间" prop="出库时间" width="160" />
					<el-table-column  align="left" label="领用人员" prop="领用人员" width="90" />
					<el-table-column  align="left" label="备注" prop="备注" width="115" />
					</el-table>
				</el-tab-pane>
				
				<el-tab-pane label="退还记录"   name="third">
					<el-table ref="multipleTable" style="width: 100%;height: 80vh" tooltip-effect="dark"
					   :row-style="{ height: '40px' }"  :header-cell-style="{ padding: '0px' }"
					   :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
					   :data="tuihuantableData"  border row-key="ID" size="small"  
					   :cell-class-name="tableDataCellClass" id="Fabricinventory"
					   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="90" />
					<el-table-column  align="left" label="单号" prop="单号" width="140" />
					<el-table-column  align="left" label="订单编号" prop="订单编号" width="110" />
					<el-table-column  align="left" label="客户编号" prop="客户编号" width="80" />
					<el-table-column  align="left" label="生产款号" prop="生产款号" width="115" />
					<el-table-column  align="left" label="款式" prop="款式" width="115" />
					<el-table-column  align="left" label="物料名称" prop="物料名称" width="115" />
					<!-- <el-table-column  align="left" label="计划用料" prop="计划用料" width="90" /> -->
					<!-- <el-table-column  align="left" label="计划门幅" prop="计划门幅" width="90" /> -->
					<el-table-column  align="left" label="定额用料" prop="定额用料" width="90" />
					<el-table-column  align="left" label="定额门幅" prop="定额门幅" width="90" />
					<el-table-column  align="left" label="退还数量" prop="入库数量" width="90" />
					<el-table-column  align="left" label="入库总量" prop="入库总量" width="90" />
					<el-table-column  align="left" label="库存数量" prop="库存数量" width="90" />
					<el-table-column  align="left" label="退还类型" prop="退还类型" width="90" />
					<el-table-column  align="left" label="投料单位" prop="投料单位" width="90" />
					<el-table-column  align="left" label="备注" prop="备注" width="160" />
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>
  
</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 {FabricLotList,fabricListmonth,FabricDetaillist} from '@/api/mes/job'
import {ElMessage} from "element-plus";
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
// import { get } from 'scriptjs';
import { useUserStore } from '@/pinia/modules/user'
defineOptions({name: 'Company'})
//获取用户登录信息
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}`;
const currentDatess = `${year}-${month}`;


// 侧边栏数据请求

const treeData = reactive([]);
const getTreeData = async () => {
  const response = await fabricListmonth();
  
  if (response.code === 0) {
    const transformedData = Object.entries(response.data).map(([key, dates]) => ({
      label: key,  // 使用"2025-03"作为父节点的label
      children: dates.map(date => ({
        label: date,  // 子节点是具体的日期
        params: {
          date: date.substring(0, 4) + '-' + date.substring(4), // 格式化日期
        },
      })),
    }));

    // 清空并更新 treeData
    treeData.splice(0, treeData.length, ...transformedData);
  }
};

getTreeData();

const mlscgdformData = reactive({
  日期: '',
});
const nodedata = ref('')
const handleNodeClick = async (node, check) => {
	nodedata.value = node.label
	console.log(nodedata.value);
	restableData.splice(0, restableData.length);//清空表格
	
	// 取消所有节点的颜色
	const allNodes = document.querySelectorAll('.treecolor .el-tree-node');
		allNodes.forEach(node => {
		node.querySelector('.el-tree-node__label').style.color = '';
	});
	// 获取点击的节点 给当前点击的节点改变颜色【红色】
	const clickedNodeId = node['$treeNodeId'];
	const clickedNode = document.querySelector(`.treecolor .el-tree-node[data-key="${clickedNodeId}"]`);
	if (clickedNode) {
		clickedNode.querySelector('.el-tree-node__label').style.color = 'red';
	}
	
	//订单信息数据查询【接口】
	const fabricListdata = await FabricLotList({date:nodedata.value});
	console.log(fabricListdata)
	restableData.splice(0,fabricListdata.length,...fabricListdata.data);
	total.value = fabricListdata.data.total;
}

const searchInfo = ref('')
  //查询按钮
const handleSearch = async ()=>{
	restableData.splice(0, restableData.length);//清空表格
	//订单信息数据查询【接口】
	const fabricListdata = await FabricLotList({date:nodedata.value});
  console.log(fabricListdata)
	restableData.splice(0,fabricListdata.length,...fabricListdata.data.table);
  total.value = fabricListdata.data.total;
};

const exportToExcel = ()=>{
  const el = document.getElementById('Fabricinventory');
  // 文件名
  const filename = '面料库存汇总.xlsx';
  const wb = XLSX.utils.table_to_book(el, { raw: true });
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename);
  } catch (e) {
    console.log(e);
  }
  return wbout;
}

//自动聚焦光标input
const getMachineMacdata = async () => {
  mlscgdformData['日期'] = currentDates
  restableData.splice(0, restableData.length);//清空表格
  
	setTimeout(() => {
		const inputElement = document.getElementById('searchInput');
		if (inputElement) {
			inputElement.focus();		
		}
	}, 100); // 延迟100毫秒
}
getMachineMacdata();


//全局调用参数
const add_searchInfo = ref('')//搜索
const restableData = reactive([])//表格
const _orderid = ref('')//订单子编号
const handleInput = async ()=>{
	add_onSubmit()
}




const resbomtableData = ref([]);

//表格行点击
const tableRowClick = async (row)=>{
	// console.log(row)
}

const _pch = ref('')
const FabricVisible = ref(false)
const DetaillistrestableData = reactive([])
const chukutableData = reactive([])
const tuihuantableData = reactive([])

//双击
const updateCompanyFunc = async (row)=>{
	
}

const record_deleteRow = async (row)=>{
	console.log(row)
	_pch.value = row['批次号']
	FabricVisible.value = true
	DetaillistrestableData.splice(0,DetaillistrestableData.length);
	chukutableData.splice(0,chukutableData.length);
	tuihuantableData.splice(0,tuihuantableData.length);
	
	const FabricDetaillistdata = await FabricDetaillist({lotNumber:_pch.value});
	console.log(FabricDetaillistdata)
	DetaillistrestableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['入库记录']);
	chukutableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['出库记录']);
	tuihuantableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['退还记录']);
}


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

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};
</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>