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