<template> 
 | 
  <div class="app-container"> 
 | 
    <el-row :gutter="20"> 
 | 
      <el-col> 
 | 
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px"> 
 | 
          <el-row :gutter="20"> 
 | 
            <el-col :span="12"> 
 | 
              <el-form-item label="工单号" prop="num"> 
 | 
                <el-input 
 | 
                    v-model="queryParams.workOrderNo" 
 | 
                    placeholder="请输入钣金计划工单号" 
 | 
                    clearable 
 | 
                    @keyup.enter="handleQuery" 
 | 
                /> 
 | 
              </el-form-item> 
 | 
            </el-col> 
 | 
            <el-col  :span="12"  style="text-align: right;"> 
 | 
              <el-form-item> 
 | 
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> 
 | 
                <el-button icon="Refresh" @click="resetQuery">重置</el-button> 
 | 
              </el-form-item> 
 | 
            </el-col> 
 | 
          </el-row> 
 | 
        </el-form> 
 | 
      </el-col> 
 | 
    </el-row> 
 | 
    <el-row :gutter="10" class="mb8"> 
 | 
  
 | 
      <el-col :span="1.5"> 
 | 
        <el-button 
 | 
            type="warning" 
 | 
            plain 
 | 
            icon="Download" 
 | 
            @click="handleExport" 
 | 
            v-hasPermi="['apsPlateProcessStat:export']" 
 | 
        >导出</el-button> 
 | 
      </el-col> 
 | 
      <el-col :span="1.5"> 
 | 
        <el-button 
 | 
            type="success" 
 | 
            plain 
 | 
            icon="Edit" 
 | 
            @click="handleUpdate" 
 | 
            v-hasPermi="['apsPlateProcessStat:edit']" 
 | 
        >更新</el-button> 
 | 
      </el-col> 
 | 
  
 | 
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> 
 | 
    </el-row> 
 | 
  
 | 
    <HxlhTable 
 | 
        style="width: 100%" 
 | 
        :columns="columns" 
 | 
        :data="aps_plate_process_statList" 
 | 
        :loading="loading" 
 | 
        :height="height" 
 | 
    > 
 | 
    </HxlhTable> 
 | 
    <!-- 添加或修改钣金统计对话框 --> 
 | 
    <el-dialog :title="title" v-model="open" width="500px" append-to-body> 
 | 
      <el-form ref="aps_plate_process_statRef" :model="form" :rules="rules" label-width="80px"> 
 | 
        <el-form-item label="排序" prop="num"> 
 | 
          <el-input v-model="form.num" placeholder="请输入排序" /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="生产数量" prop="productionQuantity"> 
 | 
          <el-input v-model="form.productionQuantity" placeholder="请输入生产数量" /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="标准工时" prop="standardTime"> 
 | 
          <el-input v-model="form.standardTime" placeholder="请输入标准工时" /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="工序总工时" prop="processTotalTime"> 
 | 
          <el-input v-model="form.processTotalTime" placeholder="请输入工序总工时" /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="设计工时" prop="designTimes"> 
 | 
          <el-input v-model="form.designTimes" placeholder="请输入设计工时" /> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <template #footer> 
 | 
        <div class="dialog-footer"> 
 | 
          <el-button type="primary" @click="submitForm">确 定</el-button> 
 | 
          <el-button @click="cancel">取 消</el-button> 
 | 
        </div> 
 | 
      </template> 
 | 
    </el-dialog> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script setup name="Aps_plate_process_stat"> 
 | 
import { listPlateStat,updateStat } from "@/api/mainPlan/plateProcessStat"; 
 | 
import HxlhTable from "@/components/HxlhTable/index.vue"; 
 | 
import { getToken } from "@/utils/auth"; 
 | 
import { ref } from "vue"; 
 | 
import {ElMessage} from "element-plus"; 
 | 
const { proxy } = getCurrentInstance(); 
 | 
  
 | 
const aps_plate_process_statList = ref([]); 
 | 
const open = ref(false); 
 | 
const loading = ref(true); 
 | 
const showSearch = ref(true); 
 | 
const single = ref(true); 
 | 
const multiple = ref(true); 
 | 
const total = ref(0); 
 | 
const title = ref(""); 
 | 
const height = ref(document.documentElement.clientHeight - 270 + "px;") 
 | 
  
 | 
  
 | 
const data = reactive({ 
 | 
  form: {}, 
 | 
  queryParams: { 
 | 
    pageNum: 1, 
 | 
    pageSize: 10, 
 | 
    workOrderNo: null, 
 | 
    processName: null, 
 | 
    num: null, 
 | 
    routeProcessNumber: null, 
 | 
    currentProcessNumber: null, 
 | 
    productionQuantity: null, 
 | 
    standardTime: null, 
 | 
    processTotalTime: null, 
 | 
    processPlanEndDay: null, 
 | 
    computePlanEndDay: null, 
 | 
    designTimes: null, 
 | 
    batchNumber: null, 
 | 
  }, 
 | 
  rules: { 
 | 
  } 
 | 
}); 
 | 
  
 | 
const { queryParams, form, rules } = toRefs(data); 
 | 
  
 | 
  
 | 
// 表格配置 
 | 
const columns = ref([ 
 | 
/*  { type: 'seq', title: '序号', width: 60 },*/ 
 | 
  { 
 | 
    title: '工单号', 
 | 
    field: 'workOrderNo', 
 | 
    width: 150, 
 | 
  } , 
 | 
  { 
 | 
    title: '工序名称', 
 | 
    field: 'processName', 
 | 
  }, 
 | 
  { 
 | 
    title: '工序号', 
 | 
    field: 'routeProcessNumberTxt', 
 | 
    width: 100, 
 | 
  }, 
 | 
  { 
 | 
    title: '当前工序号', 
 | 
    field: 'currentProcessNumberTxt', 
 | 
    width: 100, 
 | 
  }, 
 | 
  { 
 | 
    title: '生产数量', 
 | 
    field: 'productionQuantity', 
 | 
    width: 80, 
 | 
  }, 
 | 
  { 
 | 
    title: '标准工时', 
 | 
    field: 'standardTime', 
 | 
    width: 80, 
 | 
  }, 
 | 
  { 
 | 
    title: '工序总工时', 
 | 
    field: 'processTotalTime', 
 | 
    width: 80, 
 | 
  
 | 
  }, 
 | 
  { 
 | 
    title: '计划开工日', 
 | 
    field: 'processPlanStartDaytxt', 
 | 
    width: 140, 
 | 
    type:'html' 
 | 
  }, 
 | 
  { 
 | 
    title: '计划完工日', 
 | 
    field: 'processPlanEndDaytxt', 
 | 
    width: 140, 
 | 
    type:'html' 
 | 
  }, 
 | 
  { 
 | 
    title: '订单完工日', 
 | 
    field: 'orderPlanEndDay', 
 | 
    width: 120, 
 | 
    format: 'YYYY-MM-DD' 
 | 
  } 
 | 
]); 
 | 
  
 | 
  
 | 
  
 | 
/** 查询钣金统计列表 */ 
 | 
function getList() { 
 | 
  loading.value = true; 
 | 
  listPlateStat(queryParams.value).then(response => { 
 | 
    const listValue = response.rows; 
 | 
    listValue.forEach(listItem => { 
 | 
      listItem[`processPlanStartDaytxt`]= listItem.warning? `<font color="red">${listItem.processPlanStartDay}</font>`  :listItem.processPlanStartDay; 
 | 
      listItem[`processPlanEndDaytxt`]= listItem.warning? `<font color="red">${listItem.processPlanEndDay}</font>`  :listItem.processPlanEndDay; 
 | 
      listItem[`routeProcessNumberTxt`]= listItem.routeProcessNumber.toString().padStart(3, '0'); 
 | 
      listItem[`currentProcessNumberTxt`]= listItem.currentProcessNumber.toString().padStart(3, '0'); 
 | 
  
 | 
  
 | 
    }); 
 | 
    aps_plate_process_statList.value =listValue 
 | 
    debugger; 
 | 
    total.value = response.total; 
 | 
    loading.value = false; 
 | 
  }); 
 | 
} 
 | 
  
 | 
// 取消按钮 
 | 
function cancel() { 
 | 
  open.value = false; 
 | 
  reset(); 
 | 
} 
 | 
  
 | 
// 表单重置 
 | 
function reset() { 
 | 
  form.value = { 
 | 
    id: null, 
 | 
    workOrderNo: null, 
 | 
    processName: null, 
 | 
    num: null, 
 | 
    routeProcessNumber: null, 
 | 
    currentProcessNumber: null, 
 | 
    productionQuantity: null, 
 | 
    standardTime: null, 
 | 
    processTotalTime: null, 
 | 
    processPlanEndDay: null, 
 | 
    computePlanEndDay: null, 
 | 
    designTimes: null, 
 | 
    batchNumber: null, 
 | 
    createBy: null, 
 | 
    delFlag: null 
 | 
  }; 
 | 
  proxy.resetForm("aps_plate_process_statRef"); 
 | 
} 
 | 
  
 | 
/** 搜索按钮操作 */ 
 | 
function handleQuery() { 
 | 
  queryParams.value.pageNum = 1; 
 | 
  getList(); 
 | 
} 
 | 
  
 | 
/** 重置按钮操作 */ 
 | 
function resetQuery() { 
 | 
  queryParams.value.workOrderNo =''; 
 | 
  proxy.resetForm("queryRef"); 
 | 
  handleQuery(); 
 | 
} 
 | 
  
 | 
// 多选框选中数据 
 | 
function handleSelectionChange(selection) { 
 | 
  ids.value = selection.map(item => item.id); 
 | 
  single.value = selection.length != 1; 
 | 
  multiple.value = !selection.length; 
 | 
} 
 | 
  
 | 
/** 新增按钮操作 */ 
 | 
function handleAdd() { 
 | 
  reset(); 
 | 
  open.value = true; 
 | 
  title.value = "添加钣金统计"; 
 | 
} 
 | 
  
 | 
/** 修改按钮操作 */ 
 | 
function handleUpdate(row) { 
 | 
  reset(); 
 | 
  updateStat().then(response => { 
 | 
    form.value = response.data; 
 | 
    ElMessage({ 
 | 
      message: '数据更新成功', 
 | 
      type: 'success', 
 | 
    }) 
 | 
    getList(); 
 | 
  }); 
 | 
} 
 | 
  
 | 
/** 提交按钮 */ 
 | 
function submitForm() { 
 | 
  proxy.$refs["aps_plate_process_statRef"].validate(valid => { 
 | 
    if (valid) { 
 | 
      if (form.value.id != null) { 
 | 
        updateAps_plate_process_stat(form.value).then(response => { 
 | 
          proxy.$modal.msgSuccess("修改成功"); 
 | 
          open.value = false; 
 | 
          getList(); 
 | 
        }); 
 | 
      } else { 
 | 
        addAps_plate_process_stat(form.value).then(response => { 
 | 
          proxy.$modal.msgSuccess("新增成功"); 
 | 
          open.value = false; 
 | 
          getList(); 
 | 
        }); 
 | 
      } 
 | 
    } 
 | 
  }); 
 | 
} 
 | 
  
 | 
/** 删除按钮操作 */ 
 | 
function handleDelete(row) { 
 | 
  const _ids = row.id || ids.value; 
 | 
  proxy.$modal.confirm('是否确认删除钣金统计编号为"' + _ids + '"的数据项?').then(function() { 
 | 
    return delAps_plate_process_stat(_ids); 
 | 
  }).then(() => { 
 | 
    getList(); 
 | 
    proxy.$modal.msgSuccess("删除成功"); 
 | 
  }).catch(() => {}); 
 | 
} 
 | 
  
 | 
/** 导出按钮操作 */ 
 | 
function handleExport() { 
 | 
  proxy.download('/aps/plateProcessStat/export', { 
 | 
    ...queryParams.value 
 | 
  }, `aps_plate_process_stat_${new Date().getTime()}.xlsx`) 
 | 
} 
 | 
const headerCellClassName = ({ column }) => { 
 | 
  if (column.field === 'name') { 
 | 
    return 'col-blue' 
 | 
  } 
 | 
  return null 
 | 
} 
 | 
const rowClassName = ({ rowIndex }) => { 
 | 
  if ([2, 3, 5].includes(rowIndex)) { 
 | 
    return 'row-green' 
 | 
  } 
 | 
  return null 
 | 
} 
 | 
const cellClassName = ({ row, column }) => { 
 | 
  if (column.field === 'processPlanStartDay'||column.field === 'processPlanEndDay') { 
 | 
    if (row.warning) { 
 | 
      return 'col-orange' 
 | 
    } 
 | 
  } 
 | 
  return null 
 | 
} 
 | 
getList(); 
 | 
</script> 
 | 
<style lang="scss" scoped> 
 | 
::v-deep(.mytable-style.vxe-table .vxe-body--row.row-green) { 
 | 
  background-color: #187; 
 | 
  color: #fff; 
 | 
} 
 | 
::v-deep(.mytable-style.vxe-table .vxe-header--column.col-blue) { 
 | 
  background-color: #2db7f5; 
 | 
  color: #fff; 
 | 
} 
 | 
::v-deep(.mytable-style.vxe-table .vxe-body--column.col-red) { 
 | 
  background-color: red; 
 | 
  color: #fff; 
 | 
} 
 | 
</style> 
 |