提交行政区域分级加载代码
This commit is contained in:
wangchengming
parent
e5ebb3474f
commit
297077ea2c
|
|
@ -8,6 +8,15 @@ export function sysRegionTreeList(query) {
|
|||
data: query
|
||||
})
|
||||
}
|
||||
// 依据父级id获取行政区划数据
|
||||
export function sysRegionListByPid(query) {
|
||||
return request({
|
||||
url: '/admin/sysRegion/listByPid',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 新增行政区划
|
||||
export function addSysRegion(data) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</el-row>
|
||||
|
||||
<el-table v-if="refreshTable" v-loading="loading" height="calc(100vh - 244px)" :data="regionTreeList"
|
||||
row-key="id" :default-expand-all="isExpandAll" :tree-props="{ children: 'childList' }">
|
||||
row-key="id" lazy :load="loadChildren" :tree-props="{ children: 'childList' }">
|
||||
<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>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
<script setup name="Dept">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { sysRegionTreeList, addSysRegion, updateSysRegion, getSysRegion, deleteSysRegion } from "@/api/system/administrativeRegion"
|
||||
import { sysRegionListByPid, addSysRegion, updateSysRegion, getSysRegion, deleteSysRegion } from "@/api/system/administrativeRegion"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
|
|
@ -81,6 +81,9 @@ const refreshTable = ref(true)
|
|||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
listByPid: '0'
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "区域名称不能为空", trigger: "blur" }],
|
||||
code: [{ required: true, message: "区域编号不能为空", trigger: "blur" }],
|
||||
|
|
@ -88,16 +91,31 @@ const data = reactive({
|
|||
},
|
||||
})
|
||||
|
||||
const { form, rules } = toRefs(data)
|
||||
const { queryParams, form, rules } = toRefs(data)
|
||||
|
||||
/** 查询行政区域树列表 */
|
||||
const getsysRegionTreeList = () => {
|
||||
loading.value = true
|
||||
sysRegionTreeList().then(res => {
|
||||
sysRegionListByPid(queryParams.value).then(res => {
|
||||
regionTreeList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 加载子节点数据的方法
|
||||
const loadChildren = async (row, treeNode, resolve) => {
|
||||
try {
|
||||
// 调用API获取子节点数据
|
||||
// const children = await fetchChildrenData(row.id)
|
||||
queryParams.value.listByPid = row.id
|
||||
const children = await sysRegionListByPid(queryParams.value)
|
||||
// 将子节点数据传递给表格
|
||||
resolve(children.data)
|
||||
} catch (error) {
|
||||
console.error('加载子节点失败:', error)
|
||||
resolve([])
|
||||
}
|
||||
}
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const toggleExpandAll = () => {
|
||||
|
|
|
|||
|
|
@ -59,15 +59,17 @@
|
|||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<!-- <el-table-column label="用户编号" align="center" key="userId" prop="userId" /> -->
|
||||
<el-table-column label="用户登录名" align="left" key="userName" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户姓名" align="left" key="realName" prop="realName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户登录名" align="left" key="userName" prop="userName" min-width="150" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户姓名" align="left" key="realName" prop="realName" min-width="150" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" width="150"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="岗位" align="center" key="postName" prop="postName" width="120" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
|
||||
<el-table-column label="座机电话" align="center" key="tel" prop="tel" width="120" />
|
||||
<el-table-column label="QQ" align="center" key="qqNo" prop="qqNo" width="120" />
|
||||
<el-table-column label="微信" align="center" key="wxNo" prop="wxNo" width="120" />
|
||||
<el-table-column label="岗位" align="center" key="postName" prop="postName" width="130"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="160"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="座机电话" align="center" key="tel" prop="tel" width="180" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="QQ" align="center" key="qqNo" prop="qqNo" width="180" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="微信" align="center" key="wxNo" prop="wxNo" width="180" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="状态" align="center" key="status" width="86">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
|
||||
|
|
@ -79,16 +81,23 @@
|
|||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" width="58" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:user:edit']">修改</el-button>
|
||||
<el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:user:remove']">删除</el-button>
|
||||
<el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleResetPwd(scope.row)"
|
||||
v-hasPermi="['system:user:resetPwd']">重置密码</el-button>
|
||||
<el-button link type="primary" v-if="scope.row.userId !== 1" @click="handleAuthRole(scope.row)"
|
||||
v-hasPermi="['system:user:edit']">分配角色</el-button>
|
||||
<el-popover popper-class="my_popover" placement="left-start">
|
||||
<div class="popBtns" v-if="scope.row.userId !== 1" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:user:edit']">修改</div>
|
||||
<div class="popBtns" v-if="scope.row.userId !== 1" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:user:remove']">删除</div>
|
||||
<div class="popBtns" v-if="scope.row.userId !== 1" @click="handleResetPwd(scope.row)"
|
||||
v-hasPermi="['system:user:resetPwd']">重置密码</div>
|
||||
<div class="popBtns" v-if="scope.row.userId !== 1" @click="handleAuthRole(scope.row)"
|
||||
v-hasPermi="['system:user:edit']">分配角色</div>
|
||||
<template #reference>
|
||||
<img style="cursor: pointer;" :src="scope.row.currentImageSrc"
|
||||
@mouseenter="scope.row.currentImageSrc = hoverImageSrc"
|
||||
@mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -245,6 +254,8 @@ import { getToken } from "@/utils/auth"
|
|||
import useAppStore from '@/store/modules/app'
|
||||
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import optionIcon from '@/assets/images/optionIcon.png'
|
||||
import optionIconHover from '@/assets/images/optionIconHover.png'
|
||||
import "splitpanes/dist/splitpanes.css"
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
|
|
@ -255,6 +266,8 @@ const appStore = useAppStore()
|
|||
const { proxy } = getCurrentInstance()
|
||||
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
|
||||
|
||||
const defaultImageSrc = ref(optionIcon);
|
||||
const hoverImageSrc = ref(optionIconHover);
|
||||
const userList = ref([])
|
||||
const open = ref(false)
|
||||
const loading = ref(true)
|
||||
|
|
@ -326,6 +339,9 @@ function getList() {
|
|||
loading.value = true
|
||||
listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
|
||||
loading.value = false
|
||||
res.rows.forEach(item => {
|
||||
item.currentImageSrc = defaultImageSrc.value
|
||||
});
|
||||
userList.value = res.rows
|
||||
total.value = res.total
|
||||
})
|
||||
|
|
@ -547,7 +563,7 @@ function submitForm() {
|
|||
proxy.$refs["userRef"].validate(valid => {
|
||||
if (valid) {
|
||||
form.value.postIds = [form.value.postId]
|
||||
if (form.value.userId != undefined) {
|
||||
if (form.value.userId != undefined) {
|
||||
updateUser(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功")
|
||||
open.value = false
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user