src/api/productionManagement/productProcessRoute.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
// å·¥è‰ºè·¯çº¿é¡¹ç›®é¡µé¢æŽ¥å£
import request from "@/utils/request";

// åˆ—表查询
export function findProductProcessRouteItemList(query) {
    return request({
        url: "/productProcessRoute/list",
        method: "get",
        params: query,
    });
}

export function addOrUpdateProductProcessRouteItem(data) {
    return request({
        url: "/productProcessRoute",
        method: "post",
        data: data,
    });
}

 src/api/productionManagement/productionOrder.js

@@ -10,6 +10,15 @@
  });
}


export function productOrderListPage(query) {
  return request({
    url: "/productOrder/page",
    method: "get",
    params: query,
  });
}

// èŽ·å–炒机正在工作量数据
export function schedulingList(query) {
  return request({

 src/api/productionManagement/production_product_main.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
// ç”Ÿäº§æŠ¥å·¥é¡µé¢æŽ¥å£
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function productionProductMainListPage(query) {
    return request({
        url: "/productionProductMain/listPage",
        method: "get",
        params: query,
    });
}

 src/api/productionManagement/workOrder.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from "@/utils/request";

export function productWorkOrderPage(query) {
  return request({
    url: "/productWorkOrder/page",
    method: "get",
    params: query,
  });
}

 src/views/productionManagement/processRoute/ItemsForm.vue

@@ -297,11 +297,6 @@
const { proxy } = getCurrentInstance() || {};

const handleSubmit = () => {
  if (routeItems.value.length === 0) {
    proxy?.$modal?.msgError("请添加路线项目");
    return;
  }

  const hasEmptyProcess = routeItems.value.some(item => !item.processId);
  if (hasEmptyProcess) {
    proxy?.$modal?.msgError("请为所有项目选择工序");

 src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,531 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="工艺路线项目"
        width="800px"
        @close="closeModal"
    >
      <div class="operate-button">
        <el-button
            type="primary"
            @click="isShowProductSelectDialog = true"
            class="mb5"
            style="margin-bottom: 10px;"
        >
          é€‰æ‹©äº§å“
        </el-button>

        <el-switch
            v-model="isTable"
            inline-prompt
            active-text="表格"
            inactive-text="列表"
            @change="handleViewChange"
        />
      </div>

      <el-table
          v-if="isTable"
          ref="multipleTable"
          v-loading="tableLoading"
          border
          :data="routeItems"
          :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
          row-key="id"
          tooltip-effect="dark"
          class="lims-table"
          style="cursor: move;"
      >
        <el-table-column align="center" label="序号" width="60">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :label="item.label"
            :width="item.width"
            show-overflow-tooltip
        >
          <template #default="scope" v-if="item.dataType === 'action'">
            <el-button
                v-for="(op, opIndex) in item.operation"
                :key="opIndex"
                :type="op.type"
                :link="op.link"
                size="small"
                @click.stop="op.clickFun(scope.row)"
            >
              {{ op.name }}
            </el-button>
          </template>

          <template #default="scope" v-else>
            <template v-if="item.prop === 'processId'">
              <el-select
                  v-model="scope.row[item.prop]"
                  style="width: 100%;"
                  @mousedown.stop
              >
                <el-option
                    v-for="process in processOptions"
                    :key="process.id"
                    :label="process.name"
                    :value="process.id"
                />
              </el-select>
            </template>
            <template v-else>
              {{ scope.row[item.prop] || '-' }}
            </template>
          </template>
        </el-table-column>
      </el-table>

      <!-- ä½¿ç”¨æ™®é€šdiv替代el-steps -->
      <div
          v-else
          ref="stepsContainer"
          class="mb5 custom-steps"
          style="padding: 10px 0; display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start;"
      >
        <div
            v-for="(item, index) in routeItems"
            :key="item.id"
            class="custom-step draggable-step"
            :data-id="item.id"
            style="cursor: move; flex: 0 0 auto; min-width: 220px;"
        >
          <div class="step-content">
            <div class="step-number">{{ index + 1 }}</div>
            <el-card
                :header="item.productName"
                class="step-card"
                style="cursor: move;"
            >
              <div class="step-card-content">
                <p>{{ item.model }}</p>
                <p>{{ item.unit }}</p>
                <el-select
                    v-model="item.processId"
                    style="width: 100%;"
                    @mousedown.stop
                >
                  <el-option
                      v-for="process in processOptions"
                      :key="process.id"
                      :label="process.name"
                      :value="process.id"
                  />
                </el-select>
              </div>
              <template #footer>
                <div class="step-card-footer">
                  <el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">删除</el-button>
                </div>
              </template>
            </el-card>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <ProductSelectDialog
        v-model="isShowProductSelectDialog"
        @confirm="handelSelectProducts"
    />
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, onMounted, onUnmounted, nextTick } from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import { findProductProcessRouteItemList, addOrUpdateProductProcessRouteItem } from "@/api/productionManagement/productProcessRoute.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
import Sortable from 'sortablejs';

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  record: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

const emit = defineEmits(['update:visible', 'completed']);

const processOptions = ref([]);
const tableLoading = ref(false);
const isShowProductSelectDialog = ref(false);
const routeItems = ref([]);
let tableSortable = null;
let stepsSortable = null;
const multipleTable = ref(null);
const stepsContainer = ref(null);
const isTable = ref(true);

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  }
});

const tableColumn = ref([
  { label: "产品名称", prop: "productName", width: 180 },
  { label: "规格名称", prop: "model", width: 150 },
  { label: "单位", prop: "unit", width: 80 },
  { label: "工序名称", prop: "processId", width: 180 },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 100,
    operation: [
      {
        name: "删除",
        type: "danger",
        link: true,
        clickFun: (row) => {
          const idx = routeItems.value.findIndex(item => item.id === row.id);
          if (idx > -1) {
            removeItem(idx)
          }
        }
      }
    ]
  }
]);

const removeItem = (index) => {
  routeItems.value.splice(index, 1);
  nextTick(() => initSortable());
};

const removeItemByID = (id) => {
  const idx = routeItems.value.findIndex(item => item.id === id);
  if (idx > -1) {
    routeItems.value.splice(idx, 1);
    nextTick(() => initSortable());
  }
};

const closeModal = () => {
  isShow.value = false;
};

const handelSelectProducts = (products) => {
  destroySortable();

  const newData = products.map(({ id, ...product }) => ({
    ...product,
    productModelId: id,
    routeId: props.record.id,
    id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
    processId: undefined
  }));

  console.log('选择产品前数组:', routeItems.value);
  routeItems.value.push(...newData);
  routeItems.value = [...routeItems.value];
  console.log('选择产品后数组:', routeItems.value);

  // å»¶è¿Ÿåˆå§‹åŒ–，确保DOM完全渲染
  nextTick(() => {
    // å¼ºåˆ¶é‡æ–°æ¸²æŸ“组件
    if (proxy?.$forceUpdate) {
      proxy.$forceUpdate();
    }

    const temp = [...routeItems.value];
    routeItems.value = [];
    nextTick(() => {
      routeItems.value = temp;
      initSortable();
    });
  });
};

const findProcessRouteItems = () => {
  tableLoading.value = true;
  findProductProcessRouteItemList({ orderId: props.record.id })
      .then(res => {
        tableLoading.value = false;
        routeItems.value = res.data.map(item => ({
          ...item,
          processId: item.processId === 0 ? undefined : item.processId
        }));
        // å»¶è¿Ÿåˆå§‹åŒ–，确保DOM完全渲染
        nextTick(() => {
          setTimeout(() => initSortable(), 100);
        });
      })
      .catch(err => {
        tableLoading.value = false;
        console.error("获取列表失败：", err);
      });
};

const findProcessList = () => {
  processList({})
      .then(res => {
        processOptions.value = res.data;
      })
      .catch(err => {
        console.error("获取工序失败：", err);
      });
};

const { proxy } = getCurrentInstance() || {};

const handleSubmit = () => {
  const hasEmptyProcess = routeItems.value.some(item => !item.processId);
  if (hasEmptyProcess) {
    proxy?.$modal?.msgError("请为所有项目选择工序");
    return;
  }

  addOrUpdateProductProcessRouteItem({
    routeId: props.record.id,
    processRouteItem: routeItems.value.map(({ id, ...item }) => item)
  })
      .then(res => {
        isShow.value = false;
        emit('completed');
        proxy?.$modal?.msgSuccess("提交成功");
      })
      .catch(err => {
        proxy?.$modal?.msgError(`提交失败：${err.msg || "网络异常"}`);
      });
};

const destroySortable = () => {
  if (tableSortable) {
    tableSortable.destroy();
    tableSortable = null;
  }
  if (stepsSortable) {
    stepsSortable.destroy();
    stepsSortable = null;
  }
};

const initSortable = () => {
  destroySortable();

  if (isTable.value) {
    if (!multipleTable.value) return;
    const tbody = multipleTable.value.$el.querySelector('.el-table__body tbody') ||
        multipleTable.value.$el.querySelector('.el-table__body-wrapper > table > tbody');
    if (!tbody) return;

    tableSortable = new Sortable(tbody, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      handle: '.el-table__row',
      filter: '.el-button, .el-select',
      onEnd: (evt) => {
        if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;

        // ä½¿ç”¨æ•°ç»„ splice æ–¹æ³•é‡æ–°æŽ’序，与表格模式保持一致
        const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
        routeItems.value.splice(evt.newIndex, 0, moveItem);
        routeItems.value = [...routeItems.value];
        console.log('排序后数组:', routeItems.value);
      }
    });
  } else {
    if (!stepsContainer.value) return;

    // ä¿®æ”¹ï¼šç›´æŽ¥ä½¿ç”¨stepsContainer.value作为拖拽容器
    const stepsList = stepsContainer.value;
    if (!stepsList) {
      console.warn('未找到步骤条拖拽容器');
      return;
    }

    // ä¿®æ”¹ï¼šç®€åŒ–拖拽配置
    stepsSortable = new Sortable(stepsList, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      draggable: '.draggable-step', // å¯æ‹–拽元素
      handle: '.draggable-step, .step-card', // æ‹–拽手柄
      filter: '.el-button, .el-select, .el-input', // è¿‡æ»¤æŒ‰é’®/选择器
      forceFallback: true,
      fallbackClass: 'sortable-fallback',
      preventOnFilter: true,
      scroll: true,
      scrollSensitivity: 30,
      scrollSpeed: 10,
      bubbleScroll: true,
      onEnd: (evt) => {
        if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;

        // ä½¿ç”¨æ•°ç»„ splice æ–¹æ³•é‡æ–°æŽ’序
        const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
        routeItems.value.splice(evt.newIndex, 0, moveItem);
        routeItems.value = [...routeItems.value];
      }
    });

    // è°ƒè¯•ï¼šæ‰“印容器和实例，确认绑定成功
    console.log('步骤条拖拽容器:', stepsList);
    console.log('Sortable实例:', stepsSortable);
  }
};

const handleViewChange = () => {
  destroySortable();
  // å»¶è¿Ÿåˆå§‹åŒ–，确保视图切换后DOM完全渲染
  nextTick(() => {
    setTimeout(() => initSortable(), 100);
  });
};

onMounted(() => {
  findProcessRouteItems();
  findProcessList();
});

onUnmounted(() => {
  destroySortable();
});

defineExpose({
  closeModal,
  handleSubmit,
  isShow
});
</script>

<style scoped>
:deep(.sortable-ghost) {
  opacity: 0.6;
  background-color: #f5f7fa !important;
}

:deep(.el-table__row) {
  transition: background-color 0.2s;
}

:deep(.el-table__row:hover) {
  background-color: #f9fafc !important;
}

:deep(.el-card__footer){
  padding: 0 !important;
}

.operate-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ä¿®æ”¹ï¼šè‡ªå®šä¹‰æ­¥éª¤æ¡å®¹å™¨æ ·å¼ */
.custom-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  min-height: 100px;
}

/* ä¿®æ”¹ï¼šè‡ªå®šä¹‰æ­¥éª¤é¡¹æ ·å¼ */
.custom-step {
  cursor: move !important;
  padding: 8px;
  position: relative;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  min-width: 220px;
  touch-action: none;
}

/* æ‹–拽悬浮样式，提示可拖拽 */
.custom-step:hover {
  background-color: rgba(64, 158, 255, 0.05);
  transform: translateY(-2px);
}

.sortable-ghost {
  opacity: 0.4;
  background-color: #f5f7fa !important;
  border: 2px dashed #409eff;
  margin: 10px;
  transform: scale(1.02);
}

.sortable-fallback {
  opacity: 0.9;
  background-color: #f5f7fa;
  border: 1px solid #409eff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: rotate(2deg);
  margin: 10px;
}

.step-card {
  cursor: move !important;
  transition: box-shadow 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  margin: 10px;
  height: 240px;
}

.step-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-content {
  width: 220px;
  user-select: none;
}

.step-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

/* è‡ªå®šä¹‰åºå·æ ·å¼ä¼˜åŒ– */
.step-number {
  font-weight: bold;
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 0 auto 10px;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
}
</style>

 src/views/productionManagement/productionOrder/index.vue

@@ -1,41 +1,36 @@
<template>
    <div class="app-container">
        <div class="search_form">
            <div>
                <span class="search_title">客户名称：</span>
                <el-input
                    v-model="searchForm.customerName"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search"
                />
                <span class="search_title ml10">合同号：</span>
                <el-input
                    v-model="searchForm.salesContractNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search"
                />
<!--                <span class="search_title ml10">项目名称：</span>-->
<!--                <el-input-->
<!--                    v-model="searchForm.projectName"-->
<!--                    style="width: 240px"-->
<!--                    placeholder="请输入"-->
<!--                    @change="handleQuery"-->
<!--                    clearable-->
<!--                    prefix-icon="Search"-->
<!--                />-->
                <span class="search_title ml10">录入日期：</span>
                <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                                                placeholder="请选择" clearable @change="changeDaterange" />
                <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
                >搜索</el-button
                >
            </div>
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="客户名称:">
          <el-input v-model="searchForm.customerName" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="合同号:">
          <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="项目名称:">
          <el-input v-model="searchForm.projectName" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input v-model="searchForm.productCategory" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px;"
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="规格:">
          <el-input v-model="searchForm.specificationModel" 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>
                <el-button @click="handleOut">导出</el-button>
            </div>
@@ -50,6 +45,13 @@
                @pagination="pagination"
            ></PIMTable>
        </div>

    <process-route-item-form
      v-if="isShowItemModal"
      v-model:visible="isShowItemModal"
      :record="record"
      @completed="getList"
    />
    </div>
</template>

@@ -57,13 +59,14 @@
import {onMounted, ref} from "vue";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import {schedulingListPage} from "@/api/productionManagement/productionOrder.js";
import {productOrderListPage} from "@/api/productionManagement/productionOrder.js";
const { proxy } = getCurrentInstance();
import ProcessRouteItemForm from "@/views/productionManagement/productionOrder/ProcessRouteItemForm.vue";

const tableColumn = ref([
    {
        label: "录入日期",
        prop: "entryDate",
        label: "生产订单号",
        prop: "npsNo",
        width: 120,
    },
    {
@@ -71,64 +74,42 @@
        prop: "salesContractNo",
        width: 220,
    },
    // {
    //     label: "客户合同号",
    //     prop: "customerContractNo",
    //     width: 250,
    // },
  {
    label: "项目名称",
    prop: "projectName",
    width:300
  },
    {
        label: "客户名称",
        prop: "customerName",
        width: 250,
    },
    // {
    //     label: "项目名称",
    //     prop: "projectName",
    //     width:300
    // },
    {
        label: "付款状态",
        prop: "status",
        dataType: "tag",
        formatType: (params) => {
            if (params == '未完成') {
                return "danger";
            } else if (params == '已完成') {
                return "success";
            } else {
                return null;
            }
        },
    },
    {
        label: "产品大类",
        prop: "productCategory",
        width: 160,
    },
    {
        label: "规格型号",
        prop: "specificationModel",
        width: 220,
    },
    {
        label: "单位",
        prop: "unit",
        width:90
    },
    {
        label: "数量",
        prop: "quantity",
    },
    {
        label: "排产数量",
        prop: "schedulingNum",
        width: 100,
    },
    {
        label: "完工数量",
        prop: "successNum",
        width: 100,
    },
  {
    label: "产品名称",
    prop: "productCategory",
    width: 250,
  },
  {
    label: "规格",
    prop: "specificationModel",
    width: 250,
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 200,
    operation: [
      {
        name: "工艺路线",
        type: "text",
        clickFun: (row) => {
          showRouteItemModal(row);
        }
      }
    ]
  }
]);
const tableData = ref([]);
const tableLoading = ref(false);
@@ -143,10 +124,8 @@
        customerName: "",
        salesContractNo: "",
        projectName: "",
        status: "",
        entryDate: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")], // å½•å…¥æ—¥æœŸï¼Œé»˜è®¤å½“天
        entryDateStart: dayjs().format("YYYY-MM-DD"),
        entryDateEnd: dayjs().format("YYYY-MM-DD"),
    productCategory: "",
    specificationModel: "",
    },
});
const { searchForm } = toRefs(data);
@@ -177,13 +156,20 @@
    // æž„造一个新的对象，不包含entryDate字段
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined
    schedulingListPage(params).then((res) => {
    productOrderListPage(params).then((res) => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
    }).catch(() => {
        tableLoading.value = false;
    })
};

const isShowItemModal = ref(false);
const record = ref({});
const showRouteItemModal = (row) => {
  isShowItemModal.value = true
  record.value = row
};

// å¯¼å‡º
@@ -201,6 +187,9 @@
        });
};

const handleConfirmRoute = () => {
}

onMounted(() => {
    getList();
});

 src/views/productionManagement/productionReporting/Input.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="投入"
        @close="closeModal"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="data"
          :page="page"
          :tableLoading="tableLoading"
          @pagination="pagination"
      ></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeModal">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(['update:visible', 'completed']);

const page = reactive({
  current: 1,
  size: 100,
  total: 0
});

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

const tableLoading = ref(false);

const tableColumn = [
  {
    label: '报工单号',
    prop: 'productNo',
  },
  {
    label: '产品型号',
    prop: 'productModelName',
  },
  {
    label: '投入数量',
    prop: 'quantity',
  },
]

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

const data = ref([])

const closeModal = () => {
  isShow.value = false;
};

const fetchData = () => {
};

defineExpose({
  closeModal,
  isShow,
});

onMounted(() => {
  fetchData()
})
</script>

 src/views/productionManagement/productionReporting/Output.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="产出"
        @close="closeModal"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="data"
          :page="page"
          :tableLoading="tableLoading"
          @pagination="pagination"
      ></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="closeModal">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(['update:visible', 'completed']);

const page = reactive({
  current: 1,
  size: 100,
  total: 0
});

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

const tableLoading = ref(false);

const tableColumn = [
  {
    label: '报工单号',
    prop: 'productNo',
  },
  {
    label: '产品型号',
    prop: 'productModelName',
  },
  {
    label: '产出数量',
    prop: 'quantity',
  },
]

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

const data = ref([])

const closeModal = () => {
  isShow.value = false;
};

const fetchData = () => {
};

defineExpose({
  closeModal,
  isShow,
});

onMounted(() => {
  fetchData()
})
</script>

 src/views/productionManagement/productionReporting/index.vue

@@ -2,30 +2,22 @@
    <div class="app-container">
        <div class="search_form">
            <el-form :model="searchForm" :inline="true">
                <el-form-item label="客户名称:">
                    <el-input v-model="searchForm.customerName" placeholder="请输入" clearable prefix-icon="Search"
                <el-form-item label="报工人员名称:">
                    <el-input v-model="searchForm.nickName" placeholder="请输入" clearable prefix-icon="Search"
                                        style="width: 200px;"
                                        @change="handleQuery" />
                </el-form-item>
                <el-form-item label="合同号:">
                    <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search"
                <el-form-item label="工单号:">
                    <el-input v-model="searchForm.workOrderNo" placeholder="请输入" clearable prefix-icon="Search"
                                        style="width: 200px;"
                                        @change="handleQuery" />
                </el-form-item>
<!--                <el-form-item label="项目名称:">-->
<!--                    <el-input v-model="searchForm.projectName" placeholder="请输入" clearable prefix-icon="Search"-->
<!--                                        style="width: 200px;"-->
<!--                                        @change="handleQuery" />-->
<!--                </el-form-item>-->
                <el-form-item label="排产日期:">
                    <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                                                    placeholder="请选择" clearable @change="changeDaterange" />
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 140px" clearable>
                        <el-option label="待生产" :value="1"></el-option>
                        <el-option label="已报工" :value="3"></el-option>
                        <el-option label="生产中" :value="2"></el-option>
                <el-form-item label="工单状态:">
                    <el-select v-model="searchForm.workOrderStatus" placeholder="请选择工单状态" style="width: 140px" clearable>
                        <el-option label="待确认" :value="1"></el-option>
            <el-option label="待生产" :value="2"></el-option>
            <el-option label="生产中" :value="3"></el-option>
            <el-option label="已生产" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
@@ -135,31 +127,37 @@
            </PIMTable>
        </div>
        <form-dia ref="formDia" @close="handleQuery"></form-dia>
    <input-modal
        v-if="isShowInput"
        v-model:visible="isShowInput"
    />
    <output-modal
        v-if="isShowOutput"
        v-model:visible="isShowOutput"
    />
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import FormDia from "@/views/productionManagement/productionReporting/components/formDia.vue";
import {staffJoinDel, staffJoinListPage} from "@/api/personnelManagement/onboarding.js";
import {ElMessageBox} from "element-plus";
import dayjs from "dayjs";
import {
    productionReportUpdate,
    workListPage,
    workListPageById
} from "@/api/productionManagement/productionReporting.js";
import {
  productionProductMainListPage,
} from "@/api/productionManagement/production_product_main.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import InputModal from "@/views/productionManagement/productionReporting/Input.vue";
import OutputModal from "@/views/productionManagement/productionReporting/Output.vue";

const data = reactive({
    searchForm: {
        customerName: "",
        salesContractNo: "",
        projectName: "",
        status: "",
        entryDate: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")], // å½•å…¥æ—¥æœŸï¼Œé»˜è®¤å½“天
        entryDateStart: dayjs().format("YYYY-MM-DD"),
        entryDateEnd: dayjs().format("YYYY-MM-DD"),
    nickName: "",
    workOrderNo: "",
    workOrderStatus: "",
    },
});
const { searchForm } = toRefs(data);
@@ -167,13 +165,23 @@
const expandData = ref([]);
const userList = ref([])
const tableColumn = ref([
  {
    label: "报工单号",
    prop: "productNo",
    width: 120,
  },
  {
    label: "报工人员",
    prop: "nickName",
    width: 120,
  },
  {
    label: "工单编号",
    prop: "workOrderNo",
    width: 120,
  },
    {
        type: "expand",
        dataType: "slot",
        slot: "expand",
    },
    {
        label: "状态",
        label: "报工状态",
        prop: "status",
        dataType: "tag",
        formatData: (params) => {
@@ -195,92 +203,62 @@
            }
        },
    },
    {
        label: "排产日期",
        prop: "schedulingDate",
        width: 120,
    },
    {
        label: "排产人",
        prop: "schedulingUserName",
    },
    {
        label: "产线",
        prop: "productionLine",
    },
    {
        label: "合同号",
        prop: "salesContractNo",
        width: 200,
    },
    // {
    //     label: "客户合同号",
    //     prop: "customerContractNo",
    //     width: 200,
    // },
    {
        label: "客户名称",
        prop: "customerName",
        width: 200,
    },
    // {
    //     label: "项目名称",
    //     prop: "projectName",
    //     width:300
    // },
    {
        label: "产品大类",
        prop: "productCategory",
        width: 150,
    },
    {
        label: "规格型号",
        prop: "specificationModel",
        width: 150,
    },
    {
        label: "绑定机器",
        prop: "speculativeTradingName",
        width: 220,
    },
    {
        label: "单位",
        prop: "unit",
    },
    {
        label: "工序",
        prop: "process",
    },
    // {
    //     label: "口味分类",
    //     prop: "type",
    //     width: 150,
    // },
    {
        label: "损耗",
        prop: "loss",
        width: 150,
    },
    {
        label: "排产数量",
        prop: "schedulingNum",
        width: 100,
    },
    {
        label: "生产数量",
        prop: "finishedNum",
        width: 100,
    },
    {
        label: "待生产数量",
        prop: "pendingFinishNum",
        width: 100,
    },
    {
        label: "备注",
        prop: "remark",
        width: 200,
    },
  {
    label: "工单状态",
    prop: "workOrderStatus",
    dataType: "tag",
    formatData: (params) => {
      switch (params) {
        case "1":
          return "待确认";
        case "2":
          return "待生产";
        case "3":
          return "生产中";
        case "4":
          return "已生产";
        default:
          return "";
      }
    },
    formatType: (params) => {
      switch (params) {
        case "1":
          return "primary";
        case "2":
          return "info";
        case "3":
          return "warning";
        case "4":
          return "success";
        default:
          return "";
      }
    },
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 200,
    operation: [
      {
        name: "查看投入",
        type: "text",
        clickFun: (row) => {
          showInput(row)
        }
      },
      {
        name: "查看产出",
        type: "text",
        clickFun: (row) => {
          showOutput(row)
        }
      },
    ]
  }
]);
const tableData = ref([]);
const selectedRows = ref([]);
@@ -320,7 +298,7 @@
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined
    expandedRowKeys.value = []
    workListPage(params).then(res => {
    productionProductMainListPage(params).then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records.map(item => ({
            ...item,
@@ -414,30 +392,18 @@
    })
};

// åˆ é™¤
const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
        ids = selectedRows.value.map((item) => item.id);
    } else {
        proxy.$modal.msgWarning("请选择数据");
        return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            staffJoinDel(ids).then((res) => {
                proxy.$modal.msgSuccess("删除成功");
                getList();
            });
        })
        .catch(() => {
            proxy.$modal.msg("已取消");
        });
};
// æ‰“开投入模态框
const isShowInput = ref(false);
const showInput = (row) => {
    isShowInput.value = true;
}

// æ‰“开产出模态框
const isShowOutput = ref(false);
const showOutput = (row) => {
    isShowOutput.value = true;
}

// å¯¼å‡º
const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {

 src/views/productionManagement/workOrder/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,153 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">工单编号：</span>
        <el-input v-model="searchForm.workOrderNo"
                  style="width: 240px"
                  placeholder="请输入"
                  @change="handleQuery"
                  clearable
                  prefix-icon="Search" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="qrDialogVisible"
               title="二维码"
               width="300px">
      <div style="text-align:center;">
        <img :src="qrCodeUrl"
             alt="二维码"
             style="width:200px;height:200px;" />
        <div style="margin:10px 0;">
          <el-button type="primary"
                     @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { ElMessageBox } from "element-plus";
  import dayjs from "dayjs";
  import { productWorkOrderPage } from "@/api/productionManagement/workOrder.js";
  import QRCode from "qrcode";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  const { proxy } = getCurrentInstance();

  const tableColumn = ref([
    {
      label: "工单编号",
      prop: "workOrderNo",
    },
    {
      label: "产品名称",
      prop: "productName",
    },
    {
      label: "规格",
      prop: "model",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      label: "工序名称",
      prop: "processName",
    },
    {
      label: "计划开始时间",
      prop: "planStartTime",
    },
    {
      label: "计划结束时间",
      prop: "planEndTime",
    },
    {
      label: "实际开始时间",
      prop: "actualStartTime",
    },
    {
      label: "实际结束时间",
      prop: "actualEndTime",
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const qrDialogVisible = ref(false);
  const qrCodeUrl = ref("");
  const qrRowData = ref(null);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });

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

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  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 };
    productWorkOrderPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(() => {
        tableLoading.value = false;
      });
  };
  const showQRCode = async row => {
    // ç›´æŽ¥ä½¿ç”¨URL，不要用JSON.stringify包装
    const qrContent = proxy.javaApi + "/device-info?deviceId=" + row.id;
    qrCodeUrl.value = await QRCode.toDataURL(qrContent);
    qrRowData.value = row;
    qrDialogVisible.value = true;
  };
  const downloadQRCode = () => {
    const link = document.createElement("a");
    link.href = qrCodeUrl.value;
    link.download = `二维码_${qrRowData.value.id}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="scss"></style>