合并代码

gaoluyang

8 小时以前 07f9f8657d057a38792c3822acc9b08d83478967

 src/views/productionManagement/workOrderEdit/index.vue

@@ -1,10 +1,19 @@
<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>
          <el-input v-model="searchForm.workOrderNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search" />
        </div>
        <div class="search-item">
          <span class="search_title">生产订单号：</span>
          <el-input v-model="searchForm.npsNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
@@ -31,8 +40,6 @@
        </template>
      </PIMTable>
    </div>
    
    <!-- 编辑时间弹窗 -->
    <el-dialog v-model="editDialogVisible"
               title="编辑计划时间"
               width="500px">
@@ -61,18 +68,68 @@
        </span>
      </template>
    </el-dialog>
    <!-- 指定报工人弹窗 -->
    <el-dialog v-model="assignReporterDialogVisible"
               title="指定报工人"
               width="800px">
      <div class="assign-reporter-content">
        <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 employeeTableData"
                   :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="employeeTableData.length === 0"
               class="empty-text">
            暂无匹配人员
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="assignReporterDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="handleSaveReporters">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick } from "vue";
  import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
  import { ElMessageBox } from "element-plus";
  import dayjs from "dayjs";
  import {
    productWorkOrderPage,
    updateProductWorkOrder,
    assignProductWorkOrder,
  } from "@/api/productionManagement/workOrder.js";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  import { listUser } from "@/api/system/user.js";

  const { proxy } = getCurrentInstance();

  const tableColumn = ref([
@@ -88,7 +145,7 @@
    },
    {
      label: "生产订单号",
      prop: "productOrderNpsNo",
      prop: "npsNo",
      width: "140",
    },
    {
@@ -106,7 +163,8 @@
    },
    {
      label: "工序名称",
      prop: "processName",
      prop: "operationName",
      width: "100",
    },
    {
      label: "需求数量",
@@ -146,8 +204,13 @@
      width: "140",
    },
    {
      label: "指定报工人",
      prop: "userNames",
      width: "180",
    },
    {
      label: "操作",
      width: "100",
      width: "200",
      align: "center",
      dataType: "action",
      fixed: "right",
@@ -158,26 +221,49 @@
            handleEdit(row);
          },
        },
        {
          name: "指定报工人",
          clickFun: row => {
            handleAssignReporter(row);
          },
        },
      ],
    },
  ]);
  

  const tableData = ref([]);
  const tableLoading = ref(false);
  const editDialogVisible = ref(false);
  let editrow = ref(null);
  const editrow = ref(null);
  const page = reactive({
    current: 1,
    size: 100,
    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 selectedEmployeeIds = ref([]);
  const currentWorkOrder = ref(null);

  const data = reactive({
    searchForm: {
      workOrderNo: "",
      npsNo: "",
    },
  });
  const { searchForm } = toRefs(data);

  const toProgressPercentage = val => {
    const n = Number(val);
    if (!Number.isFinite(n)) return 0;
@@ -185,6 +271,7 @@
    if (n >= 100) return 100;
    return Math.round(n);
  };

  const progressColor = percentage => {
    const p = toProgressPercentage(percentage);
    if (p < 30) return "#f56c6c";
@@ -193,17 +280,17 @@
    return "#67c23a";
  };

  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };

  const getList = () => {
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
@@ -225,7 +312,7 @@

  const handleUpdate = () => {
    updateProductWorkOrder(editrow.value)
      .then(res => {
      .then(() => {
        proxy.$modal.msgSuccess("提交成功");
        editDialogVisible.value = false;
        getList();
@@ -234,6 +321,74 @@
        ElMessageBox.alert("修改失败", "提示", {
          confirmButtonText: "确定",
        });
      });
  };

  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("指定失败");
      });
  };

@@ -248,13 +403,94 @@
    align-items: center;
    gap: 12px;
  }

  .search-item {
    display: flex;
    align-items: center;
  }

  .search_title {
    margin-right: 8px;
    font-size: 14px;
    color: #606266;
  }
</style>

  .assign-reporter-content {
    .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>