wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化行政区划和媒体类型字典界面

Browse Source
This commit is contained in:
wangchengming 2025-08-12 14:01:16 +08:00
parent da0dc6a667
commit 8047298f59
4 changed files with 401 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/components/Navbar.vue
View File

@ -14,12 +14,16 @@
<div class="el-dropdown avatar-container right-menu-item hover-effect">
<div class="avatar-wrapper">
<div class="feedback_icon">
<img :src="icon_feedback" class="custom-icon" @click="handleFeedBack" />
<el-tooltip class="box-item" effect="dark" content="问题反馈" placement="bottom-start">
<img :src="icon_feedback" class="custom-icon" @click="handleFeedBack" />
</el-tooltip>
</div>
<img :src="userStore.avatar ? userStore.avatar : avatar_icon" class="user-avatar" />
<span class="user-nickname"> {{ userStore.nickName }} admin </span>
<div class="logout_icon">
<img :src="logout_icon" class="custom-icon" @click="logout" />
<el-tooltip class="box-item" effect="dark" content="退出" placement="bottom-start">
<img :src="logout_icon" class="custom-icon" @click="logout" />
</el-tooltip>
</div>
</div>
</div>
@ -64,7 +68,7 @@ import useSettingsStore from '@/store/modules/settings'
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const { proxy } = getCurrentInstance()
const { proxy } = getCurrentInstance()
function toggleSideBar() {
appStore.toggleSideBar()

230
src/views/system/administrativeRegion/index.vue
View File

@ -11,20 +11,15 @@
<el-col :span="24">
<el-button type="primary" class="primaryBtn" @click="handleAddRootNode"
v-hasPermi="['system:administrativeRegion:add']">新增根节点</el-button>
<!-- <el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button> -->
</el-col>
</el-row>
<el-table v-loading="loading" height="calc(100vh - 244px)" :data="regionTreeList"
row-key="id" lazy :load="loadChildren" :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
<el-table v-loading="loading" ref="tableRef" height="calc(100vh - 244px)" :data="regionTreeList" row-key="id"
lazy :load="loadChildren" @expand-change="handleExpandChange"
:tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
<el-table-column prop="name" label="区域名称"></el-table-column>
<el-table-column prop="code" label="区域编号"></el-table-column>
<el-table-column prop="sortNo" label="排序"></el-table-column>
<!-- <el-table-column label="创建时间" align="center" prop="createTime" min-width="210">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row)"
@ -76,8 +71,9 @@ const regionTreeList = ref([])
const open = ref(false)
const loading = ref(true)
const title = ref("")
const isExpandAll = ref(true)
const refreshTable = ref(true)
const tableRef = ref();
const expandedKeys = ref(new Set());
const data = reactive({
form: {},
@ -93,38 +89,83 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data)
// 辅助方法 - 根据ID查找行
const findRowById = (id, rows = regionTreeList.value) => {
for (const row of rows) {
if (row.id === id) return row;
if (row.childList) {
const found = findRowById(id, row.childList);
if (found) return found;
}
}
return null;
};
// 辅助方法 - 查找父节点ID
const findParentId = (id, rows = regionTreeList.value, parentId = 0) => {
for (const row of rows) {
if (row.id === id) return parentId;
if (row.childList) {
const found = findParentId(id, row.childList, row.id);
if (found) return found;
}
}
return null;
};
// 辅助方法 - 查找父节点对象
const findParentNode = (id, rows = regionTreeList.value, parent = null) => {
for (const row of rows) {
if (row.id === id) return parent;
if (row.childList) {
const found = findParentNode(id, row.childList, row);
if (found) return found;
}
}
return null;
};
// handleExpandChange
const handleExpandChange = (row, expanded) => {
if (expanded) {
expandedKeys.value.add(row.id);
} else {
expandedKeys.value.delete(row.id);
}
};
/** 查询行政区域树列表 */
const getsysRegionTreeList = () => {
const getsysRegionTreeList = (parentId = 0) => {
loading.value = true
sysRegionListByPid(queryParams.value).then(res => {
regionTreeList.value = res.data
queryParams.value.parentId = parentId;
sysRegionListByPid(queryParams.value).then(res => {
if (parentId === 0) {
regionTreeList.value = res.data
}
loading.value = false
})
}
// 加载子节点数据的方法
const loadChildren = async (row, treeNode, resolve) => {
try {
// 调用API获取子节点数据
// const children = await fetchChildrenData(row.id)
queryParams.value.parentId = row.id
const children = await sysRegionListByPid(queryParams.value)
// 将子节点数据传递给表格
resolve(children.data)
} catch (error) {
console.error('加载子节点失败:', error)
resolve([])
}
}
try {
queryParams.value.parentId = row.id;
const response = await sysRegionListByPid(queryParams.value);
row.childList = response.data; // 更新当前行的子节点
// /** 展开/折叠操作 */
// const toggleExpandAll = () => {
// refreshTable.value = false
// isExpandAll.value = !isExpandAll.value
// nextTick(() => {
// refreshTable.value = true
// })
// }
if (expandedKeys.value.has(row.id)) {
nextTick(() => {
tableRef.value?.toggleRowExpansion(row, true);
});
}
resolve(response.data);
} catch (error) {
console.error('加载子节点失败:', error);
resolve([]);
}
}
/** 表单重置 */
const reset = () => {
@ -174,34 +215,105 @@ const cancel = () => {
const submitForm = () => {
proxy.$refs["regionRef"].validate(valid => {
if (valid) {
if (form.value.id != undefined) {
updateSysRegion(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getsysRegionTreeList()
})
} else {
addSysRegion(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getsysRegionTreeList()
})
}
const saveExpanded = new Set(expandedKeys.value);
const isEdit = !!form.value.id;
const operation = isEdit
? updateSysRegion(form.value)
: addSysRegion(form.value);
operation.then(response => {
proxy.$modal.msgSuccess(isEdit ? "修改成功" : "新增成功");
open.value = false;
if (isEdit) {
// 方法1：强制更新响应式数据
const updatedRow = findRowById(form.value.id);
if (updatedRow) {
// 创建新对象确保响应式更新
const newRowData = { ...updatedRow, ...form.value };
Object.assign(updatedRow, newRowData);
}
// 刷新父节点
const parentId = findParentId(form.value.id) || 0;
if (parentId !== 0) {
getsysRegionTreeList(parentId);
}
} else {
// 新增操作
getsysRegionTreeList(form.value.parentId || 0);
}
// 恢复展开状态
nextTick(() => {
saveExpanded.forEach(id => {
const row = findRowById(id);
if (row) {
tableRef.value?.toggleRowExpansion(row, true);
}
});
});
}).catch(error => {
console.error("操作失败:", error);
});
}
})
}
});
};
/** 删除按钮操作 */
const handleDelete = (row) => {
proxy.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function () {
return deleteSysRegion(row.id)
}).then(() => {
regionTreeList.value = []
queryParams.value.parentId = '0'
getsysRegionTreeList()
proxy.$modal.msgSuccess("删除成功")
}).catch(() => { })
}
const handleDelete = async (row) => {
try {
await proxy.$modal.confirm(`是否确认删除名称为"${row.name}"的数据项?`);
// 1. 保存当前展开状态
const saveExpanded = new Set(expandedKeys.value);
// 2. 查找父节点
const parentNode = findParentNode(row.id);
// 3. 执行删除API
await deleteSysRegion(row.id);
// 4. 从展开状态中移除被删除的节点
saveExpanded.delete(row.id);
expandedKeys.value = new Set(saveExpanded);
// 5. 更新数据
if (!parentNode) {
// 删除的是根节点 - 重新加载整个树
regionTreeList.value = [];
await getsysRegionTreeList();
} else {
// 删除的是子节点 - 更新父节点的childList
const index = parentNode.childList.findIndex(item => item.id === row.id);
if (index !== -1) {
parentNode.childList.splice(index, 1); // 响应式删除
// 强制表格更新
nextTick(() => {
tableRef.value?.doLayout();
});
}
}
proxy.$modal.msgSuccess("删除成功");
// 6. 恢复展开状态
nextTick(() => {
saveExpanded.forEach(id => {
const row = findRowById(id);
if (row) {
tableRef.value?.toggleRowExpansion(row, true);
}
});
});
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
proxy.$modal.msgError("删除失败");
}
}
};
// 初始化
onMounted(() => {

60
src/views/system/businessArea/index.vue
View File

@ -3,17 +3,20 @@
<div class="searchPanel">
<el-form :inline="true" v-show="showSearch" class="searchPanelForm">
<el-form-item label="城市:">
<el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable style="min-width: 30px">
<el-select v-model="queryParams.provinceId" placeholder="请选择" @change="getCityList" clearable
style="min-width: 30px">
<el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable style="min-width: 30px">
<el-select v-model="queryParams.cityId" placeholder="请选择" @change="getCountyList" clearable
style="min-width: 30px">
<el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable style="min-width: 30px">
<el-select v-model="queryParams.countyId" placeholder="请选择" @change="getTownList" clearable
style="min-width: 30px">
<el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@ -79,7 +82,7 @@
<el-dialog :title="title" v-model="open" width="800px" class="my_dialog" align-center :destroy-on-close="true"
:close-on-click-modal="false">
<el-form ref="businessAreaRef" :model="form" :rules="rules" label-width="120px" class="myInsertForm">
<el-form-item label="省/直辖市" prop="provinceId" >
<el-form-item label="省/直辖市" prop="provinceId">
<el-select v-model="form.provinceId" placeholder="请选择" clearable @change="getCityList1">
<el-option v-for="item in province1" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
@ -190,7 +193,7 @@ const getCityList = (value) => {
queryParams.value.cityId = undefined
queryParams.value.countyId = undefined
queryParams.value.townId = undefined
city.value = res.data
city.value = res.data
})
}
@ -245,6 +248,27 @@ const getTownList1 = (value) => {
})
}
// 获取地级市/区数据
const getCityList2 = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
city1.value = res.data
})
}
// 获取区/县数据
const getCountyList2 = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
county1.value = res.data
})
}
// 获取镇数据
const getTownList2 = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
town1.value = res.data
})
}
/** 表单重置 */
const reset = () => {
form.value = {
@ -279,7 +303,7 @@ const resetQuery = () => {
/** 新增按钮操作 */
const handleAdd = () => {
reset()
reset()
getProvinceList1()
open.value = true
title.value = "添加商圈"
@ -290,12 +314,30 @@ const handleUpdate = (row) => {
reset()
getProvinceList1()
getBusTradingArea(row.id).then(response => {
form.value = response.data
open.value = true
title.value = "修改商圈"
handleResponse(response)
})
}
async function handleResponse(response) {
const promises = [];
if (response.data.provinceId) {
promises.push(getCityList2(response.data.provinceId));
}
if (response.data.cityId) {
promises.push(getCountyList2(response.data.cityId));
}
if (response.data.countyId) {
promises.push(getTownList2(response.data.countyId));
}
// 等待所有请求完成
await Promise.all(promises);
// 所有请求完成后执行下面的代码
form.value = response.data;
open.value = true;
title.value = "修改商圈";
}
/** 取消按钮 */
const cancel = () => {
open.value = false

234
src/views/system/mediaType/index.vue
View File

@ -11,20 +11,15 @@
<el-col :span="24">
<el-button type="primary" class="primaryBtn" @click="handleAddRootNode"
v-hasPermi="['system:mediaType:add']">新增根节点</el-button>
<!-- <el-button type="primary" class="primaryBtn" @click="toggleExpandAll">展开/折叠</el-button> -->
</el-col>
</el-row>
<el-table v-loading="loading" height="calc(100vh - 244px)" :data="mediaTypeTreeList" row-key="id" lazy
:load="loadChildren" :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
<el-table v-loading="loading" ref="tableRef" height="calc(100vh - 244px)" :data="mediaTypeTreeList"
row-key="id" lazy :load="loadChildren" @expand-change="handleExpandChange"
:tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
<el-table-column prop="name" label="类型名称"></el-table-column>
<el-table-column prop="value" label="类型标识"></el-table-column>
<el-table-column prop="sortNo" label="排序"></el-table-column>
<!-- <el-table-column label="创建时间" align="center" prop="createTime" min-width="210">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row)"
@ -76,8 +71,9 @@ const mediaTypeTreeList = ref([])
const open = ref(false)
const loading = ref(true)
const title = ref("")
const isExpandAll = ref(true)
const refreshTable = ref(true)
const tableRef = ref();
const expandedKeys = ref(new Set());
const data = reactive({
form: {},
@ -93,38 +89,82 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data)
/** 查询媒体类型树列表 */
const getsysMediaTypeTreeList = () => {
loading.value = true
sysMediaTypeListByPid(queryParams.value).then(res => {
mediaTypeTreeList.value = res.data
loading.value = false
})
}
// 辅助方法 - 根据ID查找行
const findRowById = (id, rows = mediaTypeTreeList.value) => {
for (const row of rows) {
if (row.id === id) return row;
if (row.childList) {
const found = findRowById(id, row.childList);
if (found) return found;
}
}
return null;
};
// 辅助方法 - 查找父节点ID
const findParentId = (id, rows = mediaTypeTreeList.value, parentId = 0) => {
for (const row of rows) {
if (row.id === id) return parentId;
if (row.childList) {
const found = findParentId(id, row.childList, row.id);
if (found) return found;
}
}
return null;
};
// 辅助方法 - 查找父节点对象
const findParentNode = (id, rows = mediaTypeTreeList.value, parent = null) => {
for (const row of rows) {
if (row.id === id) return parent;
if (row.childList) {
const found = findParentNode(id, row.childList, row);
if (found) return found;
}
}
return null;
};
// handleExpandChange
const handleExpandChange = (row, expanded) => {
if (expanded) {
expandedKeys.value.add(row.id);
} else {
expandedKeys.value.delete(row.id);
}
};
/** 查询媒体类型树列表 */
const getsysMediaTypeTreeList = (parentId = 0) => {
loading.value = true;
queryParams.value.parentId = parentId;
sysMediaTypeListByPid(queryParams.value).then(res => {
if (parentId === 0) {
mediaTypeTreeList.value = res.data;
}
loading.value = false;
});
};
// 加载子节点数据的方法
const loadChildren = async (row, treeNode, resolve) => {
try {
// 调用API获取子节点数据
queryParams.value.parentId = row.id
const children = await sysMediaTypeListByPid(queryParams.value)
// 将子节点数据传递给表格
resolve(children.data)
} catch (error) {
console.error('加载子节点失败:', error)
resolve([])
}
}
queryParams.value.parentId = row.id;
const response = await sysMediaTypeListByPid(queryParams.value);
row.childList = response.data; // 更新当前行的子节点
// /** 展开/折叠操作 */
// const toggleExpandAll = () => {
// refreshTable.value = false
// isExpandAll.value = !isExpandAll.value
// nextTick(() => {
// refreshTable.value = true
// })
// }
if (expandedKeys.value.has(row.id)) {
nextTick(() => {
tableRef.value?.toggleRowExpansion(row, true);
});
}
resolve(response.data);
} catch (error) {
console.error('加载子节点失败:', error);
resolve([]);
}
};
/** 表单重置 */
const reset = () => {
@ -173,34 +213,104 @@ const cancel = () => {
const submitForm = () => {
proxy.$refs["mediaTypeRef"].validate(valid => {
if (valid) {
if (form.value.id != undefined) {
updateSysMediaType(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getsysMediaTypeTreeList()
})
} else {
addSysMediaType(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getsysMediaTypeTreeList()
})
}
}
})
}
const saveExpanded = new Set(expandedKeys.value);
const isEdit = !!form.value.id;
const operation = isEdit
? updateSysMediaType(form.value)
: addSysMediaType(form.value);
operation.then(response => {
proxy.$modal.msgSuccess(isEdit ? "修改成功" : "新增成功");
open.value = false;
if (isEdit) {
// 方法1：强制更新响应式数据
const updatedRow = findRowById(form.value.id);
if (updatedRow) {
// 创建新对象确保响应式更新
const newRowData = { ...updatedRow, ...form.value };
Object.assign(updatedRow, newRowData);
}
// 刷新父节点
const parentId = findParentId(form.value.id) || 0;
if (parentId !== 0) {
getsysMediaTypeTreeList(parentId);
}
} else {
// 新增操作
getsysMediaTypeTreeList(form.value.parentId || 0);
}
// 恢复展开状态
nextTick(() => {
saveExpanded.forEach(id => {
const row = findRowById(id);
if (row) {
tableRef.value?.toggleRowExpansion(row, true);
}
});
});
}).catch(error => {
console.error("操作失败:", error);
});
}
});
};
/** 删除按钮操作 */
const handleDelete = (row) => {
proxy.$modal.confirm('是否确认删除媒体类型名称为"' + row.name + '"的数据项?').then(function () {
return deleteSysMediaType(row.id)
}).then(() => {
mediaTypeTreeList.value = []
queryParams.value.parentId = 0
getsysMediaTypeTreeList()
proxy.$modal.msgSuccess("删除成功")
}).catch(() => { })
}
const handleDelete = async (row) => {
try {
await proxy.$modal.confirm(`是否确认删除媒体类型名称为"${row.name}"的数据项?`);
// 1. 保存当前展开状态
const saveExpanded = new Set(expandedKeys.value);
// 2. 查找父节点
const parentNode = findParentNode(row.id);
// 3. 执行删除API
await deleteSysMediaType(row.id);
// 4. 从展开状态中移除被删除的节点
saveExpanded.delete(row.id);
expandedKeys.value = new Set(saveExpanded);
// 5. 更新数据
if (!parentNode) {
// 删除的是根节点 - 重新加载整个树
mediaTypeTreeList.value = [];
await getsysMediaTypeTreeList();
} else {
// 删除的是子节点 - 更新父节点的childList
const index = parentNode.childList.findIndex(item => item.id === row.id);
if (index !== -1) {
parentNode.childList.splice(index, 1); // 响应式删除
// 强制表格更新
nextTick(() => {
tableRef.value?.doLayout();
});
}
}
proxy.$modal.msgSuccess("删除成功");
// 6. 恢复展开状态
nextTick(() => {
saveExpanded.forEach(id => {
const row = findRowById(id);
if (row) {
tableRef.value?.toggleRowExpansion(row, true);
}
});
});
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
proxy.$modal.msgError("删除失败");
}
}
};
// 初始化
onMounted(() => {