提交高度修改;

chengxiangling

2025-05-16 af1c9e588f1de0240390648f9bb56aa486870aff

 src/views/mainPlan/gasPlanning/index.vue

@@ -1,89 +1,550 @@
<template>
    <HxlhTable
      style="width: 100%"
      :columns="columns"
      :data="gasPlanList"
      :loading="loading"
      :height="height"
  <div class="app-container">
    <el-form
      class="responsive-form"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-position="left"
    >
    </HxlhTable>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item
            :style="{ width: '100%' }"
            :label="$t('plan.query.selectMonth')"
            prop="description"
          >
            <el-date-picker
              clearable
              v-model="queryParams.date"
              type="month"
              value-format="YYYY-MM"
              :placeholder="$t('plan.query.selectMonth')"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            :label="$t('basic.table.applicableFactories')"
            style="width: 100%"
            prop="plant"
          >
            <el-select
              clearable
              v-model="queryParams.applicableFactory"
              :placeholder="$t('basic.table.applicableFactories')"
            >
              <el-option
                v-for="item in aps_factory"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6" 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>
    <!-- <div class="box_container"> -->
    <el-row>
      <el-col :span="12" style="margin-bottom: 10px">
        <el-button v-if="!clickedTableRefGas" class="title_btn" type="primary" @click="editRowEventGas">{{
          $t("common.common.edit")
        }}</el-button>
        <el-button
          v-if="clickedTableRefGas"
          class="title_btn"
          type="primary"
          @click="saveRowEvent1"
          v-hasPermi="['aps:gasPipelineCapacityPlan:add']"
        >
          {{ $t("common.common.save") }}
        </el-button>
        <el-button
          v-if="clickedTableRefGas"
          class="title_btn ml20"
          type="default"
          @click="handleCancleStausGas"
          >{{ $t("common.common.cancel") }}</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="handleQuery"
        @resetTable="resetQuery"
      ></right-toolbar>
    </el-row>
    <!-- <div class="tabel_container"> -->
    <!-- <HxlhTable
          style="width: 100%"
          :columns="columns"
          :data="gasPlanList"
          :loading="loading"
          :height="height"
        >
        </HxlhTable> -->
    <vxe-table
      border
      ref="tableRef1"
      show-overflow
      size="small"
      :loading="loading2"
      :height="height"
      :column-config="{ resizable: true, useKey: true }"
      :data="gasPlanList"
    >
      <vxe-column
        :width="locale === 'zh' ? '150px' : '200px'"
        field="processName"
        :title="$t('plan.table.satndardProcessName')"
        fixed="left"
      >
      </vxe-column>
      <vxe-column
        field="orgCode"
        :width="locale === 'zh' ? '150px' : '200px'"
        :title="$t('plan.table.applicableFactories')"
        fixed="left"
      >
        <template #default="{ row }">
          {{ formatTypeLabelPlant([row.orgCode]) }}
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '150px' : '200px'"
        field="dayProduceType"
        :title="$t('plan.table.dayProduceType')"
      >
        <!-- <template #edit="{ row }">
              <el-select
                clearable
                v-model="row.dayProduceType"
                style="width: 140px"
              >
                <el-option
                  v-for="type in dayProduceTypeOptions"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                >
                </el-option>
              </el-select>
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ formatTypeLabel([row.dayProduceType]) }}</span>
          </div>
          <div v-else>
            <el-select
              clearable
              v-model="row.dayProduceType"
              style="width: 140px"
              @change="handlechangeDayproduceType($event, row)"
            >
              <el-option
                v-for="type in dayProduceTypeOptions"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '180px' : '200px'"
        field="dayProduceNum"
        :title="$t('plan.table.dayProduceNum')"
      >
        <!-- <template #edit="{ row }">
              <el-input-number v-model="row.dayProduceNum" size="mini" />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.dayProduceNum }}</span>
          </div>
          <div v-else>
            <el-input-number
              @change="cellClickEvent($event, row)"
              v-model="row.dayProduceNum"
              size="mini"
            />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '150px' : '200px'"
        field="dayProduceUnit"
        :title="$t('plan.table.dayProduceUnit')"
      >
        <!-- <template #edit="{ row }">
              <el-input v-model="row.dayProduceUnit" />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.dayProduceUnit }}</span>
          </div>
          <div v-else>
            <el-input v-model="row.dayProduceUnit" />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '180px' : '200px'"
        field="personnelNumber"
        :title="$t('plan.table.personnelNumber')"
      >
        <!-- <template #edit="{ row }">
              <el-input-number v-model="row.personnelNumber" />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.personnelNumber }}</span>
          </div>
          <div v-else>
            <el-input-number
              @change="cellClickEvent($event, row)"
              v-model="row.personnelNumber"
            />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '180px' : '200px'"
        field="dayProduceAllNum"
        :title="$t('plan.table.dayProduceAllNum')"
      >
        <!-- <template #edit="{ row }">
              <el-input-number v-model="row.dayProduceAllNum" disabled />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.dayProduceAllNum }}</span>
          </div>
          <div v-else>
            <el-input-number v-model="row.dayProduceAllNum" disabled />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '180px' : '200px'"
        field="days"
        :title="$t('plan.table.days')"
      >
        <!-- <template #edit="{ row }">
              <el-input-number v-model="row.days" />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.days }}</span>
          </div>
          <div v-else>
            <el-input-number
              @change="cellClickEvent($event, row)"
              v-model="row.days"
            />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '180px' : '200px'"
        field="monthProduceAllNum"
        :title="$t('plan.table.monthProduceAllNum')"
      >
        <!-- <template #edit="{ row }">
              <el-input-number v-model="row.monthProduceAllNum" disabled />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.monthProduceAllNum }}</span>
          </div>
          <div v-else>
            <el-input-number v-model="row.monthProduceAllNum" disabled />
          </div>
        </template>
      </vxe-column>
      <vxe-column
        :width="locale === 'zh' ? '150px' : '200px'"
        field="remark"
        :title="$t('plan.table.remark')"
      >
        <!-- <template #edit="{ row }">
              <el-input
                type="text"
                v-model="row.remark"
              />
            </template> -->
        <template #default="{ row }">
          <div v-if="!clickedTableRefGas">
            <span>{{ row.remark }}</span>
          </div>
          <div v-else>
            <el-input type="text" v-model="row.remark" />
          </div>
        </template>
      </vxe-column>
      <!-- <vxe-column title="操作" width="200" fixed="right">
            <template #default="{ row }">
              <template v-if="hasEditStatus1(row)">
                <el-button
                  @click="saveRowEvent1(row)"
                  v-hasPermi="['aps:gasPipelineCapacityPlan:add']"
                  >保存</el-button
                >
                <el-button @click="cancelRowEvent1()">取消</el-button>
              </template>
              <template v-else>
                <el-button @click="editRowEvent1(row)">编辑</el-button>
              </template>
            </template>
          </vxe-column> -->
    </vxe-table>
    <!-- <div class="btn_center">
          <el-button type="primary" @click="handleSave2">保存</el-button>
        </div> -->
    <!-- </div> -->
    <!-- </div> -->
  </div>
</template>
<script setup>
const height = ref(document.documentElement.clientHeight - 270 + "px;");
const loading = ref(true);
<script setup name="GasPlanning">
// import { ElMessage } from "element-plus";
import { listGasPlan, getGasPlanSave } from "@/api/mainPlan/gasPlanning";
import { useI18n } from "vue-i18n"; //要在js中使用国际化
const height = ref(document.documentElement.clientHeight - 220 + "px;");
const { t, locale } = useI18n();
const { proxy } = getCurrentInstance();
const { aps_factory } = proxy.useDict("aps_factory");
const loading2 = ref(false);
const clickedQuery2 = ref(false);
const data = reactive({
  queryParams: {
    date: "",
    applicableFactory: "",
  },
});
const tableRef = ref();
const tableRef1 = ref();
const { queryParams } = toRefs(data);
const gasPlanList = ref([]);
// 表格配置
const columns = ref([
  {
    title: "主件料号",
    field: "mainPartNumber",
    width: 150,
  },
  {
    title: "业务类型",
    field: "businessType",
  },
  {
    title: "单据号",
    field: "documentNumber",
    width: 100,
  },
  {
    title: "当前工序号",
    field: "currentProcessNumberTxt",
    width: 100,
  },
  {
    title: "需求分类",
    field: "requirementType",
    width: 80,
  },
  {
    title: "单据状态",
    field: "documentStatus",
    width: 80,
  },
  {
    title: "当前工序",
    field: "workCenter",
    width: 80,
  },
  {
    title: "计划开工日",
    field: "processPlanStartDaytxt",
    width: 140,
    type: "html",
  },
  {
    title: "料号",
    field: "itemNumber",
    width: 140,
    type: "html",
  },
  {
    title: "图号",
    field: "drawingNo",
    width: 120,
    // format: 'YYYY-MM-DD'
  },
  {
    title: "版本号",
    field: "versionNumber",
    width: 140,
    type: "html",
  },
  {
    title: "生产数量",
    field: "productionQuantity",
    width: 140,
    type: "html",
  },
  {
    title: "计划完工日",
    field: "planEndDay",
    width: 140,
    format: "YYYY-MM-DD hh:mm:ss",
  },
const routePlanList = ref([]);
const dayProduceTypeOptions = ref([
  { label: "单人日产出", value: "1" },
  { label: "固定日产出", value: "2" },
]);
const clickedTableRef = ref(false);
const clickedTableRefGas = ref(false);
const formatTypeLabel = (list) => {
  if (list) {
    return list
      .map((type) => {
        const item = dayProduceTypeOptions.value.find(
          (item) => item.value === type
        );
        return item ? item.label : type;
      })
      .join("");
  }
  return "";
};
const formatTypeLabelPlant = (list) => {
  if (list) {
    return list
      .map((type) => {
        const item = aps_factory.value.find(
          (item) => item.value === type
        );
        return item ? item.label : type;
      })
      .join("");
  }
  return "";
};
const editRowEventGas = () => {
  clickedTableRefGas.value = true;
};
const handleCancleStausGas = () => {
  clickedTableRefGas.value = false;
  if (!clickedQuery2.value) {
    return;
  }
  const year = queryParams.value.date.split("-")[0];
  const month = parseInt(queryParams.value.date.split("-")[1]);
  getGasList(year, month);
};
const saveRowEvent1 = (row) => {
  if (!queryParams.value.date) {
    ElMessage({
      message: "请选择年月",
      type: "error",
    });
    return;
  }
  const $table = tableRef1.value;
  if ($table) {
    $table.clearEdit().then(() => {
      // loading.value = true
      // setTimeout(() => {
      //   loading.value = false
      //   VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
      // }, 300)
      handleSave("气柜");
      clickedTableRefGas.value = false;
    });
  }
};
// const cancelRowEvent1 = () => {
//   const $table = tableRef1.value;
//   if ($table) {
//     $table.clearEdit();
//   }
// };
async function getGasList(year, month) {
  loading2.value = true;
  const res = await listGasPlan({
    major: "气柜",
    year,
    month,
    orgCode: queryParams.value.applicableFactory,
  });
  gasPlanList.value = res.rows;
  gasPlanList.value = gasPlanList.value.map((item, index) => {
    return {
      ...item,
      dayProduceType: item.dayProduceType == null ? "1" : item.dayProduceType,
      dayProduceNum: item.dayProduceNum == null ? "0" : item.dayProduceNum,
      dayProduceUnit:
        item.dayProduceUnit == null ? "小时" : item.dayProduceUnit,
      personnelNumber:
        item.personnelNumber == null ? "1" : item.personnelNumber,
      dayProduceAllNum:
        item.dayProduceAllNum == null
          ? "0"
          : item.dayProduceNum * item.personnelNumber,
      days: item.days == null ? "22" : item.days,
      monthProduceAllNum:
        item.monthProduceAllNum == null
          ? "0"
          : item.dayProduceAllNum * item.days,
    };
  });
  loading2.value = false;
}
// function cellClickEvent({ row, column }) {
//   console.log(row,column,"cellClickEvent")
//   if(row.dayProduceType==="1"){
//     row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
//   }else{

</script>
//     row.dayProduceAllNum = row.dayProduceNum
//   }
//   row.monthProduceAllNum = row.dayProduceAllNum * row.days;
// }
function cellClickEvent(e, row) {
  if (row.dayProduceType === "1") {
    row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
  } else {
    row.dayProduceAllNum = row.dayProduceNum;
  }
  row.monthProduceAllNum = row.dayProduceAllNum * row.days;
}
function handlechangeDayproduceType(e, row) {
  row.dayProduceAllNum = "0";
  row.monthProduceAllNum = "0";
  if (e == "1") {
    row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
  } else if (e == "2") {
    row.dayProduceAllNum = row.dayProduceNum;
  }
  row.monthProduceAllNum = row.dayProduceAllNum * row.days;
}
function handleQuery() {
  if (!queryParams.value.date) {
    ElMessage({
      message: "请选择年月",
      type: "error",
    });
    return;
  }
  const year = queryParams.value.date.split("-")[0];
  const month = parseInt(queryParams.value.date.split("-")[1]);
  // getRouteList(year, month);
  getGasList(year, month);
  clickedQuery2.value = true;
}
function resetQuery() {
  queryParams.value.date = "";
  queryParams.value.applicableFactory = "";
  clickedQuery2.value = false;
  gasPlanList.value = [];
  routePlanList.value = [];
}
async function handleSave(major) {
  const year = queryParams.value.date.split("-")[0];
  const month = parseInt(queryParams.value.date.split("-")[1]);
  if (major === "气柜") {
    gasPlanList.value = gasPlanList.value.map((item) => {
      return {
        ...item,
        major: "气柜",
        year,
        month,
        orgCode: queryParams.value.applicableFactory,
      };
    });
    const res = await getGasPlanSave([...gasPlanList.value]);
    if (res.code == 200) {
      ElMessage({
        message: "数据保存成功",
        type: "success",
      });
      loading2.value = false;
      handleQuery();
    }
  }
}
</script>
<style lang="scss" scoped>
.column-with-margin {
  margin-right: 0px;
}
.box_container {
  width: 100%;
  margin: 20px auto;
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 4px#f1f1f1;
  .title_text {
    padding-top: 20px;
    margin-left: 20px;
  }
  .title_btn {
    margin-top: 20px;
    &.ml20 {
      margin-left: 20px;
    }
  }
  .tabel_container {
    width: 98%;
    margin: 20px auto;
  }
}
.btn_center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 20px;
}
</style>