<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title ml10">车间名称：</span>
|
<el-input
|
v-model="searchForm.name"
|
style="width: 180px"
|
placeholder="请输入车间名称"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
<span class="search_title ml10">负责人：</span>
|
<el-input
|
v-model="searchForm.principal"
|
style="width: 160px"
|
placeholder="请输入负责人"
|
clearable
|
@keyup.enter="handleQuery"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
<el-button type="primary" @click="handleAdd" style="margin-left: 10px">新增车间</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
height="calc(100vh - 320px)"
|
:tableLoading="tableLoading"
|
:isSelection="false"
|
:isShowPagination="true"
|
@pagination="pagination"
|
/>
|
</div>
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" @close="onDialogClose">
|
<el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
|
<el-form-item label="车间名称" prop="name">
|
<el-input v-model="formData.name" placeholder="请输入车间名称" maxlength="100" show-word-limit clearable />
|
</el-form-item>
|
<el-form-item label="负责人" prop="principal">
|
<el-input v-model="formData.principal" placeholder="请输入负责人" maxlength="100" clearable />
|
</el-form-item>
|
<el-form-item label="联系方式" prop="contactPhone">
|
<el-input v-model="formData.contactPhone" placeholder="请输入联系方式" maxlength="200" clearable />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="500" show-word-limit />
|
</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, reactive, ref } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import { workshopPage, workshopSave, workshopDeleteById } from "@/api/basicData/workshop.js";
|
|
const tableColumn = ref([
|
{ label: "车间名称", prop: "name", minWidth: "140" },
|
{ label: "负责人", prop: "principal", minWidth: "120" },
|
{ label: "联系方式", prop: "contactPhone", minWidth: "160" },
|
{ label: "备注", prop: "remark", minWidth: "160" },
|
{
|
label: "操作",
|
dataType: "action",
|
width: "150",
|
fixed: "right",
|
operation: [
|
{
|
name: "编辑",
|
clickFun: row => handleEdit(row),
|
},
|
{
|
name: "删除",
|
clickFun: row => handleDelete(row),
|
},
|
],
|
},
|
]);
|
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
const searchForm = reactive({
|
name: "",
|
principal: "",
|
});
|
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const formData = reactive({
|
id: null,
|
name: "",
|
principal: "",
|
contactPhone: "",
|
remark: "",
|
});
|
|
const rules = reactive({
|
name: [{ required: true, message: "请输入车间名称", trigger: "blur" }],
|
principal: [{ required: true, message: "请输入负责人", trigger: "blur" }],
|
contactPhone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
|
});
|
|
const isEdit = ref(false);
|
|
function parsePagePayload(res) {
|
const payload = res?.data;
|
if (!payload) {
|
return { records: [], total: 0 };
|
}
|
if (Array.isArray(payload)) {
|
return { records: payload, total: payload.length };
|
}
|
const records = payload.records ?? payload.list ?? payload.rows ?? [];
|
const total = Number(payload.total ?? payload.totalCount ?? 0);
|
return { records: Array.isArray(records) ? records : [], total };
|
}
|
|
const getList = () => {
|
tableLoading.value = true;
|
workshopPage({
|
name: searchForm.name?.trim() ?? "",
|
principal: searchForm.principal?.trim() ?? "",
|
contactPhone: "",
|
current: page.current,
|
size: page.size,
|
})
|
.then(res => {
|
if (res.code === 200) {
|
const { records, total } = parsePagePayload(res);
|
tableData.value = records;
|
page.total = total;
|
} else {
|
ElMessage.error(res.msg || "查询失败");
|
}
|
})
|
.catch(() => {
|
ElMessage.error("查询失败");
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const handleReset = () => {
|
searchForm.name = "";
|
searchForm.principal = "";
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const resetFormModel = () => {
|
formData.id = null;
|
formData.name = "";
|
formData.principal = "";
|
formData.contactPhone = "";
|
formData.remark = "";
|
};
|
|
const handleAdd = () => {
|
isEdit.value = false;
|
dialogTitle.value = "新增车间";
|
resetFormModel();
|
dialogVisible.value = true;
|
};
|
|
const handleEdit = row => {
|
isEdit.value = true;
|
dialogTitle.value = "编辑车间";
|
formData.id = row.id;
|
formData.name = row.name ?? "";
|
formData.principal = row.principal ?? "";
|
formData.contactPhone = row.contactPhone ?? "";
|
formData.remark = row.remark ?? "";
|
dialogVisible.value = true;
|
};
|
|
const handleDelete = row => {
|
ElMessageBox.confirm("确定要删除该车间吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => workshopDeleteById(row.id))
|
.then(() => {
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(err => {
|
if (err === "cancel" || err === "close") return;
|
ElMessage.error("删除失败");
|
});
|
};
|
|
const onDialogClose = () => {
|
formRef.value?.resetFields?.();
|
};
|
|
const handleSubmit = () => {
|
formRef.value?.validate(valid => {
|
if (!valid) return;
|
const payload = {
|
id: isEdit.value ? formData.id : null,
|
name: formData.name.trim(),
|
principal: formData.principal.trim(),
|
contactPhone: formData.contactPhone.trim(),
|
remark: (formData.remark || "").trim(),
|
};
|
workshopSave(payload)
|
.then(res => {
|
if (res.code === 200) {
|
ElMessage.success(isEdit.value ? "修改成功" : "新增成功");
|
dialogVisible.value = false;
|
getList();
|
} else {
|
ElMessage.error(res.msg || "保存失败");
|
}
|
})
|
.catch(() => {
|
ElMessage.error("保存失败");
|
});
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 24px;
|
background-color: #f0f2f5;
|
min-height: calc(100vh - 48px);
|
}
|
|
.search_form {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 24px;
|
padding: 20px;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
.search_title {
|
color: #606266;
|
font-size: 14px;
|
font-weight: 500;
|
}
|
|
.ml10 {
|
margin-left: 10px;
|
}
|
}
|
|
.table_list {
|
background-color: #ffffff;
|
padding: 16px;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
}
|
</style>
|
