【需求】bom明细页面基础展示框架提交

mes-module-heli/mes-module-heli-api/src/main/java/com/chanko/yunxi/mes/module/heli/enums/BusinesTypeEnum.java

@@ -13,6 +13,7 @@ public enum BusinesTypeEnum {
     PROJECT_ORDER("销售订单"),
     PROJECT_ORDER_SNAPSHOT("销售订单快照"),
     DELIVER_ORDER("发货订单"),
+    PROCESS_BOM("工艺BOM"),
     ;
 
     private String description;

mes-ui/mes-ui-admin-vue3/src/utils/dict.ts

@@ -244,4 +244,5 @@ export enum DICT_TYPE {
   HELI_CRAFT = 'heli_craft',//工艺流程
   HELI_PROJECT_MATERIAL_PLAN_STATUS = 'heli_project_material_plan_status',//物料需求计划状态
   HELI_BOM_STATUS = 'heli_bom_status', //bom状态
+  HELI_BOM_MATERIAL_TYPE = 'heli_bom_material_type', //bom物料类型
 }

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/bom.vue

@@ -21,10 +21,10 @@
             class="!w-240px"
           />
         </el-form-item>
-        <el-form-item label="生产计划单号" prop="planCode">
+        <el-form-item label="计划单号" prop="planCode">
           <el-input
             v-model="queryParams.planCode"
-            placeholder="请输入生产计划单号"
+            placeholder="请输入计划单号"
             clearable
             @keyup.enter="handleQuery"
             class="!w-240px"
@@ -93,7 +93,7 @@
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
         <el-table-column fixed label="序号" type="index" width="60" />
         <el-table-column label="BOM编号" align="center" prop="code" width="220" />
-        <el-table-column label="生产计划单号" align="center" prop="planCode" width="180" />
+        <el-table-column label="计划单号" align="center" prop="planCode" width="180" />
         <el-table-column label="项目编号" align="center" prop="projectCode" width="220" />
         <el-table-column label="客户名称" align="center" prop="customerName" width="240" />
         <el-table-column label="项目名称" align="center" prop="projectName" width="180" />

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/bomDetail.vue

@@ -0,0 +1,382 @@
+<template>
+  <el-card class="hl-card">
+    <template #header>
+      <span><span v-html="dialogTitle"></span>页</span>
+    </template>
+    <el-form ref="formRef" label-width="120px" :model="formData" v-loading="formLoading">
+      <!-- 基础信息  横向布局 -->
+      <el-card class="hl-card-info">
+        <template #header>
+          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
+        </template>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="BOM编号" prop="planCode">
+              {{ formData.code }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="计划单号" prop="planCode">
+              {{ formData.planCode }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目编号" prop="projectCode">
+              {{ formData.projectCode }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="客户名称" prop="customerName">
+              {{ formData.customerName }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="项目名称" prop="projectName">
+              {{ formData.projectName }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="子项目名称" prop="projectSubName">
+              {{formData.projectSubName}}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="子项目编号" prop="projectSubCode">
+              {{formData.projectSubCode}}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="BOM版本号" prop="version">
+              {{formData.version}}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input :disabled="detailDisabled" type="textarea" v-model="formData.remark" show-word-limit maxlength="200" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="创建时间" prop="createTime">
+              {{formatDate(formData.createTime)}}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据状态" prop="projectSubCode">
+              {{getDictLabel(DICT_TYPE.HELI_BOM_STATUS, formData.bomStatus)}}
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+      <!-- 表格类信息 -->
+      <el-card class="hl-card-info">
+        <template #header>
+          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">BOM明细</span>
+        </template>
+        <el-row>
+          <el-col v-if="active != 'detail'">
+            <el-button class="hl-addbutton" type="primary" size="large" @click="onAddItem">新增</el-button>
+          </el-col>
+          <el-col>
+            <el-card class="hl-incard">
+              <el-form ref="subFormRef" :model="formData.processBomDetails" :rules="subFormRules" v-loading="subFormLoading" label-width="0">
+                <el-table :data="formData.processBomDetails" class="hl-table">
+                  <el-table-column label="序号" type="index" width="80" />
+                  <el-table-column label="是否标准件" prop="type" width="200">
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.type`" :rules="subFormRules.type" class="mb-0px!">
+                        <el-radio-group v-model="row.type" @change="(val) => {onChangeType(row, val);}">
+                          <el-radio
+                            v-for="dict in getStrDictOptions(DICT_TYPE.HELI_BOM_MATERIAL_TYPE)"
+                            :key="dict.value"
+                            :label="dict.value"
+                          >
+                            {{ dict.label }}
+                          </el-radio>
+                        </el-radio-group>
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="零件名称" prop="materialName" width="180">
+                    <template #header><span class="hl-table_header">*</span>零件名称</template>
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.materialName`" :rules="subFormRules.materialName" class="mb-0px!">
+                        <MaterialSelect v-if="row.type == '1'" v-model="row.materialId" @update:newValue="(val) => {handleSelectedMaterial(row, val);}"/>
+                        <el-input v-else v-model="row.materialName" />
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="零件编码" prop="materialCode" width="120"/>
+                  <el-table-column label="材质" prop="compositionId" width="180">
+                    <template #header><span class="hl-table_header">*</span>材质</template>
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.compositionId`" :rules="subFormRules.compositionId" class="mb-0px!">
+                        <CompositionSelect v-model="row.compositionId" />
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="规格型号" prop="spec" width="140">
+                    <template #header><span class="hl-table_header">*</span>规格型号</template>
+                    <template #default="scope">
+                      <span v-if="scope.row.type == '1'" v-html="scope.row.spec"></span>
+                      <el-input v-else v-model="scope.row.spec" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="图号" prop="blueprintNo" width="150">
+                    <template #header><span class="hl-table_header">*</span>图号</template>
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.blueprintNo`" :rules="subFormRules.blueprintNo" class="mb-0px!">
+                        <el-input v-model="row.blueprintNo" />
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="数量" prop="amount" width="150">
+                    <template #header> <span class="hl-table_header">*</span>数量</template>
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.amount`" :rules="subFormRules.amount" class="mb-0px!">
+                        <el-input-number min="0" step="1" step-strictly :disabled="detailDisabled || row.id" v-model="row.amount" />
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="系统单位" prop="unit" width="180">
+                    <template #header> <span class="hl-table_header">*</span>系统单位</template>
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.unit`" :rules="subFormRules.unit" class="mb-0px!">
+                        <el-select v-model="row.unit" clearable class="!w-250px">
+                          <el-option
+                            v-for="dict in getStrDictOptions(DICT_TYPE.HELI_MATERIAL_UNIT)"
+                            :key="dict.value"
+                            :label="dict.label"
+                            :value="dict.value"
+                          />
+                        </el-select>
+                      </el-form-item>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" align="center" width="160">
+                    <template #default="scope">
+                      <el-button link type="danger" size="small" @click.prevent="onDeleteItem(scope.$index)">
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-form>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="hl-card-info">
+        <template #header>
+          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">操作日志</span>
+        </template>
+        <el-row>
+          <el-col>
+            <el-card class="hl-incard">
+              <el-table :data="formData.operateLogs" class="hl-table" :style="{ height: formData.operateLogs && formData.operateLogs.length > 10 ? '450px' : '' }" >
+                <el-table-column prop="type" label="操作" align="center">
+                  <template #default="scope">
+                    {{ getDictLabel(DICT_TYPE.SYSTEM_OPERATE_TYPE, scope.row.type) }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="userNickname" label="操作人" align="center" />
+                <el-table-column label="操作时间" align="center" prop="startTime" :formatter="dateFormatter" />
+                <el-table-column prop="content" label="操作意见" align="center" />
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <div class="text-center hl-footer">
+          <el-button @click="goback" size="large">取 消</el-button>
+          <el-button v-if="active != 'detail' && formData.bomStatus == 1" @click="submitForm('SAVE')" type="primary" :disabled="formLoading" size="large">保 存</el-button>
+          <el-button v-if="active != 'detail' && formData.bomStatus == 1" @click="submitForm('SUBMIT')" type="success" :disabled="formLoading" size="large">提 交</el-button>
+          <el-button v-if="active != 'detail' && formData.bomStatus == 2" @click="submitForm('CANCEL_SUBMIT')" type="danger" :disabled="formLoading" size="large">取消提交</el-button>
+        </div>
+      </el-card>
+    </el-form>
+  </el-card>
+</template>
+<script setup lang="ts">
+import {DICT_TYPE, getDictLabel, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
+import {dateFormatter, formatDate} from "@/utils/formatTime";
+import {ref} from "vue";
+import { inject } from 'vue'
+import {useUserStore} from "@/store/modules/user";
+import {useCommonStore} from "@/store/modules/common";
+import MaterialSelect from "@/views/heli/hlvuestyle/materialSelect.vue";
+import CompositionSelect from "@/views/heli/hlvuestyle/compositionSelect.vue";
+import * as ProcessBomApi from '@/api/heli/processbom'
+import {getOperateLogPage} from "@/api/system/operatelog";
+
+defineOptions({ name: 'ProcessBomDetail' })
+
+const reload = inject('reload')
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const commonStore = useCommonStore()
+const userStore = useUserStore()
+const router = useRouter()
+
+const active = toRef(commonStore.getStore('active'))
+const currentId = toRef(commonStore.getStore('id'))
+
+const formLoading = ref(false)
+const dialogTitle = ref('')
+const detailDisabled = ref(false)
+
+const formData = ref({
+  id: undefined,
+  code: undefined,
+  planId: undefined,
+  projectId: undefined,
+  projectSubId: undefined,
+  projectSubName: undefined,
+  projectSubCode: undefined,
+  version: undefined,
+  bomStatus: 1,
+  remark: undefined,
+  status: 1,
+  processBomDetails: [],
+  operateLogs: [],
+  active: undefined,
+  activeOpinion: '',
+})
+
+const formRef = ref() // 表单 Ref
+const subFormRef = ref()
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    code: undefined,
+    planId: undefined,
+    projectId: undefined,
+    projectSubId: undefined,
+    projectSubName: undefined,
+    projectSubCode: undefined,
+    version: undefined,
+    bomStatus: 1,
+    remark: undefined,
+    status: 1,
+    processBomDetails: [],
+    operateLogs: [],
+    active: undefined,
+    activeOpinion: '',
+  }
+  formRef.value?.resetFields()
+}
+const subFormLoading = ref(false) // 子表单的加载中
+const subFormRules = reactive({
+  type: [{ required: true, message: '零件类型不能为空', trigger: 'blur' }],
+  materialName: [{ required: true, message: '零件名称不能为空', trigger: 'blur' }],
+  compositionId: [{ required: true, message: '材质不能为空', trigger: 'blur' }],
+  unit: [{ required: true, message: '系统单位不能为空', trigger: 'blur' }],
+  amount: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
+  blueprintNo: [{ required: true, message: '图号不能为空', trigger: 'blur' }],
+})
+
+const queryData = async (id?: number) => {
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProcessBomApi.getProcessBom(id)
+      formData.value.processBomDetails = await ProcessBomApi.getProcessBomDetailListByBomId(id)
+
+      // 操作日志
+      let logParams = {
+        pageNo: 1,
+        pageSize: 99,
+        businessId: id,
+        businessType: 'PROCESS_BOM'
+      }
+      formData.value.operateLogs = (await getOperateLogPage(logParams)).list
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+const submitForm = async (operate) => {
+  formData.value.active = operate
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  await subFormRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProcessBomApi.ProcessBomVO
+    let bomId = await ProcessBomApi.operateProcessBom(data)
+    message.success(t('common.operationSuccess'))
+    commonStore.setStore('active', 'update');
+    commonStore.setStore('id', bomId);
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 新增按钮操作 */
+const onAddItem = () => {
+  const row = {
+    id: undefined,
+    bomId: undefined,
+    type: "1",
+    materialId: undefined,
+    materialName: undefined,
+    materialCode: undefined,
+    compositionId: undefined,
+    spec: undefined,
+    unit: undefined,
+    blueprintNo: undefined,
+    amount: undefined,
+    remark: undefined,
+    status: 1,
+  }
+  row.bomId = formData.value.id
+  formData.value.processBomDetails.push(row)
+}
+
+const onDeleteItem = (index) => {
+  formData.value.processBomDetails.splice(index, 1)
+}
+
+const onChangeType = (row, val) => {
+  row.materialId = undefined
+  row.materialName = undefined
+  row.materialCode = undefined
+  row.spec = undefined
+  row.unit = undefined
+}
+
+const goback = () => {
+  router.back()
+}
+
+//接收物料传递的数据
+const handleSelectedMaterial = (row: any, newValue: any) => {
+  row.materialId = newValue.id
+  row.materialName = newValue.name
+  row.materialCode = newValue.code
+  row.spec = newValue.spec
+  row.unit = newValue.unit
+}
+
+onMounted(() => {
+  dialogTitle.value = t('action.' + active.value)
+  if ('detail' == active.value) {
+    detailDisabled.value = true
+  }
+
+  queryData(currentId.value)
+})
+</script>
+<style scoped lang="less"></style>

mes-ui/mes-ui-admin-vue3/src/views/heli/processdesign/detail.vue

@@ -4,7 +4,7 @@
       <span><span v-html="dialogTitle"></span>页</span>
     </template>
     <el-form ref="formRef" label-width="120px" :model="formData" v-loading="formLoading">
-      <!-- 基础信息  竖列布局 -->
+      <!-- 基础信息  横向布局 -->
       <el-card class="hl-card-info">
         <template #header>
           <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
@@ -313,7 +313,6 @@ const goback = () => {
 }
 
 onMounted(() => {
-  console.log(commonStore.getStore("active"))
   dialogTitle.value = t('action.' + active.value)
   if ('detail' == active.value) {
     detailDisabled.value = true