将工序进行分组。

.env.development

@@ -10,7 +10,7 @@ VITE_APP_BASE_API = '/dev-api'
 # 上传文件接口地址.
 VITE_APP_UPLOAD_URL = 'http://139.155.176.112:19000'
 # 测试开发接口地址
-VITE_APP_API_URL = 'http://139.155.176.112:7100'
+VITE_APP_API_URL = 'http://192.168.1.111:7104'
 
 #VITE_APP_API_URL = 'http://127.0.0.1:7104'
 

src/api/process/index.ts

@@ -51,7 +51,7 @@ export function queryProductHandover(params: object): AxiosPromise<any> {
   return request({
     url: "/api/v1/proRecord/queryByType",
     method: "post",
-    data: params
+    data: params,
   });
 }
 export function updateHandoverList(params: object): AxiosPromise<any> {
@@ -101,3 +101,19 @@ export function queryFormList(queryParams: object) {
   });
 }
 
+// 获取工艺中工序分组
+export function queryProcessGroup(routeId: string) {
+  return request({
+    url: `/api/v1/op/routeOperation/groupList/${routeId}`,
+    method: "get",
+  });
+}
+
+// 工艺中工序分组设置
+export function saveProcessGroup(params: object) {
+  return request({
+    url: "/api/v1/op/routeOperation/groupSetting",
+    method: "post",
+    data: params,
+  });
+}

src/views/base/craftManagement/route/bindConfig.ts

@@ -88,18 +88,18 @@ export const formOption = {
         },
       ],
     },
-    {
-      label: "工序分组",
-      prop: "groupStr",
-      span: 24,
-      rules: [
-        {
-          required: true,
-          message: "请输入工序分组",
-          trigger: "blur",
-        },
-      ],
-    },
+    // {
+    //   label: "工序分组",
+    //   prop: "groupStr",
+    //   span: 24,
+    //   rules: [
+    //     {
+    //       required: true,
+    //       message: "请输入工序分组",
+    //       trigger: "blur",
+    //     },
+    //   ],
+    // },
     {
       label: "标准工时",
       prop: "standardWorktime",

src/views/base/craftManagement/route/bindProcess.vue

@@ -135,6 +135,7 @@
             <el-button type="success" @click="changeStyle">
               按钮风格切换
             </el-button>
+            <el-button type="success" @click="startGroup"> 进行分组 </el-button>
           </div>
 
           <!-- 工艺路线编辑模式 -->
@@ -223,6 +224,7 @@
         </el-scrollbar>
       </div>
     </div>
+    <GroupProcess ref="GroupProcessRef" @success="groupFinish"></GroupProcess>
   </div>
 </template>
 
@@ -255,9 +257,12 @@ import { ElMessage } from "element-plus";
 import { useScreenshot } from "./screenshot.ts";
 import { useLayout } from "@/hooks/useLayout";
 import { useSnakeLayoutHook } from "@/hooks/vueflowHooks";
+import GroupProcess from "./components/groupProcess.vue";
+
 defineOptions({
   name: "bindProcess/:id/:prodtCode",
 });
+
 const styleStatus = ref(false);
 
 const changeStyle = () => {
@@ -337,6 +342,21 @@ const edgeClick = (event) => {
   }
 };
 
+// 工序分组功能模块
+const GroupProcessRef = ref(null);
+const startGroup = () => {
+  console.log("startGroup", flowData.nodes);
+  GroupProcessRef.value &&
+    GroupProcessRef.value.startGroup(
+      flowData.nodes,
+      route.fullPath.split("/")[4]
+    );
+};
+const groupFinish = () => {
+  console.log("groupFinish");
+  loadProcessesFlow();
+};
+
 // 自定义工序项目字段名称相关方法
 const customFieldNameValues = ref([]);
 const customFieldOptions = ref([]);

src/views/base/craftManagement/route/components/groupProcess.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { queryProcessGroup, saveProcessGroup } from "@/api/process";
+
+const groupData = ref<Record<string, string[]>>({});
+const nodesData = ref<any[]>([]);
+const routeIdA = ref("");
+
+const drawer2 = ref(false);
+
+const emits = defineEmits(["success"]);
+
+function cancelClick() {
+  drawer2.value = false;
+}
+function confirmClick() {
+  let dict: Record<string, string[]> | undefined = {};
+  for (let key in groupData.value) {
+    let array = groupData.value[key];
+    dict[key] = array.map((id: string) => {
+      return {
+        id: id,
+      };
+    });
+  }
+  let p = {
+    group: { ...dict },
+    routeId: routeIdA.value,
+  };
+
+  saveProcessGroup(p).then(() => {
+    emits("success");
+    ElMessage.success("保存成功");
+    drawer2.value = false;
+  });
+}
+
+const startGroup = async (nodes: any[], routeId: string) => {
+  nodesData.value = markRaw(nodes);
+  routeIdA.value = routeId;
+
+  drawer2.value = true;
+  let res = await queryProcessGroup(routeId);
+  let dict: Record<string, string[]> | undefined = {};
+  for (let key in res.data) {
+    let array = res.data[key];
+    dict[key] = array.map((item: any) => {
+      return item.id;
+    });
+  }
+
+  groupData.value = dict;
+};
+
+defineExpose({
+  startGroup,
+});
+
+import type { CheckboxValueType } from "element-plus";
+
+const checkAll = ref(false);
+const indeterminate = ref(false);
+const value = ref<CheckboxValueType[]>([]);
+
+watch(value, (val) => {
+  if (val.length === 0) {
+    checkAll.value = false;
+    indeterminate.value = false;
+  } else if (val.length === cities.value.length) {
+    checkAll.value = true;
+    indeterminate.value = false;
+  } else {
+    indeterminate.value = true;
+  }
+});
+
+const handleCheckAll = (val: CheckboxValueType) => {
+  indeterminate.value = false;
+  // if (val) {
+  //   value.value = cities.value.map((_) => _.value);
+  // } else {
+  //   value.value = [];
+  // }
+};
+
+// 新增分组相关
+const input3 = ref("");
+const addGroup = () => {
+  if (groupData.value.hasOwnProperty(input3.value)) {
+    ElMessage.error("分组名称重复");
+  } else {
+    groupData.value[input3.value] = [];
+  }
+};
+</script>
+
+<template>
+  <el-drawer v-model="drawer2" :size="900">
+    <template #header>
+      <h4>将工序进行分组</h4>
+    </template>
+    <template #default>
+      <el-row :gutter="20">
+        <el-input
+          v-model="input3"
+          clearable
+          placeholder="请输入分组名称"
+          style="width: 70%"
+        >
+        </el-input>
+        <el-button @click="addGroup" type="primary">添加分组</el-button>
+      </el-row>
+
+      <div v-for="key in Object.keys(groupData)" :key="key">
+        <div class="group-name">{{ key }}</div>
+        <el-select
+          v-model="groupData[key]"
+          multiple
+          clearable
+          filterable
+          placeholder="请选择工序"
+          popper-class="custom-header"
+        >
+          <!--          <template #header>-->
+          <!--            <el-checkbox-->
+          <!--              v-model="checkAll"-->
+          <!--              :indeterminate="indeterminate"-->
+          <!--              @change="handleCheckAll"-->
+          <!--            >-->
+          <!--              All-->
+          <!--            </el-checkbox>-->
+          <!--          </template>-->
+          <el-option
+            v-for="item in nodesData"
+            :key="item.operationId"
+            :label="item.operationName"
+            :value="item.operationId"
+          />
+        </el-select>
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">cancel</el-button>
+        <el-button type="primary" @click="confirmClick">confirm</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.group-name {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+</style>