提交钣金异常页面，前端项目自动导入element组件，i18n文件修改

CD配唱片

2025-05-08 960ed35de06e571da5656050fa39106b2a3d2dba

 src/views/mainPlan/sheetMetalOrderManage/index.vue

@@ -6,44 +6,44 @@
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="110px"
      :label-width="locale=='zh'?'110px':'200px'"
    >
      <el-form-item label="工单号" prop="description">
      <el-form-item :label="$t('plan.query.workOrderNo')" prop="description">
        <el-input
          style="width: 140px"
          :style="{width:locale=='zh'? '200px':'280px'}"
          v-model="queryParams.description"
          placeholder="请输入需求追溯ID"
          :placeholder="`${$t('common.common.placeholder')}${$t('plan.query.workOrderNo')}`"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- <el-row type="flex" justify="left">
        <el-col :span="5"> -->
      <el-form-item label="需求追溯ID" prop="description">
      <el-form-item :label="$t('plan.query.requireTraceID')" prop="description">
        <el-input
          style="width: 140px"
          :style="{width:locale=='zh'? '200px':'280px'}"
          v-model="queryParams.description"
          placeholder="请输入需求追溯ID"
          :placeholder="`${$t('common.common.placeholder')}${$t('plan.query.requireTraceID')}`"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- </el-col>
        <el-col :span="5"> -->
      <el-form-item label="料号" prop="description">
      <el-form-item :label="$t('plan.query.itemNumber')" prop="description">
        <el-input
          style="width: 140px"
          :style="{width:locale=='zh'? '200px':'280px'}"
          v-model="queryParams.description"
          placeholder="请输入料号"
          :placeholder="`${$t('common.common.placeholder')}${$t('plan.query.itemNumber')}`"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="延迟风险标识" prop="description">
      <el-form-item :label="$t('plan.table.delayRiskIdentification')" prop="description">
        <el-input
          style="width: 140px"
          :style="{width:locale=='zh'? '200px':'280px'}"
          v-model="queryParams.description"
          placeholder="请输入料号"
          :placeholder="`${$t('common.common.placeholder')}${$t('plan.table.delayRiskIdentification')}`"
          clearable
          @keyup.enter="handleQuery"
        />
@@ -52,9 +52,9 @@
        <el-col :span="14" style="text-align: right"> -->
      <el-form-item class="column-with-margin">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >查询</el-button
          >{{$t('common.common.query')}}</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button icon="Refresh" @click="resetQuery">{{$t('common.common.reset')}}</el-button>
      </el-form-item>
      <!-- </el-col>
      </el-row> -->
@@ -69,7 +69,7 @@
          :disabled="multiple"
          @click="handleBatchUpdatePlanDate"
          v-hasPermi="['apsPlatePlan:edit']"
          >批量更新工单计划日期</el-button
          >{{$t('plan.btns.batchUpdateOrderDate')}}</el-button
        >
      </el-col>
      <el-col :span="1.5">
@@ -79,7 +79,7 @@
          icon="Edit"
          @click="handleUpdate"
          v-hasPermi="['apsPlatePlan:edit']"
          >生成钣金计划工单</el-button
          >{{$t('plan.btns.generatePlanOrder')}}</el-button
        >
      </el-col>
      <right-toolbar
@@ -98,7 +98,6 @@
      @changePageNo="changePageNo"
      @changePageSize="changePageSize"
      @on-checkbox="handleCheckboxChange"
      class="auto-height-grid"
    >
      <template #buttons="{ row }">
        <el-button
@@ -106,12 +105,12 @@
          link
          @click="handleCheckView(row)"
          v-hasPermi="['aps:calendar:update']"
          >查看需求</el-button
          >{{$t('plan.btns.viewRequirement')}}</el-button
        >
      </template>
    </HxlhTable>
    <el-dialog
      :title="'查看关联需求'"
      :title="$t('plan.title.viewAssociatedRequirements')"
      v-model="openDialog"
      width="900px"
      append-to-body
@@ -126,15 +125,41 @@
      </HxlhTable>
    </el-dialog>
    <el-dialog
      :title="'批量更新工单计划日期'"
      :title="$t('plan.btns.batchUpdateOrderDate')"
      v-model="openBatchDialog"
      width="900px"
      append-to-body
    >
      <div class="mode_box">
        <span>{{$t('plan.title.setMode')}}</span>
        <el-radio-group v-model="radio">
          <el-radio :label="1">{{$t('plan.btns.batchUpdateOrderDate')}}</el-radio>
          <el-radio :label="2">{{$t('plan.title.CustomizePlannedCompletionDate')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="red_color">{{$t('plan.title.tipsBugSheetMetal')}}</div>
      <div class="mode_box" v-if="radio===2">
        <span>{{$t('plan.title.CustomizePlannedCompletionDate')}}</span>
        <el-date-picker
          v-model="value4"
          type="dates"
          :placeholder="$t('plan.title.CustomizePlannedCompletionDate')"
        />
      </div>
      <HxlhTable
        v-if="radio===1"
        style="width: 100%"
        :columns="subGridOptions"
        :data="subList"
        :columns="subUpdateGridOptions"
        :data="subUpdateList"
        :loading="loading"
        :height="heightSub"
      >
      </HxlhTable>
      <HxlhTable
        v-if="radio===2"
        style="width: 100%"
        :columns="subUpdateCustomGridOptions"
        :data="subUpdateList"
        :loading="loading"
        :height="heightSub"
      >
@@ -159,9 +184,14 @@
import { useI18n } from "vue-i18n"; //要在js中使用国际化
const { t, locale } = useI18n();
const { proxy } = getCurrentInstance();
const radio = ref(1);
const openDialog = ref(false);
const openBatchDialog = ref(false);
const subGridOptions = ref([]);
const subUpdateGridOptions = ref([]);
const subUpdateCustomGridOptions = ref([]);
const subList = ref([]);
const subUpdateList = ref([]);
// const tableRef = ref();
const calendarList = ref([]);
const loading = ref(true);
@@ -314,7 +344,7 @@
        align: "center",
      },
      {
        title: "操作",
        title: t("common.common.operate"),
        width: 100,
        fixed: "right",
        slots: { default: "buttons" },
@@ -377,12 +407,6 @@
        align: "center",
      },
      {
        title: t("plan.table.requirementPlanCompletionDate"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.planStartDay"),
        field: "updateTime",
        width: 100,
@@ -419,20 +443,135 @@
        align: "center",
      },
    ];
    subUpdateGridOptions.value = [
      {
        title: t("basic.table.requirementID"),
        field: "description",
        width: 150,
        align: "center",
      },
      {
        title: t("basic.table.requirementTraceabilityID"),
        field: "type",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.workOrderNo"),
        field: "effectiveDate",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.matchQuantity"),
        field: "expiringDate",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.workOrderType"),
        field: "expiringDate",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.itemNumber"),
        field: "createTime",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.planStartDay"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.planEndDayDate"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.startDateOfDemandPlan"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.requirementPlanCompletionDate"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
    ];
    subUpdateCustomGridOptions.value = [
      {
        title: t("basic.table.requirementID"),
        field: "description",
        width: 150,
        align: "center",
      },
      {
        title: t("basic.table.requirementTraceabilityID"),
        field: "type",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.workOrderNo"),
        field: "effectiveDate",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.matchQuantity"),
        field: "expiringDate",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.workOrderType"),
        field: "expiringDate",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.itemNumber"),
        field: "createTime",
        width: 200,
        align: "center",
      },
      {
        title: t("plan.table.planStartDay"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.planEndDayDate"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
      {
        title: t("plan.table.customizePlannedCompletionDate"),
        field: "updateTime",
        width: 100,
        align: "center",
      },
    ]
  },
  {
    immediate: true,
    deep: true,
  }
);
function handleBatchUpdatePlanDate(){
  openBatchDialog.value = true
function handleBatchUpdatePlanDate() {
  openBatchDialog.value = true;
}
function handleCheckView(row) {
  openDialog.value = true;
  // listProcessRoute({ workOrderNo: row.documentNumber }).then((data) => {
  //   subList.value = data.rows;
  // });
}
/** 查询日历管理列表 */
function getList() {
@@ -442,48 +581,26 @@
    page.value.total = response.total;
    loading.value = false;
  });
  axios
    .all([
      /** 查询工厂列表 */
      listAll_plant({}),
      /** 查询车间列表 */
      listAll_shop({}),
    ])
    .then(
      axios.spread((response1, response2) => {
        plantList.value = response1.data;
        shopList.value = response2.data;
        loading.value = false;
      })
    )
    .catch((error) => {
      console.error("请求出错:", error);
    });
  // axios
  //   .all([
  //     /** 查询工厂列表 */
  //     listAll_plant({}),
  //     /** 查询车间列表 */
  //     listAll_shop({}),
  //   ])
  //   .then(
  //     axios.spread((response1, response2) => {
  //       plantList.value = response1.data;
  //       shopList.value = response2.data;
  //       loading.value = false;
  //     })
  //   )
  //   .catch((error) => {
  //     console.error("请求出错:", error);
  //   });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    description: null,
    type: "1",
    effectiveDate: null,
    expiringDate: null,
    content: null,
    applicableFactory: null,
    applicableWorkshop: null,
    applicableProcess: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
  };
  proxy.resetForm("calendarRef");
}

@@ -498,29 +615,6 @@
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
async function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加日历管理";
}
/** 选择工厂后事件 加载车间 和 工序 **/
function changePlant(plant) {
  listAps_shop({ plantCode: plant }).then((response) => {
    shopList.value = response.rows;
  });
  selectProcessNameList({ orgCode: plant }).then((response) => {
    processList.value = response.rows;
  });
}
function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
@@ -534,9 +628,11 @@
}
// 多选框选中数据
const handleCheckboxChange = (data) => {
  console.log(data, "handleCheckboxChange");
  ids.value = data.records.map((item) => item.id);
  single.value = data.records.length !== 1;
  multiple.value = !data.records.length;
  subUpdateList.value = data.records;
};
onMounted(() => {
  getList();
@@ -546,55 +642,18 @@
.column-with-margin {
  margin-right: 0px;
}
.title_bar_line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #333;
.mode_box{
  margin-left: 30px;
  margin-bottom: 10px;
  .line_short {
    width: 5%;
    height: 1px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
  }
  .line_long {
    width: 60%;
    height: 1px;
    margin-left: 20px;
    border-top: 1px solid #ddd;
  & span{
    padding-right: 20px;
  }
}
.week_flex {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  color: #606266;
  font-weight: 700;
  margin-left: 20px;
  &.mt20 {
    margin-top: 20px;
    margin-left: 0 !important;
  }
  .week_flex_item {
    &:nth-child(1) {
      margin-top: 5px;
    }
    &:nth-child(2) {
      margin-left: 20px;
    }
  }
}
.factory_use_item {
  margin-top: 10px;
.red_color{
  color:#f56c6c;
  margin-bottom:10px;
}
.mart5 {
  margin-top: 5px;
}
.custom-height {
  height: 200px; /* 或者使用 min-height */
}
.auto-height-grid .xe-body .xe-body--row {
  height: auto; /* 或者使用 min-height */
}
</style>