499 lines
14 KiB
Vue
499 lines
14 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="header">
|
||
<div>字典名称</div>
|
||
<el-select v-model="currentVarName"
|
||
placeholder="请选择字典项"
|
||
@change="handleDictChange">
|
||
<el-option v-for="item in dictList"
|
||
:key="item.varName"
|
||
:label="item.varName"
|
||
:value="item.varName" />
|
||
</el-select>
|
||
</div>
|
||
|
||
<div>字典修改</div>
|
||
|
||
<!-- 区域字典特殊表格 -->
|
||
<el-table v-if="isRegionDict"
|
||
:data="regionData"
|
||
stripe
|
||
style="width: 777px">
|
||
<el-table-column prop="key" label="大区名称">
|
||
<template #default="{ row }">
|
||
<el-input v-model="row.key"
|
||
placeholder="请输入大区名称" />
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="value" label="包含省份（点击修改省份/地区）" width="521">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" @click="showProvinceDialog(row)"
|
||
link style="width: 100%; padding: 0; height: auto; min-height: 32px; white-space: normal; word-break: break-all; line-height: 1.5; display: inline-flex; align-items: center;">
|
||
<span style="text-align: left;">
|
||
{{ row.value.join('，') || '点击选择省份' }}
|
||
</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column label="操作" width="63">
|
||
<template #default="{ $index }">
|
||
<el-button type="danger"
|
||
:icon="Delete"
|
||
circle
|
||
@click="deleteRegion($index)" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 普通字典表格 -->
|
||
<el-table v-else
|
||
:data="currentValues"
|
||
stripe
|
||
style="width: 777px">
|
||
<el-table-column prop="value" label="字典值">
|
||
<template #default="{ $index }">
|
||
<el-input v-model="currentValues[$index]" placeholder="请输入" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="63">
|
||
<template #default="{ $index }">
|
||
<el-button type="danger"
|
||
:icon="Delete"
|
||
circle
|
||
@click="handleDelete($index)" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 操作按钮区域 -->
|
||
<div class="footer">
|
||
<template v-if="isRegionDict">
|
||
<el-button type="primary"
|
||
:icon="Plus"
|
||
plain
|
||
round
|
||
@click="addNewRegion">
|
||
添加大区
|
||
</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button type="primary"
|
||
:icon="Plus"
|
||
plain
|
||
round
|
||
@click="handleAdd">
|
||
添加值
|
||
</el-button>
|
||
</template>
|
||
|
||
<el-button type="success"
|
||
:icon="FolderChecked"
|
||
@click="handleSave">
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 省份选择对话框 -->
|
||
<el-dialog v-model="provinceDialogVisible"
|
||
title="选择省份/地区"
|
||
width="50%">
|
||
<el-checkbox-group v-model="selectedProvinces">
|
||
<el-row :gutter="20">
|
||
<el-col v-for="province in allProvinces"
|
||
:key="province"
|
||
:span="8"
|
||
style="margin-bottom: 15px;">
|
||
<el-checkbox :label="province"
|
||
:value="province" />
|
||
</el-col>
|
||
</el-row>
|
||
</el-checkbox-group>
|
||
|
||
<template #footer>
|
||
<el-button @click="provinceDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirmProvinceSelection">
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, inject, computed } from 'vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { Plus, Delete, Edit, UploadFilled, RefreshLeft, Upload, EditPen, FolderChecked } from '@element-plus/icons-vue';
|
||
|
||
const $http = inject('$http')
|
||
const config = inject('config');
|
||
|
||
// 初始字典数据
|
||
const dictList = reactive([]);
|
||
// 新增响应式数据
|
||
const provinceDialogVisible = ref(false);
|
||
const selectedProvinces = ref([]);
|
||
const currentEditingRegion = ref(null);
|
||
const allProvinces = computed(() => {
|
||
const provinceDict = dictList.find(d => d.varName == '省份地区');
|
||
return provinceDict?.varValue || [];
|
||
});
|
||
// 获取字典
|
||
const getDic = async () => {
|
||
try {
|
||
const response = await $http.post('ConfigPY/GetConfigString');
|
||
const serverData = response.data.response || [];
|
||
|
||
//console.log(response);
|
||
// 清空原有数据
|
||
dictList.length = 0;
|
||
|
||
// 转换数据格式
|
||
serverData.forEach(item => {
|
||
dictList.push({
|
||
varName: item.varName,
|
||
varValue: tryParseJson(item.varValue) || []
|
||
});
|
||
});
|
||
//console.log(dictList);
|
||
// 默认选中第一个（如果存在）
|
||
if (dictList.length > 0) {
|
||
currentVarName.value = dictList[0].varName;
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('获取字典失败:', error);
|
||
ElMessage.error('字典数据加载失败');
|
||
}
|
||
};
|
||
|
||
// JSON安全解析方法
|
||
const tryParseJson = (str) => {
|
||
try {
|
||
return JSON.parse(str);
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const currentVarName = ref('');
|
||
const currentDict = computed(() =>
|
||
dictList.find(item => item.varName === currentVarName.value)
|
||
);
|
||
const currentValues = computed({
|
||
get: () => currentDict.value?.varValue || [],
|
||
set: (val) => {
|
||
if (currentDict.value) {
|
||
currentDict.value.varValue = val;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 处理字典项变化
|
||
const handleDictChange = (val) => {
|
||
if (!val) return;
|
||
};
|
||
// 判断是否是区域字典
|
||
const isRegionDict = computed(() => currentVarName.value === '区域');
|
||
|
||
// 修改区域数据计算属性（移除setter）
|
||
const regionData = computed(() => {
|
||
if (!isRegionDict.value) return [];
|
||
const regionDict = dictList.find(d => d.varName === '区域');
|
||
return Object.entries(regionDict?.varValue || {}).map(([key, value]) => ({
|
||
key,
|
||
value: Array.isArray(value) ? value : [value]
|
||
}));
|
||
});
|
||
|
||
// 显示省份选择对话框
|
||
const showProvinceDialog = (row) => {
|
||
currentEditingRegion.value = row;
|
||
selectedProvinces.value = [...row.value];
|
||
provinceDialogVisible.value = true;
|
||
};
|
||
|
||
// 修改省份选择确认方法
|
||
const confirmProvinceSelection = async () => {
|
||
try {
|
||
if (!currentEditingRegion.value) return;
|
||
|
||
// 获取当前编辑的大区信息
|
||
const currentKey = currentEditingRegion.value.key;
|
||
const selectedProvincesList = selectedProvinces.value;
|
||
|
||
// 获取区域字典数据
|
||
const regionDict = dictList.find(d => d.varName === '区域');
|
||
if (!regionDict) return;
|
||
|
||
// 收集所有其他大区的省份映射
|
||
const provinceMap = new Map();
|
||
Object.entries(regionDict.varValue).forEach(([region, provinces]) => {
|
||
if (region !== currentKey) {
|
||
provinces.forEach(province => {
|
||
provinceMap.set(province, region);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 检查重复省份
|
||
const duplicates = [];
|
||
selectedProvincesList.forEach(province => {
|
||
if (provinceMap.has(province)) {
|
||
duplicates.push({
|
||
province,
|
||
region: provinceMap.get(province)
|
||
});
|
||
}
|
||
});
|
||
|
||
// 如果有重复则提示
|
||
if (duplicates.length > 0) {
|
||
const confirmMessage = `
|
||
以下省份已在其他大区存在：<br>
|
||
${duplicates.map(d => `${d.province} → ${d.region}`).join('<br>')}<br>
|
||
是否确认继续保存？
|
||
`;
|
||
|
||
await ElMessageBox.confirm(confirmMessage, '重复省份警告', {
|
||
confirmButtonText: '强制保存',
|
||
cancelButtonText: '返回修改',
|
||
type: 'warning',
|
||
dangerouslyUseHTMLString: true
|
||
});
|
||
}
|
||
|
||
// 执行保存操作
|
||
regionDict.varValue = {
|
||
...regionDict.varValue,
|
||
[currentKey]: selectedProvincesList
|
||
};
|
||
provinceDialogVisible.value = false;
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error(error);
|
||
}
|
||
return; // 用户取消则中断流程
|
||
}
|
||
};
|
||
/* const confirmProvinceSelection = () => {
|
||
if (currentEditingRegion.value) {
|
||
const regionDict = dictList.find(d => d.varName === '区域');
|
||
if (regionDict) {
|
||
regionDict.varValue = {
|
||
...regionDict.varValue,
|
||
[currentEditingRegion.value.key]: selectedProvinces.value
|
||
};
|
||
}
|
||
}
|
||
provinceDialogVisible.value = false;
|
||
};*/
|
||
|
||
// 修改添加大区方法
|
||
const addNewRegion = () => {
|
||
const regionDict = dictList.find(d => d.varName === '区域');
|
||
if (!regionDict) return;
|
||
|
||
// 生成唯一键名
|
||
let newKey = "新增大区";
|
||
let counter = 1;
|
||
while (regionDict.varValue[newKey]) {
|
||
newKey = `新增大区${counter++}`;
|
||
}
|
||
|
||
// 直接修改原始数据
|
||
regionDict.varValue = {
|
||
...regionDict.varValue,
|
||
[newKey]: []
|
||
};
|
||
};
|
||
|
||
// 修改删除大区方法
|
||
const deleteRegion = (index) => {
|
||
ElMessageBox.confirm('确定要删除该大区吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
const regionDict = dictList.find(d => d.varName === '区域');
|
||
if (!regionDict) return;
|
||
|
||
const keyToDelete = regionData.value[index].key;
|
||
const newValue = { ...regionDict.varValue };
|
||
delete newValue[keyToDelete];
|
||
regionDict.varValue = newValue;
|
||
});
|
||
};
|
||
|
||
// 添加行
|
||
const handleAdd = () => {
|
||
if (!currentDict.value) return;
|
||
currentDict.value.varValue.push('');
|
||
};
|
||
|
||
// 删除行
|
||
const handleDelete = (index) => {
|
||
ElMessageBox.confirm('确定要删除该行吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
currentDict.value.varValue.splice(index, 1);
|
||
});
|
||
};
|
||
|
||
// 保存字典
|
||
const saveDic = async (name, value) => {
|
||
try {
|
||
let filteredValue;
|
||
|
||
// 根据数据类型处理
|
||
if (Array.isArray(value)) {
|
||
// 处理普通数组格式
|
||
filteredValue = value
|
||
.map(item => String(item).trim())
|
||
.filter(item => item !== "");
|
||
|
||
if (filteredValue.length === 0) {
|
||
throw new Error("不能保存空字典项");
|
||
}
|
||
} else if (typeof value === 'object' && value !== null) {
|
||
// 处理区域字典的对象格式
|
||
filteredValue = Object.entries(value).reduce((acc, [key, values]) => {
|
||
const filtered = values
|
||
.map(item => String(item).trim())
|
||
.filter(item => item !== "");
|
||
|
||
// 保留key即使值为空数组（如"其他"）
|
||
if (key === '其他' || filtered.length > 0) {
|
||
acc[key] = filtered;
|
||
}
|
||
return acc;
|
||
}, {});
|
||
|
||
// 检查是否为空对象
|
||
if (Object.keys(filteredValue).length === 0) {
|
||
throw new Error("至少需要保留一个有效区域");
|
||
}
|
||
} else {
|
||
throw new Error("无效的字典格式");
|
||
}
|
||
|
||
const valueJs = JSON.stringify(filteredValue);
|
||
const rs = await $http.post('ConfigPY/SaveOrAddConfigString', {
|
||
VarName: name,
|
||
VarValue: valueJs
|
||
});
|
||
|
||
return filteredValue;
|
||
} catch (error) {
|
||
console.error(error);
|
||
throw error;
|
||
}
|
||
};
|
||
|
||
// 保存处理
|
||
const handleSave = async () => {
|
||
if (!currentDict.value) {
|
||
ElMessage.warning('请先选择要修改的字典项');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'此操作将永久修改字典数据，是否继续？',
|
||
'警告',
|
||
{
|
||
confirmButtonText: '确认保存',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
center: true,
|
||
dangerouslyUseHTMLString: true,
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
saveDic(currentDict.value.varName, currentDict.value.varValue)
|
||
.then(() => {
|
||
done();
|
||
ElMessage.success('保存成功');
|
||
})
|
||
.catch(() => {
|
||
instance.confirmButtonLoading = false;
|
||
ElMessage.error('保存失败');
|
||
});
|
||
} else {
|
||
done();
|
||
}
|
||
}
|
||
}
|
||
);
|
||
// 处理区域字典的特殊结构
|
||
let saveData = currentDict.value.varValue;
|
||
|
||
if (isRegionDict.value) {
|
||
// 转换回原始对象格式
|
||
saveData = regionData.value.reduce((acc, cur) => {
|
||
acc[cur.key] = cur.value;
|
||
return acc;
|
||
}, {});
|
||
}
|
||
|
||
// 保存并获取处理后的数据
|
||
const filteredData = await saveDic(
|
||
currentDict.value.varName,
|
||
saveData
|
||
);
|
||
|
||
// 更新前端数据
|
||
currentDict.value.varValue = isRegionDict.value
|
||
? { ...filteredData } // 对象格式
|
||
: [...filteredData]; // 数组格式
|
||
|
||
} catch (error) {
|
||
if (error === 'cancel') {
|
||
//console.log('用户取消保存');
|
||
} else if (error.message === '不能保存空字典项') {
|
||
ElMessage.warning('字典项至少需要包含一个有效值');
|
||
} else {
|
||
ElMessage.error('保存失败: ' + error.message);
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
getDic()
|
||
// 初始化选择第一个
|
||
if (dictList.length > 0) {
|
||
currentVarName.value = dictList[0].varName;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
display: block;
|
||
padding: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.header {
|
||
width: 333px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.footer {
|
||
width: 777px;
|
||
display: flex;
|
||
justify-content: space-between; /* 推荐方案 */
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
.el-message-box {
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|