新增生产工单页面

zhangwencui

6 天以前 d85e1b4cce3e137a02f08515cd78c601fcf325b0

新增生产工单页面

 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/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>