From 47bae1f938f915206e3934ea960aff975e5738c9 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期五, 12 六月 2026 16:09:49 +0800
Subject: [PATCH] feat(teachingDemo): 新增工艺路线与BOM教学演示模块
---
src/views/productionManagement/workOrderEdit/index.vue | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 264 insertions(+), 6 deletions(-)
diff --git a/src/views/productionManagement/workOrderEdit/index.vue b/src/views/productionManagement/workOrderEdit/index.vue
index b919973..98d29f5 100644
--- a/src/views/productionManagement/workOrderEdit/index.vue
+++ b/src/views/productionManagement/workOrderEdit/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <div class="search_form">
+ <div class="search_form mb20">
<div class="search-row">
<div class="search-item">
<span class="search_title">宸ュ崟缂栧彿锛�</span>
@@ -13,7 +13,7 @@
</div>
<div class="search-item">
<span class="search_title">鐢熶骇璁㈠崟鍙凤細</span>
- <el-input v-model="searchForm.productOrderNpsNo"
+ <el-input v-model="searchForm.npsNo"
style="width: 240px"
placeholder="璇疯緭鍏�"
@change="handleQuery"
@@ -68,16 +68,79 @@
</span>
</template>
</el-dialog>
+ <!-- 鎸囧畾鎶ュ伐浜哄脊绐� -->
+ <el-dialog v-model="assignReporterDialogVisible"
+ title="鎸囧畾鎶ュ伐浜�"
+ width="800px">
+ <div class="assign-reporter-content">
+ <div class="search-box">
+ <el-input
+ v-model="employeeSearchKeyword"
+ placeholder="鎼滅储浜哄憳濮撳悕"
+ clearable
+ @input="handleEmployeeSearch"
+ style="width: 350px">
+ <template #prefix>
+ <i class="el-icon-search"></i>
+ </template>
+ </el-input>
+ </div>
+ <div class="selected-tags-box"
+ v-if="selectedEmployeeIds.length > 0">
+ <div class="tags-label">宸查�夋嫨锛�</div>
+ <div class="tags-list">
+ <el-tag v-for="id in selectedEmployeeIds"
+ :key="id"
+ closable
+ @close="removeEmployeeTag(id)"
+ class="employee-tag">
+ {{ getEmployeeNameById(id) }}
+ </el-tag>
+ </div>
+ </div>
+ <div class="employee-list-container"
+ v-loading="employeeTableLoading">
+ <el-checkbox-group v-model="selectedEmployeeIds">
+ <div class="employee-grid">
+ <div v-for="item in filteredEmployeeList"
+ :key="item.userId"
+ class="employee-item">
+ <el-checkbox :label="item.userId"
+ border>
+ <div class="employee-info">
+ <span class="name">{{ item.nickName }}</span>
+ <span class="dept">{{ item.dept?.deptName }}</span>
+ </div>
+ </el-checkbox>
+ </div>
+ </div>
+ </el-checkbox-group>
+ <div v-if="filteredEmployeeList.length === 0"
+ class="empty-text">
+ {{ employeeSearchKeyword ? '鏃犲尮閰嶄汉鍛�' : '鏆傛棤浜哄憳鏁版嵁' }}
+ </div>
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="primary"
+ @click="handleSaveReporters">纭畾</el-button>
+ <el-button @click="assignReporterDialogVisible = false">鍙栨秷</el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
- import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
+ import { getCurrentInstance, onMounted, reactive, ref, toRefs, computed } from "vue";
import { ElMessageBox } from "element-plus";
import {
productWorkOrderPage,
updateProductWorkOrder,
+ assignProductWorkOrder,
} from "@/api/productionManagement/workOrder.js";
+ import { listUser } from "@/api/system/user.js";
const { proxy } = getCurrentInstance();
@@ -153,8 +216,13 @@
width: "140",
},
{
+ label: "鎸囧畾鎶ュ伐浜�",
+ prop: "userNames",
+ width: "180",
+ },
+ {
label: "鎿嶄綔",
- width: "100",
+ width: "200",
align: "center",
dataType: "action",
fixed: "right",
@@ -163,6 +231,12 @@
name: "璁″垝鏃堕棿",
clickFun: row => {
handleEdit(row);
+ },
+ },
+ {
+ name: "鎸囧畾鎶ュ伐浜�",
+ clickFun: row => {
+ handleAssignReporter(row);
},
},
],
@@ -179,10 +253,41 @@
total: 0,
});
+ // 鎸囧畾鎶ュ伐浜虹浉鍏�
+ const assignReporterDialogVisible = ref(false);
+ const employeeTableLoading = ref(false);
+ const employeeTableData = ref([]);
+ const employeePage = reactive({
+ current: 1,
+ size: 100,
+ total: 0,
+ });
+ const employeeSearchForm = reactive({
+ staffName: "",
+ });
+ const employeeSearchKeyword = ref("");
+ const selectedEmployeeIds = ref([]);
+ const currentWorkOrder = ref(null);
+
+ const filteredEmployeeList = computed(() => {
+ const keyword = employeeSearchKeyword.value.trim().toLowerCase();
+ if (!keyword) {
+ return employeeTableData.value;
+ }
+ return employeeTableData.value.filter(item => {
+ const name = (item.nickName || "").toLowerCase();
+ const dept = (item.dept?.deptName || "").toLowerCase();
+ return name.includes(keyword) || dept.includes(keyword);
+ });
+ });
+
+ const handleEmployeeSearch = () => {
+ };
+
const data = reactive({
searchForm: {
workOrderNo: "",
- productOrderNpsNo: "",
+ npsNo: "",
},
});
const { searchForm } = toRefs(data);
@@ -192,7 +297,7 @@
if (!Number.isFinite(n)) return 0;
if (n <= 0) return 0;
if (n >= 100) return 100;
- return Math.round(n);
+ return parseFloat(n.toFixed(2));
};
const progressColor = percentage => {
@@ -247,6 +352,74 @@
});
};
+ const handleAssignReporter = row => {
+ currentWorkOrder.value = row;
+ assignReporterDialogVisible.value = true;
+ // 鍥炴樉宸插嬀閫夌殑浜哄憳
+ if (row.userIds) {
+ try {
+ selectedEmployeeIds.value = JSON.parse(row.userIds);
+ } catch (e) {
+ selectedEmployeeIds.value = [];
+ }
+ } else {
+ selectedEmployeeIds.value = [];
+ }
+ employeeSearchForm.staffName = "";
+ getEmployeeList();
+ };
+
+ const getEmployeeList = () => {
+ employeeTableLoading.value = true;
+ const params = {
+ pageNum: 1,
+ pageSize: 100,
+ };
+ listUser(params)
+ .then(res => {
+ employeeTableLoading.value = false;
+ employeeTableData.value = res.rows;
+ employeePage.total = res.total;
+ })
+ .catch(() => {
+ employeeTableLoading.value = false;
+ });
+ };
+
+ const getEmployeeNameById = id => {
+ const employee = employeeTableData.value.find(item => item.userId === id);
+ return employee ? employee.nickName : id;
+ };
+
+ const removeEmployeeTag = id => {
+ selectedEmployeeIds.value = selectedEmployeeIds.value.filter(
+ item => item !== id
+ );
+ };
+
+ const handleSaveReporters = () => {
+ if (selectedEmployeeIds.value.length === 0) {
+ proxy.$modal.msgWarning("璇烽�夋嫨鎶ュ伐浜�");
+ return;
+ }
+
+ const updateData = {
+ id: currentWorkOrder.value.id,
+ userIds: JSON.stringify(selectedEmployeeIds.value),
+ };
+ console.log(updateData, "updateData");
+
+ assignProductWorkOrder(updateData)
+ .then(() => {
+ proxy.$modal.msgSuccess("鎸囧畾鎴愬姛");
+ assignReporterDialogVisible.value = false;
+ getList();
+ })
+ .catch(() => {
+ proxy.$modal.msgError("鎸囧畾澶辫触");
+ });
+ };
+
onMounted(() => {
getList();
});
@@ -269,4 +442,89 @@
font-size: 14px;
color: #606266;
}
+
+ .assign-reporter-content {
+ .search-box {
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: center;
+ }
+
+ .selected-tags-box {
+ margin-bottom: 16px;
+ padding: 12px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+ display: flex;
+ align-items: flex-start;
+
+ .tags-label {
+ font-size: 14px;
+ color: #606266;
+ margin-right: 8px;
+ white-space: nowrap;
+ margin-top: 4px;
+ }
+
+ .tags-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ .employee-tag {
+ margin-bottom: 4px;
+ }
+ }
+ }
+
+ .employee-list-container {
+ max-height: 400px;
+ overflow-y: auto;
+ padding: 10px;
+ border: 1px solid #f0f0f0;
+ border-radius: 4px;
+
+ .employee-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ gap: 12px;
+ }
+
+ .employee-item {
+ :deep(.el-checkbox) {
+ width: 100%;
+ margin-right: 0;
+ height: auto;
+ padding: 8px;
+
+ .el-checkbox__label {
+ width: 100%;
+ }
+ }
+
+ .employee-info {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ .name {
+ font-weight: bold;
+ font-size: 14px;
+ color: #303133;
+ }
+
+ .dept {
+ font-size: 12px;
+ color: #909399;
+ }
+ }
+ }
+
+ .empty-text {
+ text-align: center;
+ color: #909399;
+ padding: 20px;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.3