<template>
|
<div class="app-container">
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="工作日期:">
|
<el-date-picker v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 260px;"
|
@change="handleQuery" />
|
</el-form-item>
|
<el-form-item label="所属车间:">
|
<el-select v-model="searchForm.workshopId"
|
placeholder="请选择"
|
clearable
|
style="width: 180px;"
|
@change="handleSearchWorkshopChange">
|
<el-option v-for="item in workshopOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="班组:">
|
<el-select v-model="searchForm.teamId"
|
placeholder="请选择"
|
clearable
|
style="width: 180px;"
|
@change="handleQuery">
|
<el-option v-for="item in searchTeamOptions"
|
:key="item.id"
|
:label="item.teamName"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态:">
|
<el-select v-model="searchForm.status"
|
placeholder="请选择"
|
clearable
|
style="width: 140px;"
|
@change="handleQuery">
|
<el-option v-for="item in schedule_status"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="table_list">
|
<div style="text-align: right"
|
class="mb10">
|
<el-button type="primary"
|
@click="showNewModal">新增排班</el-button>
|
<el-button type="danger"
|
plain
|
:disabled="selectedRows.length === 0"
|
@click="handleDelete">删除排班</el-button>
|
</div>
|
<PIMTable rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="true"
|
:tableLoading="tableLoading"
|
@selection-change="handleSelectionChange"
|
@pagination="pagination">
|
<template #shiftType="{ row }">
|
<el-tag :type="shiftTag(row.shiftType)">
|
{{ shiftLabel(row.shiftType) }}
|
</el-tag>
|
</template>
|
<template #status="{ row }">
|
<el-tag :type="statusTag(row.status)">
|
{{ statusLabel(row.status) }}
|
</el-tag>
|
</template>
|
</PIMTable>
|
</div>
|
|
<!-- 新增/编辑弹窗 -->
|
<el-dialog v-model="dialogVisible"
|
:title="form.id ? '编辑排班' : '新增排班'"
|
width="600px">
|
<el-form ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="100px">
|
<el-form-item label="工作日期"
|
prop="workDate">
|
<el-date-picker v-model="form.workDate"
|
type="date"
|
placeholder="请选择工作日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
style="width: 100%;" />
|
</el-form-item>
|
<el-form-item label="班次"
|
prop="shiftType">
|
<el-select v-model="form.shiftType"
|
placeholder="请选择班次"
|
style="width: 100%;">
|
<el-option v-for="item in shift_type"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="所属车间"
|
prop="workshopId">
|
<el-select v-model="form.workshopId"
|
placeholder="请选择所属车间"
|
style="width: 100%;"
|
@change="handleFormWorkshopChange">
|
<el-option v-for="item in workshopOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="班组"
|
prop="teamId">
|
<el-select v-model="form.teamId"
|
placeholder="请选择班组"
|
style="width: 100%;">
|
<el-option v-for="item in formTeamOptions"
|
:key="item.id"
|
:label="item.teamName"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态"
|
prop="status">
|
<el-select v-model="form.status"
|
placeholder="请选择状态"
|
style="width: 100%;">
|
<el-option v-for="item in schedule_status"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="form.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注"
|
maxlength="500" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary"
|
@click="handleSubmit">确定</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {
|
onMounted,
|
ref,
|
reactive,
|
computed,
|
getCurrentInstance,
|
} from "vue";
|
import dayjs from "dayjs";
|
import { useDict } from "@/utils/dict.js";
|
import {
|
listPage,
|
add,
|
update,
|
del,
|
} from "@/api/productionScheduling/scheduling.js";
|
import { listAll as workshopListAll } from "@/api/productionScheduling/workshop.js";
|
import { listAll as teamListAll } from "@/api/productionScheduling/team.js";
|
|
const { proxy } = getCurrentInstance();
|
|
// 字典
|
const { shift_type, schedule_status } = useDict("shift_type", "schedule_status");
|
|
const findDictItem = (dict, val) => {
|
return dict.value.find(item => item.value === String(val));
|
};
|
const shiftLabel = val => {
|
const item = findDictItem(shift_type, val);
|
return item ? item.label : val;
|
};
|
const shiftTag = val => {
|
const item = findDictItem(shift_type, val);
|
return item ? item.elTagType : "info";
|
};
|
const statusLabel = val => {
|
const item = findDictItem(schedule_status, val);
|
return item ? item.label : val;
|
};
|
const statusTag = val => {
|
const item = findDictItem(schedule_status, val);
|
return item ? item.elTagType : "info";
|
};
|
|
const tableColumn = ref([
|
{
|
label: "工作日期",
|
prop: "workDate",
|
width: "120",
|
},
|
{
|
label: "班次",
|
prop: "shiftType",
|
dataType: "slot",
|
slot: "shiftType",
|
width: "100",
|
},
|
{
|
label: "所属车间",
|
prop: "workshopName",
|
width: "140",
|
},
|
{
|
label: "班组",
|
prop: "teamName",
|
width: "140",
|
},
|
{
|
label: "状态",
|
prop: "status",
|
dataType: "slot",
|
slot: "status",
|
width: "100",
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
},
|
{
|
label: "更新时间",
|
prop: "updateTime",
|
width: "160",
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
width: 100,
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: row => {
|
showEditModal(row);
|
},
|
},
|
],
|
},
|
]);
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const dialogVisible = ref(false);
|
const formRef = ref(null);
|
const workshopOptions = ref([]);
|
const allTeams = ref([]);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
total: 0,
|
});
|
|
const data = reactive({
|
searchForm: {
|
dateRange: [],
|
workshopId: null,
|
teamId: null,
|
status: null,
|
},
|
});
|
const { searchForm } = data;
|
|
const form = reactive({
|
id: null,
|
workDate: "",
|
shiftType: "",
|
workshopId: null,
|
teamId: null,
|
status: "1",
|
remark: "",
|
});
|
|
const rules = {
|
workDate: [{ required: true, message: "请选择工作日期", trigger: "change" }],
|
shiftType: [{ required: true, message: "请选择班次", trigger: "change" }],
|
workshopId: [{ required: true, message: "请选择所属车间", trigger: "change" }],
|
teamId: [{ required: true, message: "请选择班组", trigger: "change" }],
|
};
|
|
// 搜索班组下拉：按所选车间联动
|
const searchTeamOptions = computed(() => {
|
if (searchForm.workshopId) {
|
return allTeams.value.filter(item => item.workshopId === searchForm.workshopId);
|
}
|
return allTeams.value;
|
});
|
|
// 弹窗班组下拉：按所选车间联动
|
const formTeamOptions = computed(() => {
|
if (form.workshopId) {
|
return allTeams.value.filter(item => item.workshopId === form.workshopId);
|
}
|
return allTeams.value;
|
});
|
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const handleSearchWorkshopChange = () => {
|
searchForm.teamId = null;
|
handleQuery();
|
};
|
|
const handleFormWorkshopChange = () => {
|
form.teamId = null;
|
};
|
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
const { dateRange, ...rest } = searchForm;
|
const params = {
|
...rest,
|
...(dateRange && dateRange.length === 2
|
? { startDate: dateRange[0], endDate: dateRange[1] }
|
: {}),
|
...page,
|
};
|
listPage(params)
|
.then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
// 表格选择数据
|
const handleSelectionChange = selection => {
|
selectedRows.value = selection;
|
};
|
|
const resetForm = () => {
|
form.id = null;
|
form.workDate = dayjs().format("YYYY-MM-DD");
|
form.shiftType = "";
|
form.workshopId = null;
|
form.teamId = null;
|
form.status = "1";
|
form.remark = "";
|
};
|
|
// 打开新增弹框
|
const showNewModal = () => {
|
resetForm();
|
dialogVisible.value = true;
|
};
|
|
const showEditModal = row => {
|
resetForm();
|
form.id = row.id;
|
form.workDate = row.workDate;
|
form.shiftType = row.shiftType !== null && row.shiftType !== undefined ? String(row.shiftType) : "";
|
form.workshopId = row.workshopId;
|
form.teamId = row.teamId;
|
form.status = row.status !== null && row.status !== undefined ? String(row.status) : "1";
|
form.remark = row.remark;
|
dialogVisible.value = true;
|
};
|
|
const handleSubmit = () => {
|
formRef.value.validate(valid => {
|
if (!valid) return;
|
const payload = {
|
id: form.id,
|
workDate: form.workDate,
|
shiftType: form.shiftType !== "" ? Number(form.shiftType) : null,
|
workshopId: form.workshopId,
|
teamId: form.teamId,
|
status: form.status !== "" ? Number(form.status) : null,
|
remark: form.remark,
|
};
|
const request = payload.id ? update(payload) : add(payload);
|
request.then(() => {
|
proxy.$modal.msgSuccess(payload.id ? "修改成功" : "新增成功");
|
dialogVisible.value = false;
|
getList();
|
});
|
});
|
};
|
|
// 批量删除
|
const handleDelete = () => {
|
const rows = selectedRows.value;
|
const ids = rows.map(item => item.id);
|
const firstDesc = `${rows[0].workDate} ${rows[0].teamName || ""}`;
|
proxy.$modal
|
.confirm(
|
`是否确认删除"${firstDesc}"${rows.length > 1 ? `等${rows.length}条数据` : ""}？`
|
)
|
.then(function () {
|
return del(ids.join(","));
|
})
|
.then(() => {
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
};
|
|
const getWorkshopOptions = () => {
|
workshopListAll().then(res => {
|
workshopOptions.value = res.data || [];
|
});
|
};
|
|
const getTeamOptions = () => {
|
teamListAll().then(res => {
|
allTeams.value = res.data || [];
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
getWorkshopOptions();
|
getTeamOptions();
|
});
|
</script>
|
|
<style scoped></style>
|
