mes-dacheng-admin-backend-ui/src/view/yunyin/shengchanguanli/yangyipihe.vue

<template>
	<div style="margin: 0px;">
	  <layout>
		<layout-header>
			<el-form>
			  <el-form-item>
				<el-input v-model="searchInfo" placeholder="模糊搜索订单编号或者生产款号" @keyup.enter="onSubmit()"  style="width: 220px;"></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-button type="primary" icon="edit"   @click="ztgg_onClick" :disabled="table_Selection === false"  class="bt" title="状态更改">状态更改</el-button>
			  </el-form-item>
				<el-tag type="danger" style="font-size: 14px;">
					<span>附件状态带有 “ </span>
					<span style="font-size: 16px;"> * </span>
					<span>” 的代表新订单未上传附件</span>
				</el-tag>
			</el-form>
		</layout-header>
		<layout>

		  <layout-content >
			<div class="gva-table-box">
			  <el-tabs v-model="activeName">
				<el-tab-pane label="订单资料列表" name="first">
					<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"
							: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="110" />
						<el-table-column   align="center" label="订单附件状态" prop="orderstatus"  width="110" />
						<el-table-column   align="left" label="客户" prop="客户编号"  width="70" />
						<el-table-column   align="left" label="订单编号" prop="订单编号"  width="115" />
						<el-table-column   align="left" label="生产款号" prop="生产款号"  width="150" />
						<el-table-column   align="left" label="款式" prop="款式"  width="110" />
						<el-table-column align="center" label="状态" prop="gd_statu" width="130" >
						    <template #default="{ row }">
						      <el-tag :type="row.gd_statu === '1-计划中' ? 'warning' : 
						                     (row.gd_statu === '已裁剪' ? 'primary' : 
						                     (row.gd_statu === '已车缝' ? '' : 
						                     (row.gd_statu === '2-生产中' ? 'success' :
						                     (row.gd_statu.includes('总检已') ? 
						                       (parseInt(row.gd_statu.match(/\d+/))?.[0] >= 95 ? 'success' : 'info') : 
						                     (row.gd_statu === '已完工' ? 'success' : 'info')))))">
						            {{ row.gd_statu === '1-计划中' ? '计划中' : 
						               (row.gd_statu === '已裁剪' ? '已裁剪' : 
						               (row.gd_statu === '已车缝' ? '已车缝' : 
						               (row.gd_statu === '2-生产中' ? '生产中' :
						               (row.gd_statu.includes('总检已') ? 
						                 (parseInt(row.gd_statu.match(/\d+/))?.[0] >= 95 ? '已完工' : row.gd_statu.replace('总检已', '总检')) : 
						               row.gd_statu)))) }}
						      </el-tag>
						    </template>
						</el-table-column>
						<el-table-column   align="left" label="订单数量" prop="订单数量"  width="90" />
						<el-table-column   align="left" label="包装完工数量" prop="工单完工数量"  width="110" />
						<el-table-column   align="left" label="单位" prop="单位"  width="55" />
						<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="360" />
						<el-table-column   align="left" label="船样合计" prop="船样合计"  width="90" />
						<el-table-column   align="left" label="船样描述" prop="船样描述"  width="200" />
						<el-table-column   align="left" label="箱唛要求" prop="箱唛要求"  width="360" />
						<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="160" />
						<el-table-column   align="left" label="落货日期" prop="落货日期"  width="100" />
						<el-table-column   align="left" label="审核" prop="审核"  width="100" />
						<el-table-column   align="left" label="审核日期" prop="审核日期"  width="160" />
					</el-table>
				</el-tab-pane>
					<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>
            </el-tabs>
			</div>

				<!-- 状态更改弹窗 -->
				<el-dialog v-model="dialogVisible" title="状态更改">
				<el-radio-group v-model="selectedStatus" >
					<el-radio 
					v-for="item in statusOptions"
					:key="item.value"
					:label="item.value"
					>
					{{ item.label }}
					</el-radio>
				</el-radio-group>
				<template #footer >
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleStatusConfirm">确认</el-button>
				</template>
				</el-dialog>

		</layout-content>
		</layout>
	  </layout>
	</div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutContent } from '@arco-design/web-vue';
  import {ref, reactive} from 'vue'
  import {UnapprovalList, Approval, Apigdstatus} from '@/api/mes/job'
  import {ElMessage} from "element-plus";
  import { useUserStore } from '@/pinia/modules/user';
  
  defineOptions({name: 'Company'})
  
  //获取登录用户信息
  const userStore = useUserStore()
  
  // 分页相关的响应式变量
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(50)
  const activeName = ref('first')
  
  // 分页
  const handleCurrentChange = (val) => {
    page.value = val;
    onSubmit();
  };
  
  // 修改页面容量 点击多少条/页
  const handleSizeChange = (val) => {
    pageSize.value = val;
    onSubmit();
  };
  
  const getUnapprovalList = async () => {
    try {
      const UnapprovalListtable = await UnapprovalList({search:'', page:page.value, limit:pageSize.value});
      const workOrderDetaildata1 = UnapprovalListtable.data.table;
      tableData1.splice(0, tableData1.length, ...workOrderDetaildata1);
      total.value = UnapprovalListtable.data.total;
    } catch (error) {
      console.error('获取数据失败:', error);
      ElMessage.error('获取数据失败');
    }
  }
  getUnapprovalList();
  
  const tableData1 = reactive([]);
  
  // =========== 按钮 ===========
  // 搜索默认为空
  const searchInfo = ref('')
  const table_Selection = ref(false)
  
  //查询按钮
  const onSubmit = async () => {
    try {
      const UnapprovalListtable = await UnapprovalList({search:searchInfo.value, page:page.value, limit:pageSize.value});
      tableData1.splice(0, tableData1.length, ...UnapprovalListtable.data.table);
      total.value = UnapprovalListtable.data.total;
    } catch (error) {
      console.error('搜索失败:', error);
      ElMessage.error('搜索失败');
    }
  };
  
  //表格复选框
  const _Uniqid = ref('');  
  const multipleTable = ref(null);
  
  const handleSelectionChange = (selection) => {
    if(selection.length >= 1) {
      table_Selection.value = true;
      // 提取 Uniqid  
      const Uniqid_ids = selection.map(item => item.Uniqid).join(',');  
      _Uniqid.value = Uniqid_ids;
    } else {
      table_Selection.value = false;
    }
  };
  
  //核批通过按钮
  const hptg_onClick = async () => {
    try {
      const Approvals = await Approval({Uniqid:_Uniqid.value, sys_id:userStore.userInfo.nickName});
      if (Approvals.code === 0) {
        searchInfo.value = '';
        _Uniqid.value = '';
        ElMessage({type: 'success', message: '核批成功'});
        
        if (multipleTable.value) {
          multipleTable.value.clearSelection();
        }
        
        await onSubmit();
      } else {
        ElMessage({type: 'error', message: '核批失败'});
      }
    } catch (error) {
      console.error('核批失败:', error);
      ElMessage.error('核批失败');
    }
  };
  
  // 状态更改弹窗
  const dialogVisible = ref(false);
  const selectedStatus = ref('');
  const statusOptions = [
    { value: '计划中', label: '计划中' },
    { value: '生产中', label: '生产中' },
    { value: '已裁剪', label: '已裁剪' },
    { value: '已车缝', label: '已车缝' },
    { value: '已完工', label: '已完工' }
  ];
  
  const handleStatusConfirm = async () => {
    if (!selectedStatus.value) {
      ElMessage.warning('请选择状态');
      return;
    }
    
    try {
      const res = await Apigdstatus({ Uniqid: _Uniqid.value, gd_statu: selectedStatus.value });
      if (res.code === 0) {
        ElMessage.success(`已更改为：${selectedStatus.value}`);
        dialogVisible.value = false;
        await onSubmit();
      } else {
        ElMessage.error('更改失败');
      }
    } catch (error) {
      console.error('状态更改失败:', error);
      ElMessage.error('更改失败');
    }
  };
  
  //状态更改按钮
  const ztgg_onClick = () => {
    dialogVisible.value = true;
  }
  </script>
  <style scoped>
  :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;
	margin: 0px !important;
  }
  .bt{
	margin-left: 2px !important;
	padding: 3px !important;
	font-size: 12px;
  }
  .gva-table-box{
	padding: 0px !important;
  }
  </style>