<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title ml10">参数名称：</span>
|
<el-input v-model="searchForm.materialCode"
|
style="width: 200px"
|
placeholder="请输入参数名称"
|
clearable />
|
<span class="search_title ml10">关联产品类型：</span>
|
<el-input v-model="searchForm.productName"
|
style="width: 200px"
|
placeholder="请输入关联产品类型"
|
clearable />
|
<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>
|
<el-button type="primary"
|
@click="handleProductTypeMaintenance"
|
style="margin-left: 10px">产品类型维护</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable rowKey="materialCode"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
height="calc(100vh - 320px)"
|
:tableLoading="tableLoading"
|
:isSelection="false"
|
@pagination="pagination">
|
</PIMTable>
|
</div>
|
<!-- 新增/编辑对话框 -->
|
<el-dialog v-model="dialogVisible"
|
:title="dialogTitle"
|
width="500px">
|
<el-form :model="formData"
|
:rules="rules"
|
ref="formRef"
|
label-width="120px">
|
<el-form-item label="参数编号"
|
prop="parameterCode">
|
<el-input v-model="formData.parameterCode"
|
placeholder="请输入参数编号" />
|
</el-form-item>
|
<el-form-item label="参数名称"
|
prop="parameterName">
|
<el-input v-model="formData.parameterName"
|
placeholder="请输入参数名称" />
|
</el-form-item>
|
<el-form-item label="参数模式"
|
prop="parameterFormat">
|
<el-select v-model="formData.parameterType2"
|
placeholder="请选择参数类型">
|
<el-option label="单值"
|
value="1" />
|
<el-option label="区间"
|
value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="参数类型"
|
prop="parameterType">
|
<el-select v-model="formData.parameterType"
|
@change="handleParameterTypeChange"
|
placeholder="请选择参数类型">
|
<el-option label="数值格式"
|
value="数值格式" />
|
<el-option label="文本格式"
|
value="文本格式" />
|
<el-option label="下拉选项"
|
value="下拉选项" />
|
<el-option label="时间格式"
|
value="时间格式" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="formData.parameterType === '下拉选项'"
|
label="数据字典"
|
prop="parameterFormat">
|
<el-select v-model="formData.parameterFormat"
|
placeholder="请选择数据字典">
|
<el-option v-for="item in dictTypes"
|
:key="item.dictType"
|
:label="item.dictName"
|
:value="item.dictType" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-else-if="formData.parameterType === '时间格式'"
|
label="时间格式"
|
prop="parameterFormat">
|
<el-select v-model="formData.parameterFormat"
|
placeholder="请选择时间格式">
|
<el-option label="YYYY-MM-DD HH:mm:ss"
|
value="YYYY-MM-DD HH:mm:ss" />
|
<el-option label="YYYY-MM-DD"
|
value="YYYY-MM-DD" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-else
|
label="参数格式"
|
prop="parameterFormat">
|
<el-input v-model="formData.parameterFormat"
|
placeholder="请输入参数格式" />
|
</el-form-item>
|
<el-form-item label="关联产品类型"
|
prop="parameterValue">
|
<el-select v-model="formData.parameterValue"
|
placeholder="请选择关联产品类型">
|
<el-option v-for="item in productTypes"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="标准值"
|
v-if="formData.parameterType2 === '1'"
|
prop="standardValue">
|
<el-input v-model="formData.standardValue"
|
placeholder="请输入标准值" />
|
</el-form-item>
|
<el-form-item label="最大值"
|
v-if="formData.parameterType2 === '2'"
|
prop="standardValue">
|
<el-input v-model="formData.standardValue"
|
placeholder="请输入标准值" />
|
</el-form-item>
|
<el-form-item label="最小值"
|
v-if="formData.parameterType2 === '2'"
|
prop="standardValue">
|
<el-input v-model="formData.standardValue"
|
placeholder="请输入标准值" />
|
</el-form-item>
|
<el-form-item label="单位"
|
prop="unit">
|
<el-input v-model="formData.unit"
|
placeholder="请输入单位" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary"
|
@click="handleSubmit">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 产品类型维护对话框 -->
|
<el-dialog v-model="productTypeDialogVisible"
|
title="产品类型维护"
|
width="600px">
|
<div class="product-type-header">
|
<el-button type="primary"
|
@click="handleAddProductType">新增产品类型</el-button>
|
</div>
|
<el-table :data="productTypeList"
|
border
|
style="width: 100%; margin-top: 10px; margin-bottom: 20px">
|
<!-- <el-table-column prop="typeCode"
|
label="类型编码"
|
width="150" /> -->
|
<el-table-column prop="typeName"
|
label="类型名称" />
|
<el-table-column label="操作"
|
width="150">
|
<template #default="scope">
|
<el-button link
|
type="primary"
|
@click="handleEditProductType(scope.row)">编辑</el-button>
|
<el-button link
|
type="danger"
|
@click="handleDeleteProductType(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
<!-- 新增/编辑产品类型对话框 -->
|
<el-dialog v-model="productTypeFormVisible"
|
:title="productTypeDialogTitle"
|
width="400px">
|
<el-form :model="productTypeForm"
|
:rules="productTypeRules"
|
ref="productTypeFormRef"
|
label-width="100px">
|
<!-- <el-form-item label="类型编码"
|
prop="typeCode">
|
<el-input v-model="productTypeForm.typeCode"
|
placeholder="请输入类型编码" />
|
</el-form-item> -->
|
<el-form-item label="类型名称"
|
prop="typeName">
|
<el-input v-model="productTypeForm.typeName"
|
placeholder="请输入类型名称" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="productTypeFormVisible = false">取消</el-button>
|
<el-button type="primary"
|
@click="handleProductTypeSubmit">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, reactive } from "vue";
|
import {
|
parameterListPage,
|
addParameter,
|
updateParameter,
|
delParameter,
|
getProductTypes as getProductTypesApi,
|
} from "@/api/basicData/parameterMaintenance.js";
|
import { listType } from "@/api/system/dict/type";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
const tableColumn = ref([
|
{
|
label: "参数编号",
|
prop: "parameterCode",
|
className: "code-cell",
|
},
|
{
|
label: "参数名称",
|
prop: "parameterName",
|
},
|
{
|
label: "参数模式",
|
prop: "parameterType2",
|
},
|
{
|
label: "参数类型",
|
prop: "parameterType",
|
dataType: "tag",
|
formatType: params => {
|
const typeMap = {
|
数值格式: "primary",
|
文本格式: "info",
|
下拉选项: "warning",
|
时间格式: "success",
|
};
|
return typeMap[params] || "default";
|
},
|
},
|
{
|
label: "参数格式",
|
prop: "parameterFormat",
|
},
|
{
|
label: "关联产品类型",
|
prop: "parameterValue",
|
},
|
{
|
label: "标准值",
|
prop: "standardValue",
|
className: row => {
|
return row.parameterType == "数值格式" ? "quantity-cell" : "";
|
},
|
},
|
{
|
label: "最大值",
|
prop: "standardValue",
|
className: row => {
|
return row.parameterType == "数值格式" ? "quantity-cell" : "";
|
},
|
},
|
{
|
label: "最小值",
|
prop: "standardValue",
|
className: row => {
|
return row.parameterType == "数值格式" ? "quantity-cell" : "";
|
},
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
},
|
{
|
label: "操作",
|
dataType: "action",
|
width: "150",
|
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({
|
materialCode: "",
|
productName: "",
|
});
|
|
// 对话框相关
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const formData = reactive({
|
parameterCode: "",
|
parameterName: "",
|
parameterType2: "1",
|
parameterType: "",
|
parameterFormat: "",
|
parameterValue: "",
|
standardValue: "",
|
unit: "",
|
});
|
const rules = reactive({
|
parameterCode: [
|
{ required: true, message: "请输入参数编号", trigger: "blur" },
|
],
|
parameterName: [
|
{ required: true, message: "请输入参数名称", trigger: "blur" },
|
],
|
parameterType: [
|
{ required: true, message: "请选择参数类型", trigger: "change" },
|
],
|
parameterFormat: [
|
{ required: true, message: "请选择参数格式", trigger: "change" },
|
],
|
parameterValue: [
|
{ required: true, message: "请选择关联产品类型", trigger: "change" },
|
],
|
standardValue: [{ required: true, message: "请输入标准值", trigger: "blur" }],
|
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
});
|
const productTypes = ref([]);
|
const isEdit = ref(false);
|
|
// 产品类型维护相关
|
const productTypeDialogVisible = ref(false);
|
const productTypeFormVisible = ref(false);
|
const productTypeDialogTitle = ref("");
|
const productTypeFormRef = ref(null);
|
const productTypeList = ref([]);
|
const productTypeForm = reactive({
|
id: null,
|
// typeCode: "",
|
typeName: "",
|
});
|
const productTypeRules = reactive({
|
// typeCode: [{ required: true, message: "请输入类型编码", trigger: "blur" }],
|
typeName: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
|
});
|
const isProductTypeEdit = ref(false);
|
const handleParameterTypeChange = () => {
|
if (formData.parameterType === "数值格式") {
|
formData.parameterFormat = "#.0000";
|
} else if (formData.parameterType === "时间格式") {
|
formData.parameterFormat = "YYYY-MM-DD HH:mm:ss";
|
} else {
|
formData.parameterFormat = "";
|
}
|
};
|
// 产品类型维护按钮点击事件
|
const handleProductTypeMaintenance = () => {
|
productTypeDialogVisible.value = true;
|
getProductTypeList();
|
};
|
|
// 获取产品类型列表
|
const getProductTypeList = () => {
|
productTypeList.value = [
|
{ id: 1, typeCode: "TYPE001", typeName: "3.5砌块" },
|
{ id: 2, typeCode: "TYPE002", typeName: "5.0砌块" },
|
{ id: 3, typeCode: "TYPE003", typeName: "板材" },
|
];
|
};
|
|
// 新增产品类型
|
const handleAddProductType = () => {
|
isProductTypeEdit.value = false;
|
productTypeDialogTitle.value = "新增产品类型";
|
productTypeForm.id = null;
|
productTypeForm.typeCode = "";
|
productTypeForm.typeName = "";
|
productTypeFormVisible.value = true;
|
};
|
|
// 编辑产品类型
|
const handleEditProductType = row => {
|
isProductTypeEdit.value = true;
|
productTypeDialogTitle.value = "编辑产品类型";
|
productTypeForm.id = row.id;
|
productTypeForm.typeCode = row.typeCode;
|
productTypeForm.typeName = row.typeName;
|
productTypeFormVisible.value = true;
|
};
|
|
// 删除产品类型
|
const handleDeleteProductType = row => {
|
ElMessageBox.confirm("确定要删除该产品类型吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
ElMessage.success("删除成功");
|
getProductTypeList();
|
})
|
.catch(() => {});
|
};
|
|
// 提交产品类型表单
|
const handleProductTypeSubmit = () => {
|
productTypeFormRef.value.validate(valid => {
|
if (valid) {
|
ElMessage.success(isProductTypeEdit.value ? "编辑成功" : "新增成功");
|
productTypeFormVisible.value = false;
|
getProductTypeList();
|
}
|
});
|
};
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
/** 重置按钮操作 */
|
const handleReset = () => {
|
searchForm.materialCode = "";
|
searchForm.productName = "";
|
page.current = 1;
|
getList();
|
};
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
// 注释掉API调用，使用假数据
|
/*const params = { ...searchForm, ...page };
|
parameterListPage(params)
|
.then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data;
|
page.total = res.total || 0;
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
});*/
|
|
// 假数据
|
setTimeout(() => {
|
tableLoading.value = false;
|
tableData.value = [
|
{
|
id: 1,
|
parameterCode: "PARAM001",
|
parameterName: "长度",
|
parameterType2: "1",
|
parameterType: "数值格式",
|
parameterFormat: "",
|
parameterValue: "type1",
|
standardValue: "100",
|
unit: "mm",
|
},
|
{
|
id: 2,
|
parameterCode: "PARAM002",
|
parameterName: "温度",
|
parameterType2: "2",
|
parameterType: "数值格式",
|
parameterFormat: "",
|
parameterValue: "type1",
|
standardValue: "25",
|
unit: "℃",
|
},
|
{
|
id: 3,
|
parameterCode: "PARAM003",
|
parameterName: "颜色",
|
parameterType2: "1",
|
parameterType: "文本格式",
|
parameterFormat: "",
|
parameterValue: "type2",
|
standardValue: "红色",
|
unit: "",
|
},
|
{
|
id: 4,
|
parameterCode: "PARAM004",
|
parameterName: "状态",
|
parameterType2: "1",
|
parameterType: "下拉选项",
|
parameterFormat: "status",
|
parameterValue: "type3",
|
standardValue: "正常",
|
unit: "",
|
},
|
{
|
id: 5,
|
parameterCode: "PARAM005",
|
parameterName: "创建时间",
|
parameterType2: "1",
|
parameterType: "时间格式",
|
parameterFormat: "YYYY-MM-DD HH:mm:ss",
|
parameterValue: "type2",
|
standardValue: "2024-01-01 00:00:00",
|
unit: "",
|
},
|
];
|
page.total = 5;
|
}, 500);
|
};
|
|
// 获取产品类型列表
|
const getProductTypes = () => {
|
// 注释掉API调用，使用假数据
|
/*getProductTypesApi()
|
.then(res => {
|
productTypes.value = res.data || [];
|
})
|
.catch(() => {
|
// 失败时使用模拟数据
|
productTypes.value = [
|
{ label: "3.5砌块", value: "type1" },
|
{ label: "5.0砌块", value: "type2" },
|
{ label: "板材", value: "type3" },
|
];
|
});*/
|
|
// 假数据
|
productTypes.value = [
|
{ label: "3.5砌块", value: "type1" },
|
{ label: "5.0砌块", value: "type2" },
|
{ label: "板材", value: "type3" },
|
];
|
};
|
|
// 新增按钮点击事件
|
const handleAdd = () => {
|
isEdit.value = false;
|
dialogTitle.value = "新增参数";
|
// 重置表单
|
formData.parameterCode = "";
|
formData.parameterName = "";
|
formData.parameterType2 = "1";
|
formData.parameterType = "";
|
formData.parameterFormat = "";
|
formData.parameterValue = "";
|
formData.standardValue = "";
|
formData.unit = "";
|
dialogVisible.value = true;
|
};
|
|
// 编辑按钮点击事件
|
const handleEdit = row => {
|
isEdit.value = true;
|
dialogTitle.value = "编辑参数";
|
// 填充表单数据
|
formData.parameterCode = row.parameterCode;
|
formData.parameterName = row.parameterName;
|
formData.parameterType2 = row.parameterType2 || "1";
|
formData.parameterType = row.parameterType;
|
formData.parameterFormat = row.parameterFormat;
|
formData.parameterValue = row.parameterValue;
|
formData.standardValue = row.standardValue;
|
formData.unit = row.unit;
|
dialogVisible.value = true;
|
};
|
|
// 删除按钮点击事件
|
const handleDelete = row => {
|
ElMessageBox.confirm("确定要删除这条数据吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 注释掉API调用，使用假数据
|
/*delParameter(row.id)
|
.then(res => {
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(() => {
|
ElMessage.error("删除失败");
|
});*/
|
|
// 假数据模拟
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(() => {
|
// 取消删除
|
});
|
};
|
|
// 提交表单
|
const handleSubmit = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
// 注释掉API调用，使用假数据
|
/*const api = isEdit.value ? updateParameter : addParameter;
|
api(formData)
|
.then(res => {
|
ElMessage.success(isEdit.value ? "编辑成功" : "新增成功");
|
dialogVisible.value = false;
|
getList();
|
})
|
.catch(() => {
|
ElMessage.error(isEdit.value ? "编辑失败" : "新增失败");
|
});*/
|
|
// 假数据模拟
|
ElMessage.success(isEdit.value ? "编辑成功" : "新增成功");
|
dialogVisible.value = false;
|
getList();
|
} else {
|
return false;
|
}
|
});
|
};
|
const dictTypes = ref([]);
|
const getDictTypes = () => {
|
listType({ pageNum: 1, pageSize: 1000 }).then(res => {
|
dictTypes.value = res.rows || [];
|
});
|
};
|
|
onMounted(() => {
|
getDictTypes();
|
getList();
|
getProductTypes();
|
});
|
</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);
|
transition: all 0.3s ease;
|
|
&:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
}
|
|
.search_title {
|
color: #606266;
|
font-size: 14px;
|
font-weight: 500;
|
}
|
|
.ml10 {
|
margin-left: 10px;
|
}
|
}
|
|
.table_list {
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
overflow: hidden;
|
height: calc(100vh - 230px);
|
}
|
|
:deep(.el-table) {
|
border: none;
|
border-radius: 6px;
|
overflow: hidden;
|
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
|
|
.el-table__header-wrapper {
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
th {
|
background: transparent;
|
font-weight: 600;
|
// color: #ffffff;
|
border-bottom: none;
|
padding: 16px 0;
|
letter-spacing: 0.5px;
|
}
|
}
|
|
.el-table__body-wrapper {
|
tr {
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: linear-gradient(
|
90deg,
|
rgba(102, 126, 234, 0.05) 0%,
|
rgba(118, 75, 162, 0.05) 100%
|
);
|
transform: scale(1.002);
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
|
}
|
|
td {
|
border-bottom: 1px solid #f0f0f0;
|
padding: 14px 0;
|
color: #303133;
|
}
|
}
|
|
tr.current-row {
|
background: linear-gradient(
|
90deg,
|
rgba(102, 126, 234, 0.08) 0%,
|
rgba(118, 75, 162, 0.08) 100%
|
);
|
}
|
|
// 数值字段样式
|
.quantity-cell,
|
.volume-cell,
|
.dimension-cell {
|
font-weight: 600;
|
color: #409eff;
|
font-family: "Courier New", monospace;
|
text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
|
}
|
|
// 规格字段样式
|
.spec-cell {
|
color: #67c23a;
|
font-weight: 500;
|
padding: 4px 8px;
|
border-radius: 4px;
|
}
|
|
// 编码字段样式
|
.code-cell {
|
color: #e6a23c;
|
font-family: "Courier New", monospace;
|
font-weight: 500;
|
padding: 4px 8px;
|
border-radius: 4px;
|
}
|
|
// 日期字段样式
|
.date-cell {
|
color: #909399;
|
font-style: italic;
|
}
|
}
|
|
.el-table__empty-block {
|
padding: 60px 0;
|
background-color: #fafafa;
|
}
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
padding: 16px 20px;
|
background-color: #ffffff;
|
border-top: 1px solid #ebeef5;
|
border-radius: 0 0 12px 12px;
|
}
|
|
:deep(.el-button) {
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-1px);
|
}
|
}
|
|
@media (max-width: 768px) {
|
.app-container {
|
padding: 16px;
|
}
|
|
.search_form {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 12px;
|
|
.el-form {
|
width: 100%;
|
|
.el-form-item {
|
width: 100%;
|
}
|
}
|
|
.el-button {
|
margin-right: 12px;
|
}
|
}
|
|
:deep(.el-table) {
|
th,
|
td {
|
padding: 10px 0;
|
font-size: 12px;
|
}
|
}
|
}
|
</style>
|
