|
@@ -1,198 +1,256 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <div class="left-pane">
|
|
|
- <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
|
|
|
- <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
|
|
|
- :filter-node-method="filterNode" @node-click="handleNodeClick">
|
|
|
- <span slot-scope="{node,data}">
|
|
|
- <el-image :src="data.url"></el-image>
|
|
|
- <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
|
|
|
- <span class="operate_btns">
|
|
|
- <dropdown :events="data.id ? menuEvents : subMenuEvents" :data="{ node, data }"
|
|
|
- @itemClick="dropDownClick"></dropdown>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- <el-button><i class="el-icon-s-order"></i>新建消息模块</el-button>
|
|
|
- </div>
|
|
|
- <div class="right-pane">
|
|
|
- <commonMessage v-if="commonShow"></commonMessage>
|
|
|
- <messageCreate v-if="createSHow"></messageCreate>
|
|
|
- <messageRemind v-if="remindShow"></messageRemind>
|
|
|
- </div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="left-pane">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="filterText"
|
|
|
+ ></el-input>
|
|
|
+ <div class="tree_container">
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ <span slot-scope="{node,data}">
|
|
|
+ <el-image :src="data.url"></el-image>
|
|
|
+ <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
|
|
|
+ <!--<span class="operate_btns">
|
|
|
+ :events="data.id ? menuEvents : subMenuEvents"
|
|
|
+ <dropdown
|
|
|
+ v-if="data.id!=undefined"
|
|
|
+ :events="menuEvents"
|
|
|
+ :data="{ node, data }"
|
|
|
+ @itemClick="dropDownClick"
|
|
|
+ ></dropdown>
|
|
|
+ </span>-->
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ class="createNewMessageType"
|
|
|
+ @click="createNewMessage"
|
|
|
+ >
|
|
|
+ <i class="el-icon-s-order"></i>
|
|
|
+ 新建消息模块
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="right-pane">
|
|
|
+ <commonMessage
|
|
|
+ v-if="commonShow"
|
|
|
+ v-bind="{label:selectedMessageLabel}"
|
|
|
+ ></commonMessage>
|
|
|
+ <!-- <messageRemind v-if="remindShow"></messageRemind> -->
|
|
|
</div>
|
|
|
+ <messageCreate
|
|
|
+ ref="messageCreate"
|
|
|
+ v-bind="{show:createSHow}"
|
|
|
+ ></messageCreate>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import commonMessage from './commonMessage';
|
|
|
-import messageCreate from './messageCreate';
|
|
|
-import messageRemind from './messageRemind';
|
|
|
-import dropdown from '@/components/Dropdown/index';
|
|
|
+import commonMessage from "./commonMessage";
|
|
|
+import messageCreate from "./dailog/messageCreate";
|
|
|
+// import messageRemind from "./messageRemind";
|
|
|
+
|
|
|
+import dropdown from "@/components/Dropdown/index";
|
|
|
+
|
|
|
+import xiaoxi from "@/assets/tree/message/xiaoxi@2x.png";
|
|
|
+
|
|
|
export default {
|
|
|
- components: {
|
|
|
- commonMessage, messageCreate, messageRemind, dropdown
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- commonShow: false,
|
|
|
- createSHow: true,
|
|
|
- remindShow: false,
|
|
|
- filterText: '',
|
|
|
- data: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- label: '普通消息',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- children: [{
|
|
|
- label: '年度报告通知',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }, {
|
|
|
- label: '报表导出通知',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }, {
|
|
|
- label: '系统更新通知',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- label: '提醒消息',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- children: [{
|
|
|
- label: '资产年限提醒',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }, {
|
|
|
- label: '人员画像提醒',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }, {
|
|
|
- label: '备餐提醒',
|
|
|
- url: require('@/assets/tree/message/xiaoxi@2x.png'),
|
|
|
- }]
|
|
|
- }],
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
+ components: {
|
|
|
+ commonMessage,
|
|
|
+ messageCreate,
|
|
|
+ // messageRemind,
|
|
|
+ dropdown,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ commonShow: false,
|
|
|
+ createSHow: false,
|
|
|
+ remindShow: false,
|
|
|
+ filterText: "",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: "普通消息",
|
|
|
+ url: xiaoxi,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "年度报告通知",
|
|
|
+ url: xiaoxi,
|
|
|
},
|
|
|
- form: {
|
|
|
-
|
|
|
+ {
|
|
|
+ label: "报表导出通知",
|
|
|
+ url: xiaoxi,
|
|
|
},
|
|
|
- input: '',
|
|
|
- menuEvents: [
|
|
|
- { label: '新建', funcName: 'addNode' }
|
|
|
- ],
|
|
|
- subMenuEvents: [
|
|
|
- { label: '新建', funcName: 'addNode' },
|
|
|
- { label: '上移', funcName: 'moveUp' },
|
|
|
- { label: '下移', funcName: 'moveDown' },
|
|
|
- { label: '编辑', funcName: 'editNode' },
|
|
|
- { label: '删除', funcName: 'removeNode' }
|
|
|
- ]
|
|
|
- }
|
|
|
+ {
|
|
|
+ label: "系统更新通知",
|
|
|
+ url: xiaoxi,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: "提醒消息",
|
|
|
+ url: xiaoxi,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ label: "资产年限提醒",
|
|
|
+ url: xiaoxi,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "人员画像提醒",
|
|
|
+ url: xiaoxi,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "备餐提醒",
|
|
|
+ url: xiaoxi,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ input: "",
|
|
|
+ // menuEvents: [{ label: "新建", funcName: "addNode" }],
|
|
|
+ // subMenuEvents: [
|
|
|
+ // { label: "新建", funcName: "addNode" },
|
|
|
+ // { label: "上移", funcName: "moveUp" },
|
|
|
+ // { label: "下移", funcName: "moveDown" },
|
|
|
+ // { label: "编辑", funcName: "editNode" },
|
|
|
+ // { label: "删除", funcName: "removeNode" },
|
|
|
+ // ],
|
|
|
+ selectedMessageLabel: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
},
|
|
|
- watch: {
|
|
|
- filterText(val) {
|
|
|
- this.$refs.tree.filter(val);
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
},
|
|
|
- methods: {
|
|
|
- filterNode(value, data) {
|
|
|
- if (!value) return true;
|
|
|
- return data.label.indexOf(value) !== -1;
|
|
|
- },
|
|
|
- dropDownClick(){},
|
|
|
- handleNodeClick(data) {
|
|
|
- switch (data.label) {
|
|
|
- case '年度报告通知':
|
|
|
- this.commonShow = true;
|
|
|
- this.createSHow = false;
|
|
|
- this.remindShow = false;
|
|
|
- break;
|
|
|
- case '普通消息':
|
|
|
- this.commonShow = false;
|
|
|
- this.createSHow = true;
|
|
|
- this.remindShow = false;
|
|
|
- break;
|
|
|
- case '资产年限提醒':
|
|
|
- this.commonShow = false;
|
|
|
- this.createSHow = false;
|
|
|
- this.remindShow = true;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ // dropDownClick(eventName, data) {
|
|
|
+ // if (data.data.children) {
|
|
|
+ // this.$refs.messageCreate.dialogVisible = true;
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ createNewMessage() {
|
|
|
+ this.$refs.messageCreate.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleNodeClick(data) {
|
|
|
+ if (!data.children) {
|
|
|
+ this.commonShow = true;
|
|
|
+ this.selectedMessageLabel = data.label;
|
|
|
+ }
|
|
|
+ // switch (data.label) {
|
|
|
+ // case "年度报告通知":
|
|
|
+ // this.commonShow = true;
|
|
|
+ // this.createSHow = false;
|
|
|
+ // this.remindShow = false;
|
|
|
+ // break;
|
|
|
+ // case "普通消息":
|
|
|
+ // this.commonShow = false;
|
|
|
+ // this.createSHow = true;
|
|
|
+ // this.remindShow = false;
|
|
|
+ // break;
|
|
|
+ // case "资产年限提醒":
|
|
|
+ // this.commonShow = false;
|
|
|
+ // this.createSHow = false;
|
|
|
+ // this.remindShow = true;
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- line-height: 20px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
-
|
|
|
- .left-pane {
|
|
|
- width: 300px;
|
|
|
- padding: 15px;
|
|
|
- height: calc(100% - 30px);
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
- .el-tree {
|
|
|
- margin-top: 10px;
|
|
|
- height: calc(98% - 30px);
|
|
|
- background-color: #FAFAFA;
|
|
|
+ .left-pane {
|
|
|
+ width: 300px;
|
|
|
+ padding: 15px;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ .tree_container {
|
|
|
+ height: calc(100% - 101px);
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .el-tree {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fafafa;
|
|
|
|
|
|
+ /deep/.el-tree-node__content {
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 30px !important;
|
|
|
|
|
|
- /deep/.el-tree-node__content {
|
|
|
- align-items: center;
|
|
|
- height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- position: relative;
|
|
|
- color: #999999;
|
|
|
- padding-top: 10px;
|
|
|
- padding-left: 30px !important;
|
|
|
+ .operate_btns {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .operate_btns {
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &:hover,
|
|
|
+ :focus-within {
|
|
|
+ background-color: #f7fbff;
|
|
|
|
|
|
- &:hover,
|
|
|
- :focus-within {
|
|
|
- background-color: #f7fbff;
|
|
|
-
|
|
|
- .operate_btns {
|
|
|
- display: inline;
|
|
|
- }
|
|
|
- }
|
|
|
+ .operate_btns {
|
|
|
+ display: inline;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-tree-node__children {
|
|
|
- .el-tree-node__content {
|
|
|
- padding-left: 60px !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ /deep/.el-tree-node__children {
|
|
|
+ .el-tree-node__content {
|
|
|
+ padding-left: 60px !important;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .right-pane {
|
|
|
- width: calc(100% - 330px);
|
|
|
+ .createNewMessageType {
|
|
|
+ position: relative;
|
|
|
+ width: 250px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: #3da0d6;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .el-button {
|
|
|
- position: absolute;
|
|
|
- left: 40px;
|
|
|
- bottom: 15px;
|
|
|
- width: 250px;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- background: #3da0d6;
|
|
|
- }
|
|
|
+ .right-pane {
|
|
|
+ width: calc(100% - 330px);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|