<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title ml10">参数名称：</span>
|
<el-input v-model="searchForm.paramName"
|
style="width: 200px"
|
placeholder="请输入参数名称"
|
clearable />
|
<!-- 关联产品类型搜索 -->
|
<!-- <span class="search_title ml10">关联产品类型：</span>
|
<el-input v-model="searchForm.productName"
|
style="width: 200px"d
|
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="paramName"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
height="calc(100vh - 280px)"
|
:tableLoading="tableLoading"
|
:isSelection="false"
|
:isShowPagination="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="paramName">
|
<el-input v-model="formData.paramName"
|
placeholder="请输入参数名称" />
|
</el-form-item>
|
<el-form-item label="参数类型"
|
prop="paramType">
|
<el-select v-model="formData.paramType"
|
placeholder="请选择参数类型">
|
<el-option label="数值格式"
|
value="1" />
|
<el-option label="文本格式"
|
value="2" />
|
<el-option label="下拉选项"
|
value="3" />
|
<el-option label="时间格式"
|
value="4" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="取值模式"
|
prop="valueMode">
|
<el-select v-model="formData.valueMode"
|
@change="handleValueModeChange"
|
placeholder="请选择取值模式">
|
<el-option label="单值"
|
value="1" />
|
<el-option label="区间"
|
value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="单位"
|
prop="unit">
|
<el-input v-model="formData.unit"
|
placeholder="请输入单位" />
|
</el-form-item>
|
<el-form-item label="默认值"
|
v-if="formData.valueMode === '1'"
|
prop="defaultValue">
|
<el-input v-model="formData.defaultValue"
|
placeholder="请输入默认值" />
|
</el-form-item>
|
<el-form-item label="最小值"
|
v-if="formData.valueMode === '2'"
|
prop="defaultMin">
|
<el-input v-model="formData.defaultMin"
|
placeholder="请输入最小值" />
|
</el-form-item>
|
<el-form-item label="最大值"
|
v-if="formData.valueMode === '2'"
|
prop="defaultMax">
|
<el-input v-model="formData.defaultMax"
|
placeholder="请输入最大值" />
|
</el-form-item>
|
<el-form-item label="是否必填"
|
prop="isRequired">
|
<el-radio-group v-model="formData.isRequired">
|
<el-radio label="1">是</el-radio>
|
<el-radio label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="formData.remark"
|
type="textarea"
|
:rows="3"
|
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,
|
addBaseParam,
|
editBaseParam,
|
getBaseParamList,
|
removeBaseParam,
|
// 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: "paramName",
|
},
|
{
|
label: "参数类型",
|
prop: "paramType",
|
dataType: "tag",
|
formatType: params => {
|
const typeMap = {
|
1: "primary",
|
2: "info",
|
3: "warning",
|
4: "success",
|
};
|
return typeMap[params] || "default";
|
},
|
formatData: val => {
|
const labelMap = {
|
1: "数值格式",
|
2: "文本格式",
|
3: "下拉选项",
|
4: "时间格式",
|
};
|
return labelMap[val] || val;
|
},
|
},
|
{
|
label: "取值模式",
|
prop: "valueMode",
|
dataType: "tag",
|
formatType: params => {
|
return params === 2 ? "warning" : "success";
|
},
|
formatData: val => {
|
return val === 2 ? "区间" : "单值";
|
},
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
},
|
{
|
label: "默认值",
|
prop: "defaultValue",
|
formatData: (val, row) => {
|
return row.valueMode === 2 ? "-" : val;
|
},
|
},
|
{
|
label: "最小值",
|
prop: "defaultMin",
|
formatData: (val, row) => {
|
return row.valueMode === 1 ? "-" : val;
|
},
|
},
|
{
|
label: "最大值",
|
prop: "defaultMax",
|
formatData: (val, row) => {
|
return row.valueMode === 1 ? "-" : val;
|
},
|
},
|
{
|
label: "是否必填",
|
prop: "isRequired",
|
dataType: "tag",
|
formatType: params => {
|
return params === 1 ? "danger" : "info";
|
},
|
formatData: val => {
|
return val === 1 ? "是" : "否";
|
},
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
},
|
{
|
label: "创建时间",
|
prop: "createTime",
|
},
|
{
|
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 handleValueModeChange = val => {
|
if (val === "2") {
|
formData.defaultMin = "";
|
formData.defaultMax = "";
|
} else {
|
formData.defaultValue = "";
|
}
|
};
|
|
// 搜索表单
|
const searchForm = reactive({
|
paramName: "",
|
productName: "",
|
});
|
|
// 对话框相关
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const formData = reactive({
|
id: null,
|
paramName: "",
|
paramType: "",
|
valueMode: "1",
|
unit: "",
|
defaultValue: "",
|
defaultMin: "",
|
defaultMax: "",
|
isRequired: "0",
|
remark: "",
|
});
|
const rules = reactive({
|
paramName: [{ required: true, message: "请输入参数名称", trigger: "blur" }],
|
paramType: [{ required: true, message: "请选择参数类型", trigger: "change" }],
|
valueMode: [{ required: true, message: "请选择取值模式", trigger: "change" }],
|
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.paramName = "";
|
searchForm.productName = "";
|
page.current = 1;
|
getList();
|
};
|
const pagination = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
// 调用新接口 /baseParam/list
|
getBaseParamList({ paramName: searchForm.paramName })
|
.then(res => {
|
tableLoading.value = false;
|
if (res.code === 200) {
|
tableData.value = res.data || [];
|
page.total = res.data?.length || 0;
|
} else {
|
ElMessage.error(res.msg || "查询失败");
|
}
|
})
|
.catch(() => {
|
tableLoading.value = false;
|
ElMessage.error("查询失败");
|
});
|
};
|
|
// 获取产品类型列表 - 已注释
|
// const getProductTypes = () => {
|
// productTypes.value = [
|
// { label: "3.5砌块", value: "type1" },
|
// { label: "5.0砌块", value: "type2" },
|
// { label: "板材", value: "type3" },
|
// ];
|
// };
|
|
// 新增按钮点击事件
|
const handleAdd = () => {
|
isEdit.value = false;
|
dialogTitle.value = "新增参数";
|
// 重置表单
|
formData.id = null;
|
formData.paramName = "";
|
formData.paramType = "";
|
formData.valueMode = "1";
|
formData.unit = "";
|
formData.defaultValue = "";
|
formData.defaultMin = "";
|
formData.defaultMax = "";
|
formData.isRequired = "0";
|
formData.remark = "";
|
dialogVisible.value = true;
|
};
|
|
// 编辑按钮点击事件
|
const handleEdit = row => {
|
isEdit.value = true;
|
dialogTitle.value = "编辑参数";
|
// 填充表单数据 - 将数字类型转换为字符串类型以匹配表单绑定
|
formData.id = row.id;
|
formData.paramName = row.paramName || "";
|
formData.paramType = row.paramType !== undefined ? String(row.paramType) : "";
|
formData.valueMode =
|
row.valueMode !== undefined ? String(row.valueMode) : "1";
|
formData.unit = row.unit || "";
|
formData.defaultValue =
|
row.defaultValue !== undefined ? String(row.defaultValue) : "";
|
formData.defaultMin =
|
row.defaultMin !== undefined ? String(row.defaultMin) : "";
|
formData.defaultMax =
|
row.defaultMax !== undefined ? String(row.defaultMax) : "";
|
formData.isRequired =
|
row.isRequired !== undefined ? String(row.isRequired) : "0";
|
formData.remark = row.remark || "";
|
dialogVisible.value = true;
|
};
|
|
// 删除按钮点击事件
|
const handleDelete = row => {
|
ElMessageBox.confirm("确定要删除这条数据吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 调用新接口 /baseParam/remove/{id}
|
removeBaseParam(row.id)
|
.then(res => {
|
ElMessage.success("删除成功");
|
getList();
|
})
|
.catch(() => {
|
ElMessage.error("删除失败");
|
});
|
})
|
.catch(() => {
|
// 取消删除
|
});
|
};
|
|
// 提交表单
|
const handleSubmit = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
if (isEdit.value) {
|
// 编辑使用新接口 /baseParam/edit
|
editBaseParam(formData)
|
.then(res => {
|
ElMessage.success("编辑成功");
|
dialogVisible.value = false;
|
getList();
|
})
|
.catch(() => {
|
// ElMessage.error("编辑失败");
|
});
|
} else {
|
// 新增使用新接口 /baseParam/add
|
addBaseParam(formData)
|
.then(res => {
|
ElMessage.success("新增成功");
|
dialogVisible.value = false;
|
getList();
|
})
|
.catch(() => {
|
ElMessage.error("新增失败");
|
});
|
}
|
} 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>
|
