|
@@ -1,48 +1,40 @@
|
|
|
<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">
|
|
|
- </el-tree>
|
|
|
- <el-button class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
|
|
|
- </div>
|
|
|
- <div class="right-pane">
|
|
|
- <el-form :model="form" label-position="left" label-width="80px">
|
|
|
- <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置:">
|
|
|
- <el-checkbox label="短信" v-model="checked"></el-checkbox>
|
|
|
- <el-checkbox label="邮件"></el-checkbox>
|
|
|
- <el-checkbox label="钉钉"></el-checkbox>
|
|
|
- <el-checkbox label="站内通知"></el-checkbox>
|
|
|
+ <div>
|
|
|
+ <el-form :model="form" label-position="left" label-width="80px">
|
|
|
+ <el-form-item :model="form.channelconfig" label="通道配置:">
|
|
|
+ <el-checkbox label="短信" v-model="checked"></el-checkbox>
|
|
|
+ <el-checkbox label="邮件"></el-checkbox>
|
|
|
+ <el-checkbox label="钉钉"></el-checkbox>
|
|
|
+ <el-checkbox label="站内通知"></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :model="form.personconfig" label="人员配置:">
|
|
|
+ <div style="display: flex; margin-right:30px;">
|
|
|
+ <el-checkbox label="指定用户:" v-model="checked2"></el-checkbox><span>
|
|
|
+ <el-select style="width: 80px;">
|
|
|
+ <el-option label="张三"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-checkbox label="操作账户"></el-checkbox>
|
|
|
+ <el-checkbox label="管理员"></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="margin-top:30px">
|
|
|
+ <el-tag>资产年限通知模板</el-tag>
|
|
|
+ <el-form-item :model="form.title" label="标题:">
|
|
|
+ <el-input class="input_title" v-model="title" placeholder="资产名称/年限提醒"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置:">
|
|
|
- <div style="display: flex; margin-right:30px;">
|
|
|
- <el-checkbox label="指定用户:" v-model="checked2"></el-checkbox><span>
|
|
|
- <el-select style="width: 80px;">
|
|
|
- <el-option label="张三"></el-option>
|
|
|
- </el-select>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <el-checkbox label="操作账户"></el-checkbox>
|
|
|
- <el-checkbox label="管理员"></el-checkbox>
|
|
|
+ <el-form-item :model="form.content" label="内容:">
|
|
|
+ <el-input class="input_content" v-model="content" placeholder="请输入内容"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-tag style="margin:20px 1160px 0 0">资产年限通知模板</el-tag>
|
|
|
- <el-form-item style="width: 350px;" :model="form.title" label="标题:">
|
|
|
- <el-input v-model="title" placeholder="资产名称/年限提醒"></el-input>
|
|
|
+ <el-form-item :model="form.messagePreview" label="消息预览:">
|
|
|
+ <el-input class="stylePreview" v-model="messagePreview"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item style="width: 500px;" :model="form.content" label="内容:">
|
|
|
- <el-input v-model="content" placeholder="请输入内容"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="width: 500px;" :model="form.messagePreview" label="消息预览:">
|
|
|
- <el-input v-model="messagePreview"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="bottom">
|
|
|
- <el-button>更新</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="bottom">
|
|
|
+ <el-button>更新</el-button>
|
|
|
</div>
|
|
|
-</template>
|
|
|
+</div></template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
@@ -53,9 +45,9 @@ export default {
|
|
|
radio: '1',
|
|
|
value1: '',
|
|
|
filterText: '',
|
|
|
- title:'',
|
|
|
- content:'',
|
|
|
- messagePreview:'',
|
|
|
+ title: '',
|
|
|
+ content: '',
|
|
|
+ messagePreview: '',
|
|
|
data: [{
|
|
|
label: '普通消息',
|
|
|
children: [{
|
|
@@ -101,76 +93,95 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.container {
|
|
|
- position: fixed;
|
|
|
- left: 218px;
|
|
|
- top: 77px;
|
|
|
- right: 16px;
|
|
|
- bottom: 20px;
|
|
|
- line-height: 20px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
-
|
|
|
- .left-pane {
|
|
|
- width: 300px;
|
|
|
- padding: 15px;
|
|
|
-
|
|
|
- .el-tree {
|
|
|
- height: 700px;
|
|
|
- margin-top: 15px;
|
|
|
- background-color: rgb(247, 245, 243);
|
|
|
- }
|
|
|
+.input_title{
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ width:500px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+.input_content{
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ width:500px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+.stylePreview{
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ width: 95%;
|
|
|
+ height: 300px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-form {
|
|
|
+ padding-left: 30px;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ padding-top: 20px;
|
|
|
+ margin-inline: 20px;
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
|
- .newInfo_button {
|
|
|
- position: absolute;
|
|
|
- left: -5px;
|
|
|
- bottom: 50px;
|
|
|
- width: 250px;
|
|
|
- background-color: rgb(131, 208, 243);
|
|
|
- text-align: center;
|
|
|
+ /deep/.el-form-item__label {
|
|
|
+ padding: 0;
|
|
|
font-size: 16px;
|
|
|
+ color: #4D4D4D;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox {
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-left: 50px;
|
|
|
|
|
|
+ /deep/.el-checkbox__label {
|
|
|
+ color: #4D4D4D;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .right-pane {
|
|
|
- width: 1340px;
|
|
|
- position: absolute;
|
|
|
- margin-left: 330px;
|
|
|
- top: 0;
|
|
|
- margin-right: 20px;
|
|
|
+ .el-cascader {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
|
|
|
- .el-form {
|
|
|
+ /deep/.el-input__suffix {
|
|
|
+ right: -80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-form-item {
|
|
|
- padding-top: 20px;
|
|
|
- margin-inline: 20px;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ .el-radio {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-form-item__label {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ .el-date-editor {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-form-item__content {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
+ /deep/.el-input__suffix {
|
|
|
+ right: -80px;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.el-tag {
|
|
|
- position: relative;
|
|
|
- background-color: transparent;
|
|
|
- border-color: transparent;
|
|
|
- font-size: 18px;
|
|
|
- color: #000;
|
|
|
- top: 20px;
|
|
|
- left: 20px;
|
|
|
+ .el-date-picker {
|
|
|
+ width: 450px;
|
|
|
+
|
|
|
+ /deep/.el-picker-panel__content {
|
|
|
+ width: 370px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .el-tag {
|
|
|
+ position: relative;
|
|
|
+ background-color: transparent;
|
|
|
+ border-color: transparent;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #4D4D4D;
|
|
|
+ right: 585px;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-button--text {
|
|
@@ -182,14 +193,13 @@ export default {
|
|
|
.el-button {
|
|
|
height: 30px;
|
|
|
width: 100px;
|
|
|
- margin-top: 20px;
|
|
|
- margin-inline: 40px;
|
|
|
- padding: 5px;
|
|
|
+ padding: 3px;
|
|
|
+ color: #fff;
|
|
|
+ background: #3da0d6;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
position: absolute;
|
|
|
- left: 450px;
|
|
|
- top: 700px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ left: 900px;
|
|
|
+ bottom: 15px;
|
|
|
+}</style>
|