yanpeng200212
0e6d4dce53
- 移除 .lsjl-page / .lsjl-dialog 的颜色、字重以及 Element Plus 文本色变量覆盖，并去掉对应 class - 页面文字恢复全局默认样式 - 保留此前对编辑对话框的尺寸调整（宽度 720px、标签 82px）：那解决的是三列布局下数字输入框被挤压的问题，与字体无关
291 lines
12 KiB
Vue
291 lines
12 KiB
Vue
<script setup>
|
||
import { ref, reactive, onMounted, computed } from 'vue';
|
||
import request from '../../../utils/request';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
|
||
const list = ref([]);
|
||
const total = ref(0);
|
||
const loading = ref(false);
|
||
const deptOptions = ref([]); // 前缫车间
|
||
const zhuangkouOptions = ref([]); // 工艺庄口
|
||
const guigeOptions = ref([]); // 规格
|
||
|
||
const query = reactive({ pageIndex: 1, pageSize: 20, date: '', deptId: null, keyword: '' });
|
||
|
||
// 颜色字典（写死）
|
||
const yanseOptions = ['蓝色', '绿色', '乌红', '深红', '桔红', '蓝方', '黄方', '绿方', '紫方', '红方', '金方', '红圆', '桔圆', '绿圆', '黄圆', '粉圆', '蓝圆', '嫩绿'];
|
||
const jizuOptions = [1, 2, 3, 4, 5, 6];
|
||
|
||
const dialogVisible = ref(false);
|
||
const dialogTitle = ref('新增落丝记录');
|
||
const isEdit = ref(false);
|
||
const editId = ref(null);
|
||
const form = reactive({
|
||
workDate: new Date(), deptId: null, gyzkId: null, jizu: 1,
|
||
luosiTime: '', yanse: '', huishu: 0, chetaiStart: 0, chetaiEnd: 0,
|
||
chetaishu: 0, isbanche: false, hours: 0, guige: '', chesu: 0
|
||
});
|
||
|
||
async function load() {
|
||
loading.value = true;
|
||
try {
|
||
const params = { pageIndex: query.pageIndex, pageSize: query.pageSize, keyword: query.keyword };
|
||
if (query.date) params.date = query.date;
|
||
if (query.deptId) params.deptId = query.deptId;
|
||
const res = await request.get('/lsjl', { params });
|
||
list.value = res.data.items;
|
||
total.value = res.data.total;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 加载前缫车间（名称含"前缫"的部门）
|
||
async function loadDepts() {
|
||
const res = await request.get('/sys/department');
|
||
deptOptions.value = (res.data || []).filter((d) => d.name.includes('前缫'));
|
||
}
|
||
|
||
async function loadZhuangkou() {
|
||
const res = await request.get('/craftzhuangkou', { params: { pageIndex: 1, pageSize: 1000 } });
|
||
zhuangkouOptions.value = res.data.items;
|
||
}
|
||
|
||
async function loadGuige() {
|
||
const res = await request.get('/shengsiguige/all');
|
||
guigeOptions.value = res.data;
|
||
}
|
||
|
||
// 车间+机组 → 自动带出车台号
|
||
async function loadChetai() {
|
||
if (!form.deptId || !form.jizu) return;
|
||
try {
|
||
const res = await request.get('/lsjl/chetai', { params: { deptId: form.deptId, jizu: form.jizu } });
|
||
if (res.data) {
|
||
form.chetaiStart = res.data.chetaiStart;
|
||
form.chetaiEnd = res.data.chetaiEnd;
|
||
calcChetaishu();
|
||
}
|
||
} catch (e) {}
|
||
}
|
||
|
||
function calcChetaishu() {
|
||
if (form.chetaiStart > 0 && form.chetaiEnd > form.chetaiStart) {
|
||
form.chetaishu = form.chetaiEnd - form.chetaiStart + 1;
|
||
}
|
||
}
|
||
|
||
function openCreate() {
|
||
isEdit.value = false;
|
||
dialogTitle.value = '新增落丝记录';
|
||
Object.assign(form, {
|
||
workDate: new Date(), deptId: deptOptions.value[0]?.id || null, gyzkId: null, jizu: 1,
|
||
luosiTime: '', yanse: yanseOptions[0] || '', huishu: 0, chetaiStart: 0, chetaiEnd: 0,
|
||
chetaishu: 0, isbanche: false, hours: 0, guige: guigeOptions.value[0] || '', chesu: 0
|
||
});
|
||
dialogVisible.value = true;
|
||
}
|
||
|
||
function openEdit(row) {
|
||
isEdit.value = true;
|
||
editId.value = row.id;
|
||
dialogTitle.value = '修改落丝记录';
|
||
Object.assign(form, {
|
||
workDate: row.workDate, deptId: row.deptId, gyzkId: row.gyzkId, jizu: row.jizu,
|
||
luosiTime: row.luosiTime, yanse: row.yanse, huishu: row.huishu,
|
||
chetaiStart: row.chetaiStart, chetaiEnd: row.chetaiEnd, chetaishu: row.chetaishu,
|
||
isbanche: row.isbanche, hours: row.hours, guige: row.guige, chesu: row.chesu
|
||
});
|
||
dialogVisible.value = true;
|
||
}
|
||
|
||
async function save() {
|
||
if (!form.deptId) { ElMessage.warning('请选择车间'); return; }
|
||
if (!form.gyzkId) { ElMessage.warning('请选择庄口'); return; }
|
||
try {
|
||
if (isEdit.value) {
|
||
await request.put(`/lsjl/${editId.value}`, form);
|
||
ElMessage.success('更新成功');
|
||
} else {
|
||
await request.post('/lsjl', form);
|
||
ElMessage.success('创建成功');
|
||
}
|
||
dialogVisible.value = false;
|
||
load();
|
||
} catch (e) {}
|
||
}
|
||
|
||
async function del(row) {
|
||
await ElMessageBox.confirm('确定删除这条落丝记录吗？', '提示', { type: 'warning' });
|
||
try {
|
||
await request.delete(`/lsjl/${row.id}`);
|
||
ElMessage.success('删除成功');
|
||
load();
|
||
} catch (e) {}
|
||
}
|
||
|
||
function handlePageChange(p) {
|
||
// 分页组件挂载时会触发一次 current-change，页码未变化时忽略，避免首次打开重复请求
|
||
if (p === query.pageIndex) return;
|
||
query.pageIndex = p;
|
||
load();
|
||
}
|
||
|
||
onMounted(() => { load(); loadDepts(); loadZhuangkou(); loadGuige(); });
|
||
</script>
|
||
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>落丝记录</span>
|
||
<el-button type="primary" @click="openCreate">新增落丝记录</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="search-bar">
|
||
<el-date-picker v-model="query.date" type="date" placeholder="日期" value-format="YYYY-MM-DD" style="width: 160px" />
|
||
<el-select v-model="query.deptId" clearable placeholder="车间" style="width: 160px">
|
||
<el-option v-for="d in deptOptions" :key="d.id" :label="d.name" :value="d.id" />
|
||
</el-select>
|
||
<el-input v-model="query.keyword" placeholder="庄口/规格" clearable style="width: 180px" @keyup.enter="query.pageIndex=1;load()" />
|
||
<el-button type="primary" @click="query.pageIndex=1;load()">搜索</el-button>
|
||
<el-button @click="Object.assign(query,{date:'',deptId:null,keyword:'',pageIndex:1});load()">重置</el-button>
|
||
</div>
|
||
|
||
<el-table v-loading="loading" :data="list" border stripe>
|
||
<el-table-column label="日期" width="100">
|
||
<template #default="{ row }">{{ row.workDate?.slice(0, 10) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="deptName" label="车间" width="120" />
|
||
<el-table-column prop="jizu" label="机组" width="70" />
|
||
<el-table-column prop="guige" label="规格" width="80" />
|
||
<el-table-column prop="zhuangKouName" label="庄口" min-width="180" />
|
||
<el-table-column prop="huishu" label="回数" width="70" />
|
||
<el-table-column prop="yanse" label="颜色" width="80" />
|
||
<el-table-column prop="isbancheName" label="半车" width="70" />
|
||
<el-table-column prop="luosiTime" label="落丝时间" width="90" />
|
||
<el-table-column prop="hours" label="时长" width="70" />
|
||
<el-table-column prop="chetaishu" label="车台数" width="80" />
|
||
<el-table-column prop="chetaiStart" label="开始车台" width="90" />
|
||
<el-table-column prop="chetaiEnd" label="结束车台" width="90" />
|
||
<el-table-column prop="chesu" label="车速" width="80" />
|
||
<el-table-column label="操作" width="140" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="del(row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination class="pagination" :current-page="query.pageIndex" :page-size="query.pageSize" :total="total" layout="total, prev, pager, next" @current-change="handlePageChange" />
|
||
|
||
<!-- 对话框适当加宽、标签宽度收紧：车台那一行是三列布局，
|
||
原尺寸下数字输入框太窄，框内数字与加减按钮会挤在一起 -->
|
||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="720px">
|
||
<el-form :model="form" label-width="82px">
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="日期">
|
||
<el-date-picker v-model="form.workDate" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="车间">
|
||
<el-select v-model="form.deptId" style="width: 100%" @change="loadChetai">
|
||
<el-option v-for="d in deptOptions" :key="d.id" :label="d.name" :value="d.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="机组">
|
||
<el-select v-model="form.jizu" style="width: 100%" @change="loadChetai">
|
||
<el-option v-for="j in jizuOptions" :key="j" :label="j" :value="j" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="庄口">
|
||
<el-select v-model="form.gyzkId" filterable style="width: 100%">
|
||
<el-option v-for="z in zhuangkouOptions" :key="z.id" :label="z.zhuangKouName" :value="z.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="颜色">
|
||
<el-select v-model="form.yanse" style="width: 100%">
|
||
<el-option v-for="y in yanseOptions" :key="y" :label="y" :value="y" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="回数">
|
||
<el-input-number v-model="form.huishu" :min="0" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="落丝时间">
|
||
<el-time-picker v-model="form.luosiTime" value-format="HH:mm:ss" placeholder="落丝时间" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="缫丝时长">
|
||
<el-input-number v-model="form.hours" :min="0" :precision="1" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="开始车台">
|
||
<el-input-number v-model="form.chetaiStart" :min="0" style="width: 100%" @change="calcChetaishu" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="结束车台">
|
||
<el-input-number v-model="form.chetaiEnd" :min="0" style="width: 100%" @change="calcChetaishu" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="车台数">
|
||
<el-input-number v-model="form.chetaishu" :min="0" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<el-form-item label="规格">
|
||
<el-select v-model="form.guige" style="width: 100%">
|
||
<el-option v-for="g in guigeOptions" :key="g" :label="g" :value="g" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="车速">
|
||
<el-input-number v-model="form.chesu" :min="0" :precision="1" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="半车">
|
||
<el-switch v-model="form.isbanche" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="save">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</el-card>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||
.search-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.pagination { margin-top: 16px; justify-content: flex-end; }
|
||
</style>
|