<template>
|
<div class="app-container">
|
<el-form
|
class="responsive-form"
|
:model="queryParams"
|
ref="queryRef"
|
:inline="true"
|
v-show="showSearch"
|
label-width="68px"
|
label-position="left"
|
>
|
<el-row type="flex" justify="left" :gutter="20">
|
<el-col :span="5">
|
<el-form-item label="计划名称" prop="name">
|
<el-input
|
style="width: 140px"
|
v-model="queryParams.name"
|
placeholder="请输入计划名称"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="19" 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-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"
|
@click="handleAdd"
|
v-hasPermi="['aps:management:add']"
|
>新增</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="Edit"
|
:disabled="single"
|
@click="handleUpdate(null)"
|
v-hasPermi="['aps:management:edit']"
|
>修改</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="Delete"
|
:disabled="multiple"
|
@click="handleDelete"
|
v-hasPermi="['aps:management:remove']"
|
>删除</el-button
|
>
|
</el-col>
|
<right-toolbar
|
v-model:showSearch="showSearch"
|
@queryTable="getList"
|
></right-toolbar>
|
</el-row>
|
<HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="calendarList"
|
:loading="loading"
|
:height="height"
|
ref="tableRef"
|
:page="page"
|
@changePageNo="changePageNo"
|
@changePageSize="changePageSize"
|
@on-checkbox="handleCheckboxChange"
|
class="auto-height-grid"
|
>
|
<template #buttons="{ row }">
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleUpdate(row)"
|
v-hasPermi="['aps:management:edit']"
|
>修改</el-button
|
>
|
<el-button
|
type="default"
|
size="small"
|
@click="handleSetCycle(row)"
|
v-hasPermi="['aps:planCycle:edit']"
|
>计划周期</el-button
|
>
|
<el-button
|
type="success"
|
size="small"
|
>生成计划</el-button
|
>
|
<el-button
|
type="danger"
|
size="small"
|
@click="handleDelete(row)"
|
v-hasPermi="['aps:management:remove']"
|
>删除</el-button
|
>
|
</template>
|
</HxlhTable>
|
|
<!-- 添加或修改日历管理对话框 -->
|
<el-dialog :title="title" v-model="open" width="80%" append-to-body>
|
<el-form
|
ref="planManageRef"
|
:model="form"
|
:rules="rules"
|
label-width="140px"
|
>
|
<el-form-item label="计划名称" prop="name" style="width: 100%">
|
<el-input
|
v-model="form.name"
|
clearable
|
placeholder="请输入计划名称"
|
/>
|
</el-form-item>
|
<el-form-item label="计划类型" prop="type" style="width: 100%">
|
<el-radio-group v-model="form.type">
|
<el-radio :label="'0'">装配置分解计划</el-radio>
|
<el-radio :label="'1'">主计划</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="计划排产区域" prop="area" style="width: 100%">
|
<el-select
|
clearable
|
v-model="form.area"
|
placeholder="请选择计划排产区域"
|
>
|
<el-option
|
v-for="area in aps_area"
|
:key="area.value"
|
:label="area.label"
|
:value="area.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="计划排产规则" prop="area" style="width: 100%">
|
<el-select
|
clearable
|
v-model="form.rule"
|
placeholder="请选择计划排产规则"
|
>
|
<el-option
|
v-for="rule in aps_plan_rule"
|
:key="rule.value"
|
:label="rule.label"
|
:value="rule.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancel">取 消</el-button>
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<!-- 计划周期 -->
|
<el-dialog
|
title="配置计划周期"
|
v-model="openSetCycle"
|
width="80%"
|
append-to-body
|
>
|
<el-form
|
ref="planManageRef"
|
:model="formCycle.cycle"
|
:rules="rules"
|
label-width="140px"
|
>
|
<el-form-item label="周期类型" prop="type" style="width: 100%">
|
<el-radio-group
|
v-model="formCycle.cycle.type"
|
@change="handleChangeTypeMonthDay"
|
>
|
<el-radio :label="'0'">日</el-radio>
|
<el-radio :label="'1'">月</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="滚动方式" prop="rollType" style="width: 100%">
|
<el-radio-group
|
v-model="formCycle.cycle.rollType"
|
@change="handleChangeTypeMonthDay"
|
>
|
<el-radio :label="'0'">日滚动</el-radio>
|
<el-radio :label="'1'">月滚动</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="计划周期" prop="period" style="width: 100%">
|
<el-input-number
|
v-model="formCycle.cycle.period"
|
size="mini"
|
@change="handleChangeTypeMonthDay"
|
/>
|
</el-form-item>
|
<el-form-item
|
label="周期开始时间"
|
prop="periodStart"
|
style="width: 100%"
|
>
|
<el-date-picker
|
clearable
|
v-model="formCycle.cycle.periodStart"
|
type="date"
|
:disabled-date="handleDisabledDate"
|
:default-value="formCycle.cycle.periodStart"
|
placeholder="选择日期"
|
@change="handleChangeTypeMonthDay"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="周期结束时间" prop="periodEnd" style="width: 100%">
|
<el-date-picker
|
clearable
|
disabled
|
v-model="formCycle.cycle.periodEnd"
|
type="date"
|
:default-value="formCycle.cycle.periodEnd"
|
placeholder="选择日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="openSetCycle = false">取 消</el-button>
|
<el-button type="primary" @click="submitFormCycle">保存</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="Calendar">
|
import moment from "moment";
|
import HxlhTable from "@/components/HxlhTable";
|
import {
|
getApsPlanManagementList,
|
apsPlanManagementSave,
|
delApsPlanManagementList,
|
redundantOrderList,
|
apsPlanManagementUpdate,
|
} from "@/api/demand/planManage";
|
const { proxy } = getCurrentInstance();
|
const router = useRouter();
|
const { aps_area } = proxy.useDict("aps_area");
|
const { aps_plan_rule } = proxy.useDict("aps_plan_rule");
|
const { aps_plan_type } = proxy.useDict("aps_plan_type");
|
const tableRef = ref();
|
const calendarList = ref([]);
|
const open = ref(false);
|
const openSetCycle = ref(false);
|
const expand = ref(true);
|
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: {
|
name: "",
|
rule: "",
|
area: "",
|
type: "0",
|
},
|
formCycle: {
|
cycle: {
|
type: "0",
|
rollType: "0",
|
period: "1",
|
periodStart: moment(Date.now()).format("YYYY-MM-DD"),
|
periodEnd: "",
|
},
|
},
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: "",
|
},
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入计划名称",
|
trigger: "blur",
|
},
|
],
|
type: [
|
{
|
required: true,
|
message: "请选择计划类型",
|
trigger: "blur",
|
},
|
],
|
area: [
|
{
|
required: true,
|
message: "请选择计划排产区域",
|
trigger: "blur",
|
},
|
],
|
rule: [
|
{
|
required: true,
|
message: "请选择计划排产规则",
|
trigger: "blur",
|
},
|
],
|
},
|
});
|
const { queryParams, form, rules, formCycle } = toRefs(data);
|
const checkedRow = ref({});
|
const shopList = ref([]);
|
const allShopList = ref([]);
|
const processList = ref([]);
|
const height = ref(document.documentElement.clientHeight - 220 + "px;");
|
// 表格配置-列表
|
const columns = ref([
|
{ type: "checkbox", width: 60, align: "center" },
|
{
|
title: "计划ID",
|
field: "id",
|
width: 150,
|
align: "center",
|
},
|
{
|
title: "计划名称",
|
field: "name",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: "计划类型",
|
field: "type",
|
width: 200,
|
align: "center",
|
formatter: ({ cellValue, row, column }) => {
|
if (cellValue) {
|
for (let i = 0; i < aps_plan_type.value.length; i++) {
|
if (cellValue === aps_plan_type.value[i].value) {
|
return aps_plan_type.value[i].label;
|
}
|
}
|
}
|
},
|
},
|
{
|
title: "计划排产区域",
|
field: "area",
|
width: 200,
|
align: "center",
|
formatter: ({ cellValue, row, column }) => {
|
if (cellValue) {
|
for (let i = 0; i < aps_area.value.length; i++) {
|
if (cellValue === aps_area.value[i].value) {
|
return aps_area.value[i].label;
|
}
|
}
|
}
|
},
|
},
|
{
|
title: "计划排产规则",
|
field: "rule",
|
width: 230,
|
align: "center",
|
formatter: ({ cellValue, row, column }) => {
|
if (cellValue) {
|
for (let i = 0; i < aps_plan_rule.value.length; i++) {
|
if (cellValue === aps_plan_rule.value[i].value) {
|
return aps_plan_rule.value[i].label;
|
}
|
}
|
}
|
},
|
},
|
{
|
title: "创建者",
|
field: "createBy",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: "创建时间",
|
field: "createTime",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: "更新者",
|
field: "updateBy",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: "更新时间",
|
field: "updateTime",
|
width: 200,
|
align: "center",
|
},
|
{
|
title: "操作",
|
width: 330,
|
fixed: "right",
|
slots: { default: "buttons" },
|
align: "center",
|
},
|
]);
|
// 分页属性
|
const page = ref({
|
total: 0,
|
current: 1,
|
size: 10,
|
});
|
// 禁用日期
|
function handleDisabledDate(time) {
|
return time.getTime() < Date.now() - 86400000 * 1;
|
}
|
function handleChangeTypeMonthDay() {
|
console.log(formCycle.value.cycle.periodStart);
|
if (formCycle.value.cycle.type == 0) {
|
if (formCycle.value.cycle.rollType == 0) {
|
let nowTime = moment(formCycle.value.cycle.periodStart)
|
.startOf("day")
|
.valueOf();
|
let period = formCycle.value.cycle.period * 86400000 * 1;
|
let endDate = nowTime * 1 + period * 1;
|
formCycle.value.cycle.periodEnd = moment(endDate).format("YYYY-MM-DD");
|
} else {
|
let nowTime = moment(formCycle.value.cycle.periodStart)
|
.startOf("day")
|
.add(formCycle.value.cycle.period, "months")
|
.valueOf();
|
formCycle.value.cycle.periodEnd = moment(nowTime).format("YYYY-MM-DD");
|
}
|
} else {
|
let nowTime = moment(formCycle.value.cycle.periodStart)
|
.startOf("day")
|
.add(formCycle.value.cycle.period, "months")
|
.valueOf();
|
formCycle.value.cycle.periodEnd = moment(nowTime).format("YYYY-MM-DD");
|
}
|
}
|
function handleSetPeriod(e) {
|
console.log(e);
|
formCycle.value.periodEnd;
|
}
|
/** 查询日历管理列表 */
|
function getList() {
|
loading.value = true;
|
getApsPlanManagementList(queryParams.value)
|
.then((response) => {
|
calendarList.value = response.rows;
|
page.value.total = response.total;
|
loading.value = false;
|
})
|
.catch(() => {
|
loading.value = false;
|
});
|
}
|
|
// 取消按钮
|
function cancel() {
|
open.value = false;
|
}
|
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
queryParams.value.pageNum = 1;
|
getList();
|
}
|
|
/** 重置按钮操作 */
|
function resetQuery() {
|
proxy.resetForm("queryRef");
|
handleQuery();
|
}
|
/** 新增按钮操作 */
|
async function handleAdd() {
|
open.value = true;
|
form.value = {
|
name: "",
|
rule: "",
|
area: "",
|
};
|
title.value = "新增计划";
|
}
|
|
/** 修改按钮操作 */
|
function handleUpdate(row) {
|
console.log(checkedRow.value, row, "修改计划管理000");
|
open.value = true;
|
title.value = "修改计划管理";
|
if (!row) {
|
form.value = checkedRow.value;
|
return;
|
}
|
form.value = row;
|
}
|
// 计划周期
|
function handleSetCycle(row) {
|
openSetCycle.value = true;
|
console.log(row,row.id,"==========")
|
if (!row.cycle) {
|
formCycle.value = {
|
cycle: {
|
type: "0",
|
rollType: "0",
|
period: "1",
|
periodStart: moment(Date.now()).format("YYYY-MM-DD"),
|
periodEnd: "",
|
planId: row.id
|
},
|
};
|
let nowTime = moment(formCycle.value.cycle.periodStart)
|
.startOf("day")
|
.valueOf();
|
let period = formCycle.value.cycle.period * 86400000 * 1;
|
let endDate = nowTime * 1 + period * 1;
|
formCycle.value.cycle.periodEnd = moment(endDate).format("YYYY-MM-DD");
|
} else {
|
formCycle.value = row;
|
}
|
console.log(formCycle.value, "formCycle.value+++++===");
|
}
|
function handleToggleExpand() {
|
expand.value = !expand.value;
|
}
|
/** 提交按钮 */
|
function submitForm() {
|
proxy.$refs["planManageRef"].validate((valid) => {
|
if (valid) {
|
if (form.value.id != null) {
|
apsPlanManagementUpdate({
|
...form.value,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("修改成功");
|
open.value = false;
|
getList();
|
}
|
})
|
.catch(() => {
|
open.value = false;
|
});
|
} else {
|
apsPlanManagementSave({
|
...form.value,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("新增成功");
|
open.value = false;
|
getList();
|
}
|
})
|
.catch(() => {
|
open.value = false;
|
});
|
}
|
}
|
});
|
}
|
function submitFormCycle() {
|
console.log(formCycle.value,"formCycle.value=====")
|
redundantOrderList({
|
...formCycle.value.cycle,
|
})
|
.then((res) => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("更新成功");
|
openSetCycle.value = false;
|
getList();
|
} else {
|
openSetCycle.value = false;
|
}
|
})
|
.catch(() => {
|
openSetCycle.value = false;
|
});
|
}
|
function handleGoToCycle() {
|
router.push({
|
path: "/demand/planManageCycle",
|
});
|
}
|
/** 删除按钮操作 */
|
function handleDelete(row) {
|
const _ids = row.id || ids.value;
|
proxy.$modal
|
.confirm('是否确认删除计划管理编号为"' + _ids + '"的数据项？')
|
.then(function () {
|
return delApsPlanManagementList(_ids);
|
})
|
.then(() => {
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
}
|
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();
|
}
|
// 多选框选中数据
|
const handleCheckboxChange = (data) => {
|
ids.value = data.records.map((item) => item.id);
|
single.value = data.records.length !== 1;
|
multiple.value = !data.records.length;
|
if (data.records.length === 1) {
|
checkedRow.value = data.records[0];
|
}
|
};
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
<style lang="scss" scoped>
|
.column-with-margin {
|
margin-right: 0px;
|
}
|
.title_bar_line {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
color: #333;
|
margin-bottom: 10px;
|
.line_short {
|
width: 5%;
|
height: 1px;
|
margin-right: 20px;
|
border-top: 1px solid #ddd;
|
}
|
.line_long {
|
width: 60%;
|
height: 1px;
|
margin-left: 20px;
|
border-top: 1px solid #ddd;
|
}
|
}
|
.week_flex {
|
display: flex;
|
justify-content: flex-start;
|
align-content: center;
|
color: #606266;
|
font-weight: 700;
|
margin-left: 20px;
|
&.mt20 {
|
margin-top: 20px;
|
margin-left: 0 !important;
|
}
|
.week_flex_item {
|
&:nth-child(1) {
|
margin-top: 5px;
|
}
|
&:nth-child(2) {
|
margin-left: 20px;
|
}
|
}
|
}
|
.factory_use_item {
|
margin-top: 10px;
|
}
|
.select_factory {
|
font-weight: 800;
|
font-size: 14px;
|
color: #606266;
|
}
|
.select_factory_dis {
|
margin-left: 34px;
|
}
|
.select_content {
|
margin-right: 10px;
|
margin-top: 20px;
|
// &:nth-child(1) {
|
// margin-left:34px;
|
// }
|
}
|
.mart5 {
|
margin-top: 5px;
|
}
|
.custom-height {
|
height: 200px; /* 或者使用 min-height */
|
}
|
.auto-height-grid .xe-body .xe-body--row {
|
height: auto; /* 或者使用 min-height */
|
}
|
.mart10 {
|
margin-top: 20px;
|
}
|
.h300 {
|
}
|
.height_dialog {
|
height: 400px;
|
overflow: hidden;
|
.height_dialog_scroll {
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
.dis_error_wrap {
|
.error_text {
|
margin-left: 20px;
|
font-size: 12px;
|
color: #f56c6c;
|
margin-left: 120px;
|
}
|
}
|
.error_require {
|
color: #f56c6c;
|
margin-right: 5px;
|
}
|
.grey_bg {
|
background: #f1f1f1;
|
width: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.flex_holidays_set {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.flex_item {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-top: 10px;
|
.flex_item_title {
|
width: 85px;
|
color: #606266;
|
font-size: 14px;
|
font-weight: 600;
|
margin-left: 20px;
|
margin-right: 10px;
|
}
|
.flex_item_dis {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
& div {
|
margin-bottom: 5px;
|
}
|
}
|
}
|
.flex_item_expand_end {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
cursor: pointer;
|
}
|
}
|
.title_flex {
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
.holiday_title {
|
font-size: 15px;
|
font-weight: 500;
|
}
|
}
|
</style>
|
