mes-ai-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="搜索" clearable style="width: 180px;"></el-input>
				<el-button type="primary" icon="search" @click="onSubmit" >查询</el-button>
				<el-button type="primary" icon="edit"   @click="hptg_onClick" class="bt" title="核批通过" disabled>核批通过</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" class="treecolor" :current-node-key="currentNodeKey" @node-click="handleNodeClick">
			  </el-tree>
			</div>
		  </layout-sider>
  
		  <!-- 右侧区域 -->
		  <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"
							style="width: 100%;height: 65vh" border  :data="tableData1" row-key="ID" >
						<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="120" />
						<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="90" />
						<el-table-column  sortable align="center" label="S" prop="S"  width="80" />
						<el-table-column  sortable align="center" label="M" prop="M"  width="80" />
						<el-table-column  sortable align="center" label="L" prop="L"  width="80" />
						<el-table-column  sortable align="center" label="XL" prop="XL"  width="80" />
						<el-table-column  sortable align="center" label="XXL" prop="XXL"  width="80" />
						<el-table-column  sortable align="center" label="制单总数" prop="制单总数"  width="120" />
						<el-table-column  sortable align="center" label="建档用户" prop="建档用户"  width="120" />
						<el-table-column  sortable align="center" label="建档日期" prop="建档日期"  width="120" />
						<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="120" />
					</el-table>
				</el-tab-pane>

              <el-tab-pane label="样衣已核批列表"  @click="showTable('样衣已核批列表')" name="second">
				<el-table ref="multipleTable"  :row-style="{ height: '20px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:header-cell-style="{ padding: '0px' }"
							highlight-current-row="true"
							 @row-click="yyyp_clickybupdate"
                        	 @row-dblclick="yyyp_clickybupdate"
							style="width: 100%;height: 65vh" border  :data="tableData2" row-key="ID" >
						<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="120" />
						<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="90" />
						<el-table-column  sortable align="center" label="S" prop="S"  width="80" />
						<el-table-column  sortable align="center" label="M" prop="M"  width="80" />
						<el-table-column  sortable align="center" label="L" prop="L"  width="80" />
						<el-table-column  sortable align="center" label="XL" prop="XL"  width="80" />
						<el-table-column  sortable align="center" label="XXL" prop="XXL"  width="80" />
						<el-table-column  sortable align="center" label="制单总数" prop="制单总数"  width="120" />
						<el-table-column  sortable align="center" label="建档用户" prop="建档用户"  width="120" />
						<el-table-column  sortable align="center" label="建档日期" prop="建档日期"  width="120" />
						<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="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 {jcgetTab,workOrderDetail,getOrderProcessCount,PrintDetailList} from '@/api/yunyin/yunying'
  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 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 workOrderDetaildata1 = [
		{
			'序号':'1',
			'订单子编号':'2408001',
			'颜色名称':'红色',
			'生产款号':'2403-1622款',
			'客户':'DC-7',
			'船样':'否',
			'S':'/',
			'M':'2',
			'L':'/',
			'XL':'2',
			'XXL':'/',
			'制单总数':'4',
			'建档用户':'xxx',
			'建档日期':'',
			'更新时间':'',
			'核批人':'/',
			'核批日期':'/',
		},
		{
			'序号':'2',
			'订单子编号':'2408002',
			'颜色名称':'蓝色',
			'生产款号':'2403-1622款',
			'客户':'DC-7',
			'船样':'否',
			'S':'/',
			'M':'2',
			'L':'/',
			'XL':'2',
			'XXL':'/',
			'制单总数':'4',
			'建档用户':'xxx',
			'建档日期':'',
			'更新时间':'',
			'核批人':'/',
			'核批日期':'/',
		},
		{
			'序号':'3',
			'订单子编号':'2408005-船',
			'颜色名称':'黑色',
			'生产款号':'2403-1622款',
			'客户':'DC-7',
			'船样':'否',
			'S':'/',
			'M':'2',
			'L':'/',
			'XL':'2',
			'XXL':'/',
			'制单总数':'4',
			'建档用户':'xxx',
			'建档日期':'',
			'更新时间':'',
			'核批人':'/',
			'核批日期':'/',
		},
		];
		const workOrderDetaildata2 = [
			{
				'序号':'1',
				'订单子编号':'XXX001-船',
				'颜色名称':'黑色',
				'生产款号':'2403-1622款',
				'客户':'DC-7',
				'船样':'否',
				'S':'/',
				'M':'2',
				'L':'/',
				'XL':'2',
				'XXL':'/',
				'制单总数':'4',
				'建档用户':'xxx',
				'建档日期':'',
				'更新时间':'',
				'核批人':'/',
				'核批日期':'/',
			},
		];
		// console.log(workOrderDetaildata1)
		// console.log(workOrderDetaildata2)
		tableData1.splice(0,tableData1.length,...workOrderDetaildata1);
		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 onSubmit = () => {
	if(searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请输入搜索的信息'})
    return false;
  }else{
    console.log(searchInfo.value)
    console.log("点击了搜索按钮");
  }
};
const hptg_onClick = () => {

};



 



 
  // 分页相关的响应式变量
  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>