mes-ai-admin-backend-ui/src/view/yunyin/shengchanguanli/yuedudahuoshengchanjindu.vue

<template>
	<div>
	  <layout>
		<layout-header>
		  <div class="">
			<!--          按钮部分-->
			<el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
			  <el-form-item>
				<el-input v-model="searchInfo" placeholder="搜索" clearable style="width: 180px;"></el-input>
				<el-button type="primary" icon="search" @click="onSubmit" >查询</el-button>
				<!-- <el-button type="primary" icon="edit"   @click="gd_gxclhconClick"  class="bt" title="修改">修改</el-button> -->
			  </el-form-item>
			</el-form>
		  </div>

		</layout-header>
  
		<layout>
		  <!--    左侧树侧形结构-->
		  <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
			<div class="JKWTree-tree" style="height: 200px">
			  <h3>选择月份</h3>
			  <!-- <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand"> -->
			  <el-tree :data="treeData" @node-click="handleNodeClick" class="treecolor">
			  </el-tree>
			</div>
		  </layout-sider>
  
		  <!-- 右侧区域 -->
		  <layout-content >
		  <el-main>
			<div class="gva-table-box">
			  <!-- 表格数据 -->
			  <el-table ref="multipleTable" style="width: 100%;height: 65vh" tooltip-effect="dark"
						:row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:data="tableData"  border row-key="ID"
						size="small"
						:cell-class-name="gxbgCellClass"
						highlight-current-row="true" @row-dblclick="updateCompanyFunc"
						@row-click="tableRowClick" :show-overflow-tooltip="true"
						@selection-change="handleSelectionChange">
						<el-table-column  sortable align="center" label="序号" prop="序号"  width="80" />
             			<el-table-column  sortable align="center" label="款式" prop="款式"  width="120" />
			 			<el-table-column  sortable align="center" label="客户编号" prop="客户编号"  width="100" />
			 			<el-table-column  sortable align="center" label="下单日期" prop="下单日期"  width="100" />
			 			<el-table-column  sortable align="center" label="客户确认货期" prop="客户确认货期"  width="130" />
			 			<el-table-column  sortable align="center" label="款号" prop="款号"  width="80" />
			 			<el-table-column  sortable align="center" label="生产组别" prop="生产组别"  width="100" />
			 			<el-table-column  sortable align="center" label="订单数量" prop="订单数量"  width="100" />
			 			<el-table-column  sortable align="center" label="实裁数量" prop="实裁数量"  width="100" />	
			 			<el-table-column  sortable align="center" label="已完成数量" prop="已完成数量"  width="120" />
			 			<el-table-column  sortable align="center" label="入库数量" prop="入库数量"  width="100" />
			 			<el-table-column  sortable align="center" label="面料入库时间" prop="面料入库时间"  width="130" />
			 			<el-table-column  sortable align="center" label="辅料入库时间" prop="辅料入库时间"  width="130" />
			 			<el-table-column  sortable align="center" label="产前样批核" prop="产前样批核"  width="120" />
			 			<el-table-column  sortable align="center" label="大货制单" prop="大货制单"  width="100" />
			 			<el-table-column  sortable align="center" label="工装模板" prop="工装模板"  width="100" />
			 			<el-table-column  sortable align="center" label="开裁日期" prop="开裁日期"  width="100" />
			 			<el-table-column  sortable align="center" label="上车位时间" prop="上车位时间"  width="120" />
			 			<el-table-column  sortable align="center" label="台产" prop="台产"  width="80" />
			 			<el-table-column  sortable align="center" label="车位完成时间" prop="车位完成时间"  width="160" />
			 			<el-table-column  sortable align="center" label="后道完成时间" prop="后道完成时间"  width="160" />
			 			<el-table-column  sortable align="center" label="备注" prop="备注"  width="150" />
			  </el-table>
  
			  <!-- 分页 -->
			  <div class="gva-pagination">
				<el-pagination layout="total" :current-page="page" :page-size="pageSize"
				 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  <!--              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"-->
  <!--                             :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />-->
			  </div>
			</div>
  
		  </el-main>
		</layout-content>
		</layout>
	  </layout>
	</div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  import {ref, reactive} from 'vue'
  import {dateList,OrderYieldList} from '@/api/mes/job'

  import PrintPage from './components/print.vue'
  import {ElMessage} from "element-plus";
  defineOptions({name: 'Company'})
  // =========== 获取左侧树侧形结构 ===========
  const treeData = ref([]);  
  const _department_code = ref(null)
const getDepartmentdata = async () => {  
  try {  
    const dateList_list = await dateList();  
    const { data } = dateList_list;  
    treeData.value = data.map(month => ({label: month })); // 假设每个节点有一个id和label  
    console.log(553, treeData.value);  
  } catch (error) {  
    console.error(error);  
  }  
};  
  
getDepartmentdata();
  
  //点击左侧树形 获取右侧table列表
  const tableData = reactive([]);
  const _code = ref(null);  //左侧菜单编号
  const handleNodeClick = async (node) => {
	console.log(778,node)
  // 取消所有节点的颜色
  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';
  }
	searchInfo.value = '';  // 清空搜索信息
	_workOrderDetailList();  // 执行获取员工列表的函数
  };
  
  //全局调用工单编号
  const _Gd_gdbh = ref(null)
  //全局调用印件代号
  const _Gd_cpdh = ref(null)
  const tableRowClick = async (row) => {
	console.log(row.工单编号)
	_Gd_gdbh.value = row.工单编号;
	_Gd_yjdh.value = row.印件代号;
  };
  
  
  
  
  // 搜索默认为空
  const searchInfo = ref('')
  //点击【查询】按钮
  const onSubmit = () => {
	_department_code.value = '';
	if(searchInfo.value === ''){
	  tableData.length = 0;
	}else{
		_code.value = '';
		console.log(searchInfo.value)
	  _workOrderDetailList();
	}
  };
  
  //获取员工信息列表
  const _workOrderDetailList = async ()=>{
	const OrderYieldListtable = await OrderYieldList();
	console.log(456,OrderYieldListtable)
	  try {
		const workOrderDetaildata = 
  
	  console.log(workOrderDetaildata)
	  tableData.splice(0,tableData.length,...workOrderDetaildata);
	} catch (error) {
	  console.error(error);
	}
  }
  
  // 分页相关的响应式变量
  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();
  };
  
  // 弹窗控制标记
  const dialogFormVisible = ref(false)
  //修改
  const formDataTest = ref({})
  
  
  
  
  
  
  </script>
  
  <style scoped>
  .form-container {
	display: flex;
	flex-wrap: wrap;
  }
  
  .form-column {
	/*flex: 1;*/
	margin-right: 15px; /* 调整列之间的间距 */
  }
  
  /* 左侧输入框宽度调整 */
  .form-column .el-form-item .el-input {
	width: 150px; /* 调整左侧输入框的宽度 */
  }
  
  :deep(.hui-plan-usage-lows  div) {
	color: #8c939d !important;
  }
  :deep(.lan-plan-usage-lows  div) {
	color: blue !important;
	font-weight: bold;
  }
  
  
  
  /* :deep(.hui-plan-usage-lows.column-0  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-1  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-2  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-3  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-4  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-5  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-6  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-7  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-8  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-9  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-10  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-11  div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-12 div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-13 div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-14 div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-15 div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-16 div) {
	color: #8c939d !important;
  }
  :deep(.hui-plan-usage-lows.column-17 div) {
	color: #8c939d !important;
  }
  
  :deep(.lan-plan-usage-lows.column-0  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-1  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-2  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-3  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-4  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-5  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-6  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-7  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-8  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-9  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-10  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-11  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-12  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-13  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-14  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-15  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-16  div) {
	color: blue !important;
	font-weight: bold;
  }
  :deep(.lan-plan-usage-lows.column-17  div) {
	color: blue !important;
	font-weight: bold;
  } */
  
  /* 媒体查询，根据需要调整断点 */
  @media screen and (max-width: 768px) {
	.form-column {
	  flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
	  margin-right: 0;
	}
  }
  /*:deep(.el-table td .cell) {*/
  /*  line-height: 30px !important;*/
  /*}*/
  .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;
  }
  /* 图片上传 */
  .upload-box {
	width: 200px;
	height: 200px;
	border: 2px dashed #e2e2e2;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
  }
  .uploaded-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  .upload-icon {
	font-size: 40px;
	color: #c0c4cc;
  }
  .file-input {
	display: none;
  }
  .el-table .warning-row {
	background: oldlace;
  }
  
  /* 选中某行时的背景色 */
  :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;
  }
  .mab{
	margin-bottom: 5px;
  }
  </style>