<template>
|
<el-dialog v-model="visible" title="选择工序" width="800px" destroy-on-close :close-on-click-modal="false">
|
<el-form :inline="true" :model="query" class="mb-2">
|
<el-form-item label="工序名称">
|
<el-input v-model="query.name" placeholder="输入工序名称" clearable @keyup.enter="onSearch" style="width: 180px" />
|
</el-form-item>
|
<el-form-item label="工序编码">
|
<el-input v-model="query.no" placeholder="输入工序编码" clearable @keyup.enter="onSearch" style="width: 180px" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSearch">搜索</el-button>
|
<el-button @click="onReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table ref="tableRef" v-loading="loading" :data="tableData" height="380" highlight-current-row row-key="id"
|
@current-change="handleCurrentChange" @row-dblclick="onConfirm">
|
<el-table-column type="index" label="序号" width="60" />
|
<el-table-column prop="no" label="工序编码" min-width="130" />
|
<el-table-column prop="name" label="工序名称" min-width="150" />
|
<el-table-column prop="isQuality" label="是否质检" min-width="90">
|
<template #default="{ row }">
|
<el-tag size="small" :type="row.isQuality ? 'warning' : 'info'">{{ row.isQuality ? '是' : '否' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="isProduction" label="是否生产" min-width="90">
|
<template #default="{ row }">
|
<el-tag size="small" :type="row.isProduction ? 'success' : 'info'">{{ row.isProduction ? '是' : '否' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
|
</el-table>
|
|
<div class="mt-3 flex justify-end">
|
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
|
v-model:page-size="page.pageSize" v-model:current-page="page.pageNum" :page-sizes="[10, 20, 50, 100]"
|
@size-change="onPageChange" @current-change="onPageChange" />
|
</div>
|
|
<template #footer>
|
<el-button type="primary" :disabled="!selectedRow" @click="onConfirm">确定</el-button>
|
<el-button @click="close()">取消</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, reactive, ref, watch } from "vue";
|
import { ElMessage } from "element-plus";
|
import { listPage } from "@/api/productionManagement/productionProcess";
|
|
export type ProcessRow = {
|
id: number;
|
no?: string;
|
name: string;
|
isQuality?: boolean;
|
isProduction?: boolean;
|
remark?: string;
|
};
|
|
const props = defineProps<{
|
modelValue: boolean;
|
}>();
|
|
const emit = defineEmits(["update:modelValue", "confirm"]);
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: v => emit("update:modelValue", v),
|
});
|
|
const query = reactive({
|
name: "",
|
no: "",
|
});
|
|
const page = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
});
|
|
const loading = ref(false);
|
const tableData = ref<ProcessRow[]>([]);
|
const total = ref(0);
|
const selectedRow = ref<ProcessRow | null>(null);
|
const tableRef = ref();
|
|
function close() {
|
visible.value = false;
|
}
|
|
function handleCurrentChange(row: ProcessRow) {
|
selectedRow.value = row;
|
}
|
|
function onSearch() {
|
page.pageNum = 1;
|
loadData();
|
}
|
|
function onReset() {
|
query.name = "";
|
query.no = "";
|
onSearch();
|
}
|
|
function onPageChange() {
|
loadData();
|
}
|
|
function onConfirm() {
|
if (!selectedRow.value) {
|
ElMessage.warning("请选择一个工序");
|
return;
|
}
|
emit("confirm", selectedRow.value);
|
close();
|
}
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
selectedRow.value = null;
|
if (tableRef.value) {
|
tableRef.value.setCurrentRow(null);
|
}
|
const { data } = await listPage({
|
current: page.pageNum,
|
size: page.pageSize,
|
name: query.name.trim(),
|
no: query.no.trim(),
|
});
|
const records = data?.records ?? (Array.isArray(data) ? data : []);
|
tableData.value = Array.isArray(records) ? records : [];
|
total.value = Number(data?.total ?? tableData.value.length);
|
} catch (e) {
|
console.error("加载工序列表失败", e);
|
tableData.value = [];
|
total.value = 0;
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
// 监听弹窗打开，重置查询条件和页码（immediate：组件创建时 modelValue 已为 true，也立即加载）
|
watch(
|
() => props.modelValue,
|
visible => {
|
if (visible) {
|
selectedRow.value = null;
|
query.name = "";
|
query.no = "";
|
page.pageNum = 1;
|
loadData();
|
}
|
},
|
{ immediate: true }
|
);
|
</script>
|
