|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
<template>
|
|
|
<el-container class="is-vertical">
|
|
<el-container class="is-vertical">
|
|
|
- <sc-page-header @add="table_add()"></sc-page-header>
|
|
|
|
|
|
|
+ <sc-page-header v-if="!selectable" @add="table_add()"></sc-page-header>
|
|
|
|
|
|
|
|
- <scTable ref="xGridTable" :apiObj="$API.production.bom" :formConfig="formConfig" :paramsColums="paramsColums" :columns="columns" :treeConfig="treeConfig">
|
|
|
|
|
|
|
+ <scTable ref="xGridTable" :apiObj="$API.production.bom" :formConfig="formConfig" :paramsColums="paramsColums" :columns="columns" :treeConfig="treeConfig" v-bind="options" v-on="tableEvents">
|
|
|
<template #code_link="{ row }">
|
|
<template #code_link="{ row }">
|
|
|
- <vxe-text status="primary" @click="table_detail(row)">{{ row.bomCode }}</vxe-text>
|
|
|
|
|
|
|
+ <vxe-text v-if="row.parentId === '0'" status="primary" @click="table_detail(row)">{{ row.bomCode }}</vxe-text>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
@@ -49,11 +49,28 @@ import bomDesc from "./desc";
|
|
|
import store from "@/store";
|
|
import store from "@/store";
|
|
|
watch(() => store.state.tenant.tenantId, () => refreshTable());
|
|
watch(() => store.state.tenant.tenantId, () => refreshTable());
|
|
|
|
|
|
|
|
|
|
+const props = defineProps({
|
|
|
|
|
+ selectable: { type: Boolean, default: false },
|
|
|
|
|
+ multiple: { type: Boolean, default: false },
|
|
|
|
|
+ paramsColums: { type: Array, default: () => [] },
|
|
|
|
|
+ options: { type: Object, default: () => ({}) }
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const formQueryData = reactive({});
|
|
|
|
|
+
|
|
|
const treeConfig = reactive({
|
|
const treeConfig = reactive({
|
|
|
lazy: true,
|
|
lazy: true,
|
|
|
hasChildField: "isHaveChildren",
|
|
hasChildField: "isHaveChildren",
|
|
|
- loadMethod: ({ row }) => API.production.bom.getChild({ id: row.id })
|
|
|
|
|
-})
|
|
|
|
|
|
|
+ loadMethod: ({ row }) => API.production.bom.getChild({ parentId: row.id, ...XEUtils.pick(formQueryData, (_, key) => XEUtils.includes(["materialCodeLike", "materialNameLike", "routeId"], key)) })
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const routeConfig = reactive({
|
|
|
|
|
+ api: { key: "process.line", query: { orderBy: "createTime_desc", parentId: "0", status: "enable" } },
|
|
|
|
|
+ optionProps: { label: "name", value: "id" },
|
|
|
|
|
+ events: {
|
|
|
|
|
+ change: data => XEUtils.merge(formConfig.data, data)
|
|
|
|
|
+ }
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
const selectConfig = reactive({
|
|
const selectConfig = reactive({
|
|
|
options: statusDic,
|
|
options: statusDic,
|
|
@@ -74,35 +91,49 @@ const daterangeConfig = reactive({
|
|
|
|
|
|
|
|
const formConfig = reactive({
|
|
const formConfig = reactive({
|
|
|
data: {},
|
|
data: {},
|
|
|
- items: [
|
|
|
|
|
- mapFormItemTenant({ events: { change: data => XEUtils.merge(formConfig.data, data) } }),
|
|
|
|
|
- mapFormItemInput("bomCodeLike", "BOM单编号"),
|
|
|
|
|
|
|
+ items: computed(() => props.selectable ? [
|
|
|
|
|
+ mapFormItemInput("materialCodeLike", "产品编码"),
|
|
|
|
|
+ mapFormItemInput("materialNameLike", "产品名称")
|
|
|
|
|
+ ]: [
|
|
|
|
|
+ mapFormItemTenant({ events: { change: data => XEUtils.merge(formConfig.data, { ...data, routeId: undefined }) } }),
|
|
|
mapFormItemInput("materialCodeLike", "产品编码"),
|
|
mapFormItemInput("materialCodeLike", "产品编码"),
|
|
|
mapFormItemInput("materialNameLike", "产品名称"),
|
|
mapFormItemInput("materialNameLike", "产品名称"),
|
|
|
|
|
+ mapFormItemInput("bomCodeLike", "BOM单编号"),
|
|
|
mapFormItemSelect("status", "BOM单状态", selectConfig),
|
|
mapFormItemSelect("status", "BOM单状态", selectConfig),
|
|
|
|
|
+ mapFormItemSelect("routeId", "工艺路线", routeConfig),
|
|
|
mapFormItemDatePicker("createTime", "创建日期", daterangeConfig)
|
|
mapFormItemDatePicker("createTime", "创建日期", daterangeConfig)
|
|
|
- ]
|
|
|
|
|
|
|
+ ])
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const paramsColums = reactive([
|
|
const paramsColums = reactive([
|
|
|
- { column: "orderBy", defaultValue: "bomCode_asc" },
|
|
|
|
|
|
|
+ { column: "orderBy", defaultValue: "createTime_desc" },
|
|
|
{ column: "parentId", defaultValue: "0" },
|
|
{ column: "parentId", defaultValue: "0" },
|
|
|
{ column: "tenantId" },
|
|
{ column: "tenantId" },
|
|
|
- { column: "bomCodeLike" },
|
|
|
|
|
{ column: "materialCodeLike" },
|
|
{ column: "materialCodeLike" },
|
|
|
{ column: "materialNameLike" },
|
|
{ column: "materialNameLike" },
|
|
|
|
|
+ { column: "bomCodeLike" },
|
|
|
{ column: "status" },
|
|
{ column: "status" },
|
|
|
|
|
+ { column: "routeId" },
|
|
|
{ column: "createTimeBegin", field: "createTime[0]" },
|
|
{ column: "createTimeBegin", field: "createTime[0]" },
|
|
|
- { column: "createTimeEnd", field: "createTime[1]" }
|
|
|
|
|
|
|
+ { column: "createTimeEnd", field: "createTime[1]" },
|
|
|
|
|
+ ...props.paramsColums
|
|
|
]);
|
|
]);
|
|
|
|
|
|
|
|
-const columns = reactive([
|
|
|
|
|
|
|
+const columns = computed(() => props.selectable ? [
|
|
|
|
|
+ { type: props.multiple && "checkbox" || "radio", fixed: "left", width: 40 },
|
|
|
|
|
+ { type: "html", field: "materialCode", title: "产品编码", fixed: "left", minWidth: 200, treeNode: true, sortable: true },
|
|
|
|
|
+ { type: "html", field: "materialName", title: "产品名称", fixed: "left", minWidth: 150, sortable: true },
|
|
|
|
|
+ { field: "bomCode", title: "BOM单编号", minWidth: 150, sortable: true },
|
|
|
|
|
+ { type: "html", field: "quantity", title: "标准用量", minWidth: 100, sortable: true },
|
|
|
|
|
+ { type: "html", field: "material.unit", title: "单位", minWidth: 100, sortable: true }
|
|
|
|
|
+] : [
|
|
|
{ type: "seq", fixed: "left", width: 80 },
|
|
{ type: "seq", fixed: "left", width: 80 },
|
|
|
- { visible: computed(() => store.state.tenant.tenantId === "0"), type: "html", field: "tenantName", title: "所属租户", fixed: "left", minWidth: 200, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(store.state.tenant.tenants, item => item.id == row.tenantId), "name") },
|
|
|
|
|
- { type: "html", field: "materialCode", title: "产品编码", fixed: "left", minWidth: 150, treeNode: true, headerAlign: "center", align: "left", sortable: true },
|
|
|
|
|
|
|
+ { visible: computed(() => store.state.tenant.tenantId === "0"), type: "html", field: "tenantName", title: "所属租户", fixed: "left", minWidth: 200, sortable: true, formatter: ({ cellValue, row }) => row.parentId === "0" ? cellValue || XEUtils.get(XEUtils.find(store.state.tenant.tenants, item => item.id == row.tenantId), "name") : "" },
|
|
|
|
|
+ { type: "html", field: "materialCode", title: "产品编码", fixed: "left", minWidth: 200, treeNode: true, headerAlign: "center", align: "left", sortable: true },
|
|
|
{ type: "html", field: "materialName", title: "产品名称", fixed: "left", minWidth: 150, sortable: true },
|
|
{ type: "html", field: "materialName", title: "产品名称", fixed: "left", minWidth: 150, sortable: true },
|
|
|
{ field: "bomCode", title: "BOM单编号", minWidth: 150, sortable: true, className: "vxe-table-link-cell", slots: { default: "code_link" } },
|
|
{ field: "bomCode", title: "BOM单编号", minWidth: 150, sortable: true, className: "vxe-table-link-cell", slots: { default: "code_link" } },
|
|
|
{ field: "status", title: "BOM单状态", minWidth: 120, editRender: { name: "$cell-tag", options: statusDic } },
|
|
{ field: "status", title: "BOM单状态", minWidth: 120, editRender: { name: "$cell-tag", options: statusDic } },
|
|
|
|
|
+ { visible: true, type: "html", field: "routeName", title: "工艺路线", minWidth: 150, sortable: true },
|
|
|
{ type: "html", field: "createTime", title: "创建日期", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue, "YYYY-MM-DD") || cellValue },
|
|
{ type: "html", field: "createTime", title: "创建日期", minWidth: 120, sortable: true, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue, "YYYY-MM-DD") || cellValue },
|
|
|
{ visible: false, type: "html", field: "remark", title: "概要", minWidth: 300, sortable: true },
|
|
{ visible: false, type: "html", field: "remark", title: "概要", minWidth: 300, sortable: true },
|
|
|
{ title: "操作", fixed: "right", width: 220, slots: { default: "action" } }
|
|
{ title: "操作", fixed: "right", width: 220, slots: { default: "action" } }
|
|
@@ -110,7 +141,7 @@ const columns = reactive([
|
|
|
|
|
|
|
|
// 显示隐藏 筛选表单
|
|
// 显示隐藏 筛选表单
|
|
|
const xGridTable = ref();
|
|
const xGridTable = ref();
|
|
|
-const refreshTable = (mode = "add") => (xGridTable.value.searchData(mode), xGridTable.value.reloadColumn(columns));
|
|
|
|
|
|
|
+const refreshTable = (mode = "add") => (xGridTable.value.searchData(mode), xGridTable.value.reloadColumn(columns.value));
|
|
|
|
|
|
|
|
const bomRef = ref();
|
|
const bomRef = ref();
|
|
|
const bomDescRef = ref();
|
|
const bomDescRef = ref();
|
|
@@ -162,4 +193,13 @@ const table_change = row => {
|
|
|
});
|
|
});
|
|
|
}).catch(() => {});
|
|
}).catch(() => {});
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+const tableEvents = {
|
|
|
|
|
+ tableSearch: data => (XEUtils.clear(formQueryData), XEUtils.merge(formQueryData, data)),
|
|
|
|
|
+ tableReset: data => (XEUtils.clear(formQueryData), XEUtils.merge(formQueryData, data))
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+defineExpose({
|
|
|
|
|
+ getSelectRows: () => xGridTable.value.getSelectRows()
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|