255 lines
7.1 KiB
Vue
255 lines
7.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 操作按钮栏：改为保存/取消/还原默认 -->
|
|||
|
|
<el-row :gutter="10" class="mb8">
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
icon="Plus"
|
|||
|
|
@click="handleSave"
|
|||
|
|
>保存</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="success"
|
|||
|
|
plain
|
|||
|
|
icon="Edit"
|
|||
|
|
@click="handleCancelEdit"
|
|||
|
|
>取消修改</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="1.5">
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
plain
|
|||
|
|
icon="Download"
|
|||
|
|
@click="handleRestoreDefault"
|
|||
|
|
>还原默认</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="5" class="table-container">
|
|||
|
|
<el-table
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="regdictList"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
class="config-table"
|
|||
|
|
height="100%"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="序号" align="center" prop="configSort" />
|
|||
|
|
<el-table-column :label="`${menuname}编码`" align="center" prop="configCode" show-overflow-tooltip />
|
|||
|
|
<el-table-column :label="`${menuname}名称`" align="left" prop="configName" show-overflow-tooltip />
|
|||
|
|
<!-- 核心：默认值列改为持久化可编辑输入框 -->
|
|||
|
|
<el-table-column label="参数值" align="center" prop="configDefvalue" show-overflow-tooltip>
|
|||
|
|
<template #default="scope">
|
|||
|
|
<DynamicInput
|
|||
|
|
:type="scope.row.configOptiontype"
|
|||
|
|
v-model="scope.row.configDefvalue"
|
|||
|
|
:dict-data="scope.row.remark"
|
|||
|
|
:placeholder="`请输入${scope.row.configName}值`"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="值码" align="center" prop="configDefvalue" show-overflow-tooltip />
|
|||
|
|
</el-table>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup name="localconfig">
|
|||
|
|
// 导入核心依赖
|
|||
|
|
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
|
|||
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|||
|
|
import DynamicInput from "./components/DynamicInput.vue";
|
|||
|
|
import {
|
|||
|
|
listlocalconfig, savelocalconfig, getLocalConfigDefault // 新增还原默认接口
|
|||
|
|
} from "@/api/liswork/xtwh/localconfigApi.ts";
|
|||
|
|
|
|||
|
|
const { proxy } = getCurrentInstance();
|
|||
|
|
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
|||
|
|
|
|||
|
|
// 表格数据（原始数据缓存，用于取消修改）
|
|||
|
|
const regdictList = ref([]);
|
|||
|
|
const originRegdictList = ref([]); // 缓存原始数据，用于取消修改
|
|||
|
|
const loading = ref(true);
|
|||
|
|
const showSearch = ref(true);
|
|||
|
|
const ids = ref([]);
|
|||
|
|
const single = ref(true);
|
|||
|
|
const multiple = ref(true);
|
|||
|
|
const total = ref(0);
|
|||
|
|
const menuname = ref("本地选项");
|
|||
|
|
|
|||
|
|
const data = reactive({
|
|||
|
|
queryParams: {
|
|||
|
|
configCode: undefined,
|
|||
|
|
configName: undefined,
|
|||
|
|
configType: undefined,
|
|||
|
|
status: undefined
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
const { queryParams } = toRefs(data);
|
|||
|
|
|
|||
|
|
/** 查询字典列表（缓存原始数据） */
|
|||
|
|
function getList() {
|
|||
|
|
loading.value = true;
|
|||
|
|
listlocalconfig(queryParams.value).then(response => {
|
|||
|
|
// 存储表格展示数据
|
|||
|
|
regdictList.value = response.data.map(item => ({ ...item }));
|
|||
|
|
// 缓存原始数据（深拷贝，避免引用修改）
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(response.data));
|
|||
|
|
total.value = response.data.length;
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 搜索按钮操作 */
|
|||
|
|
function handleQuery() {
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 重置按钮操作 */
|
|||
|
|
function resetQuery() {
|
|||
|
|
proxy.resetForm("queryRef");
|
|||
|
|
handleQuery();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 表格行选中事件 */
|
|||
|
|
function handleSelectionChange(val) {
|
|||
|
|
ids.value = val.map(item => item.configId);
|
|||
|
|
single.value = val.length === 1;
|
|||
|
|
multiple.value = val.length > 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 核心：保存整个表格数据（批量提交） */
|
|||
|
|
async function handleSave() {
|
|||
|
|
// 空值校验：检查所有行的默认值是否为空
|
|||
|
|
//const emptyRows = regdictList.value.filter(item => !item.configDefvalue?.trim());
|
|||
|
|
//if (emptyRows.length > 0) {
|
|||
|
|
// ElMessage.warning(`有${emptyRows.length}行默认值为空，请补充后再保存！`);
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
loading.value = true;
|
|||
|
|
// 调用批量保存接口，传入整个列表
|
|||
|
|
const res = await savelocalconfig(regdictList.value);
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
ElMessage.success("批量保存成功！");
|
|||
|
|
// 保存后更新原始数据缓存
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(regdictList.value));
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(res.msg || "批量保存失败，请重试！");
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error("保存失败，网络异常！");
|
|||
|
|
console.error("保存失败：", error);
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 取消修改：恢复原始数据 */
|
|||
|
|
function handleCancelEdit() {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
"是否确认取消所有修改，恢复到原始数据？",
|
|||
|
|
"提示",
|
|||
|
|
{
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "warning"
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
// 恢复原始数据
|
|||
|
|
regdictList.value = JSON.parse(JSON.stringify(originRegdictList.value));
|
|||
|
|
ElMessage.success("已取消所有修改，恢复原始数据！");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 还原默认值：调用接口获取默认值并刷新 */
|
|||
|
|
async function handleRestoreDefault() {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
"是否确认还原所有默认值？此操作会覆盖当前修改！",
|
|||
|
|
"警告",
|
|||
|
|
{
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "danger"
|
|||
|
|
}
|
|||
|
|
).then(async () => {
|
|||
|
|
try {
|
|||
|
|
loading.value = true;
|
|||
|
|
// 调用还原默认接口
|
|||
|
|
const res = await getLocalConfigDefault(queryParams.value);
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
// 更新表格数据和原始缓存
|
|||
|
|
regdictList.value = res.data.map(item => ({ ...item }));
|
|||
|
|
originRegdictList.value = JSON.parse(JSON.stringify(res.data));
|
|||
|
|
ElMessage.success("已成功还原默认值！");
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error(res.msg || "还原默认值失败，请重试！");
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error("还原失败，网络异常！");
|
|||
|
|
console.error("还原默认值失败：", error);
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化加载数据
|
|||
|
|
getList();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.app-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 90vh;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb8 {
|
|||
|
|
height: 30px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-container {
|
|||
|
|
width: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 表格样式优化 */
|
|||
|
|
:deep(.config-table .el-table__row) {
|
|||
|
|
height: 30px !important;
|
|||
|
|
line-height: 30px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.config-table .el-table__cell) {
|
|||
|
|
padding: 2px 4px !important;
|
|||
|
|
height: 30px !important;
|
|||
|
|
line-height: 1.2 !important;
|
|||
|
|
vertical-align: middle !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编辑输入框样式适配 */
|
|||
|
|
:deep(.config-table .edit-input) {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
:deep(.config-table .edit-input .el-input__inner) {
|
|||
|
|
padding: 0 5px;
|
|||
|
|
height: 24px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
}
|
|||
|
|
:deep(.config-table .edit-input .el-input__inner:focus) {
|
|||
|
|
border-color: #409eff;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
</style>
|