<template>
|
<div class="app-container">
|
<el-form
|
:model="queryParams"
|
ref="queryRef"
|
:inline="true"
|
v-show="showSearch"
|
:label-width="locale === 'zh' ? '90px' : '180px'"
|
label-position="left"
|
>
|
<el-row :gutter="10" class="mb8">
|
<!-- <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
|
v-model="queryParams.documentNumber"
|
:placeholder="$t('plan.placeholder.documentNumber')"
|
clearable
|
style="width: 240px"
|
@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 :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Plus"
|
:disabled="single"
|
@click="plannedStart"
|
v-hasPermi="['partPlan:add']"
|
>{{ $t("plan.btns.batchPlanStartDay") }}</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="Edit"
|
:disabled="single"
|
@click="plannedEnd"
|
v-hasPermi="['partPlan:edit']"
|
>{{ $t("plan.btns.batchPlanEndDay") }}</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="info"
|
plain
|
icon="Upload"
|
@click="handleImport"
|
v-hasPermi="['partPlan:import']"
|
>{{ $t("common.common.import") }}</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="Download"
|
@click="handleExport"
|
v-hasPermi="['partPlan:export']"
|
>{{ $t("common.common.export") }}</el-button
|
>
|
</el-col>
|
<right-toolbar
|
v-model:showSearch="showSearch"
|
@queryTable="getList"
|
></right-toolbar>
|
</el-row>
|
|
<HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="planList"
|
:loading="loading"
|
:height="height"
|
@on-checkbox="handleCheckboxChange"
|
>
|
</HxlhTable>
|
|
<!-- 导入对话框 -->
|
<el-dialog
|
:title="upload.title"
|
v-model="upload.open"
|
width="90%"
|
append-to-body
|
@close="dialogCancel"
|
>
|
<el-row :gutter="10">
|
<el-col>
|
<div style="border-bottom: 1px solid #ccc">
|
<p>
|
{{ $t("plan.upload.info") }}
|
</p>
|
</div>
|
</el-col>
|
<el-col>
|
<div></div>
|
</el-col>
|
<!-- <el-col>
|
<div>
|
<h2>Excel模板</h2>
|
<h4>请下载并使用此模板填写工艺路线数据</h4>
|
</div>
|
</el-col> -->
|
</el-row>
|
|
<el-row :gutter="10" style="margin-top: 20px">
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Download"
|
@click="importTemplate"
|
v-hasPermi="['partPlan:add']"
|
>下载Excel模板</el-button>
|
</el-col> -->
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="Edit"
|
@click="buildEexample"
|
v-hasPermi="['partPlan:edit']"
|
>生成示例数据</el-button>
|
</el-col> -->
|
</el-row>
|
<!-- <el-row>
|
<el-col>
|
<div>
|
<h2>文件上传</h2>
|
</div>
|
</el-col>
|
</el-row> -->
|
<el-row>
|
<el-col>
|
<el-upload
|
ref="uploadRef"
|
:limit="1"
|
accept=".xlsx, .xls"
|
:headers="upload.headers"
|
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
:disabled="upload.isUploading"
|
:on-progress="handleFileUploadProgress"
|
:on-success="handleFileSuccess"
|
:auto-upload="true"
|
drag
|
>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">
|
{{ $t("plan.upload.prevText")
|
}}<em>{{ $t("plan.upload.uploadText") }}</em>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
<!-- <div class="el-upload__tip">
|
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
</div> -->
|
<span>{{ $t("plan.upload.fileTypeImport") }}</span>
|
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> -->
|
</div>
|
</template>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col style="margin-top: 20px">
|
<div v-show="isVisible">
|
<el-alert
|
icon="Check"
|
:show-icon="true"
|
:title="$t('plan.message.dataWorkorderSuccess')"
|
type="success"
|
:closable="false"
|
/>
|
</div>
|
<div v-show="isError">
|
<el-alert
|
icon="Close"
|
:show-icon="true"
|
:title="$t('plan.message.dataWorkorderSuccess')"
|
type="error"
|
:closable="false"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row v-show="isVisible">
|
<el-col>
|
<div>
|
<h2>{{$t("plan.upload.dataPreview")}}</h2>
|
</div>
|
<HxlhTable
|
style="width: 100%"
|
:columns="exampleColumns"
|
:data="exampleList"
|
:loading="loading"
|
:maxHeight="exampleHeight"
|
@on-checkbox="handleCheckboxChange"
|
>
|
</HxlhTable>
|
</el-col>
|
<el-col>
|
<div style="text-align: right">
|
<h4>
|
{{$t("plan.upload.totalUpload")}}<span style="color: blue">{{ total }}</span
|
>{{$t("plan.upload.itemUpload")}}
|
</h4>
|
</div>
|
</el-col>
|
</el-row>
|
<template #footer>
|
<div class="dialog-footer">
|
<!-- <el-button type="primary" @click="submitFileForm">确 定</el-button> -->
|
<el-button
|
type="success"
|
plain
|
icon="Check"
|
:disabled="planned"
|
@click="uploadParse"
|
v-hasPermi="['partPlan:confirmPart']"
|
>{{$t("plan.upload.confirmUpload")}}</el-button
|
>
|
<el-button @click="dialogCancel">{{$t("plan.upload.cancel")}}</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="Plan">
|
import {
|
listPlan,
|
examplePlan,
|
confirmPart,
|
addPlan,
|
updatePlan,
|
} from "@/api/partPlan/plan";
|
import HxlhTable from "@/components/HxlhTable";
|
import { getToken } from "@/utils/auth";
|
import { ref } from "vue";
|
// import { ElMessage } from "element-plus";
|
|
const { proxy } = getCurrentInstance();
|
import { useI18n } from "vue-i18n"; //要在js中使用国际化
|
const { t, locale } = useI18n();
|
const exampleList = ref([]);
|
const planList = ref([]);
|
const loading = ref(true);
|
const showSearch = ref(true);
|
const single = ref(true);
|
const total = ref(0);
|
const daterangePlanStartDay = ref([]);
|
const daterangePlanEndDay = ref([]);
|
const height = ref(document.documentElement.clientHeight - 270 + "px;");
|
const isVisible = ref(false);
|
const isError = ref(false);
|
const planned = ref(true);
|
const batchNumber = ref(null);
|
const exampleHeight = ref("500px");
|
const uploadRef = ref();
|
|
/** 导入参数 */
|
const upload = reactive({
|
// 是否显示弹出层（用户导入）
|
open: false,
|
// 弹出层标题（用户导入）
|
title: "",
|
// 是否禁用上传
|
isUploading: false,
|
// 是否更新已经存在的用户数据
|
updateSupport: 0,
|
// 设置上传的请求头部
|
headers: { Authorization: "Bearer " + getToken() },
|
// 上传的地址
|
url: import.meta.env.VITE_APP_BASE_API + "/aps/partPlan/importData",
|
});
|
|
// 表格配置
|
const exampleColumns = ref([]);
|
|
// 表格配置
|
const columns = ref([]);
|
|
const data = reactive({
|
queryParams: {
|
documentNumber: null,
|
customer: null,
|
batchNumber: null,
|
},
|
});
|
|
const { queryParams } = toRefs(data);
|
watch(
|
locale,
|
(newLocale) => {
|
columns.value = [
|
{ type: "checkbox", width: 60, align: "center" },
|
{ type: "seq", title: t("plan.table.seq"), width: 60 },
|
{
|
title: t("plan.table.masterPlanner"),
|
field: "masterPlanner",
|
width: 100,
|
},
|
{
|
title: t("plan.table.weekDay"),
|
field: "weekDay",
|
width: 100,
|
formatter: ({ cellValue, row, column }) => {
|
if (cellValue) {
|
const weekDay = new Date(cellValue);
|
const year = weekDay.getFullYear();
|
const month = String(weekDay.getMonth() + 1).padStart(2, "0");
|
const day = String(weekDay.getDate()).padStart(2, "0");
|
return `${month}-${day}`;
|
}
|
return "";
|
},
|
},
|
{
|
title: t("plan.table.weekCycle"),
|
field: "weekCycle",
|
width: 80,
|
},
|
{
|
title: t("plan.table.mainPartNumber"),
|
field: "mainPartNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.mainPartDrawingNumber"),
|
field: "mainPartDrawingNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.customer"),
|
field: "customer",
|
width: 200,
|
},
|
{
|
title: t("plan.table.businessType"),
|
field: "businessType",
|
width: 150,
|
},
|
{
|
title: t("plan.table.documentNumber"),
|
field: "documentNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.requirementType"),
|
field: "requirementType",
|
width: 150,
|
},
|
{
|
title: t("plan.table.documentStatus"),
|
field: "documentStatus",
|
width: 100,
|
},
|
{
|
title: t("plan.table.itemNumber"),
|
field: "itemNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.drawingNo"),
|
field: "drawingNo",
|
width: 150,
|
},
|
{
|
title: t("plan.table.versionNumber"),
|
field: "versionNumber",
|
width: 100,
|
},
|
{
|
title: t("plan.table.productionQuantity"),
|
field: "productionQuantity",
|
width: 100,
|
},
|
{
|
title: t("plan.table.goodProductsQuantity"),
|
field: "goodProductsQuantity",
|
width: 100,
|
},
|
{
|
title: t("plan.table.processNumber"),
|
field: "processNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.factoryCenter"),
|
field: "workCenter",
|
width: 150,
|
},
|
{
|
title: t("plan.table.dependencyDepartment"),
|
field: "department",
|
width: 100,
|
},
|
{
|
title: t("plan.table.planStartDay"),
|
field: "planStartDay",
|
width: 100,
|
},
|
{
|
title: t("plan.table.planEndDayDate"),
|
field: "planEndDay",
|
width: 100,
|
},
|
{
|
title: t("plan.table.standbyNumber"),
|
field: "standbyNumber",
|
width: 100,
|
},
|
{
|
title: t("plan.table.standbyName"),
|
field: "standbyName",
|
width: 200,
|
},
|
{
|
title: t("plan.table.standbyStock"),
|
field: "standbyStock",
|
width: 100,
|
},
|
{
|
title: t("plan.table.departmentToNextProcessBelongs"),
|
field: "nextProcessDeparment",
|
width: 150,
|
},
|
{
|
title: t("plan.table.isSuspended"),
|
field: "isSuspended",
|
width: 100,
|
},
|
{
|
title: t("plan.table.isOutsourcing"),
|
field: "isOutsourcing",
|
width: 100,
|
},
|
{
|
title: t("plan.table.account"),
|
field: "account",
|
width: 100,
|
},
|
// {
|
// title: '上阶物料',
|
// field: 'advancedMaterials',
|
// width: 100,
|
// },
|
// {
|
// title: '上阶单据号',
|
// field: 'advancedDocumentNumber',
|
// width: 100,
|
// },
|
// {
|
// title: '上阶需求日期',
|
// field: 'advancedRequirementDay',
|
// width: 150,
|
// },
|
// {
|
// title: '计划齐套',
|
// field: 'isPlanComplete',
|
// width: 100,
|
// },
|
// {
|
// title: '库存齐套',
|
// field: 'isStockComplete',
|
// width: 100,
|
// },
|
// {
|
// title: '是否有折返工序',
|
// field: 'hasTurnback',
|
// width: 150,
|
// },
|
// {
|
// title: '风险标识',
|
// field: 'hasRisk',
|
// width: 100,
|
// },
|
];
|
exampleColumns.value = [
|
{ type: "seq", title: t("plan.table.seq"), width: 60 },
|
{
|
title: t("plan.table.masterPlanner"),
|
field: "masterPlanner",
|
width: 100,
|
},
|
{
|
title: t("plan.table.weekDay"),
|
field: "weekDay",
|
width: 100,
|
formatter: ({ cellValue, row, column }) => {
|
if (cellValue) {
|
const weekDay = new Date(cellValue);
|
const year = weekDay.getFullYear();
|
const month = String(weekDay.getMonth() + 1).padStart(2, "0");
|
const day = String(weekDay.getDate()).padStart(2, "0");
|
return `${month}-${day}`;
|
}
|
return "";
|
},
|
},
|
{
|
title: t("plan.table.weekCycle"),
|
field: "weekCycle",
|
width: 80,
|
},
|
{
|
title: t("plan.table.mainPartNumber"),
|
field: "mainPartNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.mainPartDrawingNumber"),
|
field: "mainPartDrawingNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.customer"),
|
field: "customer",
|
width: 200,
|
},
|
{
|
title: t("plan.table.businessType"),
|
field: "businessType",
|
width: 150,
|
},
|
{
|
title: t("plan.table.documentNumber"),
|
field: "documentNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.requirementType"),
|
field: "requirementType",
|
width: 150,
|
},
|
{
|
title: t("plan.table.documentStatus"),
|
field: "documentStatus",
|
width: 100,
|
},
|
{
|
title: t("plan.table.itemNumber"),
|
field: "itemNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.drawingNo"),
|
field: "drawingNo",
|
width: 150,
|
},
|
{
|
title: t("plan.table.versionNumber"),
|
field: "versionNumber",
|
width: 100,
|
},
|
{
|
title: t("plan.table.productionQuantity"),
|
field: "productionQuantity",
|
width: 100,
|
},
|
{
|
title: t("plan.table.goodProductsQuantity"),
|
field: "goodProductsQuantity",
|
width: 100,
|
},
|
{
|
title: t("plan.table.processNumber"),
|
field: "processNumber",
|
width: 150,
|
},
|
{
|
title: t("plan.table.factoryCenter"),
|
field: "workCenter",
|
width: 150,
|
},
|
{
|
title: t("plan.table.dependencyDepartment"),
|
field: "department",
|
width: 100,
|
},
|
{
|
title: t("plan.table.planStartDay"),
|
field: "planStartDay",
|
width: 100,
|
},
|
{
|
title: t("plan.table.planEndDayDate"),
|
field: "planEndDay",
|
width: 100,
|
},
|
{
|
title: t("plan.table.standbyNumber"),
|
field: "standbyNumber",
|
width: 100,
|
},
|
{
|
title: t("plan.table.standbyName"),
|
field: "standbyName",
|
width: 200,
|
},
|
{
|
title: t("plan.table.standbyStock"),
|
field: "standbyStock",
|
width: 100,
|
},
|
{
|
title: t("plan.table.departmentToNextProcessBelongs"),
|
field: "nextProcessDeparment",
|
width: 150,
|
},
|
{
|
title: t("plan.table.isSuspended"),
|
field: "isSuspended",
|
width: 100,
|
},
|
{
|
title: t("plan.table.isOutsourcing"),
|
field: "isOutsourcing",
|
width: 100,
|
},
|
{
|
title: t("plan.table.account"),
|
field: "account",
|
width: 100,
|
},
|
// {
|
// title: '上阶物料',
|
// field: 'advancedMaterials',
|
// width: 100,
|
// },
|
// {
|
// title: '上阶单据号',
|
// field: 'advancedDocumentNumber',
|
// width: 100,
|
// },
|
// {
|
// title: '上阶需求日期',
|
// field: 'advancedRequirementDay',
|
// width: 150,
|
// },
|
// {
|
// title: '计划齐套',
|
// field: 'isPlanComplete',
|
// width: 100,
|
// },
|
// {
|
// title: '库存齐套',
|
// field: 'isStockComplete',
|
// width: 100,
|
// },
|
// {
|
// title: '是否有折返工序',
|
// field: 'hasTurnback',
|
// width: 150,
|
// },
|
// {
|
// title: '风险标识',
|
// field: 'hasRisk',
|
// width: 100,
|
// },
|
];
|
},
|
{ immediate: true, deep: true }
|
);
|
/** 查询零件计划临时管理列表 */
|
function getExampleList() {
|
loading.value = true;
|
queryParams.value = {};
|
queryParams.value.batchNumber = batchNumber.value;
|
examplePlan(queryParams.value).then((response) => {
|
exampleList.value = response.rows;
|
total.value = response.total;
|
loading.value = false;
|
});
|
}
|
|
/** 查询零件计划管理列表 */
|
function getList() {
|
loading.value = true;
|
queryParams.value.params = {};
|
if (null != daterangePlanStartDay && "" != daterangePlanStartDay) {
|
queryParams.value.params["beginPlanStartDay"] =
|
daterangePlanStartDay.value[0];
|
queryParams.value.params["endPlanStartDay"] =
|
daterangePlanStartDay.value[1];
|
}
|
if (null != daterangePlanEndDay && "" != daterangePlanEndDay) {
|
queryParams.value.params["beginPlanEndDay"] = daterangePlanEndDay.value[0];
|
queryParams.value.params["endPlanEndDay"] = daterangePlanEndDay.value[1];
|
}
|
listPlan(queryParams.value).then((response) => {
|
planList.value = response.rows;
|
loading.value = false;
|
});
|
}
|
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
queryParams.value.planNum = 1;
|
getList();
|
}
|
|
/** 重置按钮操作 */
|
function resetQuery() {
|
daterangePlanStartDay.value = [];
|
daterangePlanEndDay.value = [];
|
proxy.resetForm("queryRef");
|
handleQuery();
|
}
|
|
// 多选框选中数据
|
const handleCheckboxChange = (data) => {
|
console.log(data);
|
};
|
|
/** 批量修改计划开工日按钮操作 */
|
function plannedStart() {}
|
|
/** 批量修改计划完工日按钮操作 */
|
function plannedEnd() {}
|
|
/** 导入按钮操作 */
|
function handleImport() {
|
upload.title = t("plan.upload.uploadPartWorkOrderData");
|
upload.open = true;
|
}
|
|
/** 导出按钮操作 */
|
function handleExport() {
|
proxy.download(
|
"aps/partPlan/export",
|
{
|
...queryParams.value,
|
},
|
`plan_${new Date().getTime()}.xlsx`
|
);
|
}
|
|
/** 下载模板操作 */
|
function importTemplate() {
|
proxy.download(
|
"system/user/importTemplate",
|
{},
|
`user_template_${new Date().getTime()}.xlsx`
|
);
|
}
|
|
/** buildEexample */
|
function buildEexample() {
|
proxy.$refs["uploadRef"].submit();
|
}
|
|
/**文件上传中处理 */
|
const handleFileUploadProgress = (event, file, fileList) => {
|
upload.isUploading = true;
|
};
|
|
/** 文件上传成功处理 */
|
const handleFileSuccess = (response, file, fileList) => {
|
if (response.code == "200") {
|
batchNumber.value = response.data;
|
isVisible.value = true;
|
planned.value = false;
|
isError.value = false;
|
getExampleList();
|
} else {
|
isError.value = true;
|
proxy.$alert(
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
response.msg +
|
"</div>",
|
t("plan.upload.errorResult"),
|
{ dangerouslyUseHTMLString: true,
|
confirmButtonText: t("plan.btns.confirm"),
|
cancelButtonText: t("plan.btns.cancel"),
|
}
|
);
|
}
|
proxy.$refs["uploadRef"].handleRemove(file);
|
upload.isUploading = false;
|
};
|
|
/** 上传并解析按钮操作 */
|
function uploadParse() {
|
queryParams.value.params = {};
|
queryParams.value.params["batchNumber"] = batchNumber.value;
|
confirmPart(queryParams.value).then((response) => {
|
exampleList.value = response.rows;
|
loading.value = false;
|
isVisible.value = false;
|
isError.value = false;
|
planned.value = true;
|
upload.open = false;
|
ElMessage({
|
message: t("plan.upload.uploadParsePartWorkOrderData"),
|
type: "success",
|
});
|
getList();
|
});
|
}
|
|
/** dialog取消 */
|
function dialogCancel() {
|
if (uploadRef.value) {
|
uploadRef.value.clearFiles();
|
}
|
isVisible.value = false;
|
isError.value = false;
|
planned.value = true;
|
upload.open = false;
|
upload.isUploading = false;
|
}
|
getList();
|
</script>
|
<style lang="css" scoped>
|
h4 {
|
font-weight: bold;
|
}
|
</style>
|
