<template>
|
<div class="app-container">
|
<el-form
|
:model="queryParams"
|
ref="queryRef"
|
:rules="rules"
|
:inline="true"
|
v-show="showSearch"
|
label-position="left"
|
>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item :style="{ width: '100%' }" :label="$t('plan.query.itemNumber')" prop="itemCode">
|
<el-input
|
v-model="queryParams.itemCode"
|
:placeholder="`${$t('common.common.placeholder')}${$t(
|
'plan.query.itemNumber'
|
)}`"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item
|
:style="{ width: '100%' }"
|
:label="$t('plan.table.applicableFactories')"
|
prop="orgCode"
|
>
|
<el-select
|
clearable
|
v-model="queryParams.orgCode"
|
:placeholder="`${$t('common.common.placeholder')}${$t(
|
'plan.table.applicableFactories'
|
)}`"
|
>
|
<el-option
|
v-for="plant in plantList"
|
:key="plant.id"
|
:label="plant.plantName"
|
:value="plant.plantCode"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="locale === 'zh' ? 11 : 6" 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="success"
|
plain
|
icon="Refresh"
|
:disabled="loadingRefresh"
|
@click="handleRefresh"
|
v-hasPermi="['Aps:ApsBomHeader:refreshBomData']"
|
>{{ $t("common.common.update") }}</el-button
|
>
|
</el-col>
|
<right-toolbar
|
v-model:showSearch="showSearch"
|
@queryTable="handleQuery"
|
@resetTable="resetQuery"
|
></right-toolbar>
|
</el-row>
|
|
<HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="bomList"
|
:loading="loading"
|
:height="height"
|
@on-checkbox="handleCheckboxChange"
|
:page="page"
|
@changePageNo="changePageNo"
|
@changePageSize="changePageSize"
|
>
|
<!-- :expand-config="expandConfig"
|
:subGridOptions="subGridOptions" -->
|
<template #buttons="{ row }">
|
<el-button
|
type="primary"
|
link
|
@click="handleCheckView(row)"
|
v-hasPermi="['Aps:apsBom:list']"
|
>{{$t("common.common.view")}}</el-button
|
>
|
</template>
|
</HxlhTable>
|
<el-dialog
|
:title="$t('common.common.viewDetails')"
|
v-model="openDialog"
|
width="900px"
|
append-to-body
|
style="height: 400px; overflow: hidden"
|
>
|
<HxlhTable
|
style="width: 100%"
|
:columns="subGridOptions"
|
:data="subList"
|
:loading="loadingSub"
|
:height="'280px;'"
|
>
|
</HxlhTable>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="openDialog = false">{{
|
$t("common.common.close")
|
}}</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="Bom">
|
import {
|
listApsBomHeaderList,
|
listApsBomLineList,
|
listApsBomRefreshBomDataList,
|
} from "@/api/basicData/bom/bom.js";
|
import { listAll_plant } from "@/api/basicData/plant";
|
import HxlhTable from "@/components/HxlhTable/index.vue";
|
// import { ElMessage } from "element-plus";
|
import { useI18n } from "vue-i18n"; //要在js中使用国际化
|
const { t, locale } = useI18n();
|
const { proxy } = getCurrentInstance();
|
// 分页属性
|
const page = ref({
|
total: 0,
|
current: 1,
|
size: 10,
|
});
|
const plantList = ref([]);
|
const bomList = ref([]);
|
const subList = ref([]);
|
const loading = ref(false);
|
const loadingSub = ref(false);
|
const loadingRefresh = ref(false);
|
const showSearch = ref(true);
|
const total = ref(0);
|
const height = ref(document.documentElement.clientHeight - 220 + "px;");
|
const heightSub = ref(document.documentElement.clientHeight - 320 + "px;");
|
// 表格配置
|
const columns = ref([]);
|
const subGridOptions = ref([]);
|
const openDialog = ref(false);
|
const data = reactive({
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
itemCode: null,
|
orgCode: "",
|
},
|
rules: {},
|
});
|
|
const { queryParams, rules } = toRefs(data);
|
watch(
|
locale,
|
(newLocale) => {
|
rules.value = {
|
itemCode: [
|
{
|
required: true,
|
message: `${t("common.common.placeholder")}${t(
|
"plan.query.itemNumber"
|
)}`,
|
trigger: "blur",
|
},
|
],
|
};
|
columns.value = [
|
// {
|
// field: "expand",
|
// type: "expand",
|
// width: 60,
|
// align: "center",
|
// slots: { content: "expandContent" },
|
// },
|
// { type: "checkbox", width: 60, align: "center" },
|
{
|
title: "BOM ID",
|
field: "bomHeaderId",
|
},
|
{
|
title: t("basic.table.parentPartNumber"),
|
field: "itemCode",
|
},
|
{
|
title: t("basic.table.parentMaterialDescription"),
|
field: "itemName",
|
},
|
{
|
title: t("basic.table.effectiveDate"),
|
field: "startDate",
|
},
|
{
|
title: t("basic.table.expiringDate"),
|
field: "endDate",
|
},
|
{
|
title: t("basic.table.integrationDate"),
|
field: "createTime",
|
},
|
{
|
title: t("basic.table.applicableFactories"),
|
field: "orgCode",
|
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("common.common.operate"),
|
width: 100,
|
fixed: "right",
|
slots: { default: "buttons" },
|
align: "center",
|
},
|
];
|
subGridOptions.value = [
|
{
|
title: t("plan.table.bomItemID"),
|
field: "bomLineId",
|
width: 150,
|
align: "center",
|
},
|
{
|
title: "BOM ID",
|
field: "bomHeaderId",
|
width: 150,
|
align: "center",
|
},
|
{
|
title: t("plan.table.itemNumber"),
|
field: "itemCode",
|
width: 100,
|
align: "center",
|
},
|
{
|
title: t("basic.table.materialDescription"),
|
field: "itemName",
|
width: 100,
|
align: "center",
|
},
|
{
|
title: t("basic.table.usage"),
|
field: "num",
|
width: 100,
|
align: "center",
|
},
|
{
|
title: t("basic.table.effectiveDate"),
|
field: "startDate",
|
width: 150,
|
align: "center",
|
},
|
{
|
title: t("basic.table.expiringDate"),
|
field: "endDate",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: t("basic.table.integrationDate"),
|
field: "createTime",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: t("basic.table.applicableFactories"),
|
field: "orgCode",
|
width: 90,
|
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;
|
}
|
}
|
}
|
},
|
},
|
];
|
},
|
{ immediate: true, deep: true }
|
);
|
async function handleRefresh() {
|
loadingRefresh.value = true;
|
const res = await listApsBomRefreshBomDataList();
|
if (res.code == 200) {
|
ElMessage({
|
message: t("plan.message.update"),
|
type: "success",
|
});
|
loadingRefresh.value = false;
|
getList();
|
} else {
|
loadingRefresh.value = false;
|
}
|
}
|
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();
|
}
|
|
/** 查询零件计划管理列表 */
|
function getList() {
|
page.value.current = 1;
|
queryParams.value.pageNum = 1;
|
loading.value = true;
|
listApsBomHeaderList(queryParams.value)
|
.then((response) => {
|
console.log(response, "listApsBomHeaderList");
|
bomList.value = response.rows;
|
page.value.total = response.total;
|
loading.value = false;
|
})
|
.catch(() => {
|
loading.value = false;
|
});
|
}
|
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
proxy.$refs["queryRef"].validate((valid) => {
|
if (valid) {
|
getList();
|
}
|
});
|
}
|
|
/** 重置按钮操作 */
|
function resetQuery() {
|
page.value.current = 1;
|
page.value.total = 0;
|
queryParams.value.pageNum = 1;
|
proxy.resetForm("queryRef");
|
bomList.value = [];
|
subList.value = [];
|
}
|
|
function handleCheckView(row) {
|
openDialog.value = true;
|
listApsBomLineList({ bomHeaderId: row.bomHeaderId }).then((data) => {
|
console.log(data, "listApsBomLineList");
|
subList.value = data.rows;
|
});
|
}
|
|
// /*定义下拉二级表*/
|
// const expandConfig = ref({
|
// lazy: true,
|
// loadMethod({ row }) {
|
// // 调用接口
|
// return listProcessRoute({ workOrderNo: row.documentNumber }).then(
|
// (data) => {
|
// row.subList = data.rows;
|
// }
|
// );
|
// },
|
// });
|
|
onMounted(async () => {
|
const res = await listAll_plant({});
|
plantList.value = res.data;
|
});
|
</script>
|
<style lang="css" scoped>
|
h4 {
|
font-weight: bold;
|
}
|
</style>
|
