pengjun
2 years ago
6 changed files with 692 additions and 6 deletions
-
513src/components/menuPage/MenuPageEdit.vue
-
90src/components/menuPage/MenuPageTree.vue
-
25src/router/index.js
-
9src/store/index.js
-
1src/views/Home.vue
-
60src/views/menuPage/menuPage.vue
@ -0,0 +1,513 @@ |
|||
<template> |
|||
<div style="display: flex"> |
|||
<div |
|||
:style=" |
|||
'margin-left: 5px;width:' + (window.pageWidth - 200 - 120 - 45) + 'px;' |
|||
" |
|||
> |
|||
<!--overflow-y: scroll;height:200px;--> |
|||
<el-form |
|||
ref="form" |
|||
:model="form" |
|||
label-width="85px" |
|||
:rules="rules" |
|||
size="medium" |
|||
> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="上级节点" prop="parentId"> |
|||
<el-cascader |
|||
v-model="form.parentId" |
|||
:options="dataTransOpts.tableM.menu_info" |
|||
:props="{ |
|||
checkStrictly: true, |
|||
expandTrigger: 'hover', |
|||
...customerOrg.treeprops, |
|||
}" |
|||
:show-all-levels="false" |
|||
clearable |
|||
filterable |
|||
disabled |
|||
:style=" |
|||
'width:' + Math.floor((window.pageWidth - 620) / 3) + 'px;' |
|||
" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="16"> |
|||
<el-form-item label="节点名称" prop="displayName"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.displayName" |
|||
placeholder="请输入节点名称" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="权限性质" prop="menuType"> |
|||
<el-select |
|||
class="enterToTab" |
|||
v-model="form.menuType" |
|||
placeholder="请选择" |
|||
filterable |
|||
:style=" |
|||
'width:' + Math.floor((window.pageWidth - 620) / 3) + 'px;' |
|||
" |
|||
> |
|||
<el-option |
|||
v-for="item in dict.menuType" |
|||
:key="item.id" |
|||
:label="item.displayName" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="菜单图标" prop="iconName"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.iconName" |
|||
placeholder="请输入传真" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="启用" prop="isActive" label-width="56px"> |
|||
<!-- |
|||
<el-radio v-model="form.isActive" label="Y">启用</el-radio> |
|||
<el-radio v-model="form.isActive" label="N">停用</el-radio> |
|||
--> |
|||
<el-checkbox |
|||
v-model="form.isActiveBox" |
|||
@change="changeBox('isActive')" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="路由地址" prop="routeUrl"> |
|||
<el-input |
|||
class="enterToTab" |
|||
v-model="form.routeUrl" |
|||
placeholder="请输入路由地址" |
|||
maxlength="100" |
|||
show-word-limit |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="5"> |
|||
<el-form-item label="创建人员"> |
|||
<el-input v-model="form.creatorName" size="small" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="创建时间"> |
|||
<el-date-picker |
|||
v-model="form.creationTime" |
|||
type="datetime" |
|||
size="small" |
|||
style="width: 100%" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="5"> |
|||
<el-form-item label="修改人员"> |
|||
<el-input v-model="form.lastModifierName" size="small" disabled /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="修改时间"> |
|||
<el-date-picker |
|||
v-model="form.lastModificationTime" |
|||
type="datetime" |
|||
size="small" |
|||
style="width: 100%" |
|||
disabled |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<!-- 按钮区域 --> |
|||
<div style="width: 110px; margin-left: 10px; margin-top: 3%"> |
|||
<div class="btnList"> |
|||
<el-button type="primary" @click="btnAdd('form', '')" class="btnClass" |
|||
>新增节点</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList"> |
|||
<el-button |
|||
type="primary" |
|||
@click="btnAdd('form', 'child')" |
|||
class="btnClass" |
|||
>新增子节点</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList"> |
|||
<el-button type="success" @click="btnSubmit('form')" class="btnClass" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
<div class="btnList"> |
|||
<el-button type="danger" @click="btnDel('form')" class="btnClass" |
|||
>删除</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { tcdate, objCopy, deepCopy, arrayExistObj } from "../../utlis/proFunc"; |
|||
import { getTreeNode, getTreePids } from "../../utlis/tree"; |
|||
|
|||
export default { |
|||
components: {}, |
|||
props: ["id"], |
|||
data() { |
|||
return { |
|||
isActiveBox: false, |
|||
customerOrgEditStyle: "height:400px;", |
|||
|
|||
form: { |
|||
displayName: "", |
|||
routeUrl: null, |
|||
iconName: null, |
|||
simpleCode: "QXGL", |
|||
parentId: null, |
|||
isActive: "Y", |
|||
isActiveBox: true, |
|||
menuType: "0", |
|||
creatorName: null, |
|||
lastModifierName: null, |
|||
lastModificationTime: "", |
|||
lastModifierId: "", |
|||
creationTime: "", |
|||
creatorId: "", |
|||
id: "", |
|||
}, //初始化 单位 记录 目前新增与更新是一致 |
|||
formInit: {}, |
|||
rules: { |
|||
displayName: [ |
|||
{ required: true, message: "请输入节点名称", trigger: "blur" }, |
|||
], |
|||
isMenu: [ |
|||
{ required: true, message: "请输入权限性质", trigger: "blur" }, |
|||
], |
|||
}, |
|||
isshow: false, |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
// 保留初始化数据 |
|||
this.formInit = deepCopy(this.form); |
|||
}, |
|||
|
|||
//挂载完成 |
|||
mounted() { |
|||
// 表单中 回车 代替 tab |
|||
this.enterToTab(); |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState(["window", "dict", "dataTransOpts", "customerOrg"]), |
|||
}, |
|||
methods: { |
|||
...mapMutations(["setData"]), |
|||
|
|||
changeBox(type) { |
|||
//赋值 |
|||
if (this.form[type + "Box"]) { |
|||
this.form[type] = "Y"; |
|||
} else { |
|||
this.form[type] = "N"; |
|||
} |
|||
}, |
|||
|
|||
//获取表单（菜单与界面）信息 |
|||
initFormData(id) { |
|||
if (!id) { |
|||
this.form = deepCopy(this.formInit); |
|||
return; |
|||
} |
|||
getapi(`/api/app/menuinfo/getmenuinfoasync?MenuInfoId=${id}`).then( |
|||
(res) => { |
|||
if (res.code != -1) { |
|||
this.form = res.data; |
|||
// objCopy(res.data, this.form); |
|||
|
|||
if (res.data.isActive == "Y") { |
|||
this.form.isActiveBox = true; |
|||
} else { |
|||
this.form.isActiveBox = false; |
|||
} |
|||
console.log("this.form", this.form, res.data); |
|||
} |
|||
} |
|||
); |
|||
}, |
|||
|
|||
//更新 获取单位树节点数据(局部刷新) |
|||
getCustomerOrgTree(oprType, body) { |
|||
// getapi("/api/app/customerorg/getbycodeall").then((res) => { |
|||
// //customerOrgTree = res.data; |
|||
// console.log("res.data", res.data); |
|||
// this.setData({ key: "customerOrg.customerOrgTree", value: res.data }); |
|||
// tcdate(this.dataTransOpts.tableM.menu_info); |
|||
// }); |
|||
switch (oprType) { |
|||
case "insert": |
|||
let node = { |
|||
id: body.id, |
|||
displayName: body.displayName, |
|||
parentId: body.parentId, |
|||
}; |
|||
|
|||
if (body.parentId) { |
|||
let pNode = getTreeNode( |
|||
this.dataTransOpts.tableM.menu_info, |
|||
"treeChildren", |
|||
"id", |
|||
body.parentId |
|||
); |
|||
if (!pNode.treeChildren) this.$set(pNode, "treeChildren", []); |
|||
//pNode.treeChildren = [] |
|||
pNode.treeChildren.push(node); |
|||
} else { |
|||
this.dataTransOpts.tableM.menu_info.push(node); |
|||
} |
|||
this.customerOrg.defaultExpandedKeys = []; |
|||
if (body.parentId) { |
|||
this.customerOrg.defaultExpandedKeys.push(body.parentId); |
|||
} |
|||
this.customerOrg.defaultExpandedKeys.push(body.id); |
|||
this.customerOrg.treeCurrentNodekey = body.id; |
|||
//console.log("this.customerOrg.treeCurrentNodekey",this.customerOrg.treeCurrentNodekey); |
|||
break; |
|||
|
|||
// "id": "3a0c5101-a6a6-e48a-36ec-33e7567a99e6", |
|||
// "displayName": "神豚集团", |
|||
// "parentId": null, |
|||
// "code": "00001", |
|||
// "treeChildren": [ |
|||
|
|||
case "update": |
|||
let node2 = getTreeNode( |
|||
this.dataTransOpts.tableM.menu_info, |
|||
"treeChildren", |
|||
"id", |
|||
body.id |
|||
); |
|||
node2.displayName = body.displayName; |
|||
break; |
|||
|
|||
case "delete": |
|||
let lfind = -1; |
|||
let pids = getTreePids( |
|||
this.dataTransOpts.tableM.menu_info, |
|||
"treeChildren", |
|||
"parentId", |
|||
"id", |
|||
body |
|||
); |
|||
//tree, childNodeName, pidName, idName, idVal getTreeNode(this.dataTransOpts.tableM.menu_info, "treeChildren", "id", body); |
|||
console.log("pids", pids, body); |
|||
if (!pids || pids.length < 2) { |
|||
lfind = arrayExistObj( |
|||
this.dataTransOpts.tableM.menu_info, |
|||
"id", |
|||
body |
|||
); |
|||
if (lfind > -1) |
|||
this.dataTransOpts.tableM.menu_info.splice(lfind, 1); |
|||
} else { |
|||
let node3 = getTreeNode( |
|||
this.dataTransOpts.tableM.menu_info, |
|||
"treeChildren", |
|||
"id", |
|||
pids[0] |
|||
); |
|||
//console.log('node3',node3) |
|||
lfind = arrayExistObj(node3.treeChildren, "id", body); |
|||
if (lfind > -1) node3.treeChildren.splice(lfind, 1); |
|||
} |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
//提交 |
|||
btnSubmit(formName) { |
|||
let body = {}; |
|||
// console.log("vuex data", this.customerOrg.customerOrgRd); |
|||
this.$refs[formName].validate((valid, fields) => { |
|||
if (!valid) { |
|||
this.$message.warning(fields[Object.keys(fields)[0]][0].message); |
|||
return false; |
|||
} |
|||
|
|||
body = deepCopy(this.form); |
|||
delete body.isActiveBox; |
|||
delete body.creatorName; |
|||
delete body.creationTime; |
|||
delete body.lastModifierName; |
|||
delete body.lastModificationTime; |
|||
|
|||
if (typeof body.parentId === "string") { |
|||
if (!body.parentId || body.parentId.length < 1) { |
|||
body.parentId = null; |
|||
} |
|||
} else { |
|||
if (body.parentId && body.parentId.length > 0) { |
|||
body.parentId = body.parentId[body.parentId.length - 1]; |
|||
} else { |
|||
body.parentId = null; |
|||
} |
|||
} |
|||
|
|||
console.log("body", body, "this.form", this.form); |
|||
|
|||
if (!this.form.id) { |
|||
//id为空则新增 |
|||
postapi(`/api/app/menuinfo/createtmenuinfo`, body).then((res) => { |
|||
if (res.code == 1) { |
|||
console.log("创健 操作成功"); |
|||
//this.setData({ key: "customerOrg.customerOrgRd", value: res }); |
|||
this.form = res.data; |
|||
this.getCustomerOrgTree("insert", res.data); |
|||
} |
|||
}); |
|||
} else { |
|||
//id不为空则编辑 |
|||
postapi( |
|||
`/api/app/menuinfo/updatemenuinfo?id=${this.form.id}`, |
|||
body |
|||
).then((res) => { |
|||
if (res.code == 1) { |
|||
console.log("更新 操作成功"); |
|||
this.getCustomerOrgTree("update", this.form); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//新增节点 |
|||
async btnAdd(formName, isChild) { |
|||
await this.$refs[formName].resetFields(); |
|||
|
|||
if (isChild) { |
|||
if (!this.form.id) { |
|||
this.$message.warning("请先选择上级节点"); |
|||
return; |
|||
} |
|||
this.form = Object.assign({}, this.formInit, { parentId: this.form.id, }); |
|||
} else { |
|||
this.form = Object.assign({}, this.formInit); |
|||
} |
|||
}, |
|||
|
|||
//删除 |
|||
btnDel(formName) { |
|||
if (!this.form.id) { |
|||
this.$message.warning("请先选中要删除的节点"); |
|||
return; |
|||
} |
|||
//复制待删除的节点 |
|||
//let node = deepCopy(getTreeNode(this.dataTransOpts.tableM.menu_info,"treeChildren","id",this.customerOrg.customerOrgRd.id)); |
|||
|
|||
this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", { |
|||
confirmButtonText: "是", |
|||
cancelButtonText: "否", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
//console.log('{patientRegisterIds}',{patientRegisterIds}) |
|||
return postapi(`/api/app/menuinfo/deletemenuinfo?id=${this.form.id}`); |
|||
}) |
|||
.then((res) => { |
|||
if (res.code != -1) { |
|||
console.log("删除 操作成功"); |
|||
this.getCustomerOrgTree("delete", this.form.id); |
|||
this.dataTransOpts.tableS.menu_info.id = ""; |
|||
setTimeout(() => { |
|||
this.dataTransOpts.refresh.menu_info.S++; |
|||
}, 20); |
|||
this.$refs[formName].resetFields(); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
console.log("已取消删除"); |
|||
} else { |
|||
this.$message.error("操作失败，原因：" + err); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//回车替代tab键 |
|||
enterToTab() { |
|||
this.$nextTick(() => { |
|||
let inputs = document.querySelectorAll("form input"); //用数组可以读取多个标签的元素 //.inline-input |
|||
//console.log('inputs',inputs); |
|||
// 为每个输入框添加键盘事件监听器 |
|||
inputs.forEach((input, i) => { |
|||
input.addEventListener("keydown", (event) => { |
|||
// 如果按下的是回车键 |
|||
// console.log('data-ismultiline',input.getAttribute('data-ismultiline')); |
|||
|
|||
if (event.keyCode === 13) { |
|||
// 阻止回车键的默认行为（换行） |
|||
event.preventDefault(); |
|||
|
|||
// 跳至下一个输入框 |
|||
for (let j = i + 1; j < inputs.length; j++) { |
|||
if (inputs[j].getAttribute("disabled") != "disabled") { |
|||
inputs[j].focus(); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
//人员ID未切换换时 也可以强制刷新数据 |
|||
"dataTransOpts.refresh.menu_info.S": { |
|||
immediate: true, |
|||
handler(newVal, oldVal) { |
|||
console.log( |
|||
`watch 菜单与页面 newVal:${newVal} oldVal:${oldVal} menuInfoId: ${this.dataTransOpts.tableS.menu_info.id}` |
|||
); |
|||
this.initFormData(this.dataTransOpts.tableS.menu_info.id); |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global_form.css"; |
|||
|
|||
.btnList { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.btnClass { |
|||
width: 110px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<div> |
|||
<div style="margin:2px 2px 2px 2px;"> |
|||
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" /> |
|||
</div> |
|||
<div :style="'overflow: scroll;height:' +(window.pageHeight < 600 ? 410 : window.pageHeight - 190) + 'px;'"> |
|||
<el-tree :data="dataTransOpts.tableM.menu_info" :props="customerOrg.treeprops" |
|||
node-key="id" :filter-node-method="filterNode" |
|||
:default-expanded-keys="customerOrg.defaultExpandedKeys" |
|||
@node-click="treeclick" highlight-current ref="customerOrgTree"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState, mapMutations } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { tcdate, deepCopy } from "../../utlis/proFunc"; |
|||
import { getTreePids} from "../../utlis/tree"; |
|||
|
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
filterText:'' |
|||
}; |
|||
}, |
|||
//<el-tree :data="$store.state.customerOrg.customerOrgTree" :props="$store.state.customerOrg.treeprops" @node-click="treeclick"></el-tree> |
|||
computed: { |
|||
...mapState(["window", "dataTransOpts", "customerOrg" ]), |
|||
}, |
|||
|
|||
//创建组件后 |
|||
created() { |
|||
}, |
|||
|
|||
//挂载组件完成 |
|||
mounted() { |
|||
//获取体检单位列表树信息 |
|||
this.getMenuInfoTree(); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations(["setData"]), |
|||
|
|||
//获取体检单位列表树信息 |
|||
getMenuInfoTree() { |
|||
getapi("/api/app/menuinfo/getmenuinfotreelist").then((res) => { |
|||
if(res.code != -1){ |
|||
this.dataTransOpts.tableM.menu_info = res.data |
|||
tcdate(this.dataTransOpts.tableM.menu_info); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//点击树节点 |
|||
treeclick(data) { |
|||
this.dataTransOpts.tableS.menu_info.id = data.id; |
|||
setTimeout(() => { |
|||
this.dataTransOpts.refresh.menu_info.S++ |
|||
}, 20); |
|||
}, |
|||
|
|||
//树过滤 |
|||
filterNode(value, data) { |
|||
//console.log(value,data) |
|||
if (!value) return true; |
|||
return data['displayName'].indexOf(value) !== -1 || data['simpleCode'].indexOf(value.toUpperCase()) !== -1; |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
"customerOrg.treeCurrentNodekey"(newVal,oldVal){ |
|||
//console.log('watch:customerOrg.treeCurrentNodekey',newVal,oldVal) |
|||
if(newVal && newVal != oldVal){ |
|||
this.$nextTick(() => { |
|||
this.$refs['customerOrgTree'].setCurrentKey(newVal); |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
"filterText"(newVal,oldVal){ //过滤菜单 |
|||
this.$refs['customerOrgTree'].filter(newVal); |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global.css"; |
|||
</style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div> |
|||
<el-card class="elcard"> |
|||
<div slot="header"> |
|||
<span>菜单与页面</span> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
<!-- 菜单树组件 --> |
|||
<div :style="'border: 1px solid;width:200px; height:' + |
|||
(window.pageHeight < 600 ? 450 : window.pageHeight - 150) + |
|||
'px;' |
|||
"> |
|||
<MenuPageTree /> |
|||
</div> |
|||
<div :style="'display:block;width:' + |
|||
(window.pageWidth - 200 - 40) + |
|||
'px;height:' + |
|||
(window.pageHeight < 600 ? 450 : window.pageHeight - 150) + |
|||
'px;' + |
|||
(window.pageHeight < 600 ? 'overflow-y: scroll;' : '') |
|||
"> |
|||
<!-- 单位详情 录入与编辑 --> |
|||
<div style="height:228px;"> |
|||
<MenuPageEdit /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from "vuex"; |
|||
import MenuPageTree from "../../components/menuPage/MenuPageTree.vue"; |
|||
import MenuPageEdit from "../../components/menuPage/MenuPageEdit.vue"; |
|||
export default { |
|||
components: { |
|||
MenuPageTree, |
|||
MenuPageEdit, |
|||
}, |
|||
data() { |
|||
return { |
|||
tabChoosed: "1", |
|||
}; |
|||
}, |
|||
|
|||
created() { }, |
|||
|
|||
//挂载完成 |
|||
mounted() { }, |
|||
|
|||
computed: { |
|||
...mapState(["customerOrg", "window"]), |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
@import "../../assets/css/global_input.css"; |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue