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> |