钣金页面表格样式;

chengxiangling

2025-05-14 db6e95062dfb57bcd1fb1cacdbb3cb4372c576b0

 src/views/mainPlan/platePlan/index.vue

@@ -1,79 +1,89 @@
<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-row :gutter="10" class="mb8"> -->
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label-width="locale === 'zh' ? '90px' : '140px'"
            :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="12">
          <el-form-item
            :label-width="locale === 'zh' ? '90px' : '140px'"
            :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 :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label-width="locale === 'zh' ? '90px' : '140px'"
            :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="12">
          <el-form-item :label-width="locale === 'zh' ? '90px' : '140px'" :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>
            <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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
@@ -265,15 +275,9 @@
const { proxy } = getCurrentInstance();
const { t, locale } = useI18n();
const {
  aps_is_suspended,
  aps_document_status,
  aps_account,
  aps_business_type,
} = proxy.useDict(
  "aps_is_suspended",
  "aps_document_status",
  "aps_account",
  "aps_business_type"
  "aps_account"
);
const exampleList = ref([]);
const planList = ref([]);
@@ -531,6 +535,7 @@
        width: 60,
        align: "center",
        slots: { content: "expandContent" },
        fixed:"left",
      },
      { type: "checkbox", width: 60, align: "center" },
      { type: "seq", title: t("plan.table.seq"), width: 60 },
@@ -562,47 +567,47 @@
      {
        title: t("plan.table.mainPartNumber"),
        field: "mainPartNumber",
        width: 150,
        width: 160
      },
      // {
      //   title: '主件图号',
      //   field: 'mainPartDrawingNumber',
      //   width: 150,
      // },
      // {
      //   title: '客户名称',
      //   field: 'customer',
      //   width: 200,
      // },
      {
        title: t('plan.table.customer'),
        field: 'customer',
        width: 160
      },
      {
        title: t("plan.table.businessType"),
        field: "businessType",
        width: 100,
        width: "auto",
      },
      {
        title: t("plan.table.documentNumber"),
        field: "documentNumber",
        width: 140,
        width: "auto",
      },
      {
        title: t("plan.table.requirementType"),
        field: "requirementType",
        width: 100,
        width: "auto",
      },
      {
        title: t("plan.table.documentStatus"),
        field: "documentStatus",
        width: 100,
        width: "auto",
      },
      {
        title: t("plan.table.itemNumber"),
        field: "itemNumber",
        width: 100,
        width: "auto",
      },
      {
        title: t("plan.table.drawingNo"),
        field: "drawingNo",
        width: 100,
        width: 200,
      },
      // {
      //   title: '版本号',
@@ -612,7 +617,7 @@
      {
        title: t("plan.table.productionQuantity"),
        field: "productionQuantity",
        width: 100,
        width: "auto",
      },
      // {
      //   title: '良品数量',
@@ -622,12 +627,12 @@
      {
        title: t("plan.table.processNumber"),
        field: "processNumber",
        width: 100,
        width: "auto",
      },
      {
        title: t("plan.table.factoryCenter"),
        field: "workCenter",
        width: 180,
        width: "auto",
      },
      // {
      //   title: '所属部门',
@@ -642,7 +647,7 @@
      {
        title: t("plan.table.planEndDayDate"),
        field: "planEndDay",
        width: 100,
        width: 160,
      },
      // {
      //   title: '备料料号',
@@ -674,11 +679,21 @@
      //   field: 'isOutsourcing',
      //   width: 100,
      // },
      // {
      //   title: '账套',
      //   field: 'account',
      //   width: 100,
      // },
      {
        title: t('plan.table.account'),
        field: 'account',
        width: "auto",
        // formatter: ({ cellValue, row, column }) => {
        //   if (cellValue) {
        //     console.log(cellValue,aps_account.value,"llll")
        //     for (let i = 0; i < aps_account.value.length; i++) {
        //       if (cellValue === aps_account.value[i].value) {
        //         return aps_account.value[i].label;
        //       }
        //     }
        //   }
        // },
      },
      // {
      //   title: '上阶物料',
      //   field: 'advancedMaterials',
@@ -716,12 +731,12 @@
      // },
    ];
    subGridOptions.value.columns = [
      {
        title: t("plan.table.itemNumber"),
        field: "itemNo",
        width: 150,
        align: "center",
      },
      // {
      //   title: t("plan.table.itemNumber"),
      //   field: "itemNo",
      //   width: 150,
      //   align: "center",
      // },
      {
        title: t("plan.table.workOrderNo"),
        field: "workOrderNo",
@@ -770,18 +785,18 @@
      //   width: 90,
      //   align:"center",
      // },
      {
        title: t("plan.table.standardTime"),
        field: "standardTime",
        width: 90,
        align: "center",
      },
      {
        title: t("plan.table.processOrder"),
        field: "processOrder",
        width: 90,
        align: "center",
      },
      // {
      //   title: t("plan.table.standardTime"),
      //   field: "standardTime",
      //   width: 90,
      //   align: "center",
      // },
      // {
      //   title: t("plan.table.processOrder"),
      //   field: "processOrder",
      //   width: 90,
      //   align: "center",
      // },
      {
        title: t("plan.table.integrationDay"),
        field: "integrationDay",
@@ -900,10 +915,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);
@@ -1040,3 +1056,8 @@
  font-weight: bold;
}
</style>
<style>
.vxe-cell{
  padding:0 20px;
}
</style>