生产进程

src/view/yunyin/shengchanguanli/shengchanjincheng.vue

@@ -0,0 +1,486 @@
+<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: 200px;margin: 5px"></el-input>
+              <el-button type="primary" icon="search" @click="onSubmit" style="margin: 5px">查询</el-button>
+			  <!-- <el-button type="primary" icon="edit"   @click="gd_gxcltjonClick"  class="bt" title="工序产量核查">工序产量统计</el-button> -->
+			  <el-button type="primary" icon="edit"   @click="cp_gdprintonClick" class="bt" title="打印生产工单" >工单打印</el-button>
+			  <el-button type="primary" title="设置工单的状态-->【计划中】 【生产中】 【已完成】" icon="edit" @click="onStatusClick" class="bt">工单状态设置</el-button>
+			  <el-button type="primary" icon="edit"   @click="gd_gxclhconClick"  class="bt" title="工序产量核查">工序产量核查</el-button>
+            </el-form-item>
+          </el-form>
+		  
+		  <!-- 状态设置【弹窗】-->
+		   <el-dialog v-model="onstatuslist" title="工单状态设置" width="30%" style="top: 15%">
+			 <div style="width: 100%;height: 100%;">
+			   <div style="width: 100%; display: flex; align-items: center;">
+				 <el-form-item label="工单编号 :" prop="currentProcess">
+				   <el-input v-model="statusformData['gdbh']" placeholder="" />
+				 </el-form-item>
+			   </div>
+			   <div style="width: 100%; display: flex; align-items: center; margin-top: 30px;">
+				 <span>状态设置：</span>
+				 <el-radio-group v-model="status" style="margin-left: 10px;">
+				   <el-radio label="计划中">计划中</el-radio>
+				   <el-radio label="生产中">生产中</el-radio>
+				   <el-radio label="已完工">已完工</el-radio>
+				 </el-radio-group>
+			   </div>
+			   <div class="dialog-footer" style="text-align: right; margin-top: 40px;">
+				 <el-button @click="handleCancel">取消</el-button>
+				 <el-button type="primary"  @click="handleConfirm">确认</el-button>
+			   </div>
+			 </div>
+		   </el-dialog>
+
+         <!--工序产量核查【弹窗】-->
+          <el-dialog v-model="gd_gxclhclist" title="工序产量核查" style="width: 100%;height: 100%;margin: 0px;padding: 0px">
+            <el-button type="" @click="gxclhcCancel">退出</el-button>
+            <div style="width: 100%; height: 60px; padding: 0px; margin: 10px 0px 0px 0px; display: flex; align-items: center;">
+              <div style="width: 100%; height: 60px; padding: 0px;  display: flex; align-items: center;">
+                <el-form-item label="工单编号" prop="currentProcess" style="margin-right: 20px; padding: 0px">
+                  <el-input v-model="gxclhcformData['gdbh']"  @keyup.enter="gxclhcProductValue"  />
+                </el-form-item>
+              </div>
+            </div>
+            <el-table ref="paichengRef"
+                      :show-overflow-tooltip="true"
+                      :row-style="{ height: '0px' }"
+                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '0px' }"
+                      :header-cell-style="{ padding: '0px' }"
+                      style="width: 100%;height: 70vh" border tooltip-effect="dark"
+                      highlight-current-row="true"
+                      @row-click="gxclhc_tableRowClick"
+                      :data="gxclhc_Data" row-key="ID"
+                      :cell-class-name="gxclhcCellClass">
+              <template v-for="(item, idx) in gxclhc_Columns">
+                <el-table-column #default="{ row, column, $index }" align="left" :label="item.label" :width="item.width" >
+                  {{row[item.prop]}}
+                </el-table-column>
+              </template>
+            </el-table>
+          </el-dialog>
+
+        </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>
+          </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"
+                      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="120" />
+             <el-table-column  sortable align="center" label="印件代号" prop="印件代号"  width="120" />
+			 <el-table-column  sortable align="center" label="印件名称" prop="印件名称"  width="200" />
+			 <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="工序1" prop="工序1"  width="100" />
+			 <el-table-column  sortable align="center" label="工序2" prop="工序2"  width="100" />
+			 <el-table-column  sortable align="center" label="工序3" prop="工序3"  width="100" />
+			 <el-table-column  sortable align="center" label="工序4" prop="工序4"  width="100" />
+			 <el-table-column  sortable align="center" label="工序5" prop="工序5"  width="100" />
+			 <el-table-column  sortable align="center" label="工序6" prop="工序6"  width="100" />
+			 <el-table-column  sortable align="center" label="工序7" prop="工序7"  width="100" />
+			 <el-table-column  sortable align="center" label="工序8" prop="工序8"  width="100" />
+			 <el-table-column  sortable align="center" label="工序9" prop="工序9"  width="100" />
+			 <el-table-column  sortable align="center" label="工序10" prop="工序10"  width="100" />
+			 <el-table-column  sortable align="center" label="工序11" prop="工序11"  width="100" />
+			 <el-table-column  sortable align="center" label="工序12" prop="工序12"  width="100" />
+			 <el-table-column  sortable align="center" label="工序13" prop="工序13"  width="100" />
+			 <el-table-column  sortable align="center" label="工序14" prop="工序14"  width="100" />
+			 <el-table-column  sortable align="center" label="工序15" prop="工序15"  width="100" />
+			 <el-table-column  sortable align="center" label="工序16" prop="工序16"  width="100" />
+			 <el-table-column  sortable align="center" label="工序17" prop="工序17"  width="100" />
+            </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>
+	<!-- 工单打印 -->
+	<PrintPage ref="printPageRef" />
+  </div>
+</template>
+<script setup>
+// 全量引入格式化工具 请按需保留
+import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+
+import {ref, reactive} from 'vue'
+import {
+	jcgetTab,
+	workOrderDetail,
+	getOrderProcessCount
+	} 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 response = await jcgetTab();
+	console.log("左侧菜单列表↓");
+	console.log(response);
+	const formattedData = [];
+	for (const category in response.data) {
+	  const categoryNode = {
+	    label: category, // 使用分类名称作为节点标签
+	    children: response.data[category].map(item => ({
+	      label: item, // 将客户信息格式化为节点标签
+	    }))
+	  };
+	  formattedData.push(categoryNode);
+	}
+	treeData.value = formattedData;
+  } catch (error) {
+    console.error(error)
+  }
+}
+getDepartmentdata();
+
+//点击左侧树形 获取右侧table列表
+const tableData = reactive([]);
+const _code = ref(null);  //左侧菜单编号
+const handleNodeClick = async (node) => {
+	if(node.label === '印刷工单'  || node.label === '糊盒工单'){return false;}
+	console.log(node.label.substring(0, 5));
+	_code.value = node.label.substring(0, 5);
+	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 onstatuslist = ref(false);
+const statusformData = reactive({gdbh: '',});
+const status = ref('计划中'); // 默认选择
+const onStatusClick = () => {
+  if(_Gd_gdbh.value === null || _Gd_gdbh.value === ''){
+    onstatuslist.value = false;
+    ElMessage({
+      type: 'warning',
+      message: '请选择树形后，再操作此功能'
+    })
+  }else{
+    statusformData['gdbh'] = _Gd_gdbh.value;
+    onstatuslist.value = true;
+  }
+};
+//工单状态设置【放弃按钮】
+const handleCancel = () => {
+  onstatuslist.value = false;
+};
+//工单状态设置【执行按钮】
+const handleConfirm = async () => {
+  //工单编号
+  let workOrder = statusformData['gdbh'];
+  //状态
+  let statusCode;
+  if (status.value === '计划中') {
+    statusCode = "3-计划中";
+  } else if (status.value === '生产中') {
+    statusCode = "2-生产中";
+  }else if (status.value === '已完工') {
+    statusCode = "1-已完工";
+  }
+  const StatusEditdata = await StatusEdit({workOrder:workOrder,status:statusCode});
+  if (StatusEditdata.code === 0) {
+    ElMessage({type: 'success',message: '更新成功'})
+  } else {
+    ElMessage({type: 'error',message: '更新失败'})
+  }
+  onstatuslist.value = false;
+};
+
+//=========工单打印===========
+const printPageRef = ref()
+const cp_gdprintonClick = () => {
+  printPageRef.value.open(_Gd_gdbh.value)
+}
+
+//=========工序产量核查===========
+const gd_gxclhclist = ref(false);
+const gxclhc_Data = ref([]);
+const gxclhc_Columns = ref(
+    [
+      { label: '印件及工序名称', prop: 'concatenatedData', width: '380' },
+      // { label: '印件', prop: 'Gy0_yjno', width: '130' },
+      // { label: '工序', prop: 'Gy0_gxh', width: '130' },
+      // { label: '名称', prop: 'Gy0_gxmc', width: '130' },
+      { label: '工序计划产量', prop: 'Gy0_计划接货数', width: '120' },
+      { label: '联数', prop: 'Gy0_ls', width: '70' },
+      { label: '折算车头产量', prop: '折算车头产量', width: '120' },
+      { label: '实际上报产量', prop: 'sczl_cl', width: '120' },
+      { label: '制程废品', prop: 'sczl_zcfp', width: '120' },
+      { label: '制程废品率', prop: '制程废品率', width: '120' },
+      { label: '来料异常', prop: '来料异常', width: '90' },
+      { label: '流程单数', prop: 'process_num', width: '90' },
+      { label: '当前设备', prop: 'Gy0_sbbh', width: '120' },
+      { label: '工序状态', prop: 'PD_WG', width: '90'},
+      { label: '首板生产日期', prop: 'sczl_rq', width: '160' },
+    ]
+)
+const gxclhcformData = reactive({
+  gdbh: '',
+  gdmc: '',
+});
+// 工序产量核查按钮
+const gd_gxclhconClick = async () => {
+  if(_Gd_gdbh.value === '' || _Gd_gdbh.value === null){
+    ElMessage({type: 'warning',message: '请选择具体的工单，在进行操作'})
+    return false;
+  }
+  gxclhcformData['gdbh'] = _Gd_gdbh.value;
+  gd_gxclhclist.value = true;
+  _getOrderProcessCount();
+};
+//工序产量核查回车
+const gxclhcProductValue = async () => {
+	console.log("工序产量核查回车")
+  _getOrderProcessCount();
+}
+//工序产量核查退出
+const gxclhcCancel = async () => {
+  gd_gxclhclist.value = false;
+};
+//工序产量核查方法接口
+const _getOrderProcessCount = async () => {
+  const order = gxclhcformData['gdbh'];
+  const getOrderProcessCount_list = await getOrderProcessCount({order:order});
+  const concatenatedData = getOrderProcessCount_list.data.map(item => {
+    // 优化后的代码，使用模板字符串连接字段值并在单个数字前添加零
+    const formattedYjno = item.Gy0_yjno.length === 1 ? `0${item.Gy0_yjno}` : item.Gy0_yjno;
+    const formattedGxh = item.Gy0_gxh.length === 1 ? `0${item.Gy0_gxh}` : item.Gy0_gxh;
+    const concatenatedValue = `${formattedYjno}-${formattedGxh} ${item.Gy0_gxmc} 【${item.Add_gxmc} 】`;
+    return {
+      ...item,
+      concatenatedData: concatenatedValue, // 使用新属性名
+    };
+  });
+  gxclhc_Data.value = concatenatedData;
+};
+
+//工序产量核查
+const gxclhcCellClass = ({row, column, rowIndex, columnIndex}) =>{
+  if (column.label === '实际上报产量' ||column.label === '制程废品'  || column.label === '制程废品率' ||
+      column.label === '来料异常' || column.label === '流程单数' || column.label === '当前设备') {
+    return 'lan-plan-usage-lows';
+  }
+  if (column.label === '折算车头产量') {
+    return 'gxclhc—color-column-red';
+  }
+  // 如果不是 'PD_WG' 列，返回空字符串或其他样式类
+  if (column.label === '工序状态'){
+    if(row['PD_WG'] === '完工'){
+      return 'lan-plan-usage-lowshui';
+    }else{
+      return 'pczccolor-column-lan';
+    }
+  }
+}
+
+
+// 搜索默认为空
+const searchInfo = ref('')
+//点击【查询】按钮
+const onSubmit = () => {
+  _department_code.value = '';
+  if(searchInfo.value === ''){
+    tableData.length = 0;
+  }else{
+	  _code.value = '';
+    _workOrderDetailList();
+  }
+};
+
+//获取员工信息列表
+const _workOrderDetailList = async ()=>{
+  let params = {}
+  params.search = searchInfo.value;
+  params.order = _code.value;
+  // params.limit = 200;
+  // params.page = 1;
+    try {
+    const workOrderDetaildata = await workOrderDetail(params);
+    console.log(workOrderDetaildata)
+    tableData.splice(0,tableData.length,...workOrderDetaildata.data);
+    total.value = WorkListdata.data.total;
+  } 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; /* 调整左侧输入框的宽度 */
+}
+
+/* 媒体查询，根据需要调整断点 */
+@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>