feat(生产管理): 新增工序设备绑定管理功能

yuan

7 小时以前 4929ce0e87c60a2786ceb3bffeea867690920127

feat(生产管理): 新增工序设备绑定管理功能

 src/api/productionManagement/productionProcess.js

@@ -66,4 +66,32 @@
    method: "post",
    responseType: "blob",
  });
}

// 获取绑定的设备列表
export function getBindDevices(processId) {
  return request({
    url: "/productProcess/getBindDevices",
    method: "get",
    params: { processId },
  });
}

// 绑定设备
export function bindDevices(processId, deviceIds) {
  return request({
    url: "/productProcess/bindDevices",
    method: "post",
    params: { processId },
    data: deviceIds,
  });
}

// 解除设备绑定
export function unbindDevice(processId, deviceId) {
  return request({
    url: "/productProcess/unbindDevice",
    method: "delete",
    params: { processId, deviceId },
  });
}

 src/views/productionManagement/productionProcess/index.vue

@@ -93,6 +93,45 @@
      </template>
    </el-dialog>

    <!-- 查看设备弹框 -->
    <el-dialog v-model="isShowDeviceModal"
               title="设备列表"
               width="900px">
      <div style="text-align: right"
           class="mb10">
        <el-button type="primary"
                   @click="showAddDeviceModal">添加设备</el-button>
      </div>
      <PIMTable rowKey="id"
                :column="deviceColumns"
                :tableData="deviceTableData"
                :page="devicePage"
                :isSelection="false"
                @pagination="devicePagination"
                :total="devicePage.total"></PIMTable>
    </el-dialog>

    <!-- 添加设备弹框 -->
    <el-dialog v-model="isShowSelectDeviceModal"
               title="选择设备"
               width="900px">
      <PIMTable rowKey="id"
                :column="selectDeviceColumns"
                :tableData="selectDeviceTableData"
                :page="selectDevicePage"
                :isSelection="true"
                @selection-change="handleSelectDeviceChange"
                @pagination="selectDevicePagination"
                :total="selectDevicePage.total"></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="handleBindDevices">确定</el-button>
          <el-button @click="isShowSelectDeviceModal = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <new-process v-if="isShowNewModal"
                 v-model:visible="isShowNewModal"
                 @completed="getList" />
@@ -124,6 +163,9 @@
    del,
    importData,
    downloadTemplate,
    getBindDevices,
    bindDevices,
    unbindDevice,
  } from "@/api/productionManagement/productionProcess.js";
  import {
    listPage as listProcessParamPage,
@@ -131,6 +173,7 @@
    addProductProcessParameter,
  } from "@/api/productionManagement/productProcessParameter.js";
  import { listPage as listProductParamPage } from "@/api/productionManagement/productionRecords.js";
  import { getLedgerPage } from "@/api/equipmentManagement/ledger.js";
  import { getToken } from "@/utils/auth";

  const data = reactive({
@@ -177,13 +220,20 @@
      label: "操作",
      align: "center",
      fixed: "right",
      width: 280,
      width: 350,
      operation: [
        {
          name: "查看",
          type: "text",
          clickFun: row => {
            showProcessParamModal(row);
          },
        },
        {
          name: "查看设备",
          type: "text",
          clickFun: row => {
            showDeviceModal(row);
          },
        },
        {
@@ -240,6 +290,40 @@
      formatData: v => (v === "1" || v === 1 ? "是" : "否"),
    },
  ]);

  // 设备列表列配置
  const deviceColumns = ref([
    { label: "设备名称", prop: "deviceName" },
    { label: "规格型号", prop: "deviceModel" },
    { label: "设备品牌", prop: "deviceBrand" },
    { label: "设备类型", prop: "type" },
    { label: "供应商", prop: "supplierName" },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      width: 100,
      operation: [
        {
          name: "删除",
          type: "text",
          typeAttrs: { danger: true },
          clickFun: row => {
            handleUnbindDevice(row);
          },
        },
      ],
    },
  ]);

  // 可选设备列表列配置
  const selectDeviceColumns = ref([
    { label: "设备名称", prop: "deviceName" },
    { label: "规格型号", prop: "deviceModel" },
    { label: "设备品牌", prop: "deviceBrand" },
    { label: "设备类型", prop: "type" },
    { label: "供应商", prop: "supplierName" },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
@@ -270,6 +354,23 @@
  const productParamTableData = ref([]);
  const processParamSelectedRows = ref([]);
  const productParamSelectedRows = ref([]);

  // 设备相关变量
  const isShowDeviceModal = ref(false);
  const isShowSelectDeviceModal = ref(false);
  const deviceTableData = ref([]);
  const selectDeviceTableData = ref([]);
  const selectedDeviceRows = ref([]);
  const devicePage = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const selectDevicePage = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const { proxy } = getCurrentInstance();

  // 导入相关配置
@@ -421,6 +522,107 @@
        .catch(() => {});
  };

  // 查看设备弹框
  const showDeviceModal = row => {
    currentProcess.value = row;
    isShowDeviceModal.value = true;
    devicePage.current = 1;
    getDeviceList();
  };

  // 获取已绑定的设备列表
  const getDeviceList = () => {
    if (!currentProcess.value) return;
    getBindDevices(currentProcess.value.id)
      .then(res => {
        deviceTableData.value = res.data || [];
        devicePage.total = res.data?.length || 0;
      })
      .catch(() => {});
  };

  // 设备列表分页
  const devicePagination = obj => {
    devicePage.current = obj.page;
    devicePage.size = obj.limit;
    getDeviceList();
  };

  // 解绑设备
  const handleUnbindDevice = row => {
    if (!currentProcess.value) return;
    proxy.$modal.confirm("是否确认解绑该设备？")
      .then(() => {
        return unbindDevice(currentProcess.value.id, row.id);
      })
      .then(() => {
        proxy.$modal.msgSuccess("解绑成功");
        getDeviceList();
      })
      .catch(() => {});
  };

  // 打开添加设备弹框
  const showAddDeviceModal = () => {
    isShowSelectDeviceModal.value = true;
    selectDevicePage.current = 1;
    selectedDeviceRows.value = [];
    getSelectDeviceList();
  };

  // 获取可选设备列表
  const getSelectDeviceList = () => {
    if (!currentProcess.value) return;
    // 先获取已绑定的设备ID
    getBindDevices(currentProcess.value.id)
      .then(res => {
        const boundDeviceIds = new Set(
          (res.data || []).map(item => item.id).filter(id => !!id)
        );
        // 获取设备台账分页列表
        return getLedgerPage(selectDevicePage).then(deviceRes => {
          const allDevices = deviceRes.data?.records || [];
          // 过滤掉已绑定的设备，并标记为disabled
          selectDeviceTableData.value = allDevices.map(item => ({
            ...item,
            disabled: boundDeviceIds.has(item.id),
          }));
          selectDevicePage.total = deviceRes.data?.total || 0;
        });
      })
      .catch(() => {});
  };

  // 选择设备变化
  const handleSelectDeviceChange = selection => {
    selectedDeviceRows.value = selection;
  };

  // 选择设备分页
  const selectDevicePagination = obj => {
    selectDevicePage.current = obj.page;
    selectDevicePage.size = obj.limit;
    getSelectDeviceList();
  };

  // 绑定设备
  const handleBindDevices = () => {
    if (!currentProcess.value) return;
    const selectedList = selectedDeviceRows.value || [];
    if (!selectedList.length) {
      proxy.$modal.msgWarning("请选择要绑定的设备");
      return;
    }
    const deviceIds = selectedList.map(item => item.id);
    bindDevices(currentProcess.value.id, deviceIds)
      .then(() => {
        proxy.$modal.msgSuccess("绑定成功");
        isShowSelectDeviceModal.value = false;
        getDeviceList();
      })
      .catch(() => {});
  };

  // 删除
  function handleDelete() {
    const no = selectedRows.value.map(item => item.no);