add(hwmom-mes): 增加维护工艺路线步骤功能

- 在工艺路线列表页面添加维护工艺路线步骤按钮
- 实现维护工艺路线步骤对话框，包括工艺路线名称、工艺路线组成信息等
- 添加工艺路线步骤的添加、删除功能

src/api/mes/baseRoute/types.ts

@@ -1,3 +1,23 @@
+// 定义工艺路线步骤的接口
+export interface ProdBaseRouteProcess {
+  /** 工序ID */
+  processId: string | number;
+  /** 工序顺序 */
+  processOrder: string | number;
+  /** 备注 */
+  remark?: string;
+  /** 创建人 */
+  createBy?: number;
+  /** 创建时间 */
+  createTime?: string;
+  /** 更新人 */
+  updateBy?: number;
+  /** 更新时间 */
+  updateTime?: string;
+  /** 序号（前端使用） */
+  index?: number;
+}
+
 export interface BaseRouteVO {
   /**
    * 工艺路线ID
@@ -54,6 +74,13 @@ export interface BaseRouteVO {
    */
   updateTime: string;
 
+  /**
+   * 工艺路线步骤列表
+   */
+  routeProcessBoList?: ProdBaseRouteProcess[];
+
+  routeProcessVoList?: ProdBaseRouteProcess[];
+
 }
 
 export interface BaseRouteForm extends BaseEntity {
@@ -82,6 +109,12 @@ export interface BaseRouteForm extends BaseEntity {
    */
   remark?: string;
 
+  /**
+   * 工艺路线步骤列表
+   */
+  routeProcessBoList?: ProdBaseRouteProcess[];
+
+  routeProcessVoList?: ProdBaseRouteProcess[];
 }
 
 export interface BaseRouteQuery extends PageQuery {

src/views/mes/baseRoute/index.vue

@@ -71,14 +71,25 @@
         </el-table-column>
         <el-table-column label='操作' align='center' class-name='small-padding fixed-width'>
           <template #default='scope'>
-            <el-tooltip content='修改' placement='top'>
+<!--            <el-tooltip content='修改' placement='top'>
               <el-button link type='primary' icon='Edit' @click='handleUpdate(scope.row)'
                          v-hasPermi="['mes:baseRoute:edit']"></el-button>
             </el-tooltip>
             <el-tooltip content='删除' placement='top'>
               <el-button link type='primary' icon='Delete' @click='handleDelete(scope.row)'
                          v-hasPermi="['mes:baseRoute:remove']"></el-button>
-            </el-tooltip>
+            </el-tooltip>-->
+
+            <el-button
+              size="small"
+              type="text"
+              icon="el-icon-edit"
+              @click="routeProcessUpdate(scope.row)"
+              v-hasPermi="['mes:baseRoute:edit']"
+            >工艺步骤
+            </el-button>
+
+
           </template>
         </el-table-column>
       </el-table>
@@ -116,12 +127,73 @@
         </div>
       </template>
     </el-dialog>
+
+
+<!--维护工艺路线步骤对话框-->
+    <el-dialog :title='dialog.title' v-model='ifOpen' width='500px' append-to-body>
+      <el-form ref='baseRouteFormRef' :model='form' :rules='rules' label-width='110px'>
+    <el-form-item label='工艺路线名称' prop='routeName'>
+      <el-input v-model='form.routeName' placeholder='请输入工艺路线名称' disabled />
+    </el-form-item>
+    <el-divider content-position='center'>工艺路线组成信息</el-divider>
+    <el-row :gutter='10' class='mb8'>
+      <el-col :span='1.5'>
+        <el-button type='primary' icon='Plus' size='small' @click='handleAddProdBaseRouteProcess'>添加</el-button>
+      </el-col>
+      <el-col :span='1.5'>
+        <el-button type='danger' icon='Delete' size='small' @click='handleDeleteProdBaseRouteProcess'>删除</el-button>
+      </el-col>
+      <!-- <el-col :span='1.5'>
+        <span v-show='tagShow'>提示:该工艺路线已关联生产工单，无法修改！</span>
+      </el-col> -->
+    </el-row>
+<!--    <el-table :data='routeProcessBoList' :row-class-name='rowProdBaseRouteProcessIndex'
+              @selection-change='handleProdBaseRouteProcessSelectionChange' ref='mesBaseRouteProcess'>-->
+    <el-table
+      :data="routeProcessBoList"
+      :row-class-name="rowProdBaseRouteProcessIndex"
+      @selection-change="handleProdBaseRouteProcessSelectionChange"
+      ref="mesBaseRouteProcess"
+    >
+      <el-table-column type='selection' width='50' align='center' />
+      <el-table-column label='序号' align='center' prop='index' v-if='false' />
+      <el-table-column label='工艺路线顺序' prop='processOrder' width='100'>
+        <template #default='scope'>
+          <el-input v-model='scope.row.processOrder' />
+        </template>
+      </el-table-column>
+      <el-table-column label='工序' prop='processId'>
+        <template #default='scope'>
+          <el-select v-model='scope.row.processId' filterable placeholder='请选择工序' clearable>
+            <el-option
+              v-for='item in processList'
+              :key='item.processId'
+              :label='item.processName'
+              :value='item.processId'
+              :disabled='routeProcessBoList.some(i => i.processId === item.processId)'
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+  <template #footer>
+    <div class='dialog-footer'>
+      <el-button type='primary' @click='submitForm' v-show='submitShow'>确 定</el-button>
+      <el-button @click='cancel'>取 消</el-button>
+    </div>
+  </template>
+</el-dialog>
+
   </div>
 </template>
 
 <script setup name='BaseRoute' lang='ts'>
 import { listBaseRoute, getBaseRoute, delBaseRoute, addBaseRoute, updateBaseRoute } from '@/api/mes/baseRoute';
-import { BaseRouteVO, BaseRouteQuery, BaseRouteForm } from '@/api/mes/baseRoute/types';
+import { BaseRouteVO, BaseRouteQuery, BaseRouteForm, ProdBaseRouteProcess } from '@/api/mes/baseRoute/types';
+import {getProcessInfoList} from "@/api/mes/baseProcessInfo";
+/*import type { ProdBaseRouteProcess } from '@/api/mes/baseRoute/types';*/
+
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@@ -138,6 +210,19 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const baseRouteFormRef = ref<ElFormInstance>();
 
+
+
+// 在data部分添加以下变量
+const routeProcessOpen = ref(false);
+const submitShow = ref(true);
+const tagShow = ref(false);
+const routeProcessBoList = ref<any[]>([]);
+const checkedProdBaseRouteProcess = ref<any[]>([]);
+const processList = ref<any[]>([]);
+
+//控制维护工艺路线步骤对话框的显示与隐藏，默认为false隐藏
+const ifOpen = ref(false); // 使用 ref 定义响应式变量
+
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -163,7 +248,8 @@ const initFormData: BaseRouteForm = {
   routeName: undefined,
   routeDesc: undefined,
   activeFlag: '1',
-  remark: undefined
+  remark: undefined,
+  routeProcessBoList: []//工艺步骤
 };
 const data = reactive<PageData<BaseRouteForm, BaseRouteQuery>>({
   form: { ...initFormData },
@@ -201,12 +287,15 @@ const getList = async () => {
 const cancel = () => {
   reset();
   dialog.visible = false;
+
+  ifOpen.value = false;
 };
 
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   baseRouteFormRef.value?.resetFields();
+  routeProcessBoList.value = [];
 };
 
 /** 搜索按钮操作 */
@@ -250,6 +339,10 @@ const submitForm = () => {
   baseRouteFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
+
+      // 确保 form 包含最新的 routeProcessBoList 数据
+      form.value.routeProcessBoList = routeProcessBoList.value;
+
       if (form.value.routeId) {
         await updateBaseRoute(form.value).finally(() => buttonLoading.value = false);
       } else {
@@ -257,6 +350,13 @@ const submitForm = () => {
       }
       proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
+
+      // 关闭维护工艺路线步骤对话框,重置数据
+      ifOpen.value = false;
+      routeProcessBoList.value = [];
+      form.value.routeProcessBoList = [];
+      form.value.routeProcessVoList = [];
+
       await getList();
     }
   });
@@ -278,7 +378,90 @@ const handleExport = () => {
   }, `baseRoute_${new Date().getTime()}.xlsx`);
 };
 
+
+
+// 在methods部分添加以下方法
+/** 维护工艺路线步骤 */
+const routeProcessUpdate = async (row: BaseRouteVO) => {
+  reset();
+  const _routeId = row?.routeId || ids.value[0];
+  submitShow.value = true;
+
+  // 打开维护工艺路线步骤对话框
+  ifOpen.value = true;
+
+/*  tagShow.value = false;*/
+
+  /*  // 检查是否关联生产工单
+    const res = await listProductOrder({ dispatchId: _routeId });
+    if (res.rows.length > 0) {
+      submitShow.value = false;
+      tagShow.value = true;
+    }*/
+
+// 获取数据时
+  const routeRes = await getBaseRoute(_routeId);
+  form.value = routeRes.data;
+  routeProcessBoList.value = routeRes.data.routeProcessVoList || [];
+  routeProcessOpen.value = true;
+  dialog.title = '维护工艺路线步骤';
+};
+
+// 修改rowProdBaseRouteProcessIndex方法，返回类名字符串
+const rowProdBaseRouteProcessIndex = ({ row, rowIndex }: {
+  row: ProdBaseRouteProcess;
+  rowIndex: number
+}): string => {
+  // 如果当前行的processOrder属性不存在
+  if (!row.processOrder) {
+    // 设置当前行的index属性为行索引加1
+    row.index = rowIndex + 1;
+    // 设置当前行的processOrder属性为(行索引加1)乘以10
+    row.processOrder = (rowIndex + 1) * 10;
+  }
+  // 返回一个空字符串表示不添加额外类名
+  return '';
+};
+/** 工艺路线组成信息添加按钮操作 */
+const handleAddProdBaseRouteProcess = () => {
+  routeProcessBoList.value.push({
+    processId: '',
+    processOrder: '',
+    remark: '',
+    createBy: '',
+    createTime: '',
+    updateBy: '',
+    updateTime: ''
+  });
+};
+
+/** 工艺路线组成信息删除按钮操作 */
+const handleDeleteProdBaseRouteProcess = () => {
+  // 检查是否有选中的工艺路线组成信息数据，如果没有则显示错误提示
+  if (checkedProdBaseRouteProcess.value.length === 0) {
+    proxy?.$modal.msgError('请先选择要删除的工艺路线组成信息数据');
+  } else {
+    // 过滤掉已选中的工艺路线组成信息数据
+    routeProcessBoList.value = routeProcessBoList.value.filter(
+      item => !checkedProdBaseRouteProcess.value.includes(item.index)
+    );
+  }
+};
+
+/** 复选框选中数据 */
+const handleProdBaseRouteProcessSelectionChange = (selection: any[]) => {
+  // 将选中的项的索引映射到checkedProdBaseRouteProcess.value数组中
+  checkedProdBaseRouteProcess.value = selection.map(item => item.index);
+};
+
+const getProcessList = async () => {
+  const processRes = await getProcessInfoList(null);
+  processList.value = processRes.data;
+};
+
+
 onMounted(() => {
+  getProcessList();
   getList();
 });
 </script>