提交日历等

chengxiangling

2025-05-14 9587438965a876c23b9e9efcff014f1cc565cb4d

 src/views/basicData/bom/index.vue

@@ -1,210 +1,399 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :rules="rules" :inline="true" v-show="showSearch" label-width="68px">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :rules="rules"
      :inline="true"
      v-show="showSearch"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="料号" prop="itemCode">
        <el-col :span="locale === 'zh' ? 5 : 8">
          <el-form-item :label="$t('plan.query.itemNumber')" :label-width="locale === 'zh' ? '50px' : '110px'" prop="itemCode">
            <el-input
              :style="{ width: locale === 'zh' ? '140px' : '220px' }"
              v-model="queryParams.itemCode"
              placeholder="请输入料号"
              :placeholder="`${$t('common.common.placeholder')}${$t(
                'plan.query.itemNumber'
              )}`"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18" style="text-align: right;">
          <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        <el-col :span="locale === 'zh' ? 7 : 10">
          <el-form-item
            :label="$t('plan.table.applicableFactories')"
            :label-width="locale === 'zh' ? '70px' : '150px'"
            prop="orgCode"
          >
            <el-select
              clearable
              v-model="queryParams.orgCode"
              :style="{ width: locale === 'zh' ? '180px' : '280px' }"
              :placeholder="`${$t('common.common.placeholder')}${$t(
                'plan.table.applicableFactories'
              )}`"
            >
              <el-option
                v-for="plant in plantList"
                :key="plant.id"
                :label="plant.plantName"
                :value="plant.plantCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="locale === 'zh' ? 11 : 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>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Refresh"
          :disabled="loadingRefresh"
          @click="handleRefresh"
          v-hasPermi="['Aps:ApsBomHeader:refreshBomData']"
          >{{ $t("common.common.update") }}</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <HxlhTable
        style="width: 100%"
        :columns="columns"
        :data="bomList"
        :loading="loading"
        :height="height"
        :treeConfig="treeConfig"
        :row-style="getRowStyle"
      style="width: 100%"
      :columns="columns"
      :data="bomList"
      :loading="loading"
      :height="height"
      @on-checkbox="handleCheckboxChange"
      :page="page"
      @changePageNo="changePageNo"
      @changePageSize="changePageSize"
    >
      <!--       :expand-config="expandConfig"
      :subGridOptions="subGridOptions" -->
      <template #buttons="{ row }">
        <el-button
          type="primary"
          link
          @click="handleCheckView(row)"
          v-hasPermi="['Aps:apsBom:list']"
          >{{$t("common.common.view")}}</el-button
        >
      </template>
    </HxlhTable>
    <el-dialog
      :title="$t('common.common.viewDetails')"
      v-model="openDialog"
      width="900px"
      append-to-body
      style="height: 400px; overflow: hidden"
    >
      <HxlhTable
        style="width: 100%"
        :columns="subGridOptions"
        :data="subList"
        :loading="loadingSub"
        :height="'280px;'"
      >
      </HxlhTable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openDialog = false">{{
            $t("common.common.close")
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ApsBom">
import { listApsBom } from "@/api/basicData/bom/bom";
<script setup name="Bom">
import {
  listApsBomHeaderList,
  listApsBomLineList,
  listApsBomRefreshBomDataList,
} from "@/api/basicData/bom/bom.js";
import { listAll_plant } from "@/api/basicData/plant";
import axios from 'axios';
import HxlhTable from '@/components/HxlhTable'

import HxlhTable from "@/components/HxlhTable/index.vue";
// import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n"; //要在js中使用国际化
const { t, locale } = useI18n();
const { proxy } = getCurrentInstance();

// 分页属性
const page = ref({
  total: 0,
  current: 1,
  size: 10,
});
const plantList = ref([]);
const bomList = ref([]);
const open = ref(false);
const subList = ref([]);
const loading = ref(false);
const loadingSub = ref(false);
const loadingRefresh = ref(false);
const showSearch = ref(true);

const treeConfig= {
  transform: true,
  rowField: 'bomId',
  parentField: 'parentBomId'
}

const total = ref(0);
const height = ref(document.documentElement.clientHeight - 210 + "px;");
const heightSub = ref(document.documentElement.clientHeight - 320 + "px;");
// 表格配置
const columns = ref([]);
const subGridOptions = ref([]);
const openDialog = ref(false);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    itemCode: null,
    orgCode: "",
  },
  rules: {
    itemCode: [
      { required: true, message: "料号不能为空", trigger: "blur" }
    ],
  }
  rules: {},
});

// 表格配置 
const columns = ref([
  {
    title: 'bomId',
    field: 'bomId',
    minWidth: 20, treeNode: true
  },
  {
    title: 'parentBomId',
    field: 'parentBomId',
  },
  {
    title: '料号',
    field: 'itemCode',
  },
  {
    title: '物料描述',
    field: 'itemName',
  },
  {
    title: '生效日期',
    field: 'startDate',
  },
  {
    title: '失效日期',
    field: 'endDate',
  },
  {
    title: '适用工厂',
    field: 'orgCode',
    formatter: (({ cellValue, row, column }) => {
      if (cellValue) {
        for(let i=0;i<plantList.value.length;i++){
          if(cellValue===plantList.value[i].plantCode){
            return plantList.value[i].plantName
const { queryParams, rules } = toRefs(data);
watch(
  locale,
  (newLocale) => {
    rules.value = {
      itemCode: [
        {
          required: true,
          message: `${t("common.common.placeholder")}${t(
            "plan.query.itemNumber"
          )}`,
          trigger: "blur",
        },
      ],
    };
    columns.value = [
      // {
      //   field: "expand",
      //   type: "expand",
      //   width: 60,
      //   align: "center",
      //   slots: { content: "expandContent" },
      // },
      // { type: "checkbox", width: 60, align: "center" },
      {
        title: "BOM ID",
        field: "bomHeaderId",
      },
      {
        title: t("basic.table.parentPartNumber"),
        field: "itemCode",
      },
      {
        title: t("basic.table.parentMaterialDescription"),
        field: "itemName",
      },
      {
        title: t("basic.table.effectiveDate"),
        field: "startDate",
      },
      {
        title: t("basic.table.expiringDate"),
        field: "endDate",
      },
      {
        title: t("basic.table.integrationDate"),
        field: "createTime",
      },
      {
        title: t("basic.table.applicableFactories"),
        field: "orgCode",
        formatter: ({ cellValue, row, column }) => {
          if (cellValue) {
            for (let i = 0; i < plantList.value.length; i++) {
              if (cellValue === plantList.value[i].plantCode) {
                return plantList.value[i].plantName;
              }
            }
          }
        }
      }
      return '';
    })
        },
      },
      {
        title: t("common.common.operate"),
        width: 100,
        fixed: "right",
        slots: { default: "buttons" },
        align: "center",
      },
    ];
    subGridOptions.value = [
      {
        title: t("plan.table.bomItemID"),
        field: "bomLineId",
        width: 150,
        align: "center",
      },
      {
        title: "BOM ID",
        field: "bomHeaderId",
        width: 150,
        align: "center",
      },
      {
        title: t("plan.table.itemNumber"),
        field: "itemCode",
        width: 100,
        align: "center",
      },
      {
        title: t("basic.table.materialDescription"),
        field: "itemName",
        width: 100,
        align: "center",
      },
      {
        title: t("basic.table.usage"),
        field: "num",
        width: 100,
        align: "center",
      },
      {
        title: t("basic.table.effectiveDate"),
        field: "startDate",
        width: 150,
        align: "center",
      },
      {
        title: t("basic.table.expiringDate"),
        field: "endDate",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.integrationDate"),
        field: "createTime",
        width: 200,
        align: "center",
      },
      {
        title: t("basic.table.applicableFactories"),
        field: "orgCode",
        width: 90,
        align: "center",
        formatter: ({ cellValue, row, column }) => {
          if (cellValue) {
            for (let i = 0; i < plantList.value.length; i++) {
              if (cellValue === plantList.value[i].plantCode) {
                return plantList.value[i].plantName;
              }
            }
          }
        },
      },
    ];
  },
  {
    title: '创建时间',
    field: 'createTime',
  },
]);

// 定义一个函数来获取行的层级
const getRowLevel = (row, dataMap) => {
  let level = 0
  let parentBomId = row.parentBomId
  while (parentBomId!== null) {
    const parentRow = dataMap.get(parentBomId)
    if (parentRow) {
      level++
      parentBomId = parentRow.parentBomId
    } else {
      break
    }
  }
  return level
}

// 定义一个函数来设置行的样式
const getRowStyle = (row, rowIndex) => {
  if (!Array.isArray(bomList.value)) {
    console.error('bomList 不是一个数组类型');
    return {};
  }
  const dataMap = new Map(bomList.value.map(item => [item.bomId, item]))
  const level = getRowLevel(row.row, dataMap)
  const colors = ['#f0f9ff', '#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff']
  return {
    backgroundColor: colors[level % colors.length]
  }
}

const { queryParams, form, rules } = toRefs(data);

const queryPlants = ref({status: 1});
const plantList = ref([]);
const height = ref(document.documentElement.clientHeight - 180 + "px;")

/** 查询BOM数据管理列表 */
function getList() {
  loading.value = true;
  axios.all([
      listAll_plant(queryPlants.value),
      listApsBom(queryParams.value)
    ])
    .then(axios.spread((response1, response2) => {
      plantList.value = response1.data;
      bomList.value = response2.rows;
      loading.value = false;
    }))
    .catch(error => {
      console.error('请求出错:', error);
  { immediate: true, deep: true }
);
async function handleRefresh() {
  loadingRefresh.value = true;
  const res = await listApsBomRefreshBomDataList();
  if (res.code == 200) {
    ElMessage({
      message: t("plan.message.update"),
      type: "success",
    });
    loadingRefresh.value = false;
    getList();
  } else {
    loadingRefresh.value = false;
  }
}
function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}
function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}

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

// 表单重置
function reset() {
  form.value = {
    id: null,
    bomId: null,
    parentBomId: null,
    itemCode: null,
    itemName: null,
    startDate: null,
    endDate: null,
    orgCode: null,
    delFlag: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("ApsBomRef");
/** 查询零件计划管理列表 */
function getList() {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  loading.value = true;
  listApsBomHeaderList(queryParams.value)
    .then((response) => {
      console.log(response, "listApsBomHeaderList");
      bomList.value = response.rows;
      page.value.total = response.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  proxy.$refs["queryRef"].validate(valid => {
  proxy.$refs["queryRef"].validate((valid) => {
    if (valid) {
        getList();
      }
      getList();
    }
  });
}

/** 重置按钮操作 */
function resetQuery() {
  page.value.current = 1;
  page.value.total = 0;
  queryParams.value.pageNum = 1;
  proxy.resetForm("queryRef");
  bomList.value = null;
  bomList.value = [];
  subList.value = [];
}

console.log("123");
function handleCheckView(row) {
  openDialog.value = true;
  listApsBomLineList({ bomHeaderId: row.bomHeaderId }).then((data) => {
    console.log(data, "listApsBomLineList");
    subList.value = data.rows;
  });
}

// /*定义下拉二级表*/
// const expandConfig = ref({
//   lazy: true,
//   loadMethod({ row }) {
//     // 调用接口
//     return listProcessRoute({ workOrderNo: row.documentNumber }).then(
//       (data) => {
//         row.subList = data.rows;
//       }
//     );
//   },
// });

onMounted(async () => {
  const res = await listAll_plant({});
  plantList.value = res.data;
});
</script>
<style lang="css" scoped>
h4 {
  font-weight: bold;
}
</style>