优化(sys): 用户/角色/部门/权限页提交按钮启用loading，响应成功后关闭动画
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 18s
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 18s
This commit is contained in:
张家训
+331
-332
@@ -116,351 +116,350 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTreeList, getTreeSelectList, getDataList, add, update, remove, getExcelTemplate} from '@/api/sys/sys-dept'
|
||||
import { objectUtil, utils, exportExcel } from "@/common/js/util"
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { getTreeList, getTreeSelectList, getDataList, add, update, remove } from '@/api/sys/sys-dept'
|
||||
import { objectUtil } from '@/common/js/util'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
export default {
|
||||
name: "sso-dept",
|
||||
components: {
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixedHeader: true,// 高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
|
||||
treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
|
||||
treeLoading: false,//树加载中
|
||||
treeList: [],
|
||||
disabledTreeSelect: false,
|
||||
treeSelectList: [],
|
||||
search: {
|
||||
deptName: '',
|
||||
parentId:'0'
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
title: "#",
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
key: 'deptName',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '部门编码',
|
||||
key: 'deptCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '上级部门',
|
||||
key: 'pDeptName',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '部门描述',
|
||||
key: 'deptDesc',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '操作区',
|
||||
slot: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
export default {
|
||||
name: 'sso-dept',
|
||||
components: {
|
||||
Treeselect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fixedHeader: true, // 高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.58, // 表格高度（随容器可用高度动态修正）
|
||||
treeHeight: `${window.innerHeight} ` * 0.58, // 左侧树高度，对齐到右侧表格底部
|
||||
treeLoading: false, // 树加载中
|
||||
treeList: [],
|
||||
disabledTreeSelect: false,
|
||||
treeSelectList: [],
|
||||
search: {
|
||||
deptName: '',
|
||||
parentId: '0'
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
title: '#',
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
|
||||
}
|
||||
],
|
||||
exportColumns: [
|
||||
{
|
||||
title: '部门名称',
|
||||
key: 'deptName'
|
||||
},
|
||||
{
|
||||
title: '部门编码',
|
||||
key: 'deptCode',
|
||||
},
|
||||
{
|
||||
title: '部门描述',
|
||||
key: 'deptDesc'
|
||||
},
|
||||
],
|
||||
pDeptList:[], //父级部门列表
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
pageTotal: 0, // 总页数
|
||||
pageSize: 10, // 每页显示条数
|
||||
pageCurrent: 1, // 当前页
|
||||
pageParam: { // 调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
modal: false,
|
||||
modalTitle: '',
|
||||
addModal: false, // 添加
|
||||
editModal: false, // 编辑
|
||||
submitLoading: false,
|
||||
formItem: {
|
||||
id: '',
|
||||
parentId: '0' ,
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
level: 0,
|
||||
deptDesc: '',
|
||||
sort: 0,
|
||||
{
|
||||
title: '部门名称',
|
||||
key: 'deptName',
|
||||
width: 300
|
||||
},
|
||||
ruleCustom: {
|
||||
parentId: [{
|
||||
required: true, message: '请选择上级部门', trigger: 'change'
|
||||
}],
|
||||
deptName: [{
|
||||
required: true, message: '请输入部门名称', trigger: 'blur'
|
||||
}],
|
||||
deptCode: [{
|
||||
required: true, message: '请输入部门编码', trigger: 'blur'
|
||||
}],
|
||||
{
|
||||
title: '部门编码',
|
||||
key: 'deptCode',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '上级部门',
|
||||
key: 'pDeptName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: '部门描述',
|
||||
key: 'deptDesc',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: '操作区',
|
||||
slot: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
exportColumns: [
|
||||
{
|
||||
title: '部门名称',
|
||||
key: 'deptName'
|
||||
},
|
||||
{
|
||||
title: '部门编码',
|
||||
key: 'deptCode'
|
||||
},
|
||||
{
|
||||
title: '部门描述',
|
||||
key: 'deptDesc'
|
||||
}
|
||||
],
|
||||
pDeptList: [], // 父级部门列表
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
pageTotal: 0, // 总页数
|
||||
pageSize: 10, // 每页显示条数
|
||||
pageCurrent: 1, // 当前页
|
||||
pageParam: { // 调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
modal: false,
|
||||
modalTitle: '',
|
||||
addModal: false, // 添加
|
||||
editModal: false, // 编辑
|
||||
submitLoading: false,
|
||||
formItem: {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
level: 0,
|
||||
deptDesc: '',
|
||||
sort: 0
|
||||
},
|
||||
ruleCustom: {
|
||||
parentId: [{
|
||||
required: true, message: '请选择上级部门', trigger: 'change'
|
||||
}],
|
||||
deptName: [{
|
||||
required: true, message: '请输入部门名称', trigger: 'blur'
|
||||
}],
|
||||
deptCode: [{
|
||||
required: true, message: '请输入部门编码', trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
|
||||
calcHeight () {
|
||||
const wrap = this.$el.closest('.content-wrapper')
|
||||
const option = this.$refs.optionBox
|
||||
const btn = this.$refs.btnBox
|
||||
const page = this.$refs.pageBox
|
||||
const table = this.$refs.table
|
||||
if (!wrap || !option || !btn || !page || !table) {
|
||||
return
|
||||
}
|
||||
const wrapStyle = window.getComputedStyle(wrap)
|
||||
const avail = wrap.clientHeight -
|
||||
(parseFloat(wrapStyle.paddingTop) || 0) -
|
||||
(parseFloat(wrapStyle.paddingBottom) || 0)
|
||||
const pageStyle = window.getComputedStyle(page)
|
||||
const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
|
||||
const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
|
||||
// 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
|
||||
const fixed = option.offsetHeight + btn.offsetHeight +
|
||||
page.offsetHeight + pageMarginTop + pageMarginBottom
|
||||
this.autoHeight = Math.max(200, avail - fixed)
|
||||
// 等表格按新高度重排后再量底边，避免拿到上一帧的位置
|
||||
this.$nextTick(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
const tableEl = table.$el || table
|
||||
// 量表格真实底边：树高 = 根节点顶到表格底的距离，任何屏幕下都贴合
|
||||
const rootTop = this.$el.getBoundingClientRect().top
|
||||
const tableBottom = tableEl.getBoundingClientRect().bottom
|
||||
this.treeHeight = Math.max(200, Math.round(tableBottom - rootTop))
|
||||
})
|
||||
})
|
||||
},
|
||||
getTreeChoose () {
|
||||
// 获取选中的节点信息
|
||||
let choose = this.$refs.tree.getSelectedNodes()
|
||||
if (choose.length > 0) {
|
||||
this.formItem.parentId = choose[0].id
|
||||
this.formItem.level = choose[0].level + 1
|
||||
this.search.parentId = choose[0].id
|
||||
this.getDataList()
|
||||
} else {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
|
||||
calcHeight() {
|
||||
const wrap = this.$el.closest('.content-wrapper')
|
||||
const option = this.$refs.optionBox
|
||||
const btn = this.$refs.btnBox
|
||||
const page = this.$refs.pageBox
|
||||
const table = this.$refs.table
|
||||
if (!wrap || !option || !btn || !page || !table) {
|
||||
return
|
||||
}
|
||||
const wrapStyle = window.getComputedStyle(wrap)
|
||||
const avail = wrap.clientHeight
|
||||
- (parseFloat(wrapStyle.paddingTop) || 0)
|
||||
- (parseFloat(wrapStyle.paddingBottom) || 0)
|
||||
const pageStyle = window.getComputedStyle(page)
|
||||
const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
|
||||
const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
|
||||
// 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
|
||||
const fixed = option.offsetHeight + btn.offsetHeight
|
||||
+ page.offsetHeight + pageMarginTop + pageMarginBottom
|
||||
this.autoHeight = Math.max(200, avail - fixed)
|
||||
// 等表格按新高度重排后再量底边，避免拿到上一帧的位置
|
||||
this.$nextTick(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
const tableEl = table.$el || table
|
||||
// 量表格真实底边：树高 = 根节点顶到表格底的距离，任何屏幕下都贴合
|
||||
const rootTop = this.$el.getBoundingClientRect().top
|
||||
const tableBottom = tableEl.getBoundingClientRect().bottom
|
||||
this.treeHeight = Math.max(200, Math.round(tableBottom - rootTop))
|
||||
})
|
||||
})
|
||||
},
|
||||
getTreeChoose() {
|
||||
// 获取选中的节点信息
|
||||
let choose = this.$refs.tree.getSelectedNodes();
|
||||
if (choose.length > 0) {
|
||||
this.formItem.parentId = choose[0].id
|
||||
this.formItem.level = choose[0].level + 1
|
||||
this.search.parentId = choose[0].id
|
||||
this.getDataList()
|
||||
} else {
|
||||
}
|
||||
},
|
||||
getTreeList() {
|
||||
getTreeList().then(res => {
|
||||
this.treeList = res.data.data
|
||||
})
|
||||
},
|
||||
getTreeSelectList() {
|
||||
getTreeSelectList().then(res => {
|
||||
this.treeSelectList = res.data.data
|
||||
})
|
||||
},
|
||||
getDataList() {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp, this.search)
|
||||
this.tableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let page = res.data.data
|
||||
if (page != null ){
|
||||
this.pageTotal = page.total
|
||||
this.dataList = page.records
|
||||
}
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
toAdd() {
|
||||
this.modalTitle = "添加"
|
||||
this.modal = true
|
||||
|
||||
this.addModal = true
|
||||
this.editModal = false
|
||||
},
|
||||
toEdit(index) {
|
||||
this.modalTitle = "编辑"
|
||||
let temp = this.dataList[index]
|
||||
|
||||
this.addModal = false
|
||||
this.editModal = true
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 清除上次校验状态，避免编辑回显报红
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.parentId = temp.parentId
|
||||
this.formItem.deptName = temp.deptName
|
||||
this.formItem.deptCode = temp.deptCode
|
||||
this.formItem.level = temp.level
|
||||
this.formItem.deptDesc = temp.deptDesc
|
||||
this.formItem.sort = temp.sort
|
||||
})
|
||||
},
|
||||
submit(formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModal) {//添加
|
||||
add(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success("添加成功!")
|
||||
})
|
||||
} else {//编辑
|
||||
update(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success("编辑成功!")
|
||||
})
|
||||
}
|
||||
this.cancel()
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
// Modal cancel
|
||||
this.modal = false;
|
||||
this.refresh();
|
||||
},
|
||||
toDelete(index) {
|
||||
let temp = this.dataList[index]
|
||||
|
||||
let data = {
|
||||
id: temp.id
|
||||
}
|
||||
remove(data).then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success("删除成功!")
|
||||
})
|
||||
},
|
||||
refresh() {
|
||||
this.pageParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
this.search = {
|
||||
deptName: '',
|
||||
parentId:this.search.parentId
|
||||
};
|
||||
this.formItem = {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
level: 0,
|
||||
deptDesc: '',
|
||||
sort: 0,
|
||||
};
|
||||
},
|
||||
changePage(index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index;
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize(page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1;
|
||||
this.pageParam.pageSize = page;
|
||||
this.getDataList();
|
||||
},
|
||||
renderContent(h, { root, node, data }) {
|
||||
let icon = "";
|
||||
if (data.level === 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level === 1) {
|
||||
icon = "md-planet";
|
||||
}else if (data.level === 2) {
|
||||
icon = "ios-paper-plane";
|
||||
}else if (data.level === 3) {
|
||||
icon = "md-radio";
|
||||
}else {
|
||||
icon = "md-radio-button-off";
|
||||
}
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
display: "inline-block",
|
||||
cursor: "pointer"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
data.checked = !data.checked;
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16"
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px"
|
||||
}
|
||||
}),
|
||||
h("span", { class: "ivu-tree-title" }, data.title)
|
||||
])
|
||||
]
|
||||
);
|
||||
},
|
||||
|
||||
getTreeList () {
|
||||
getTreeList().then(res => {
|
||||
this.treeList = res.data.data
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.getTreeList()
|
||||
this.getTreeSelectList()
|
||||
getTreeSelectList () {
|
||||
getTreeSelectList().then(res => {
|
||||
this.treeSelectList = res.data.data
|
||||
})
|
||||
},
|
||||
getDataList () {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp, this.search)
|
||||
this.tableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let page = res.data.data
|
||||
if (page != null) {
|
||||
this.pageTotal = page.total
|
||||
this.dataList = page.records
|
||||
}
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
toAdd () {
|
||||
this.modalTitle = '添加'
|
||||
this.modal = true
|
||||
|
||||
this.addModal = true
|
||||
this.editModal = false
|
||||
},
|
||||
toEdit (index) {
|
||||
this.modalTitle = '编辑'
|
||||
let temp = this.dataList[index]
|
||||
|
||||
this.addModal = false
|
||||
this.editModal = true
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 清除上次校验状态，避免编辑回显报红
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.parentId = temp.parentId
|
||||
this.formItem.deptName = temp.deptName
|
||||
this.formItem.deptCode = temp.deptCode
|
||||
this.formItem.level = temp.level
|
||||
this.formItem.deptDesc = temp.deptDesc
|
||||
this.formItem.sort = temp.sort
|
||||
})
|
||||
},
|
||||
submit (formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
// 点击即转圈，等请求响应成功后再关闭，同时防重复提交
|
||||
this.submitLoading = true
|
||||
const isAdd = this.addModal
|
||||
const req = isAdd ? add(this.formItem) : update(this.formItem)
|
||||
req.then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
|
||||
this.cancel()
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
// 失败保持弹窗打开，方便直接重试
|
||||
this.submitLoading = false
|
||||
this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel () {
|
||||
// Modal cancel
|
||||
this.modal = false
|
||||
this.refresh()
|
||||
},
|
||||
toDelete (index) {
|
||||
let temp = this.dataList[index]
|
||||
|
||||
let data = {
|
||||
id: temp.id
|
||||
}
|
||||
remove(data).then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success('删除成功!')
|
||||
})
|
||||
},
|
||||
refresh () {
|
||||
this.pageParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.search = {
|
||||
deptName: '',
|
||||
parentId: this.search.parentId
|
||||
}
|
||||
this.formItem = {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
level: 0,
|
||||
deptDesc: '',
|
||||
sort: 0
|
||||
}
|
||||
},
|
||||
changePage (index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index
|
||||
this.getDataList()
|
||||
},
|
||||
mounted() {
|
||||
this.calcHeight()
|
||||
window.addEventListener('resize', this.calcHeight)
|
||||
changePageSize (page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1
|
||||
this.pageParam.pageSize = page
|
||||
this.getDataList()
|
||||
},
|
||||
activated() {
|
||||
// keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
|
||||
this.calcHeight()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calcHeight)
|
||||
renderContent (h, { root, node, data }) {
|
||||
let icon = ''
|
||||
if (data.level === 0) {
|
||||
icon = 'ios-navigate'
|
||||
} else if (data.level === 1) {
|
||||
icon = 'md-planet'
|
||||
} else if (data.level === 2) {
|
||||
icon = 'ios-paper-plane'
|
||||
} else if (data.level === 3) {
|
||||
icon = 'md-radio'
|
||||
} else {
|
||||
icon = 'md-radio-button-off'
|
||||
}
|
||||
return h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
data.checked = !data.checked
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h('span', [
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: icon,
|
||||
size: '16'
|
||||
},
|
||||
style: {
|
||||
'margin-right': '8px',
|
||||
'margin-bottom': '3px'
|
||||
}
|
||||
}),
|
||||
h('span', { class: 'ivu-tree-title' }, data.title)
|
||||
])
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
},
|
||||
created () {
|
||||
this.getTreeList()
|
||||
this.getTreeSelectList()
|
||||
this.getDataList()
|
||||
},
|
||||
mounted () {
|
||||
this.calcHeight()
|
||||
window.addEventListener('resize', this.calcHeight)
|
||||
},
|
||||
activated () {
|
||||
// keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
|
||||
this.calcHeight()
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.calcHeight)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
+345
-346
@@ -133,365 +133,364 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getTreeList, getTreeSelectList, getDataList, add, update, remove} from '@/api/sys/sys-permission'
|
||||
import {objectUtil, utils, exportExcel} from "@/common/js/util"
|
||||
import IconChoose from "@/components/my-components/icon-choose"
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { getTreeList, getTreeSelectList, getDataList, add, update, remove } from '@/api/sys/sys-permission'
|
||||
import { objectUtil } from '@/common/js/util'
|
||||
import IconChoose from '@/components/my-components/icon-choose'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
export default {
|
||||
name: "sso-menu",
|
||||
components: {
|
||||
IconChoose,
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixedHeader: true,// 高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
|
||||
treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
|
||||
treeLoading: false,//树加载中
|
||||
treeList: [],
|
||||
disabledTreeSelect: false,
|
||||
treeSelectList: [],
|
||||
search: {
|
||||
permissionName: '',
|
||||
parentId: '0'
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
title: "#",
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '菜单名称',
|
||||
key: 'permissionName'
|
||||
},
|
||||
{
|
||||
title: '菜单编码',
|
||||
key: 'permissionCode',
|
||||
},
|
||||
{
|
||||
title: '上级菜单',
|
||||
key: 'pMenuName'
|
||||
},
|
||||
{
|
||||
title: '菜单描述',
|
||||
key: 'permissionDesc'
|
||||
},
|
||||
{
|
||||
title: '操作区',
|
||||
slot: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
export default {
|
||||
name: 'sso-menu',
|
||||
components: {
|
||||
IconChoose,
|
||||
Treeselect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fixedHeader: true, // 高度自适应
|
||||
autoHeight: `${window.innerHeight} ` * 0.58, // 表格高度（随容器可用高度动态修正）
|
||||
treeHeight: `${window.innerHeight} ` * 0.58, // 左侧树高度，对齐到右侧表格底部
|
||||
treeLoading: false, // 树加载中
|
||||
treeList: [],
|
||||
disabledTreeSelect: false,
|
||||
treeSelectList: [],
|
||||
search: {
|
||||
permissionName: '',
|
||||
parentId: '0'
|
||||
},
|
||||
listColumns: [
|
||||
{
|
||||
title: '#',
|
||||
type: 'index',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
indexMethod: (row) => {
|
||||
return (row._index + 1) + ((this.pageParam.pageNum - 1) * this.pageParam.pageSize)
|
||||
}
|
||||
],
|
||||
exportColumns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
key: 'permissionName'
|
||||
},
|
||||
{
|
||||
title: '菜单编码',
|
||||
key: 'permissionCode',
|
||||
},
|
||||
{
|
||||
title: '菜单描述',
|
||||
key: 'permissionDesc'
|
||||
},
|
||||
],
|
||||
pMenuList: [], //父级菜单列表
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
pageTotal: 0, // 总页数
|
||||
pageSize: 10, // 每页显示条数
|
||||
pageCurrent: 1, // 当前页
|
||||
pageParam: { // 调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
modal: false,
|
||||
modalTitle: '',
|
||||
addModal: false, // 添加
|
||||
editModal: false, // 编辑
|
||||
submitLoading: false,
|
||||
formItem: {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
permissionName: '',
|
||||
permissionCode: '',
|
||||
level: 0,
|
||||
icon: '',
|
||||
permissionDesc: '',
|
||||
url: '',
|
||||
component: '',
|
||||
status: '1',
|
||||
sort: 0,
|
||||
{
|
||||
title: '菜单名称',
|
||||
key: 'permissionName'
|
||||
},
|
||||
ruleCustom: {
|
||||
parentId: [{
|
||||
required: true, message: '请选择上级菜单', trigger: 'blur'
|
||||
}],
|
||||
permissionName: [{
|
||||
required: true, message: '请输入菜单名称', trigger: 'blur'
|
||||
}],
|
||||
permissionCode: [{
|
||||
required: true, message: '请输入菜单编码', trigger: 'blur'
|
||||
}],
|
||||
icon: [{
|
||||
required: true, message: '请输入菜单图标', trigger: 'blur'
|
||||
}],
|
||||
url: [{
|
||||
required: true, message: '请输入路由地址', trigger: 'blur'
|
||||
}],
|
||||
component: [{
|
||||
required: true, message: '请输入组件地址', trigger: 'blur'
|
||||
}],
|
||||
{
|
||||
title: '菜单编码',
|
||||
key: 'permissionCode'
|
||||
},
|
||||
{
|
||||
title: '上级菜单',
|
||||
key: 'pMenuName'
|
||||
},
|
||||
{
|
||||
title: '菜单描述',
|
||||
key: 'permissionDesc'
|
||||
},
|
||||
{
|
||||
title: '操作区',
|
||||
slot: 'action',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
exportColumns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
key: 'permissionName'
|
||||
},
|
||||
{
|
||||
title: '菜单编码',
|
||||
key: 'permissionCode'
|
||||
},
|
||||
{
|
||||
title: '菜单描述',
|
||||
key: 'permissionDesc'
|
||||
}
|
||||
],
|
||||
pMenuList: [], // 父级菜单列表
|
||||
dataList: [],
|
||||
tableLoading: false,
|
||||
pageTotal: 0, // 总页数
|
||||
pageSize: 10, // 每页显示条数
|
||||
pageCurrent: 1, // 当前页
|
||||
pageParam: { // 调用时候的分页参数
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
modal: false,
|
||||
modalTitle: '',
|
||||
addModal: false, // 添加
|
||||
editModal: false, // 编辑
|
||||
submitLoading: false,
|
||||
formItem: {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
permissionName: '',
|
||||
permissionCode: '',
|
||||
level: 0,
|
||||
icon: '',
|
||||
permissionDesc: '',
|
||||
url: '',
|
||||
component: '',
|
||||
status: '1',
|
||||
sort: 0
|
||||
},
|
||||
ruleCustom: {
|
||||
parentId: [{
|
||||
required: true, message: '请选择上级菜单', trigger: 'blur'
|
||||
}],
|
||||
permissionName: [{
|
||||
required: true, message: '请输入菜单名称', trigger: 'blur'
|
||||
}],
|
||||
permissionCode: [{
|
||||
required: true, message: '请输入菜单编码', trigger: 'blur'
|
||||
}],
|
||||
icon: [{
|
||||
required: true, message: '请输入菜单图标', trigger: 'blur'
|
||||
}],
|
||||
url: [{
|
||||
required: true, message: '请输入路由地址', trigger: 'blur'
|
||||
}],
|
||||
component: [{
|
||||
required: true, message: '请输入组件地址', trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
|
||||
calcHeight () {
|
||||
const wrap = this.$el.closest('.content-wrapper')
|
||||
const option = this.$refs.optionBox
|
||||
const btn = this.$refs.btnBox
|
||||
const page = this.$refs.pageBox
|
||||
const table = this.$refs.table
|
||||
if (!wrap || !option || !btn || !page || !table) {
|
||||
return
|
||||
}
|
||||
const wrapStyle = window.getComputedStyle(wrap)
|
||||
const avail = wrap.clientHeight -
|
||||
(parseFloat(wrapStyle.paddingTop) || 0) -
|
||||
(parseFloat(wrapStyle.paddingBottom) || 0)
|
||||
const pageStyle = window.getComputedStyle(page)
|
||||
const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
|
||||
const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
|
||||
// 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
|
||||
const fixed = option.offsetHeight + btn.offsetHeight +
|
||||
page.offsetHeight + pageMarginTop + pageMarginBottom
|
||||
this.autoHeight = Math.max(200, avail - fixed)
|
||||
// 等表格按新高度重排后再量底边，避免拿到上一帧的位置
|
||||
this.$nextTick(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
const tableEl = table.$el || table
|
||||
// 量表格真实底边：树高 = 根节点顶到表格底的距离，任何屏幕下都贴合
|
||||
const rootTop = this.$el.getBoundingClientRect().top
|
||||
const tableBottom = tableEl.getBoundingClientRect().bottom
|
||||
this.treeHeight = Math.max(200, Math.round(tableBottom - rootTop))
|
||||
})
|
||||
})
|
||||
},
|
||||
getTreeChoose () {
|
||||
// 获取选中的节点信息
|
||||
let choose = this.$refs.tree.getSelectedNodes()
|
||||
if (choose.length > 0) {
|
||||
this.formItem.parentId = choose[0].id
|
||||
this.formItem.level = choose[0].level + 1
|
||||
this.search.parentId = choose[0].id
|
||||
this.getDataList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
|
||||
calcHeight() {
|
||||
const wrap = this.$el.closest('.content-wrapper')
|
||||
const option = this.$refs.optionBox
|
||||
const btn = this.$refs.btnBox
|
||||
const page = this.$refs.pageBox
|
||||
const table = this.$refs.table
|
||||
if (!wrap || !option || !btn || !page || !table) {
|
||||
return
|
||||
}
|
||||
const wrapStyle = window.getComputedStyle(wrap)
|
||||
const avail = wrap.clientHeight
|
||||
- (parseFloat(wrapStyle.paddingTop) || 0)
|
||||
- (parseFloat(wrapStyle.paddingBottom) || 0)
|
||||
const pageStyle = window.getComputedStyle(page)
|
||||
const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
|
||||
const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
|
||||
// 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
|
||||
const fixed = option.offsetHeight + btn.offsetHeight
|
||||
+ page.offsetHeight + pageMarginTop + pageMarginBottom
|
||||
this.autoHeight = Math.max(200, avail - fixed)
|
||||
// 等表格按新高度重排后再量底边，避免拿到上一帧的位置
|
||||
this.$nextTick(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
const tableEl = table.$el || table
|
||||
// 量表格真实底边：树高 = 根节点顶到表格底的距离，任何屏幕下都贴合
|
||||
const rootTop = this.$el.getBoundingClientRect().top
|
||||
const tableBottom = tableEl.getBoundingClientRect().bottom
|
||||
this.treeHeight = Math.max(200, Math.round(tableBottom - rootTop))
|
||||
})
|
||||
})
|
||||
},
|
||||
getTreeChoose() {
|
||||
// 获取选中的节点信息
|
||||
let choose = this.$refs.tree.getSelectedNodes();
|
||||
if (choose.length > 0) {
|
||||
this.formItem.parentId = choose[0].id
|
||||
this.formItem.level = choose[0].level + 1
|
||||
this.search.parentId = choose[0].id
|
||||
this.getDataList()
|
||||
}
|
||||
},
|
||||
getTreeList() {
|
||||
getTreeList().then(res => {
|
||||
this.treeList = res.data.data
|
||||
})
|
||||
},
|
||||
getTreeSelectList() {
|
||||
getTreeSelectList().then(res => {
|
||||
this.treeSelectList = res.data.data
|
||||
})
|
||||
},
|
||||
getDataList() {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp, this.search)
|
||||
this.tableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let page = res.data.data
|
||||
this.pageTotal = page.total
|
||||
this.dataList = page.records
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
toAdd() {
|
||||
if (this.formItem.level === 3) {
|
||||
this.$Message.warning("不可以添加子菜单！")
|
||||
return
|
||||
}
|
||||
|
||||
this.modalTitle = "添加"
|
||||
this.addModal = true
|
||||
this.editModal = false
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
})
|
||||
},
|
||||
toEdit(index) {
|
||||
this.modalTitle = "编辑"
|
||||
let temp = this.dataList[index]
|
||||
|
||||
this.addModal = false
|
||||
this.editModal = true
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 先清除上次校验状态，再回填数据，避免编辑回显报红
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.parentId = temp.parentId
|
||||
this.formItem.permissionName = temp.permissionName
|
||||
this.formItem.permissionCode = temp.permissionCode
|
||||
this.formItem.level = temp.level
|
||||
this.formItem.icon = temp.icon
|
||||
this.formItem.url = temp.url
|
||||
this.formItem.component = temp.component
|
||||
this.formItem.permissionDesc = temp.permissionDesc
|
||||
this.formItem.sort = temp.sort
|
||||
})
|
||||
},
|
||||
submit(formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModal) {//添加
|
||||
add(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success("添加成功!")
|
||||
})
|
||||
} else {//编辑
|
||||
update(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success("编辑成功!")
|
||||
})
|
||||
}
|
||||
this.cancel()
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
// Modal cancel
|
||||
this.modal = false;
|
||||
this.refresh();
|
||||
},
|
||||
toDelete(index) {
|
||||
let temp = this.dataList[index]
|
||||
|
||||
let data = {
|
||||
id: temp.id
|
||||
}
|
||||
remove(data).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success("删除成功!")
|
||||
})
|
||||
},
|
||||
refresh() {
|
||||
this.pageParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
this.search = {
|
||||
permissionName: '',
|
||||
parentId: this.search.parentId
|
||||
};
|
||||
this.formItem = {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
permissionName: '',
|
||||
permissionCode: '',
|
||||
level: 0,
|
||||
icon: '',
|
||||
permissionDesc: '',
|
||||
url: '',
|
||||
component: '',
|
||||
sort: 0,
|
||||
};
|
||||
},
|
||||
changePage(index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index;
|
||||
this.getDataList();
|
||||
},
|
||||
changePageSize(page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1;
|
||||
this.pageParam.pageSize = page;
|
||||
this.getDataList();
|
||||
},
|
||||
renderContent(h, {root, node, data}) {
|
||||
let icon = data.icon;
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
display: "inline-block",
|
||||
cursor: "pointer"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
data.checked = !data.checked;
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16"
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px"
|
||||
}
|
||||
}),
|
||||
h("span", {class: "ivu-tree-title"}, data.title)
|
||||
])
|
||||
]
|
||||
);
|
||||
},
|
||||
getTreeList () {
|
||||
getTreeList().then(res => {
|
||||
this.treeList = res.data.data
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.getTreeList()
|
||||
this.getTreeSelectList()
|
||||
getTreeSelectList () {
|
||||
getTreeSelectList().then(res => {
|
||||
this.treeSelectList = res.data.data
|
||||
})
|
||||
},
|
||||
getDataList () {
|
||||
let temp = JSON.parse(JSON.stringify(this.pageParam))
|
||||
let data = objectUtil.trimJoin(temp, this.search)
|
||||
this.tableLoading = true
|
||||
getDataList(data).then(res => {
|
||||
let page = res.data.data
|
||||
this.pageTotal = page.total
|
||||
this.dataList = page.records
|
||||
// 延迟300毫秒，给它更流畅的感觉
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
toAdd () {
|
||||
if (this.formItem.level === 3) {
|
||||
this.$Message.warning('不可以添加子菜单！')
|
||||
return
|
||||
}
|
||||
|
||||
this.modalTitle = '添加'
|
||||
this.addModal = true
|
||||
this.editModal = false
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
})
|
||||
},
|
||||
toEdit (index) {
|
||||
this.modalTitle = '编辑'
|
||||
let temp = this.dataList[index]
|
||||
|
||||
this.addModal = false
|
||||
this.editModal = true
|
||||
this.modal = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 先清除上次校验状态，再回填数据，避免编辑回显报红
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.parentId = temp.parentId
|
||||
this.formItem.permissionName = temp.permissionName
|
||||
this.formItem.permissionCode = temp.permissionCode
|
||||
this.formItem.level = temp.level
|
||||
this.formItem.icon = temp.icon
|
||||
this.formItem.url = temp.url
|
||||
this.formItem.component = temp.component
|
||||
this.formItem.permissionDesc = temp.permissionDesc
|
||||
this.formItem.sort = temp.sort
|
||||
})
|
||||
},
|
||||
submit (formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
// 点击即转圈，等请求响应成功后再关闭，同时防重复提交
|
||||
this.submitLoading = true
|
||||
const isAdd = this.addModal
|
||||
const req = isAdd ? add(this.formItem) : update(this.formItem)
|
||||
req.then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
|
||||
this.cancel()
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
// 失败保持弹窗打开，方便直接重试
|
||||
this.submitLoading = false
|
||||
this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel () {
|
||||
// Modal cancel
|
||||
this.modal = false
|
||||
this.refresh()
|
||||
},
|
||||
toDelete (index) {
|
||||
let temp = this.dataList[index]
|
||||
|
||||
let data = {
|
||||
id: temp.id
|
||||
}
|
||||
remove(data).then(res => {
|
||||
this.refresh()
|
||||
this.getTreeSelectList()
|
||||
this.getTreeList()
|
||||
this.getDataList()
|
||||
this.$Message.success('删除成功!')
|
||||
})
|
||||
},
|
||||
refresh () {
|
||||
this.pageParam = {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
this.search = {
|
||||
permissionName: '',
|
||||
parentId: this.search.parentId
|
||||
}
|
||||
this.formItem = {
|
||||
id: '',
|
||||
parentId: '0',
|
||||
permissionName: '',
|
||||
permissionCode: '',
|
||||
level: 0,
|
||||
icon: '',
|
||||
permissionDesc: '',
|
||||
url: '',
|
||||
component: '',
|
||||
sort: 0
|
||||
}
|
||||
},
|
||||
changePage (index) {
|
||||
// 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
|
||||
this.pageParam.pageNum = index
|
||||
this.getDataList()
|
||||
},
|
||||
mounted() {
|
||||
this.calcHeight()
|
||||
window.addEventListener('resize', this.calcHeight)
|
||||
changePageSize (page) {
|
||||
// 切换分页条数
|
||||
this.pageParam.pageNum = 1
|
||||
this.pageParam.pageSize = page
|
||||
this.getDataList()
|
||||
},
|
||||
activated() {
|
||||
// keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
|
||||
this.calcHeight()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calcHeight)
|
||||
renderContent (h, { root, node, data }) {
|
||||
let icon = data.icon
|
||||
return h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
data.checked = !data.checked
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h('span', [
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: icon,
|
||||
size: '16'
|
||||
},
|
||||
style: {
|
||||
'margin-right': '8px',
|
||||
'margin-bottom': '3px'
|
||||
}
|
||||
}),
|
||||
h('span', { class: 'ivu-tree-title' }, data.title)
|
||||
])
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getTreeList()
|
||||
this.getTreeSelectList()
|
||||
this.getDataList()
|
||||
},
|
||||
mounted () {
|
||||
this.calcHeight()
|
||||
window.addEventListener('resize', this.calcHeight)
|
||||
},
|
||||
activated () {
|
||||
// keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
|
||||
this.calcHeight()
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.calcHeight)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
+25
-24
@@ -142,7 +142,7 @@
|
||||
import { getTreeListByRoleId } from '@/api/sys/sys-permission'
|
||||
import { getDataList, add, update, remove, addRolePermission } from '@/api/sys/sys-role'
|
||||
import { getTreeSelectList } from '@/api/sys/sys-dept'
|
||||
import { objectUtil, utils, exportExcel } from '@/common/js/util'
|
||||
import { objectUtil } from '@/common/js/util'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
@@ -300,33 +300,34 @@ export default {
|
||||
if (this.$refs.formItem) {
|
||||
this.$refs.formItem.resetFields()
|
||||
}
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.roleName = temp.roleName
|
||||
this.formItem.roleCode = temp.roleCode
|
||||
this.formItem.roleDesc = temp.roleDesc
|
||||
this.formItem.isDefault = temp.isDefault
|
||||
this.formItem.deptId = temp.deptId
|
||||
this.formItem.sort = temp.sort
|
||||
this.formItem.id = temp.id
|
||||
this.formItem.roleName = temp.roleName
|
||||
this.formItem.roleCode = temp.roleCode
|
||||
this.formItem.roleDesc = temp.roleDesc
|
||||
this.formItem.isDefault = temp.isDefault
|
||||
this.formItem.deptId = temp.deptId
|
||||
this.formItem.sort = temp.sort
|
||||
})
|
||||
},
|
||||
submit (formItem) {
|
||||
// modal 提交
|
||||
this.$refs[formItem].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.addModal) { // 添加
|
||||
add(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success('添加成功!')
|
||||
})
|
||||
} else { // 编辑
|
||||
update(this.formItem).then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success('编辑成功!')
|
||||
})
|
||||
}
|
||||
this.cancel()
|
||||
// 点击即转圈，等请求响应成功后再关闭，避免无反馈像卡住，同时防重复提交
|
||||
this.submitLoading = true
|
||||
const isAdd = this.addModal
|
||||
const req = isAdd ? add(this.formItem) : update(this.formItem)
|
||||
req.then(res => {
|
||||
this.refresh()
|
||||
this.getDataList()
|
||||
this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
|
||||
this.cancel()
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
// 失败保持弹窗打开，方便直接重试
|
||||
this.submitLoading = false
|
||||
this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -404,7 +405,7 @@ export default {
|
||||
this.treeList = res.data.data
|
||||
})
|
||||
},
|
||||
renderContent (h, {root, node, data}) {
|
||||
renderContent (h, { root, node, data }) {
|
||||
// 初始化树的icon
|
||||
let icon = data.icon
|
||||
return h(
|
||||
@@ -432,7 +433,7 @@ export default {
|
||||
'margin-bottom': '3px'
|
||||
}
|
||||
}),
|
||||
h('span', {class: 'ivu-tree-title'}, data.title)
|
||||
h('span', { class: 'ivu-tree-title' }, data.title)
|
||||
])
|
||||
]
|
||||
)
|
||||
|
||||
+14
-12
@@ -372,18 +372,20 @@ export default {
|
||||
userRoleStr: JSON.stringify(userAndRoleArr).toString()
|
||||
})
|
||||
|
||||
if (this.addModal) { // 添加
|
||||
add(data).then(res => {
|
||||
this.getDataList()
|
||||
this.$Message.success('添加成功!')
|
||||
})
|
||||
} else { // 编辑
|
||||
update(data).then(res => {
|
||||
this.getDataList()
|
||||
this.$Message.success('编辑成功!')
|
||||
})
|
||||
}
|
||||
this.cancel()
|
||||
// 点击即转圈，等请求响应成功后再关闭，同时防重复提交
|
||||
this.submitLoading = true
|
||||
const isAdd = this.addModal
|
||||
const req = isAdd ? add(data) : update(data)
|
||||
req.then(res => {
|
||||
this.getDataList()
|
||||
this.$Message.success(isAdd ? '添加成功!' : '编辑成功!')
|
||||
this.cancel()
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
// 失败保持弹窗打开，方便直接重试
|
||||
this.submitLoading = false
|
||||
this.$Message.error(isAdd ? '添加失败，请重试' : '编辑失败，请重试')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user