mes-sdai-admin-backend-ui/src/view/yunyin/shengchanguanli/yangyipihe.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="搜索订单编号"  style="width: 180px;"></el-input>
				<el-button type="primary" icon="search" @click="onSubmit" >查询</el-button>
				<el-button type="primary" icon="edit"   @click="hptg_onClick" :disabled="table_Selection === false"  class="bt" title="核批通过">核批通过</el-button>
			  </el-form-item>
			</el-form>
		  </div>
		</layout-header>
  
		<layout>

		  <!-- 右侧区域 -->
		  <layout-content >
		  <!-- <el-main> -->
			<div class="gva-table-box">
			  <!-- 表格数据 -->
			  <el-tabs v-model="activeName">
				<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' }"
							 @row-click="yydp_clickybupdate"
                        	 @row-dblclick="yydp_updateCompanyFunc"
							 highlight-current-row="true"
							 :show-overflow-tooltip="true"
							style="width: 100%;height: 65vh" border  :data="tableData1" row-key="ID" @selection-change="handleSelectionChange">
						<el-table-column   align="center" type="selection" width="40"/>
						<el-table-column   align="center" label="附件状态" prop="status"  width="100" />
						<el-table-column   align="left" label="客户" prop="客户编号"  width="70" />
						<el-table-column   align="left" label="订单编号" prop="订单编号"  width="120" />
						<el-table-column   align="left" label="生产款号" prop="生产款号"  width="150" />
						<el-table-column   align="left" label="款式" prop="款式"  width="110" />
						<el-table-column   align="left" label="工单状态" prop="gd_statu"  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="150" />
						<el-table-column   align="left" label="单位" prop="单位"  width="60" />
						<el-table-column   align="left" label="粘衬" prop="粘衬"  width="120" />
						<el-table-column   align="left" label="要求" prop="要求"  width="360" />
						<el-table-column   align="left" label="箱唛要求" prop="箱唛要求"  width="360" />
						<el-table-column   align="left" label="工单完工数量" prop="工单完工数量"  width="140" />
						<el-table-column   align="left" label="工单完工日期" prop="工单完工日期"  width="140" />
						<el-table-column   align="left" label="制单人" prop="Sys_id"  width="160" />
						<el-table-column   align="left" label="制单日期" prop="Sys_rq"  width="160" />
						<!-- <el-table-column   align="left" label="接单日期" prop="接单日期"  width="120" /> -->
						<el-table-column   align="left" label="出库日期" prop="出库日期"  width="120" />
						<el-table-column   align="left" label="落货日期" prop="落货日期"  width="120" />
						<el-table-column   align="left" label="更新时间" prop="Mod_rq"  width="120" />
						<el-table-column   align="left" label="审核" prop="审核"  width="100" />
						<el-table-column   align="left" label="审核日期" prop="审核日期"  width="120" />
					</el-table>
				</el-tab-pane>
            </el-tabs>

  
			  <!-- 分页 -->
			  <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>
  //点击按钮显示下方表格
  export default {
	data() {
	  return {
		currentTable: '', // 当前展示的表格
		activeName: 'first',
	  };
	},
	methods: {
	  showTable(tableName) {
		this.currentTable = tableName;
	  },
	}
  };
  </script>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  import {ref, reactive} from 'vue'
  import {UnapprovalList,Approval} from '@/api/mes/job'
  import {jcgetTab,workOrderDetail,getOrderProcessCount,PrintDetailList} from '@/api/yunyin/yunying'
  import PrintPage from './components/print.vue'
  import {ElMessage} from "element-plus";
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 getUnapprovalList = async () => {
  try {
    const UnapprovalListtable  = await UnapprovalList({search:''});
	console.log(1484,UnapprovalListtable)
	const workOrderDetaildata1 = UnapprovalListtable.data.table
	tableData1.splice(0,tableData1.length,...workOrderDetaildata1);
	total.value = UnapprovalListtable.data.total

  setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
  } catch (error) {
    console.error(error)
  }
}
getUnapprovalList();




  // =========== 获取左侧树侧形结构 ===========
//   const treeData = ref({})
//   const _department_code = ref(null)
//   const getDepartmentdata = async () => {
// 	try {
// 	  const data = 
// 		[{
// 		label : '客户编号',
// 		children : [
// 		{label : 'DC-1'},
// 		{label : 'DC-2'},
// 		{label : 'DC-3'},
// 		{label : 'DC-4'},
// 		{label : 'DC-5'},
// 		{label : 'DC-6'},
// 		{label : 'DC-7'},
// 		{label : 'DC-8'},
// 		{label : 'DC-9'},
// 		{label : 'DC-10'},
// 		{label : 'DC-11'},
// 		{label : 'DC-12'},
// 		{label : 'DC-13'},
// 		{label : 'DC-14'},
// 		{label : 'DC-15'}
// 	  ]
// 	  }];
// 	  treeData.value = data
// 	} catch (error) {
// 	  console.error(error)
// 	}
//   }
//   getDepartmentdata();

//全局调用左侧菜单编号
const _code = ref(null);  
//全局调用工单编号
const _Gd_gdbh = ref(null)
//全局调用印件代号
const _Gd_cpdh = ref(null)

const tableData1 = reactive([]);
const tableData2 = reactive([]);
 //点击左侧树形 获取右侧table列表
const handleNodeClick = async (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 = '';  // 清空搜索信息

	if(node.label === '客户编号'){
		console.log(node.label)
	}else{
		console.log(node.label)
		
		const workOrderDetaildata2 = [
			{
				'序号':'1',
				'订单子编号':'XXX001-船',
				'颜色名称':'黑色',
				'生产款号':'2403-1622款',
				'客户':'DC-7',
				'船样':'否',
				'S':'/',
				'M':'2',
				'L':'/',
				'XL':'2',
				'XXL':'/',
				'制单总数':'4',
				'建档用户':'xxx',
				'建档日期':'',
				'更新时间':'',
				'核批人':'/',
				'核批日期':'/',
			},
		];
		// console.log(workOrderDetaildata1)
		// console.log(workOrderDetaildata2)

		tableData2.splice(0,tableData2.length,...workOrderDetaildata2);
	}
	
};


// =========== 表格 ===========
//单机样衣待核批列表
const yydp_clickybupdate = async (row) => {

};

//双击样衣待核批列表
const yydp_updateCompanyFunc = async (row) => {
	
};

//单机样衣已核批列表
const yyyp_clickybupdate = async (row) => {

};

//双击样衣已核批列表
const yyyp_updateCompanyFunc = async (row) => {

};
 

// =========== 按钮 ===========
// 搜索默认为空
const searchInfo = ref('')
const table_Selection = ref(false)
//查询按钮
const onSubmit = async ()  => {
	// if(searchInfo.value === ''){
		// ElMessage({type: 'warning',message: '请输入搜索的订单编号' })
		// return false;
	// }else{
		const UnapprovalListtable = await UnapprovalList({search:searchInfo.value});
		tableData1.splice(0,tableData1.length,...UnapprovalListtable.data);
	// }
};

//表格复选框
const _Uniqid = ref('');  
const _Sys_id = ref('');
const handleSelectionChange = (selection, type) => {
    console.log(selection);  
	if(selection.length >= 1){
		table_Selection.value = true
		 // 提取 Uniqid  
		 const Uniqid_ids = selection.map(item => item.Uniqid).join(',');  
		_Uniqid.value = Uniqid_ids;  
		// 提取 Sys_id  
		const Sys_ids = selection.map(item => item.Sys_id).join(',');  
		_Sys_id.value = Sys_ids;  
	}else{
		table_Selection.value = false
	}
   
};

//核批通过按钮
const hptg_onClick = async () => {
	console.log(_Uniqid.value)
	console.log(_Sys_id.value)
	const Approvals = await Approval({Uniqid:_Uniqid.value,sys_id:_Sys_id.value});
	if (Approvals.code === 0) {
		searchInfo.value = ''
		ElMessage({type: 'success',message: '核批成功'})
		const UnapprovalListtable = await UnapprovalList({search:searchInfo.value});
		const workOrderDetaildata1 = UnapprovalListtable.data
		tableData1.splice(0,tableData1.length,...workOrderDetaildata1);
	} else {
		ElMessage({ type: 'error',message: '核批失败'})
	}
};

 



 
  // 分页相关的响应式变量
  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>
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}

  .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;
  }
  
  /* 媒体查询，根据需要调整断点 */
  @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;
  }
  /* 图片上传 */
  .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>