区域组织管理
This commit is contained in:
曹辉
parent
56f3dbd763
commit
83dd2a9848
@ -5,7 +5,7 @@ VUE_APP_TITLE = 幼儿园体质检测管理系统
|
||||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://192.168.16.64:8080'
|
||||
VUE_APP_BASE_API = 'http://192.168.16.62:8080'
|
||||
#'/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
|
||||
44
src/api/system/area.js
Normal file
44
src/api/system/area.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询区域管理列表
|
||||
export function listArea(query) {
|
||||
return request({
|
||||
url: '/system/area/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询区域管理详细
|
||||
export function getArea(id) {
|
||||
return request({
|
||||
url: '/system/area/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增区域管理
|
||||
export function addArea(data) {
|
||||
return request({
|
||||
url: '/system/area/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改区域管理
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: '/system/area/edit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除区域管理
|
||||
export function delArea(id) {
|
||||
return request({
|
||||
url: '/system/area/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
src/api/system/info.js
Normal file
44
src/api/system/info.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询区域管理列表
|
||||
export function list(query) {
|
||||
return request({
|
||||
url: '/system/info/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询区域管理详细
|
||||
export function getinfo(id) {
|
||||
return request({
|
||||
url: '/system/info/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增区域管理
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: '/system/info/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改区域管理
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: '/system/info/edit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除区域管理
|
||||
export function delinfo(id) {
|
||||
return request({
|
||||
url: '/system/info/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -3,125 +3,125 @@ import { parseStrEmpty } from "@/utils/xinyilu";
|
||||
|
||||
// 查询用户列表
|
||||
export function listUser(query) {
|
||||
return request({
|
||||
url: '/system/user/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户详细
|
||||
export function getUser(userId) {
|
||||
return request({
|
||||
url: '/system/user/' + parseStrEmpty(userId),
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/' + parseStrEmpty(userId),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
export function addUser(data) {
|
||||
return request({
|
||||
url: '/system/user',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/system/user',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户
|
||||
export function updateUser(data) {
|
||||
return request({
|
||||
url: '/system/user',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/system/user',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
export function delUser(userId) {
|
||||
return request({
|
||||
url: '/system/user/' + userId,
|
||||
method: 'delete'
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/' + userId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 用户密码重置
|
||||
export function resetUserPwd(userId, password) {
|
||||
const data = {
|
||||
userId,
|
||||
password
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/resetPwd',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
const data = {
|
||||
userId,
|
||||
password
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/resetPwd',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户状态修改
|
||||
export function changeUserStatus(userId, status) {
|
||||
const data = {
|
||||
userId,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/changeStatus',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
const data = {
|
||||
userId,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/changeStatus',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户个人信息
|
||||
export function getUserProfile() {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户个人信息
|
||||
export function updateUserProfile(data) {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户密码重置
|
||||
export function updateUserPwd(oldPassword, newPassword) {
|
||||
const data = {
|
||||
oldPassword,
|
||||
newPassword
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/profile/updatePwd',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
const data = {
|
||||
oldPassword,
|
||||
newPassword
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/profile/updatePwd',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户头像上传
|
||||
export function uploadAvatar(data) {
|
||||
return request({
|
||||
url: '/system/user/profile/avatar',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/profile/avatar',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询授权角色
|
||||
export function getAuthRole(userId) {
|
||||
return request({
|
||||
url: '/system/user/authRole/' + userId,
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/system/user/authRole/' + userId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 保存授权角色
|
||||
export function updateAuthRole(data) {
|
||||
return request({
|
||||
url: '/system/user/authRole',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/authRole',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
@ -10,11 +10,11 @@
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-git id="xinyilu-git" class="right-menu-item hover-effect" />
|
||||
<!-- <ruo-yi-git id="xinyilu-git" class="right-menu-item hover-effect" /> -->
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
||||
<ruo-yi-doc id="xinyilu-doc" class="right-menu-item hover-effect" />
|
||||
<!-- <ruo-yi-doc id="xinyilu-doc" class="right-menu-item hover-effect" /> -->
|
||||
</el-tooltip>
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
@ -13,54 +13,54 @@ export let isRelogin = { show: false };
|
||||
console.log(process.env.VUE_APP_BASE_API);
|
||||
|
||||
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
|
||||
// 创建axios实例
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL: process.env.VUE_APP_BASE_API,//'http://192.168.16.64:8080',
|
||||
// 超时
|
||||
timeout: 10000
|
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL: process.env.VUE_APP_BASE_API, //'http://192.168.16.64:8080',
|
||||
// 超时
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
// 是否需要防止数据重复提交
|
||||
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
|
||||
if (getToken() && !isToken) {
|
||||
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
// get请求映射params参数
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url + '?' + tansParams(config.params);
|
||||
url = url.slice(0, -1);
|
||||
config.params = {};
|
||||
config.url = url;
|
||||
}
|
||||
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
|
||||
const requestObj = {
|
||||
url: config.url,
|
||||
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
|
||||
time: new Date().getTime()
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
// 是否需要防止数据重复提交
|
||||
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
|
||||
if (getToken() && !isToken) {
|
||||
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
const sessionObj = cache.session.getJSON('sessionObj')
|
||||
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
} else {
|
||||
const s_url = sessionObj.url; // 请求地址
|
||||
const s_data = sessionObj.data; // 请求数据
|
||||
const s_time = sessionObj.time; // 请求时间
|
||||
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
||||
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
|
||||
const message = '数据正在处理，请勿重复提交';
|
||||
console.warn(`[${s_url}]: ` + message)
|
||||
return Promise.reject(new Error(message))
|
||||
} else {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
}
|
||||
// get请求映射params参数
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url + '?' + tansParams(config.params);
|
||||
url = url.slice(0, -1);
|
||||
config.params = {};
|
||||
config.url = url;
|
||||
}
|
||||
}
|
||||
return config
|
||||
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
|
||||
const requestObj = {
|
||||
url: config.url,
|
||||
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
|
||||
time: new Date().getTime()
|
||||
}
|
||||
const sessionObj = cache.session.getJSON('sessionObj')
|
||||
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
} else {
|
||||
const s_url = sessionObj.url; // 请求地址
|
||||
const s_data = sessionObj.data; // 请求数据
|
||||
const s_time = sessionObj.time; // 请求时间
|
||||
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
|
||||
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
|
||||
const message = '数据正在处理，请勿重复提交';
|
||||
console.warn(`[${s_url}]: ` + message)
|
||||
return Promise.reject(new Error(message))
|
||||
} else {
|
||||
cache.session.setJSON('sessionObj', requestObj)
|
||||
}
|
||||
}
|
||||
}
|
||||
return config
|
||||
}, error => {
|
||||
console.log(error)
|
||||
Promise.reject(error)
|
||||
@ -68,92 +68,89 @@ service.interceptors.request.use(config => {
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => {
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||
// 二进制数据则直接返回
|
||||
if(res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer'){
|
||||
return res.data
|
||||
}
|
||||
if (code === 401) {
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true;
|
||||
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
|
||||
confirmButtonText: '重新登录',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
const msg = errorCode[code] || res.data.msg || errorCode['default']
|
||||
// 二进制数据则直接返回
|
||||
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
|
||||
return res.data
|
||||
}
|
||||
).then(() => {
|
||||
isRelogin.show = false;
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
if (code === 401) {
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true;
|
||||
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
|
||||
confirmButtonText: '重新登录',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
isRelogin.show = false;
|
||||
store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
})
|
||||
}).catch(() => {
|
||||
isRelogin.show = false;
|
||||
});
|
||||
}
|
||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
||||
} else if (code === 500) {
|
||||
Message({
|
||||
message: msg,
|
||||
type: 'error'
|
||||
})
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code !== 200) {
|
||||
Notification.error({
|
||||
title: msg
|
||||
})
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return res.data
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error)
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
} else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
Message({
|
||||
message: message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
}).catch(() => {
|
||||
isRelogin.show = false;
|
||||
});
|
||||
return Promise.reject(error)
|
||||
}
|
||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
|
||||
} else if (code === 500) {
|
||||
Message({
|
||||
message: msg,
|
||||
type: 'error'
|
||||
})
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code !== 200) {
|
||||
Notification.error({
|
||||
title: msg
|
||||
})
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return res.data
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log('err' + error)
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
}
|
||||
else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
}
|
||||
else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
Message({
|
||||
message: message,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 通用下载方法
|
||||
export function download(url, params, filename) {
|
||||
downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
|
||||
return service.post(url, params, {
|
||||
transformRequest: [(params) => { return tansParams(params) }],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob'
|
||||
}).then(async (data) => {
|
||||
const isLogin = await blobValidate(data);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([data])
|
||||
saveAs(blob, filename)
|
||||
} else {
|
||||
const resText = await data.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
||||
Message.error(errMsg);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r) => {
|
||||
console.error(r)
|
||||
Message.error('下载文件出现错误，请联系管理员！')
|
||||
downloadLoadingInstance.close();
|
||||
})
|
||||
downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
|
||||
return service.post(url, params, {
|
||||
transformRequest: [(params) => { return tansParams(params) }],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob'
|
||||
}).then(async(data) => {
|
||||
const isLogin = await blobValidate(data);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([data])
|
||||
saveAs(blob, filename)
|
||||
} else {
|
||||
const resText = await data.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
|
||||
Message.error(errMsg);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r) => {
|
||||
console.error(r)
|
||||
Message.error('下载文件出现错误，请联系管理员！')
|
||||
downloadLoadingInstance.close();
|
||||
})
|
||||
}
|
||||
|
||||
export default service
|
||||
export default service
|
||||
375
src/views/system/area/index.vue
Normal file
375
src/views/system/area/index.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="区域名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入区域名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域编码" prop="code">
|
||||
<el-input
|
||||
v-model="queryParams.code"
|
||||
placeholder="请输入区域编码"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:area:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button
|
||||
>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:area:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col> -->
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="areaList"
|
||||
style="width: 100%; margin-bottom: 20px"
|
||||
row-key="id"
|
||||
border
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="区域名称" align="center" prop="name" />
|
||||
<el-table-column label="区域编码" align="center" prop="code" />
|
||||
<el-table-column label="创建人" align="center" prop="createBy" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" />
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:area:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleAdd2(scope.row)"
|
||||
v-hasPermi="['system:area:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:area:remove']"
|
||||
v-if="scope.row.id != 1"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改区域管理对话框 -->
|
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="所属上级区域" prop="parentId" v-if="form.id != 1">
|
||||
<treeselect
|
||||
:normalizer="normalizer"
|
||||
:options="areaList"
|
||||
placeholder="请选择所属上级区域"
|
||||
v-model="form.parentId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入区域名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="区域编码" prop="code">
|
||||
<el-input v-model.number="form.code" placeholder="请输入区域编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model.number="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listArea,
|
||||
getArea,
|
||||
delArea,
|
||||
addArea,
|
||||
edit,
|
||||
} from "@/api/system/area.js";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
name: "areas",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 区域管理表格数据
|
||||
areaList: [],
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
name: "",
|
||||
code: "",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
form2: {
|
||||
parentId: "",
|
||||
name: "",
|
||||
code: "",
|
||||
sort: "",
|
||||
id: "",
|
||||
},
|
||||
// 表单校验
|
||||
|
||||
rules: {
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空" },
|
||||
{ type: "number", message: "排序必须为数字值", trigger: "blur" },
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: "区域编码不能为空" },
|
||||
{ type: "number", message: "区域编码必须为数字值", trigger: "blur" },
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "请选择所属上级区域", trigger: "blur" },
|
||||
],
|
||||
name: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
toggleExpandAll() {
|
||||
this.refreshTable = false;
|
||||
this.isExpandAll = !this.isExpandAll;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
});
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
normalizer(node) {
|
||||
// console.log(node);
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
parentId: node.id,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
/** 查询区域管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// console.log(this.queryParams);
|
||||
listArea(this.queryParams).then((response) => {
|
||||
// this.areaList = response.data.forEach((e) => {
|
||||
// e.code = Number(e.code);
|
||||
// });
|
||||
this.areaList = this.handleTree(response.data);
|
||||
console.log(this.areaList);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
parentId: undefined,
|
||||
name: "",
|
||||
code: undefined,
|
||||
sort: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 项目新增按钮操作 */
|
||||
handleAdd2(row) {
|
||||
console.log(row);
|
||||
this.reset();
|
||||
this.form.parentId = row.id;
|
||||
console.log(this.form);
|
||||
this.open = true;
|
||||
this.title = "添加区域管理";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
listArea(this.queryParams).then((response) => {
|
||||
this.areaList = this.handleTree(response.data);
|
||||
// console.log(this.areaList);
|
||||
});
|
||||
this.open = true;
|
||||
this.title = "添加区域管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.form2.id = row.id;
|
||||
// console.log(this.form2);
|
||||
const id = row.id || this.ids;
|
||||
getArea(id).then((response) => {
|
||||
response.data.code = Number(response.data.code);
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改区域管理";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
console.log(this.form);
|
||||
this.form2.name = this.form.name;
|
||||
this.form2.code = this.form.code;
|
||||
this.form2.sort = this.form.sort;
|
||||
this.form2.parentId = this.form.parentId;
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
edit(this.form2).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addArea(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal
|
||||
.confirm('是否确认删除区域名称为"' + row.name + '"的数据项？')
|
||||
.then(function () {
|
||||
return delArea(ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"system/area/export",
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`area_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
>
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
@ -10,7 +16,11 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="部门状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
@ -20,8 +30,16 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -34,7 +52,8 @@
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增</el-button>
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -43,9 +62,13 @@
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button>
|
||||
>展开/折叠</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
@ -54,21 +77,41 @@
|
||||
:data="deptList"
|
||||
row-key="deptId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="部门名称"
|
||||
width="260"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="orderNum"
|
||||
label="排序"
|
||||
width="200"
|
||||
></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||
<dict-tag
|
||||
:options="dict.type.sys_normal_disable"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@ -76,14 +119,16 @@
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dept:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增</el-button>
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.parentId != 0"
|
||||
size="mini"
|
||||
@ -91,7 +136,8 @@
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:dept:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -102,7 +148,12 @@
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
|
||||
<treeselect
|
||||
placeholder="选择上级部门"
|
||||
v-model="form.parentId"
|
||||
:options="deptOptions"
|
||||
:normalizer="normalizer"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -114,26 +165,42 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
||||
<el-input-number
|
||||
v-model="form.orderNum"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="leader">
|
||||
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
|
||||
<el-input
|
||||
v-model="form.leader"
|
||||
placeholder="请输入负责人"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入联系电话"
|
||||
maxlength="11"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@ -143,7 +210,8 @@
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
>{{ dict.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -158,13 +226,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
|
||||
import {
|
||||
listDept,
|
||||
getDept,
|
||||
delDept,
|
||||
addDept,
|
||||
updateDept,
|
||||
listDeptExcludeChild,
|
||||
} from "@/api/system/dept";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Dept",
|
||||
dicts: ['sys_normal_disable'],
|
||||
dicts: ["sys_normal_disable"],
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
@ -187,36 +262,36 @@ export default {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptName: undefined,
|
||||
status: undefined
|
||||
status: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{ required: true, message: "上级部门不能为空", trigger: "blur" }
|
||||
{ required: true, message: "上级部门不能为空", trigger: "blur" },
|
||||
],
|
||||
deptName: [
|
||||
{ required: true, message: "部门名称不能为空", trigger: "blur" }
|
||||
{ required: true, message: "部门名称不能为空", trigger: "blur" },
|
||||
],
|
||||
orderNum: [
|
||||
{ required: true, message: "显示排序不能为空", trigger: "blur" }
|
||||
{ required: true, message: "显示排序不能为空", trigger: "blur" },
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -226,9 +301,11 @@ export default {
|
||||
/** 查询部门列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listDept(this.queryParams).then(response => {
|
||||
listDept(this.queryParams).then((response) => {
|
||||
this.deptList = this.handleTree(response.data, "deptId");
|
||||
this.loading = false;
|
||||
console.log(response.data);
|
||||
console.log(this.deptList);
|
||||
});
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
@ -239,7 +316,7 @@ export default {
|
||||
return {
|
||||
id: node.deptId,
|
||||
label: node.deptName,
|
||||
children: node.children
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
// 取消按钮
|
||||
@ -257,7 +334,7 @@ export default {
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
status: "0"
|
||||
status: "0",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -278,8 +355,9 @@ export default {
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
listDept().then(response => {
|
||||
listDept().then((response) => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
console.log(this.deptOptions);
|
||||
});
|
||||
},
|
||||
/** 展开/折叠操作 */
|
||||
@ -293,27 +371,29 @@ export default {
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
getDept(row.deptId).then(response => {
|
||||
getDept(row.deptId).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改部门";
|
||||
});
|
||||
listDeptExcludeChild(row.deptId).then(response => {
|
||||
listDeptExcludeChild(row.deptId).then((response) => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
submitForm: function () {
|
||||
console.log(this.form);
|
||||
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.deptId != undefined) {
|
||||
updateDept(this.form).then(response => {
|
||||
updateDept(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDept(this.form).then(response => {
|
||||
addDept(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -324,13 +404,17 @@ export default {
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
this.$modal
|
||||
.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？')
|
||||
.then(function () {
|
||||
return delDept(row.deptId);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
507
src/views/system/info/index.vue
Normal file
507
src/views/system/info/index.vue
Normal file
@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="所属组织" prop="parentId" v-if="form.id != 1">
|
||||
<treeselect
|
||||
:normalizer="normalizer3"
|
||||
:options="List"
|
||||
placeholder="请选择所属组织"
|
||||
v-model="queryParams.parentId"
|
||||
style="width: 300px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-input
|
||||
v-model="queryParams.parentId"
|
||||
placeholder="请输入组织名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/> -->
|
||||
|
||||
<el-form-item label="区域名称" prop="">
|
||||
<treeselect
|
||||
:normalizer="normalizer4"
|
||||
:options="areaList"
|
||||
placeholder="请选择所属区域"
|
||||
v-model="queryParams.areaId"
|
||||
style="width: 300px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="组织地址" prop="">
|
||||
<el-input
|
||||
v-model="queryParams.organizeAddress"
|
||||
placeholder="请输入组织地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="">
|
||||
<el-input
|
||||
v-model="queryParams.contacts"
|
||||
placeholder="请输入联系人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="">
|
||||
<el-input
|
||||
v-model="queryParams.phone"
|
||||
placeholder="请输入联系电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:area:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button
|
||||
>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:area:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col> -->
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="List"
|
||||
style="width: 100%; margin-bottom: 20px"
|
||||
row-key="id"
|
||||
border
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="组织名称" align="center" prop="organizeName" />
|
||||
<el-table-column label="所属区域" align="center" prop="areaName" />
|
||||
<el-table-column label="组织地址" align="center" prop="organizeAddress" />
|
||||
<el-table-column label="联系人" align="center" prop="contacts" />
|
||||
<el-table-column label="联系电话" align="center" prop="phone" />
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:area:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleAdd2(scope.row)"
|
||||
v-hasPermi="['system:area:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:area:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改区域管理对话框 -->
|
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="所属上级区域" prop="areaId">
|
||||
<treeselect
|
||||
:normalizer="normalizer"
|
||||
:options="areaList"
|
||||
placeholder="请选择所属上级区域"
|
||||
v-model="form.areaId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="区域名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入区域名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="区域编码" prop="code">
|
||||
<el-input v-model.number="form.code" placeholder="请输入区域编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model.number="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="所属上级区域" prop="areaId">
|
||||
<treeselect
|
||||
:normalizer="normalizer"
|
||||
:options="areaList"
|
||||
placeholder="请选择所属区域"
|
||||
v-model="form.areaId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属组织" prop="parentId" v-if="form.id != 1">
|
||||
<treeselect
|
||||
:normalizer="normalizer2"
|
||||
:options="List"
|
||||
placeholder="请选择所属组织"
|
||||
v-model="form.parentId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="组织名称" prop="organizeName">
|
||||
<el-input v-model="form.organizeName" placeholder="请输入组织名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组织地址" prop="organizeAddress">
|
||||
<el-input
|
||||
v-model="form.organizeAddress"
|
||||
placeholder="请输入组织地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contacts">
|
||||
<el-input v-model="form.contacts" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人电话" prop="">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系人电话" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, getinfo, delinfo, add, edit } from "@/api/system/info.js";
|
||||
import { listArea } from "@/api/system/area.js";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
name: "areas",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 区域管理表格数据
|
||||
List: [],
|
||||
areaList: [],
|
||||
areaList2: [],
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
parentId: undefined,
|
||||
areaId: undefined,
|
||||
organizeName: "",
|
||||
organizeAddress: "",
|
||||
phone: "",
|
||||
contacts: "",
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
areaId: undefined,
|
||||
organizeName: "",
|
||||
organizeAddress: "",
|
||||
phone: "",
|
||||
contacts: "",
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: "区域编码不能为空" },
|
||||
{ type: "number", message: "区域编码必须为数字值", trigger: "blur" },
|
||||
],
|
||||
areaId: [
|
||||
{ required: true, message: "请选择所属上级区域", trigger: "blur" },
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "请选择所属上级区域", trigger: "blur" },
|
||||
],
|
||||
organizeName: [
|
||||
{ required: true, message: "请输入组织名称", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
toggleExpandAll() {
|
||||
this.refreshTable = false;
|
||||
this.isExpandAll = !this.isExpandAll;
|
||||
this.$nextTick(() => {
|
||||
this.refreshTable = true;
|
||||
});
|
||||
},
|
||||
/** 转换部门数据结构 */
|
||||
normalizer4(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
areaId: node.id,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
|
||||
normalizer3(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
parentId: node.id,
|
||||
label: node.organizeName,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
|
||||
normalizer2(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
areaId: node.id,
|
||||
label: node.organizeName,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
normalizer(node) {
|
||||
// console.log(node);
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
areaId: node.areaId,
|
||||
label: node.name,
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
/** 查询区域管理列表 */
|
||||
getList() {
|
||||
listArea(this.queryParams).then((response) => {
|
||||
this.areaList2 = this.handleTree(response.data);
|
||||
this.areaList = this.handleTree(response.data);
|
||||
console.log(this.areaList);
|
||||
});
|
||||
this.loading = true;
|
||||
console.log(this.queryParams);
|
||||
list(this.queryParams).then((response) => {
|
||||
this.List = this.handleTree(response.data);
|
||||
console.log(this.List);
|
||||
this.loading = false;
|
||||
this.queryParams = {
|
||||
parentId: undefined,
|
||||
areaId: undefined,
|
||||
organizeName: "",
|
||||
organizeAddress: "",
|
||||
phone: "",
|
||||
contacts: "",
|
||||
};
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
areaId: undefined,
|
||||
organizeName: "",
|
||||
organizeAddress: "",
|
||||
phone: "",
|
||||
contacts: "",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 项目新增按钮操作 */
|
||||
handleAdd2(row) {
|
||||
console.log(row);
|
||||
this.reset();
|
||||
this.form.areaId = row.areaId;
|
||||
this.form.parentId = row.id;
|
||||
console.log(this.form);
|
||||
this.open = true;
|
||||
this.title = "添加区域管理";
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
list(this.queryParams).then((response) => {
|
||||
this.List = this.handleTree(response.data);
|
||||
console.log(this.List);
|
||||
});
|
||||
this.reset();
|
||||
listArea(this.queryParams).then((response) => {
|
||||
this.areaList2 = this.handleTree(response.data);
|
||||
this.areaList = this.handleTree(response.data);
|
||||
console.log(this.areaList);
|
||||
});
|
||||
this.open = true;
|
||||
this.title = "添加区域管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
getinfo(id).then((response) => {
|
||||
console.log(response);
|
||||
if (response.data.phone == 0) {
|
||||
response.data.phone = "";
|
||||
}
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改区域管理";
|
||||
console.log(this.form);
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
if (this.form.phone == "" || this.form.phone.toString().length == 11) {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
edit(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
add(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error("请输入正确的手机号码");
|
||||
}
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal
|
||||
.confirm("是否确认删除？")
|
||||
.then(function () {
|
||||
return delinfo(ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"system/area/export",
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`area_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
::v-deep .el-input {
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user