huminmin
2026-06-01 a563ea879ef5fb6897e76d2df661e465dce2ab9b
src/views/productionManagement/processRoute/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="规格名称:">
          <el-input v-model="searchForm.model"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
      <div style="text-align: right"
           class="mb10">
        <el-button type="primary"
                   @click="showNewModal">新增工艺路线</el-button>
        <el-button type="danger"
                   @click="handleDelete"
                   :disabled="selectedRows.length === 0"
                   plain>删除工艺路线</el-button>
      </div>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total" />
    </div>
    <new-process v-if="isShowNewModal"
                 v-model:visible="isShowNewModal"
                 @completed="getList" />
    <edit-process v-if="isShowEditModal"
                  v-model:visible="isShowEditModal"
                  :record="record"
                  @completed="getList" />
    <route-item-form v-if="isShowItemModal"
                     v-model:visible="isShowItemModal"
                     :record="record"
                     @completed="getList" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'technology_routing'"
              :record-id="currentProcessRouteId" />
  </div>
</template>
<script setup>
  import { onMounted, ref } from "vue";
  import NewProcess from "@/views/productionManagement/processRoute/New.vue";
  import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
  import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
  import { listPage, del } from "@/api/productionManagement/processRoute.js";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  import { useRouter } from "vue-router";
  import { ElMessage, ElMessageBox } from "element-plus";
  const router = useRouter();
  const data = reactive({
    searchForm: {
      model: "",
    },
  });
  const { searchForm } = toRefs(data);
  const tableColumn = ref([
    {
      label: "工艺路线编号",
      prop: "processRouteCode",
    },
    {
      label: "产品名称",
      prop: "productName",
    },
    {
      label: "规格名称",
      prop: "model",
    },
    {
      label: "BOM编号",
      prop: "bomNo",
    },
    {
      label: "描述",
      prop: "description",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 280,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            showEditModal(row);
          },
        },
        {
          name: "路线项目",
          type: "text",
          clickFun: row => {
            showItemModal(row);
          },
        },
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            openFileDialog(row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const isShowNewModal = ref(false);
  const isShowEditModal = ref(false);
  const isShowItemModal = ref(false);
  const record = ref({});
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  // é™„件相关
  const fileDialogVisible = ref(false);
  const fileListDialogRef = ref(null);
  const currentProcessRouteId = ref(null);
  const filePage = reactive({
    current: 1,
    size: 1000,
    total: 0,
  });
  const { proxy } = getCurrentInstance();
  // é™„件:查询
  const fetchProcessRouteFiles = async processRouteId => {
    const params = {
      current: filePage.current,
      size: filePage.size,
      processRouteId,
    };
    const res = await listProcessRouteFiles(params);
    const records = res?.data?.records || [];
    filePage.total = res?.data?.total || records.length;
    const mapped = records.map(item => ({
      id: item.id,
      name: item.fileName || item.name,
      url: item.fileUrl || item.url,
      raw: item,
    }));
    fileListDialogRef.value?.setList(mapped);
  };
  // æ‰“开附件弹窗
  const openFileDialog = async row => {
    currentProcessRouteId.value = row.id;
    fileDialogVisible.value = true;
    await fetchProcessRouteFiles(row.id);
  };
  // åˆ·æ–°é™„件列表
  const refreshFileList = async () => {
    if (!currentProcessRouteId.value) return;
    await fetchProcessRouteFiles(currentProcessRouteId.value);
  };
  // ä¸Šä¼ é™„ä»¶
  const handleAttachmentUpload = async filePayload => {
    if (!currentProcessRouteId.value) return;
    const payload = {
      fileName: filePayload?.fileName || filePayload?.name,
      fileUrl: filePayload?.fileUrl || filePayload?.url,
      processRouteId: currentProcessRouteId.value,
    };
    await addProcessRouteFile(payload);
    ElMessage.success("文件上传成功");
    await refreshFileList();
  };
  // åˆ é™¤é™„ä»¶
  const handleAttachmentDelete = async row => {
    if (!row?.id) return false;
    try {
      await ElMessageBox.confirm("确认删除该附件?", "提示", {
        type: "warning",
      });
    } catch {
      return false;
    }
    await delProcessRouteFile([row.id]);
    ElMessage.success("删除成功");
    await refreshFileList();
  };
  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  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 };
    params.entryDate = undefined;
    listPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records.map(item => ({
          ...item,
        }));
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  // æ‰“开新增弹框
  const showNewModal = () => {
    isShowNewModal.value = true;
  };
  const showEditModal = row => {
    isShowEditModal.value = true;
    record.value = row;
  };
  const showItemModal = row => {
    router.push({
      path: "/productionManagement/processRouteItem",
      query: {
        id: row.id,
        processRouteCode: row.processRouteCode || "",
        productName: row.productName || "",
        model: row.model || "",
        bomNo: row.bomNo || "",
        bomId: row.bomId || "",
        description: row.description || "",
        type: "route",
      },
    });
  };
  // åˆ é™¤
  function handleDelete() {
    const ids = selectedRows.value.map(item => item.id);
    proxy.$modal
      .confirm("是否确认删除已勾选的数据项?")
      .then(function () {
        return del(ids);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {});
  }
  onMounted(() => {
    getList();
  });
</script>
<style scoped>
  .table_list {
    margin-top: unset;
  }
</style>