提交修改查询样式，工单计划管理等

chengxiangling

2025-05-13 7e9e0bff3ef15366693648f25810723ec557ed62

 src/views/mainPlan/gasPiping/index.vue

@@ -1,79 +1,81 @@
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        :label-width="locale === 'zh' ? '90px' : '180px'"
        label-position="left"
      >
        <!-- <el-row :gutter="20">
        <el-col :span="6"> -->
        <el-form-item :label="$t('plan.query.daterangePlanStartDay')">
          <el-date-picker
            style="width: 240px"
            v-model="daterangePlanStartDay"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('plan.placeholder.startDate')"
            :end-placeholder="$t('plan.placeholder.endDate')"
          ></el-date-picker>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="6"> -->
        <el-form-item :label="$t('plan.query.daterangePlanEndDay')">
          <el-date-picker
            style="width: 240px"
            v-model="daterangePlanEndDay"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('plan.placeholder.startDate')"
            :end-placeholder="$t('plan.placeholder.endDate')"
          ></el-date-picker>
        </el-form-item>
        <!-- </el-col>
        <el-col :span="6"> -->
        <el-form-item
          :label="$t('plan.query.documentNumber')"
          prop="documentNumber"
        >
          <el-input
            style="width: 240px"
            v-model="queryParams.documentNumber"
            :placeholder="$t('plan.placeholder.documentNumber')"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <!-- </el-col>
        <el-col :span="6"> -->
        <el-form-item :label="$t('plan.query.customer')" prop="customer">
          <el-input
            style="width: 240px"
            v-model="queryParams.customer"
            :placeholder="$t('plan.placeholder.customer')"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <!-- </el-col>
        <el-col  :span="24"  style="text-align: right;"> -->
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">{{
            $t("common.common.query")
          }}</el-button>
          <el-button icon="Refresh" @click="resetQuery">{{
            $t("common.common.reset")
          }}</el-button>
        </el-form-item>
        <!-- </el-col> -->
        <!-- </el-row> -->
      </el-form>
    </el-row>
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      :label-width="locale === 'zh' ? '90px' : '140px'"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="locale === 'zh' ? 12 : 12">
          <el-form-item :label="$t('plan.query.daterangePlanStartDay')">
            <el-date-picker
              :style="{ width: locale === 'zh' ? '220px' : '240px' }"
              v-model="daterangePlanStartDay"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('plan.placeholder.startDate')"
              :end-placeholder="$t('plan.placeholder.endDate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="locale === 'zh' ? 12 : 12">
          <el-form-item :label="$t('plan.query.daterangePlanEndDay')">
            <el-date-picker
              :style="{ width: locale === 'zh' ? '220px' : '240px' }"
              v-model="daterangePlanEndDay"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('plan.placeholder.startDate')"
              :end-placeholder="$t('plan.placeholder.endDate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="locale === 'zh' ? 12 : 12">
          <el-form-item
            :label="$t('plan.query.documentNumber')"
            prop="documentNumber"
          >
            <el-input
              :style="{ width: locale === 'zh' ? '220px' : '240px' }"
              v-model="queryParams.documentNumber"
              :placeholder="$t('plan.placeholder.documentNumber')"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="locale === 'zh' ? 12 : 12">
          <el-form-item :label="$t('plan.query.customer')" prop="customer">
            <el-input
              :style="{ width: locale === 'zh' ? '220px' : '240px' }"
              v-model="queryParams.customer"
              :placeholder="$t('plan.placeholder.customer')"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-form-item class="column-with-margin">
            <el-button type="primary" icon="Search" @click="handleQuery">{{
              $t("common.common.query")
            }}</el-button>
            <el-button icon="Refresh" @click="resetQuery">{{
              $t("common.common.reset")
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
@@ -208,7 +210,7 @@
      <el-row v-show="isVisible">
        <el-col>
          <div>
            <h2>{{$t("plan.upload.dataPreview")}}</h2>
            <h2>{{ $t("plan.upload.dataPreview") }}</h2>
          </div>
          <HxlhTable
            style="width: 100%"
@@ -223,8 +225,9 @@
        <el-col>
          <div style="text-align: right">
            <h4>
              {{$t("plan.upload.totalUpload")}}<span style="color: blue">{{ total }}</span
              >{{$t("plan.upload.itemUpload")}}
              {{ $t("plan.upload.totalUpload")
              }}<span style="color: blue">{{ total }}</span
              >{{ $t("plan.upload.itemUpload") }}
            </h4>
          </div>
        </el-col>
@@ -238,10 +241,12 @@
            :disabled="planned"
            @click="uploadParse"
            v-hasPermi="['gasPiping:confirm']"
            >{{$t('plan.upload.confirmUpload')}}</el-button
            >{{ $t("plan.upload.confirmUpload") }}</el-button
          >
          <!-- <el-button type="primary" @click="submitFileForm">确 定</el-button> -->
          <el-button @click="dialogCancel">{{$t('plan.upload.cancel')}}</el-button>
          <el-button @click="dialogCancel">{{
            $t("plan.upload.cancel")
          }}</el-button>
        </div>
      </template>
    </el-dialog>
@@ -321,380 +326,390 @@
    documentNumber: null,
  },
  rules: {
    id: [{ required: true, message:t("plan.message.idNotBeEmpty"), trigger: "blur" }],
    id: [
      {
        required: true,
        message: t("plan.message.idNotBeEmpty"),
        trigger: "blur",
      },
    ],
  },
});

const { queryParams } = toRefs(data);
watch(locale, (newLocale) => {
  exampleColumns.value = [
    { type: "seq", title: t("plan.table.seq"), width: 60 },
    {
      title: t("plan.table.masterPlanner"),
      field: "masterPlanner",
      width: 100,
    },
    {
      title: t("plan.table.weekDay"),
      field: "weekDay",
      width: 100,
      formatter: ({ cellValue, row, column }) => {
        if (cellValue) {
          const weekDay = new Date(cellValue);
          const year = weekDay.getFullYear();
          const month = String(weekDay.getMonth() + 1).padStart(2, "0");
          const day = String(weekDay.getDate()).padStart(2, "0");
          return `${month}-${day}`;
        }
        return "";
watch(
  locale,
  (newLocale) => {
    exampleColumns.value = [
      { type: "seq", title: t("plan.table.seq"), width: 60 },
      {
        title: t("plan.table.masterPlanner"),
        field: "masterPlanner",
        width: 100,
      },
    },
    {
      title: t("plan.table.weekCycle"),
      field: "weekCycle",
      width: 80,
    },
    {
      title: t("plan.table.mainPartNumber"),
      field: "mainPartNumber",
      width: 150,
    },
    {
      title: t("plan.table.mainPartDrawingNumber"),
      field: "mainPartDrawingNumber",
      width: 150,
    },
    {
      title: t("plan.table.customer"),
      field: "customer",
      width: 200,
    },
    {
      title: t("plan.table.businessType"),
      field: "businessType",
      width: 150,
    },
    {
      title: t("plan.table.documentNumber"),
      field: "documentNumber",
      width: 150,
    },
    {
      title: t("plan.table.requirementType"),
      field: "requirementType",
      width: 150,
    },
    {
      title: t("plan.table.documentStatus"),
      field: "documentStatus",
      width: 100,
    },
    {
      title: t("plan.table.itemNumber"),
      field: "itemNumber",
      width: 150,
    },
    {
      title: t("plan.table.drawingNo"),
      field: "drawingNo",
      width: 150,
    },
    {
      title: t("plan.table.versionNumber"),
      field: "versionNumber",
      width: 100,
    },
    {
      title: t("plan.table.productionQuantity"),
      field: "productionQuantity",
      width: 100,
    },
    {
      title: t("plan.table.goodProductsQuantity"),
      field: "goodProductsQuantity",
      width: 100,
    },
    {
      title: t("plan.table.processNumber"),
      field: "processNumber",
      width: 150,
    },
    {
      title: t("plan.table.factoryCenter"),
      field: "workCenter",
      width: 150,
    },
    {
      title: t("plan.table.dependencyDepartment"),
      field: "department",
      width: 100,
    },
    {
      title: t("plan.table.planStartDay"),
      field: "planStartDay",
      width: 100,
    },
    {
      title: t("plan.table.planEndDayDate"),
      field: "planEndDay",
      width: 100,
    },
    {
      title: t("plan.table.standbyNumber"),
      field: "standbyNumber",
      width: 100,
    },
    {
      title: t("plan.table.standbyName"),
      field: "standbyName",
      width: 200,
    },
    {
      title: t("plan.table.standbyStock"),
      field: "standbyStock",
      width: 100,
    },
    {
      title: t("plan.table.departmentToNextProcessBelongs"),
      field: "nextProcessDeparment",
      width: 150,
    },
    {
      title: t("plan.table.isSuspended"),
      field: "isSuspended",
      width: 100,
    },
    {
      title: t("plan.table.isOutsourcing"),
      field: "isOutsourcing",
      width: 100,
    },
    {
      title: t("plan.table.account"),
      field: "account",
      width: 100,
    },
    // {
    //   title: '上阶物料',
    //   field: 'advancedMaterials',
    //   width: 100,
    // },
    // {
    //   title: '上阶单据号',
    //   field: 'advancedDocumentNumber',
    //   width: 100,
    // },
    // {
    //   title: '上阶需求日期',
    //   field: 'advancedRequirementDay',
    //   width: 150,
    // },
    // {
    //   title: '计划齐套',
    //   field: 'isPlanComplete',
    //   width: 100,
    // },
    // {
    //   title: '库存齐套',
    //   field: 'isStockComplete',
    //   width: 100,
    // },
    // {
    //   title: '是否有折返工序',
    //   field: 'hasTurnback',
    //   width: 150,
    // },
    // {
    //   title: '风险标识',
    //   field: 'hasRisk',
    //   width: 100,
    // },
  ];
  columns.value = [
    { type: "checkbox", width: 60, align: "center" },
    { type: "seq", title: t("plan.table.seq"), width: 60 },
    {
      title:  t("plan.table.masterPlanner"),
      field: "masterPlanner",
      width: 100,
    },
    {
      title: t("plan.table.weekDay"),
      field: "weekDay",
      width: 100,
      formatter: ({ cellValue, row, column }) => {
        if (cellValue) {
          const weekDay = new Date(cellValue);
          const year = weekDay.getFullYear();
          const month = String(weekDay.getMonth() + 1).padStart(2, "0");
          const day = String(weekDay.getDate()).padStart(2, "0");
          return `${month}-${day}`;
        }
        return "";
      {
        title: t("plan.table.weekDay"),
        field: "weekDay",
        width: 100,
        formatter: ({ cellValue, row, column }) => {
          if (cellValue) {
            const weekDay = new Date(cellValue);
            const year = weekDay.getFullYear();
            const month = String(weekDay.getMonth() + 1).padStart(2, "0");
            const day = String(weekDay.getDate()).padStart(2, "0");
            return `${month}-${day}`;
          }
          return "";
        },
      },
    },
    {
      title: t("plan.table.weekCycle"),
      field: "weekCycle",
      width: 80,
    },
    {
      title: t("plan.table.mainPartNumber"),
      field: "mainPartNumber",
      width: 150,
    },
    {
      title: t("plan.table.mainPartDrawingNumber"),
      field: "mainPartDrawingNumber",
      width: 150,
    },
    {
      title: t("plan.table.customer"),
      field: "customer",
      width: 200,
    },
    {
      title: t("plan.table.businessType"),
      field: "businessType",
      width: 100,
    },
    {
      title: t("plan.table.documentNumber"),
      field: "documentNumber",
      width: 100,
    },
    {
      title: t("plan.table.requirementType"),
      field: "requirementType",
      width: 100,
    },
    {
      title: t("plan.table.documentStatus"),
      field: "documentStatus",
      width: 100,
    },
    {
      title: t("plan.table.itemNumber"),
      field: "itemNumber",
      width: 100,
    },
    {
      title: t("plan.table.drawingNo"),
      field: "drawingNo",
      width: 100,
    },
    {
      title: t("plan.table.versionNumber"),
      field: "versionNumber",
      width: 100,
    },
    {
      title: t("plan.table.productionQuantity"),
      field: "productionQuantity",
      width: 100,
    },
    {
      title: t("plan.table.goodProductsQuantity"),
      field: "goodProductsQuantity",
      width: 100,
    },
    {
      title: t("plan.table.processNumber"),
      field: "processNumber",
      width: 100,
    },
    {
      title: t("plan.table.factoryCenter"),
      field: "workCenter",
      width: 100,
    },
    {
      title: t("plan.table.dependencyDepartment"),
      field: "department",
      width: 100,
    },
    {
      title: t("plan.table.planStartDay"),
      field: "planStartDay",
      width: 100,
    },
    {
      title: t("plan.table.planEndDayDate"),
      field: "planEndDay",
      width: 100,
    },
    {
      title: t("plan.table.standbyNumber"),
      field: "standbyNumber",
      width: 100,
    },
    {
      title: t("plan.table.standbyName"),
      field: "standbyName",
      width: 100,
    },
    {
      title: t("plan.table.standbyStock"),
      field: "standbyStock",
      width: 100,
    },
    {
      title: t("plan.table.departmentToNextProcessBelongs"),
      field: "nextProcessDeparment",
      width: 100,
    },
    {
      title: t("plan.table.isSuspended"),
      field: "isSuspended",
      width: 100,
    },
    {
      title: t("plan.table.isOutsourcing"),
      field: "isOutsourcing",
      width: 100,
    },
    {
      title: t("plan.table.account"),
      field: "account",
      width: 100,
    },
    {
      title: t("plan.table.advancedMaterials"),
      field: "advancedMaterials",
      width: 100,
    },
    {
      title: t("plan.table.advancedDocumentNumber"),
      field: "advancedDocumentNumber",
      width: 100,
    },
    {
      title: t("plan.table.advancedRequirementDay"),
      field: "advancedRequirementDay",
      width: 100,
    },
    {
      title: t("plan.table.isPlanComplete"),
      field: "isPlanComplete",
      width: 100,
    },
    {
      title: t("plan.table.isStockComplete"),
      field: "isStockComplete",
      width: 100,
    },
    {
      title: t("plan.table.hasTurnback"),
      field: "hasTurnback",
      width: 100,
    },
    {
      title: t("plan.table.hasRisk"),
      field: "hasRisk",
      width: 100,
    },
  ];
},{ immediate: true, deep: true });
      {
        title: t("plan.table.weekCycle"),
        field: "weekCycle",
        width: 80,
      },
      {
        title: t("plan.table.mainPartNumber"),
        field: "mainPartNumber",
        width: 150,
      },
      {
        title: t("plan.table.mainPartDrawingNumber"),
        field: "mainPartDrawingNumber",
        width: 150,
      },
      {
        title: t("plan.table.customer"),
        field: "customer",
        width: 200,
      },
      {
        title: t("plan.table.businessType"),
        field: "businessType",
        width: 150,
      },
      {
        title: t("plan.table.documentNumber"),
        field: "documentNumber",
        width: 150,
      },
      {
        title: t("plan.table.requirementType"),
        field: "requirementType",
        width: 150,
      },
      {
        title: t("plan.table.documentStatus"),
        field: "documentStatus",
        width: 100,
      },
      {
        title: t("plan.table.itemNumber"),
        field: "itemNumber",
        width: 150,
      },
      {
        title: t("plan.table.drawingNo"),
        field: "drawingNo",
        width: 150,
      },
      {
        title: t("plan.table.versionNumber"),
        field: "versionNumber",
        width: 100,
      },
      {
        title: t("plan.table.productionQuantity"),
        field: "productionQuantity",
        width: 100,
      },
      {
        title: t("plan.table.goodProductsQuantity"),
        field: "goodProductsQuantity",
        width: 100,
      },
      {
        title: t("plan.table.processNumber"),
        field: "processNumber",
        width: 150,
      },
      {
        title: t("plan.table.factoryCenter"),
        field: "workCenter",
        width: 150,
      },
      {
        title: t("plan.table.dependencyDepartment"),
        field: "department",
        width: 100,
      },
      {
        title: t("plan.table.planStartDay"),
        field: "planStartDay",
        width: 100,
      },
      {
        title: t("plan.table.planEndDayDate"),
        field: "planEndDay",
        width: 100,
      },
      {
        title: t("plan.table.standbyNumber"),
        field: "standbyNumber",
        width: 100,
      },
      {
        title: t("plan.table.standbyName"),
        field: "standbyName",
        width: 200,
      },
      {
        title: t("plan.table.standbyStock"),
        field: "standbyStock",
        width: 100,
      },
      {
        title: t("plan.table.departmentToNextProcessBelongs"),
        field: "nextProcessDeparment",
        width: 150,
      },
      {
        title: t("plan.table.isSuspended"),
        field: "isSuspended",
        width: 100,
      },
      {
        title: t("plan.table.isOutsourcing"),
        field: "isOutsourcing",
        width: 100,
      },
      {
        title: t("plan.table.account"),
        field: "account",
        width: 100,
      },
      // {
      //   title: '上阶物料',
      //   field: 'advancedMaterials',
      //   width: 100,
      // },
      // {
      //   title: '上阶单据号',
      //   field: 'advancedDocumentNumber',
      //   width: 100,
      // },
      // {
      //   title: '上阶需求日期',
      //   field: 'advancedRequirementDay',
      //   width: 150,
      // },
      // {
      //   title: '计划齐套',
      //   field: 'isPlanComplete',
      //   width: 100,
      // },
      // {
      //   title: '库存齐套',
      //   field: 'isStockComplete',
      //   width: 100,
      // },
      // {
      //   title: '是否有折返工序',
      //   field: 'hasTurnback',
      //   width: 150,
      // },
      // {
      //   title: '风险标识',
      //   field: 'hasRisk',
      //   width: 100,
      // },
    ];
    columns.value = [
      { type: "checkbox", width: 60, align: "center" },
      { type: "seq", title: t("plan.table.seq"), width: 60 },
      {
        title: t("plan.table.masterPlanner"),
        field: "masterPlanner",
        width: 100,
      },
      {
        title: t("plan.table.weekDay"),
        field: "weekDay",
        width: 100,
        formatter: ({ cellValue, row, column }) => {
          if (cellValue) {
            const weekDay = new Date(cellValue);
            const year = weekDay.getFullYear();
            const month = String(weekDay.getMonth() + 1).padStart(2, "0");
            const day = String(weekDay.getDate()).padStart(2, "0");
            return `${month}-${day}`;
          }
          return "";
        },
      },
      {
        title: t("plan.table.weekCycle"),
        field: "weekCycle",
        width: 80,
      },
      {
        title: t("plan.table.mainPartNumber"),
        field: "mainPartNumber",
        width: 150,
      },
      {
        title: t("plan.table.mainPartDrawingNumber"),
        field: "mainPartDrawingNumber",
        width: 150,
      },
      {
        title: t("plan.table.customer"),
        field: "customer",
        width: 200,
      },
      {
        title: t("plan.table.businessType"),
        field: "businessType",
        width: 100,
      },
      {
        title: t("plan.table.documentNumber"),
        field: "documentNumber",
        width: 100,
      },
      {
        title: t("plan.table.requirementType"),
        field: "requirementType",
        width: 100,
      },
      {
        title: t("plan.table.documentStatus"),
        field: "documentStatus",
        width: 100,
      },
      {
        title: t("plan.table.itemNumber"),
        field: "itemNumber",
        width: 100,
      },
      {
        title: t("plan.table.drawingNo"),
        field: "drawingNo",
        width: 100,
      },
      {
        title: t("plan.table.versionNumber"),
        field: "versionNumber",
        width: 100,
      },
      {
        title: t("plan.table.productionQuantity"),
        field: "productionQuantity",
        width: 100,
      },
      {
        title: t("plan.table.goodProductsQuantity"),
        field: "goodProductsQuantity",
        width: 100,
      },
      {
        title: t("plan.table.processNumber"),
        field: "processNumber",
        width: 100,
      },
      {
        title: t("plan.table.factoryCenter"),
        field: "workCenter",
        width: 100,
      },
      {
        title: t("plan.table.dependencyDepartment"),
        field: "department",
        width: 100,
      },
      {
        title: t("plan.table.planStartDay"),
        field: "planStartDay",
        width: 100,
      },
      {
        title: t("plan.table.planEndDayDate"),
        field: "planEndDay",
        width: 100,
      },
      {
        title: t("plan.table.standbyNumber"),
        field: "standbyNumber",
        width: 100,
      },
      {
        title: t("plan.table.standbyName"),
        field: "standbyName",
        width: 100,
      },
      {
        title: t("plan.table.standbyStock"),
        field: "standbyStock",
        width: 100,
      },
      {
        title: t("plan.table.departmentToNextProcessBelongs"),
        field: "nextProcessDeparment",
        width: 100,
      },
      {
        title: t("plan.table.isSuspended"),
        field: "isSuspended",
        width: 100,
      },
      {
        title: t("plan.table.isOutsourcing"),
        field: "isOutsourcing",
        width: 100,
      },
      {
        title: t("plan.table.account"),
        field: "account",
        width: 100,
      },
      {
        title: t("plan.table.advancedMaterials"),
        field: "advancedMaterials",
        width: 100,
      },
      {
        title: t("plan.table.advancedDocumentNumber"),
        field: "advancedDocumentNumber",
        width: 100,
      },
      {
        title: t("plan.table.advancedRequirementDay"),
        field: "advancedRequirementDay",
        width: 100,
      },
      {
        title: t("plan.table.isPlanComplete"),
        field: "isPlanComplete",
        width: 100,
      },
      {
        title: t("plan.table.isStockComplete"),
        field: "isStockComplete",
        width: 100,
      },
      {
        title: t("plan.table.hasTurnback"),
        field: "hasTurnback",
        width: 100,
      },
      {
        title: t("plan.table.hasRisk"),
        field: "hasRisk",
        width: 100,
      },
    ];
  },
  { immediate: true, deep: true }
);
/** 查询钣金计划临时管理列表 */
function getExampleList() {
  loading.value = true;
@@ -803,10 +818,11 @@
        response.msg +
        "</div>",
      t("plan.upload.errorResult"),
      { dangerouslyUseHTMLString: true,
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: t("plan.btns.confirm"),
        cancelButtonText: t("plan.btns.cancel"),
       }
      }
    );
  }
  proxy.$refs["uploadRef"].handleRemove(file);
@@ -847,6 +863,9 @@
getList();
</script>
<style lang="css" scoped>
.column-with-margin {
  margin-right: 0px;
}
h4 {
  font-weight: bold;
}