钣金页面表格样式;

chengxiangling

2025-05-14 db6e95062dfb57bcd1fb1cacdbb3cb4372c576b0

 src/views/mainPlan/sheetMetalRedundantReport/index.vue

@@ -6,52 +6,60 @@
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
      label-position="left"
    >
      <el-row type="flex" justify="left">
        <el-col :span="5">
          <el-form-item label="需求追溯ID" prop="description">
        <el-col :span="locale === 'zh' ? 6 : 8">
          <el-form-item :label-width="locale === 'zh' ? '48px' : '100px'" :label="$t('plan.query.itemNumber')" prop="itemNumber">
            <el-input
              style="width: 140px"
              v-model="queryParams.description"
              placeholder="请输入需求追溯ID"
             :style="{ width: locale === 'zh' ? '180px' : '210px' }"
              v-model="queryParams.itemNumber"
              :placeholder="`${$t('common.common.placeholder')}${$t(
                'plan.query.itemNumber'
              )}`"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="料号" prop="description">
        <el-col :span="locale === 'zh' ? 6 : 8">
          <el-form-item
            :label="$t('plan.query.workOrderNo')"
            prop="documentNumber"
          >
            <el-input
              style="width: 140px"
              v-model="queryParams.description"
              placeholder="请输入料号"
              :style="{ width: locale === 'zh' ? '180px' : '280px' }"
              v-model="queryParams.documentNumber"
              :placeholder="`${$t('common.common.placeholder')}${$t(
                'plan.query.workOrderNo'
              )}`"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" style="text-align: right">
        <el-col :span="locale === 'zh' ? 12 : 8" style="text-align: right">
          <el-form-item class="column-with-margin">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <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="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['core:calendar:export']"
          >导出</el-button
          v-hasPermi="['Aps:apsPlatePlan:redundantOrderListExport']"
          >{{ $t("common.common.export") }}</el-button
        >
      </el-col>
      <right-toolbar
@@ -62,7 +70,7 @@
    <HxlhTable
      style="width: 100%"
      :columns="columns"
      :data="calendarList"
      :data="orderList"
      :loading="loading"
      :height="height"
      ref="tableRef"
@@ -70,188 +78,125 @@
      @changePageNo="changePageNo"
      @changePageSize="changePageSize"
      @on-checkbox="handleCheckboxChange"
      class="auto-height-grid"
    >
    </HxlhTable>
  </div>
</template>

<script setup name="Calendar">
<script setup name="SheetMetalRedundantReport">
import HxlhTable from "@/components/HxlhTable";
import {
  listCalendar,
  getCalendar,
  delCalendar,
  addCalendar,
  updateCalendar,
} from "@/api/basicData/calendar";
import axios from "axios";
import { redundantOrderList } from "@/api/basicData/sheetMetalConfig/sheetMetalConfig";
import { listAll_plant } from "@/api/basicData/plant";
import { listAll_shop, listAps_shop } from "@/api/basicData/shop";
import { selectProcessNameList } from "@/api/basicData/processRoute.js";
import { useI18n } from "vue-i18n"; //要在js中使用国际化
const { t, locale } = useI18n();
const { proxy } = getCurrentInstance();
const tableRef = ref();
const calendarList = ref([]);
const orderList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
  form: {
    type: "1",
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    description: null,
    type: null,
    effectiveDate: null,
    expiringDate: null,
    content: null,
    applicableFactory: null,
    applicableWorkshop: null,
    applicableProcess: null,
    documentNumber: null,
    itemNumber: null,
  },
});
const { queryParams, form, rules } = toRefs(data);
const typeRadioNumber = ref(1);
const { queryParams } = toRefs(data);
const plantList = ref([]);
const shopList = ref([]);
const allShopList = ref([]);
const processList = ref([]);
const height = ref(document.documentElement.clientHeight - 220 + "px;");
// 表格配置-列表
const columns = ref([
  {
    title: "工单号",
    field: "description",
    width: 150,
    align: "center"
  },
  {
    title: "子件料号",
    field: "type",
    width: 200,
    align: "center"
  },
  {
    title: "生产数量",
    field: "effectiveDate",
    width: 200,
    align: "center",
  },
  {
    title: "未匹配生产数量",
    field: "expiringDate",
    width: 200,
    align: "center"
  },
  {
    title: "适用工厂",
    field: "applicableFactory",
    width: 200,
    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: "expiringDate",
    width: 200,
    align: "center"
  },
  {
    title: "计划开工日",
    field: "createTime",
    width: 200,
    align: "center",
  },
  {
    title: "计划完工日",
    field: "updateTime",
    width: 100,
    align: "center",
  },
  {
    title: "工单创建时间",
    field: "updateTime",
    width: 100,
    align: "center",
  },
]);
const columns = ref([]);
// 分页属性
const page = ref({
  total: 0,
  current: 1,
  size: 10,
});

/** 查询日历管理列表 */
watch(
  locale,
  (newLocale) => {
    columns.value = [
      {
        title: t("plan.table.workOrderNo"),
        field: "documentNumber",
        align: "center",
      },
      {
        title: t("plan.table.itemNumber"),
        field: "itemNumber",
        align: "center",
      },
      {
        title: t("plan.table.productionQuantity"),
        field: "productionQuantity",
        width: "80",
        align: "center",
      },
      {
        title: t("plan.table.mismatchedProductionQuantity"),
        field: "unmatchedQuantity",
        width: "auto",
        align: "center",
      },
      {
        title: t("plan.table.applicableFactories"),
        field: "plant",
        width: "100",
        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: t("plan.table.productionBase"),
        field: "productionBase",
        width: "100",
        align: "center",
      },
      {
        title: t("plan.table.planStartDay"),
        field: "planStartDay",
        width: "120",
        align: "center",
      },
      {
        title: t("plan.table.planEndDayDate"),
        field: "planEndDay",
        width: "120",
        align: "center",
      },
      {
        title: t("plan.table.workorderCreationTime"),
        field: "orderCreateTime",
        width: "150",
        align: "center",
      },
    ];
  },
  { immediate: true, deep: true }
);
/** 查询管理列表 */
function getList() {
  loading.value = true;
  listCalendar(queryParams.value).then((response) => {
    calendarList.value = response.rows;
  redundantOrderList(queryParams.value).then((response) => {
    orderList.value = response.rows;
    page.value.total = response.total;
    loading.value = false;
  }).catch(()=>{
     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);
    });
}

// 取消按钮
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");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  page.value.current = 1;
  getList();
}

@@ -261,143 +206,15 @@
  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 handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getCalendar(_id).then((response) => {
    form.value = response.data;
    // form.value.content = JSON.parse(response.data.content.value);
    if (form.value.type === "1") {
      weekDaysSettingList.value = JSON.parse(
        response.data.content.value
      ).weekdays;
    } else if (form.value.type === "2") {
      holidays.value = JSON.parse(response.data.content.value).holidays;
    }

    open.value = true;
    title.value = "修改日历管理";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["calendarRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        if (form.value.type === "1") {
          updateCalendar({
            ...form.value,
            content: {
              weekdays: weekDaysSettingList.value,
            },
            applicableWorkshop: form.value.applicableWorkshop,
            applicableProcess: form.value.applicableProcess,
          }).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else if (form.value.type === "2") {
          updateCalendar({
            ...form.value,
            content: {
              holidays: holidays.value,
            },
            applicableWorkshop: form.value.applicableWorkshop,
            applicableProcess: form.value.applicableProcess,
          }).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        }
      } else {
        if (form.value.type === "1") {
          addCalendar({
            ...form.value,
            content: {
              weekdays: weekDaysSettingList.value,
            },
          }).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        } else if (form.value.type === "2") {
          addCalendar({
            ...form.value,
            content: {
              holidays: holidays.value,
            },
          }).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除日历管理编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delCalendar(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "core/calendar/export",
    "aps/apsPlatePlan/redundantOrderListExport",
    {
      ...queryParams.value,
    },
    `calendar_${new Date().getTime()}.xlsx`
    `redundantOrderList_${new Date().getTime()}.xlsx`
  );
}
function handleSwitchType(e) {
  typeRadioNumber.value = e;
  form.value.type = e;
  form.value.effectiveDate = null;
  form.value.expiringDate = null;
  form.value.content = null;
  form.value.applicableFactory = null;
  form.value.applicableWorkshop = null;
  form.value.applicableProcess = null;
}
function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
@@ -410,14 +227,16 @@
  queryParams.value.pageSize = pageSize;
  getList();
}
// 多选框选中数据
const handleCheckboxChange = (data) => {
  ids.value = data.records.map((item) => item.id);
  single.value = data.records.length !== 1;
  multiple.value = !data.records.length;
};
onMounted(() => {
  getList();
  /** 查询工厂列表 */
  listAll_plant({})
    .then((response) => {
      plantList.value = response.data;
    })
    .catch((error) => {
      console.error("请求出错:", error);
    });
});
</script>
<style lang="scss" scoped>