| <template> | 
|   <div class="app-container"> | 
|     <el-form | 
|       class="responsive-form" | 
|       :model="queryParams" | 
|       ref="queryRef" | 
|       :inline="true" | 
|       v-show="showSearch" | 
|       label-position="left" | 
|     > | 
|       <el-row :gutter="20"> | 
|         <el-col :span="8"> | 
|           <el-form-item | 
|             :style="{ width: '100%'  }"  | 
|             :label="$t('plan.query.requireTraceID')" | 
|             prop="requireTrackId" | 
|           > | 
|             <el-input | 
|               v-model="queryParams.requireTrackId" | 
|               :placeholder="`${$t('common.common.placeholder')}${$t('plan.query.requireTraceID')}`" | 
|               clearable | 
|               @keyup.enter="handleQuery" | 
|             /> | 
|           </el-form-item> | 
|         </el-col> | 
|         <el-col :span="8"> | 
|           <el-form-item :style="{ width: '100%'  }" :label="$t('plan.query.itemNumber')" prop="bomLineCode"> | 
|             <el-input | 
|               v-model="queryParams.bomLineCode" | 
|               :placeholder="`${$t('common.common.placeholder')}${$t( | 
|                 'plan.query.itemNumber' | 
|               )}`" | 
|               clearable | 
|               @keyup.enter="handleQuery" | 
|             /> | 
|           </el-form-item> | 
|         </el-col> | 
|         <el-col :span="8" style="text-align: right"> | 
|           <el-form-item class="column-with-margin"> | 
|             <el-button type="primary" icon="Search" @click="handleQuery">{{ | 
|               $t("common.common.query") | 
|             }}</el-button> | 
|             <el-button icon="Refresh" @click="resetQuery">{{ | 
|               $t("common.common.reset") | 
|             }}</el-button> | 
|           </el-form-item> | 
|         </el-col> | 
|       </el-row> | 
|     </el-form> | 
|   | 
|     <el-row :gutter="10" class="mb8"> | 
|       <el-col :span="1.5"> | 
|         <el-button | 
|           type="warning" | 
|           plain | 
|           icon="Download" | 
|           @click="handleExport" | 
|           v-hasPermi="['Aps:ApsPlateStandardRequire:supplyGapListExport']" | 
|           >{{ $t("common.common.export") }}</el-button | 
|         > | 
|       </el-col> | 
|       <right-toolbar | 
|         v-model:showSearch="showSearch" | 
|         @queryTable="getList" | 
|       ></right-toolbar> | 
|     </el-row> | 
|     <HxlhTable | 
|       style="width: 100%" | 
|       :columns="columns" | 
|       :data="gapList" | 
|       :loading="loading" | 
|       :height="height" | 
|       ref="tableRef" | 
|       :page="page" | 
|       @changePageNo="changePageNo" | 
|       @changePageSize="changePageSize" | 
|       @on-checkbox="handleCheckboxChange" | 
|       class="auto-height-grid" | 
|     > | 
|     </HxlhTable> | 
|   </div> | 
| </template> | 
|   | 
| <script setup name="SheetMetalSupplyGap"> | 
| import HxlhTable from "@/components/HxlhTable"; | 
| import { | 
|   supplyGapList | 
| } from "@/api/basicData/sheetMetalConfig/sheetMetalConfig"; | 
| import { listAll_plant } from "@/api/basicData/plant"; | 
| import { useI18n } from "vue-i18n"; //要在js中使用国际化 | 
| const { t, locale } = useI18n(); | 
| const { proxy } = getCurrentInstance(); | 
| const tableRef = ref(); | 
| const gapList = ref([]); | 
| const loading = ref(true); | 
| const showSearch = ref(true); | 
| const ids = ref([]); | 
| const single = ref(true); | 
| const multiple = ref(true); | 
| const total = ref(0); | 
| const title = ref(""); | 
| const data = reactive({ | 
|   queryParams: { | 
|     pageNum: 1, | 
|     pageSize: 10, | 
|     bomLineCode: null, | 
|     requireTrackId: null | 
|   }, | 
| }); | 
| const { queryParams } = toRefs(data); | 
| const plantList = ref([]); | 
| const height = ref(document.documentElement.clientHeight - 220 + "px;"); | 
| // 表格配置-列表 | 
| const columns = ref([]); | 
| // 分页属性 | 
| const page = ref({ | 
|   total: 0, | 
|   current: 1, | 
|   size: 10, | 
| }); | 
| watch( | 
|   locale, | 
|   (newLocale) => { | 
|     columns.value = [ | 
|       { | 
|         title: t("plan.table.requireID"), | 
|         field: "id", | 
|         width: "180", | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.requireTraceID"), | 
|         field: "requireTrackId", | 
|         width: "180", | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.itemNumber"), | 
|         field: "bomLineCode", | 
|         width: "auto", | 
|         align: "center", | 
|       }, | 
|       // { | 
|       //   title: t("plan.table.bomLowCode"), | 
|       //   field: "bomLineLevel", | 
|       //   width: 200, | 
|       //   align: "center", | 
|       // }, | 
|       // { | 
|       //   title: t("plan.table.matchState"), | 
|       //   field: "matchState", | 
|       //   width: 200, | 
|       //   align: "center", | 
|       // }, | 
|       // { | 
|       //   title: t("plan.table.matchPattern"), | 
|       //   field: "matchMode", | 
|       //   width: 200, | 
|       //   align: "center", | 
|       // }, | 
|       { | 
|         title: t("plan.table.unmatchedDemandQuantity"), | 
|         field: "unmatchedDemandAmount", | 
|         width: "auto", | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.planStartDay"), | 
|         field: "startDate", | 
|         width: 162, | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.planEndDayDate"), | 
|         field: "completeDate", | 
|         width: 162, | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.requirementDate"), | 
|         field: "demandDate", | 
|         width: 162, | 
|         align: "center", | 
|       }, | 
|       { | 
|         title: t("plan.table.applicableFactories"), | 
|         field: "orgCode", | 
|         width: "auto", | 
|         align: "center", | 
|         formatter: ({ cellValue, row, column }) => { | 
|           if (cellValue) { | 
|             for (let i = 0; i < plantList.value.length; i++) { | 
|               if (cellValue === plantList.value[i].plantCode) { | 
|                 return plantList.value[i].plantName; | 
|               } | 
|             } | 
|           } | 
|         }, | 
|       }, | 
|       { | 
|         title: t("plan.table.productionBase"), | 
|         field: "productionBase", | 
|         width: "auto", | 
|         align: "center", | 
|       }, | 
|     ]; | 
|   }, | 
|   { immediate: true, deep: true } | 
| ); | 
| /** 查询日历管理列表 */ | 
| function getList() { | 
|   loading.value = true; | 
|   supplyGapList(queryParams.value).then((response) => { | 
|     gapList.value = response.rows; | 
|     page.value.total = response.total; | 
|     loading.value = false; | 
|   }).catch(()=>{ | 
|     loading.value = false; | 
|   }); | 
|   listAll_plant({}).then(response=>{ | 
|     plantList.value = response.data; | 
|   }) | 
| } | 
|   | 
| /** 搜索按钮操作 */ | 
| function handleQuery() { | 
|   queryParams.value.pageNum = 1; | 
|   page.value.current = 1 | 
|   getList(); | 
| } | 
|   | 
| /** 重置按钮操作 */ | 
| function resetQuery() { | 
|   proxy.resetForm("queryRef"); | 
|   handleQuery(); | 
| } | 
| /** 导出按钮操作 */ | 
| function handleExport() { | 
|   proxy.download( | 
|     "aps/ApsPlateStandardRequire/supplyGapListExport", | 
|     { | 
|       ...queryParams.value, | 
|     }, | 
|     `supplyGapListExport_${new Date().getTime()}.xlsx` | 
|   ); | 
| } | 
| function changePageNo(currentPage) { | 
|   queryParams.value.pageNum = currentPage; | 
|   page.value.current = currentPage; | 
|   getList(); | 
| } | 
| function changePageSize(pageSize) { | 
|   page.value.current = 1; | 
|   queryParams.value.pageNum = 1; | 
|   queryParams.value.pageSize = pageSize; | 
|   getList(); | 
| } | 
| onMounted(() => { | 
|   getList(); | 
| }); | 
| </script> | 
| <style lang="scss" scoped> | 
| .column-with-margin { | 
|   margin-right: 0px; | 
| } | 
| .title_bar_line { | 
|   display: flex; | 
|   justify-content: flex-start; | 
|   align-items: center; | 
|   color: #333; | 
|   margin-bottom: 10px; | 
|   .line_short { | 
|     width: 5%; | 
|     height: 1px; | 
|     margin-right: 20px; | 
|     border-top: 1px solid #ddd; | 
|   } | 
|   .line_long { | 
|     width: 60%; | 
|     height: 1px; | 
|     margin-left: 20px; | 
|     border-top: 1px solid #ddd; | 
|   } | 
| } | 
| .week_flex { | 
|   display: flex; | 
|   justify-content: flex-start; | 
|   align-content: center; | 
|   color: #606266; | 
|   font-weight: 700; | 
|   margin-left: 20px; | 
|   &.mt20 { | 
|     margin-top: 20px; | 
|     margin-left: 0 !important; | 
|   } | 
|   .week_flex_item { | 
|     &:nth-child(1) { | 
|       margin-top: 5px; | 
|     } | 
|     &:nth-child(2) { | 
|       margin-left: 20px; | 
|     } | 
|   } | 
| } | 
| .factory_use_item { | 
|   margin-top: 10px; | 
| } | 
| .mart5 { | 
|   margin-top: 5px; | 
| } | 
| .custom-height { | 
|   height: 200px; /* 或者使用 min-height */ | 
| } | 
| .auto-height-grid .xe-body .xe-body--row { | 
|   height: auto; /* 或者使用 min-height */ | 
| } | 
| </style> |