Skip to content
GitLab
Commit 178009f4 authored by sunxin's avatar sunxin
Browse files

Merge branch '4.7.0' of https://gitee.com/sunxinone/MCMS.git into 4.7.0

parents 7fbb94f5 28f9a324
Expand all Hide whitespace changes
Inline Side-by-side
src/main/webapp/WEB-INF/manager/include/head-file.ftl
View file @ 178009f4
......@@ -7,6 +7,9 @@
<link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_974973_42u7cwycwta.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
<!--自定义模型-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_997125_lflqkedj6s9.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
......@@ -43,12 +46,20 @@
ms.manager = "${managerPath}";
ms.web = ms.base;
// ms.base = "http://192.168.0.54:85";
// ms.manager = "http://192.168.0.54:85/apis/ms";
// ms.web = "http://192.168.0.54:85/apis";
// ms.base = "http://192.168.0.54:82";
// ms.manager = "http://192.168.0.54:82/apis/ms";
// ms.web = "http://192.168.0.54:82/apis";
//图片懒加载
Vue.use(VueLazyload, {
error: ms.base + '/images/ic_image_deault.png',
loading: ms.base + '/images/ic_image_deault.png',
})
})
// 测试使用 ==> 微信其他接口走之前需要先走这个接口
ms.http.get(ms.manager + "/mweixin/11/function.do")
.then((res) => {
console.log('微信登录接口', true);
}, (err) => {
console.log(err)
})
</script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl 0 → 100644
View file @ 178009f4
This diff is collapsed.
src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl 0 → 100644
View file @ 178009f4
<link rel="stylesheet" href="../../../static/mdiy/css/model-list.css">
<div id="model-list" class="ms-mdiy-model-list" v-if="href == '列表'">
<el-container>
<el-header class="ms-header" height="50px">
<el-row>
<el-button size="small" icon="el-icon-plus" type="primary">保存</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
</el-row>
</el-header>
<el-container>
<el-header class="ms-tr ms-header">
<el-select v-model="value" placeholder="请选择" size="small">
</el-select>
<el-button size="small" icon="el-icon-search" type="primary">查询</el-button>
</el-header>
<el-main>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="规则名">
<template slot-scope="scope">
<el-button type="text" v-text="scope.row.data" @click="href='表单'"></el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="发送对象">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
<script>
var modelListVue = new Vue({
el: "#model-list",
data: {
value: "", //
tableData: [{
data: '项目玩法',
name: '王小虎',
}, {
data: '综合评估',
name: '王小虎',
}, {
data: '产权出售',
name: '王小虎',
}, {
data: '兵不匹配移动端',
name: '王小虎',
}],
href: '列表', //切换页面
addInputType: {}, //添加中的表单项
},
watch: {
href: function(data) {
var that = this;
if(data == '表单') {
this.$nextTick(function() {
new Sortable(document.getElementById("ms-type-list"), {
group: {
name: 'shared',
pull: 'clone',
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
},
animation: 150,
sort: false,
onStart: function(event) {
//准备拖动时保存拖动选项的数据
that.addInputType = {
type: event.item.dataset.type,
title: event.item.dataset.title,
downList: [], //下拉列表
downActiveList: [], //多选列表
set: [], //设置
unit: '', //金额单位
fieldType: '', //字段类型
};
},
});
new Sortable(document.getElementById("ms-input-list"), {
group: {
name: 'shared',
pull: false,
ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
},
animation: 150,
onAdd: function(event) {
//拖动成功后删除拖动过来的元素
event.item.parentNode.removeChild(event.item);
//想素组添加拖动过来的选项选项
modelFormVue.formItemList.splice(event.newIndex, 0, that.addInputType);
},
});
})
}
}
},
methods: {},
})
</script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mdiy/diy.ftl 0 → 100644
View file @ 178009f4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--#include virtual="../include/head-file.ftl" -->
</head>
<body>
<!--#include virtual="diy-model/index.ftl" -->
<!--#include virtual="diy-model/form.ftl" -->
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/menu.ftl
View file @ 178009f4
......@@ -16,9 +16,9 @@
<el-menu class="ms-admin-menu-menu" default-active="0-0">
<template v-for="(menu,i) in menuList">
<!--单个选项-->
<el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title"></el-menu-item>
<el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title" class="ms-admin-menu-menu-item"></el-menu-item>
<!--多个选项-->
<el-submenu :index="i+''" v-if="menu.sub">
<el-submenu :index="i+''" v-if="menu.sub" class="ms-admin-submenu">
<template slot="title">
<span v-text="menu.title"></span>
</template>
......
src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
View file @ 178009f4
<!-- 自定义菜单 -->
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css" />
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
<el-container class="ms-custom-container">
<el-header class="ms-header" height="50px">
<el-row>
<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
</el-row>
</el-header>
<el-container class="ms-container">
<el-aside>
<el-container>
<el-header>公众号</el-header>
<el-main></el-main>
<el-footer>
<el-button icon="el-icon-date"></el-button>
<div class="ms-create-menu">
<div class="ms-create-sub-menu">
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
</div>
<el-button icon="el-icon-plus"></el-button>
</div>
</el-footer>
</el-container>
</el-aside>
<el-main>
<el-card class="custom-menu-card" shadow="never">
<div slot="header" class="clearfix">
<span>新建菜单</span>
</div>
<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
<el-input v-model="customMenuForm.name" size='mini'></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item>
<el-form-item label="菜单内容" class="ms-custom-menu-content">
<el-tabs v-model="activeName" @tab-click="">
<el-tab-pane label="图片" name="picture">
<span slot="label">
<i class="el-icon-picture"></i>图片</span>
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图片</span>
</div>
</el-tab-pane>
<el-tab-pane label="图文管理" name="article">
<span slot="label">
<i class="el-icon-picture"></i>图文管理</span>
</el-tab-pane>
</el-tabs>
</el-form-item>
</el-form>
</el-card>
</el-main>
</el-container>
</el-container>
<el-container class="ms-custom-container">
<el-header class="ms-header" height="50px">
<el-row>
<el-button type="danger" size="small" icon="el-icon-delet" @click='menuDel'>删除</el-button>
<el-button size="small" @click="menuSort">菜单排序</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh" @click='resetForm'>重置</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuSave'>保存</el-button>
<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuCreate'>发布菜单</el-button>
</el-row>
</el-header>
<el-container class="ms-container">
<el-aside>
<el-container>
<el-header>公众号</el-header>
<el-main></el-main>
<el-footer>
<el-button icon="el-icon-date"></el-button>
<div class="ms-create-menu">
<div class="ms-create-sub-menu" v-for="(menu,index) of mainMenuList" :key="index">
<!-- 父菜单 -->
<el-button type="primary" @click="openSubMenu(index,menu);menu.addSubMenuShow = !menu.addSubMenuShow;$forceUpdate()">{{
menu.menuTitle }}</el-button>
<div class="sub-menu-list" v-show="menu.addSubMenuShow">
<!-- 子菜单 -->
<el-button v-for="(sub,index) of currentSubMenuList" :key="index" v-text="sub.menuTitle" class="sub-menu-item"
@click='customMenuForm = sub;$forceUpdate();'></el-button>
<!-- 添加子菜单的加号按钮 -->
<el-button icon="el-icon-plus" class="ms-create-btn" @click="addSubMenu"></el-button>
</div>
</div>
<!-- 添加父菜单的加号按钮 -->
<el-button icon="el-icon-plus" @click="addMenu" v-show="addMenuBtn && mainMenuList.length<3" class="add-menu"></el-button>
</div>
</el-footer>
</el-container>
</el-aside>
<el-main>
<el-card class="custom-menu-card" shadow="never">
<div slot="header" class="clearfix">
<span v-text="customMenuForm.menuId ? '修改菜单' : '新建菜单'"></span>
</div>
<el-form ref="customMenuForm" :rules="customMenuFormRules" :model="customMenuForm" label-width="81px">
<el-form-item label="菜单名称" prop="menuTitle" class="ms-custom-menu-name">
<el-input v-model="customMenuForm.menuTitle" size="medium"></el-input>
<span>菜单名称字数不多于5个汉字或10个字母</span>
</el-form-item>
<el-form-item label="菜单内容" class="ms-custom-menu-content" prop='menuUrl'>
<el-input v-model="customMenuForm.menuUrl" size="medium"></el-input>
<span>请输入菜单地址</span>
<!-- <el-tabs v-model="activeName" @tab-click="">
<el-tab-pane label="图片" name="picture">
<span slot="label">
<i class="el-icon-picture"></i>图片</span>
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图片</span>
</div>
</el-tab-pane>
<el-tab-pane label="图文管理" name="article">
<span slot="label">
<i class="el-icon-picture"></i>图文管理</span>
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图文</span>
</div>
</el-tab-pane>
</el-tabs> -->
</el-form-item>
</el-form>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
<script>
var customMenuVue = new Vue({
el: "#custom-menu",
data: {
customMenuForm: {
name: '',
},
customMenuFormRules: {
name: [{
required: true,
message: '请输入菜单名称',
trigger: ['blur', 'change']
},
{
min: 1,
max: 5,
message: '长度在 1 到 5 个字符',
trigger: ['blur', 'change']
}
],
},
addSubMenuShow: false, //子菜单添加弹窗
activeName: 'picture'
},
methods: {
}
})
var customMenuVue = new Vue({
el: "#custom-menu",
data: {
customMenuForm: {
menuTitle: "",
menuUrl: "",
menuId: "",
menuMenuId: "", //父菜单编号
menuStatus: "", //菜单状态 0：不启用 1：启用
menuStyle: "", //类型：1文本 2图文 4外链接
menuType: "", //菜单属性 0:链接 1:回复
},
customMenuFormRules: {
menuTitle: [{
required: true,
message: "请输入菜单名称",
trigger: ["blur", "change"]
},
{
min: 1,
max: 5,
message: "长度在 1 到 5 个字符",
trigger: ["blur", "change"]
}
],
menuUrl: [{
required: true,
message: '请输入菜单地址',
trigger: 'change'
}, {
validator: function (rule, value, callback) {
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
callback() : callback('链接不合法')
}
}]
},
addMenuBtn: true, //添加菜单按钮
activeName: "picture", //导航切换 当前激活面板
mainMenuList: [],
subMenuList: [], //所有的子菜单
currentSubMenuList: [], //打开当前父菜单的子菜单列表
currentMenuMenuId: '', //打开当前父菜单的菜单ID
},
methods: {
menuList: function () {
var that = this;
ms.http.get(ms.manager + "/mweixin/menu/list.do")
.then((res) => {
console.log('res菜单', res);
that.mainMenuList = []
that.subMenuList = []
res.rows && res.rows.forEach(function (item, index) {
item.menuMenuId == null && that.mainMenuList.push(item)
item.menuMenuId != null && that.subMenuList.push(item)
})
// 初始化显示第一个菜单
if(that.mainMenuList.length){
that.customMenuForm = that.mainMenuList[0]
}else{
that.mainMenuList.push(that.customMenuForm)
// 没有一个菜单的时候
that.mainMenuList[0].menuTitle = '新建菜单'
}
}, (err) => {
console.log(err)
})
},
// 菜单排序
menuSort: function () {
event.target.innerText = "完成";
},
// 添加菜单
addMenu: function () {
this.mainMenuList.push({
menuTitle: "新建菜单"
});
this.$nextTick(function () {
var that = this;
Array.prototype.forEach.call(
document.querySelectorAll(".ms-create-sub-menu"),
function (item, index) {
item.style.width = '80px';
}
);
document.querySelector(".add-menu").style.width = '80px';
});
if (this.mainMenuList.length == 3) {
return (this.addMenuBtn = false);
}
},
// 添加子菜单
addSubMenu: function () {
if(!this.currentMenuMenuId){
return this.$message.error("创建子菜单前，必须先创建父菜单");
}
if (this.currentSubMenuList.length > 4) {
return this.$message.error("子菜单最多5项");
}
var that = this;
console.log('that.currentMenuMenuId', that.currentMenuMenuId);
this.currentSubMenuList.push({
menuTitle: "新建子菜单",
menuMenuId: that.currentMenuMenuId,
});
console.log('currentSubMenuList', this.currentSubMenuList);
},
openSubMenu(index, menu) {
console.log('menu', menu);
var that = this;
that.customMenuForm = menu
that.closeAllSubMenu(index);
that.currentSubMenuList = [];
that.currentMenuMenuId = menu.menuId;
console.log('that.subMenuList', that.subMenuList);
that.subMenuList.forEach(function (item, index) {
item.menuMenuId == menu.menuId && that.currentSubMenuList.push(item)
})
},
// 关闭所有的子菜单弹出层
closeAllSubMenu: function (num) {
// 确保当前的菜单不被重置成false
this.mainMenuList.forEach(function (item, index) {
num != index && (item.addSubMenuShow = false)
})
},
// 保存菜单
menuSave: function () {
// 表单校验
var that = this;
this.$refs.customMenuForm.validate(function (ispass, object) {
if (ispass) {
// 判断保存的菜单类型，这里先简单处理，写死
that.customMenuForm.menuStatus = 1
that.customMenuForm.menuStyle = 4 //类型：1文本 2图文 4外链接
that.customMenuForm.menuType = 0 //菜单属性 0:链接 1:回复
ms.http.post(ms.manager + "/mweixin/menu/save.do", that.customMenuForm)
.then(function (res) {
that.customMenuForm.menuStatus = that.customMenuForm.menuStyle = that.customMenuForm.menuType = ''
if(res.menuId){
that.$message.success('菜单保存成功')
that.menuList();
}else{
that.$message.error(res.resultMsg)
}
}, function (err) {
console.log(err)
})
}
})
},
// 删除菜单
menuDel: function () {
var that = this;
// 当存在子菜单的时候，不得删除菜单
if(that.customMenuForm.menuMenuId == null && that.currentSubMenuList.length){
return that.$message.error('当前菜单存在子菜单，不得删除')
}
if(!that.customMenuForm.menuId){
return that.$message.error('请新建菜单之后，再进行删除')
}
this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ms.http.post(ms.manager + "/mweixin/menu/delete.do", {
ids: that.customMenuForm.menuId
})
.then(function (res) {
that.$message({
type: 'success',
message: '删除成功!'
});
// 清空表单值
that.resetForm();
// 刷新菜单列表
that.menuList();
}, function (err) {
console.log(err)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
// 发布菜单
menuCreate: function () {
var that = this;
this.$confirm('此操作将发布公众号菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ms.http.get(ms.manager + "/mweixin/menu/create.do")
.then(function (res) {
if(res.result){
that.$message({
type: 'success',
message: '发布成功!，菜单将于2小时后生效'
});
}else{
that.$message({
type: 'error',
message: '发布失败！'
});
}
}, function (err) {
console.log(err)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
// 重置
resetForm:function(){
// this.$refs.customMenuForm.resetFields();未在表单中，清空不了
this.customMenuForm.menuStatus =
this.customMenuForm.menuStyle =
this.customMenuForm.menuType =
this.customMenuForm.menuTitle =
this.customMenuForm.menuUrl =
''
}
},
mounted: function () {
this.menuList();
},
});
</script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/menu/new-pic-form.ftl
View file @ 178009f4
......@@ -4,11 +4,7 @@
<el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
<el-form :model="newPicForm">
<el-form-item label="上传图片" label-width="100px">
<el-upload
class="new-pic-upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="picList"
<el-upload class="new-pic-upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="picList"
list-type="picture">
<el-button size="small" type="primary">本地上传</el-button>
<div slot="tip" class="el-upload__tip">
......@@ -16,12 +12,22 @@
<dt>注意：1.图片上传仅支持bmp、png、jpeg、jpg、gif格式</dt>
<dd>2.同步至微信公众平台的图片最大2M,存在铭飞本地，最大支持5M的图片</dd>
</dl>
</div>
</el-upload>
</el-upload>
</el-form-item>
<el-form-item label="选择分组" label-width="100px">
<el-button icon='el-icon-plus' size='mini'>添加分组</el-button>
<el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
<el-form label-width="81px" :model="groupForm" ref="groupForm" :rules='groupRule'>
<el-form-item label="创建分组" prop='name'>
<el-input v-model="groupForm.name" size='mini'></el-input>
</el-form-item>
<div class="dialog-footer" style="float:right">
<el-button @click="cancel" size='mini'>取消</el-button>
<el-button type="primary" @click="saveGroup" size='mini'>确定</el-button>
</div>
</el-form>
<el-button slot="reference" icon='el-icon-plus' size='mini'>添加分组</el-button>
</el-popover>
<el-select v-model="selectedOption" placeholder="请选择分组" size='mini'>
<el-option v-for="item in picGroup" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......@@ -35,40 +41,73 @@
</el-dialog>
</div>
<script>
var newPicFormVue = new Vue({
el: '#new-pic-form',
data: {
isShow: false,
newPicForm: {
var newPicFormVue = new Vue({
el: '#new-pic-form',
data: {
isShow: false,
newPicForm: {
},
picGroup: [{
value: 'default',
label: '默认分组'
}, {
value: 'yun',
label: '云创'
},
{
value: 'pm',
label: 'PM管理系统'
}],
selectedOption:'',//被选中的选项
picList:[],//图片列表
},
methods: {
// 表单打开
open: function () {
this.isShow = true;
picGroup: [{
value: 'default',
label: '默认分组'
}, {
value: 'yun',
label: '云创'
},
{
value: 'pm',
label: 'PM管理系统'
}
],
selectedOption: '', //被选中的选项
picList: [], //图片列表
popoverShow: false,
groupForm: { //创建分组
name: ''
},
// 规则
groupRule: {
name: [{
required: true,
message: '请输入分组名称',
trigger: ['blur', 'change']
},
{
min: 1,
max: 5,
message: '长度在 1 到 5 个字符',
trigger: ['blur', 'change']
}
]
}
},
// 图片刚加载完
handlePreview:function(){
methods: {
// 表单打开
open: function () {
this.isShow = true;
},
// 图片刚加载完
handlePreview: function () {
},
// 图片删除
handleRemove:function(){
},
// 图片删除
handleRemove: function () {
},
saveGroup: function () {
var that = this;
that.$refs.groupForm.validate(function (pass, object) {
if (pass) {
// 校验成功
}
})
},
cancel: function () {
this.popoverShow = false
this.$refs.groupForm.resetFields()
},
},
},
})
})
</script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl
View file @ 178009f4
......@@ -24,15 +24,52 @@
<i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
<div class="footer">
<i class="el-icon-star-off"></i>
<a>插入超链接</a>
<!-- 插入超链接 -->
<el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
<el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
<el-form-item label="文本内容" prop='text'>
<el-input v-model="hyperlinkForm.text" size='mini'></el-input>
</el-form-item>
<el-form-item label="链接地址" prop='link'>
<el-input v-model="hyperlinkForm.link" size='mini'></el-input>
</el-form-item>
<el-form-item style="margin:0">
<el-row type='flex' justify='end'>
<el-col span='6'>
<el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
</el-col>
<el-col span='6'>
<el-button @click="cancelLink" size='mini'>取消</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<a slot="reference">插入超链接</a>
</el-popover>
</div>
</el-form-item>
</el-form>
</el-form>
</el-tab-pane>
<el-tab-pane label="图片" name="picture">
<el-tab-pane label="图片" name="picture" class="message-reply-picture">
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图片</span>
</div>
</el-tab-pane>
<el-tab-pane label="图文" name="article">
<el-tab-pane label="图文" name="article" class="message-reply-article">
<div onclick="materialBankFormVue.open()">
<i class="el-icon-picture-outline"></i>
<span>从素材库选择</span>
</div>
<div onclick="newPicFormVue.open()">
<i class="el-icon-plus"></i>
<span>新建图文</span>
</div>
</el-tab-pane>
</el-tabs>
</em-main>
......@@ -61,9 +98,54 @@
],
},
activeName: 'text',
// 超链接
hyperlinkForm: {
text: "",
link: "",
},
hyperlinkRule: {
text: [{
required: true,
message: '请输入超链接显示的文本内容',
trigger: 'blur'
},
{
min: 1,
max: 50,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
}
],
link: [{
required: true,
message: '请输入超链接地址',
trigger: 'change'
}, {
validator: function(rule, value, callback) {
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
callback() : callback('链接不合法')
}
}],
},
popoverShow: false, //弹出层显示与否的状态值
},
methods: {
// 保存超链接
saveLink: function() {
var that = this;
that.$refs.hyperlinkForm.validate(function(boolean, object) {
if(boolean) {
// 校验成功
that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>`
that.cancelLink()
}
})
},
// 取消超链接
cancelLink: function() {
this.$refs.hyperlinkForm.resetFields();
this.popoverShow = false
},
}
})
......
src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl
View file @ 178009f4
......@@ -5,25 +5,28 @@
<!--右侧头部-->
<el-header class="ms-header" height="50px">
<el-row>
<!-- 添加隐藏按钮，主要是为了产生间距 -->
<el-button size="small" type="text"></el-button>
<el-button class="ms-fr" size="small" icon="el-icon-arrow-left" @click="menuVue.menuActive = '关键词回复'">返回</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">更新</el-button>
<el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
</el-row>
</el-header>
<el-container class=" ms-container">
<el-container class="ms-container">
<el-aside width="280px">
<!-- 主图文章 -->
<div class="ms-main-article">
<img :src="mainArticle.basicPic ||　ms.base+'/WEB-INF/manager/images/data/article-default.png'">
<div class="ms-main-article" @click='openMainArticle'>
<img :src="mainArticle.thumbnailUrl ||　ms.base+'/WEB-INF/manager/images/article-default.png'">
<div class="ms-article-mask"></div>
<span v-text='mainArticle.basicTitle'></span>
</div>
<draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='addOrUpdateSubArticle(element)'>
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='updateSubArticle(element,index)'>
<p>
<span v-text='element.basicTitle'></span>
</p>
<img :src='element.basicThumbnails'>
<img :src="element.basicThumbnails ||　ms.base+'/WEB-INF/manager/images/article-default-thumb.jpg'">
<div class="ms-article-item-mask"><i class="el-icon-delete" @click='subArticleList.splice(index,1)'></i></div>
</div>
</draggable>
<div class="ms-article-footer">
......@@ -43,9 +46,9 @@
:data={uploadFloderPath:"/mweixin/news"}
>
<div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
<i class="el-icon-delete" @click="thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
<i class="el-icon-delete" @click="articleForm.thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
</div>
<img v-if="thumbnailShow" :src="thumbnailUrl"
<img v-if="thumbnailShow" :src="articleForm.thumbnailUrl"
class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
<template v-else>
<i class="el-icon-picture"></i>
......@@ -54,12 +57,12 @@
</el-upload>
<el-form label-width='40px'>
<el-form-item label="标题" prop="">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('basicTitle',64)">
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.self="resetWordNum('basicTitle',64)">
<span slot='suffix' v-text="titleWordNumber+'/64'"></span>
</el-input>
</el-form-item>
<el-form-item label="作者" prop="">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('articleAuthor',8)">
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.self="resetWordNum('articleAuthor',8)">
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
</el-input>
</el-form-item>
......@@ -84,8 +87,12 @@
el: '#article',
data: {
mainArticle: {
basicPic: '', //主图
basicTitle: '', //标题
articleAuthor: '', //作者
basicDescription: '', //摘要
articleContent: '', //正文
basicThumbnails:'',//上传封面图片的url
thumbnailUrl:'',//缩略图全路径
},
defaultMainArticle:'',//拷贝主图信息
subArticleList: [],// 子文章列表
......@@ -99,10 +106,13 @@
articleAuthor: '', //作者
basicDescription: '', //摘要
articleContent: '', //正文
basicThumbnails:'',//上传封面图片的url
thumbnailUrl:'',//缩略图全路径
},
// 文章素材，包括主图文，子图文
articleList:[],
defaultArticleForm:'',//拷贝表单值
thumbnailShow:false,//显示缩略图
thumbnailUrl:'',//缩略图路径
headMask:false,//缩略图删除
uploadDisable:false,//是否禁止上传
newsCategoryId:'',//微信分类编号
......@@ -110,13 +120,24 @@
watch:{
articleForm:{
handler:function(n,o){
this.mainArticle.basicTitle = n.basicTitle
this.articleList.length || (this.mainArticle.basicTitle = n.basicTitle)
console.log('n文章',n);
},
deep:true,
},
editorCurrentContent:{
handler:function(n,o){
console.log('n文章',n);
this.articleForm.articleContent = n
},
deep:true,
},
mainArticle:{
handler:function(n,o){
console.log('n文章444444444444444',n);
},
deep:true,
},
editorCurrentContent:function(n,o){
}
},
methods: {
open:function(material){
......@@ -135,37 +156,68 @@
// 图片上传成功函数
basicPicSuccess:function(url){
this.thumbnailShow = this.uploadDisable = true
this.thumbnailUrl = ms.web + url
this.mainArticle.basicPic = this.thumbnailUrl
this.mainArticle.thumbnailUrl = this.articleForm.thumbnailUrl = ms.web + url
this.articleForm.basicThumbnails = url
},
// 添加文章
addArticle: function() {
console.log('this.articleForm1111111',this.articleForm);
if(this.subArticleList.length > 6) {
this.$notify({
return this.$notify({
title: '添加失败',
message: '最大图文数量为7',
type: 'warning'
});
return;
}
// 将主图文单独存于数组中
if(!this.articleList.length){
this.mainArticle = this.articleForm
}
console.log('this.articleForm99999999999999',this.articleForm);
// 清空百度编辑器
this.editor.setContent('')
// 将左侧表单的内容存放到数组中
this.articleList.push(this.articleForm)
// 清空表单
console.log('this.articleForm',this.articleForm);
console.log('this.articleList',this.articleList);
this.articleForm = {
basicTitle: '',
articleAuthor: '',
basicDescription: '',
articleContent: '',
basicThumbnails:'',
thumbnailUrl:'',
}
this.thumbnailShow = false //显示上传图标
this.subArticleList.push({
basicTitle: '新增文章标题',
basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
basicTitle: '',
articleAuthor: '',
basicDescription: '',
articleContent: '',
basicThumbnails:'',
thumbnailUrl:'',
})
},
// 更新或修改子文章
addOrUpdateSubArticle:function(element){
if(element.articleBasicId>0){
}
// 打开修改子文章
updateSubArticle:function(element,index){
this.articleForm = element
},
// 打开 主文章
openMainArticle:function(){
this.thumbnailShow = true //显示上传图标
this.articleForm = this.mainArticle
},
// 计算剩余字数
resetWordNum: function(type,limit) {
var target = event.target
type.indexOf('Title') > -1 ? this.titleWordNumber = limit - event.target.value.length : this.authorWordNumber = limit - event.target.value.length
if(event.target.value.length >= limit){
this.$message.error('超出字数限制，请输入不超过'+limit+'字符');
this.$nextTick(function(){
this.articleForm[type] = event.target.value.slice(0,limit);
// 这里的event的type是message
this.articleForm[type] = target.value.slice(0,limit-1);
console.log('this.articleForm[type]',this.articleForm[type]);
})
}
},
......@@ -188,10 +240,10 @@
that.$message.error(err);
})
},
// 表单重置
// 表单重置 新建和修改场景
resetForm:function(material){
this.thumbnailShow = material ? true : false
this.thumbnailUrl = material ? material.newsArticle.basicPic : ''
this.articleForm.thumbnailUrl = material ? material.newsArticle.basicPic : ''
this.mainArticle.basicPic = material ? material.newsArticle.basicPic : ''
this.mainArticle.basicTitle = material ? material.newsArticle.basicTitle : ''
......@@ -206,7 +258,7 @@
this.subArticleList = material ? material.articleList : [];
this.$forceUpdate();
}
},
},
mounted: function() {
let that = this;
......
src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl
View file @ 178009f4
......@@ -12,7 +12,7 @@
</el-header>
<el-container>
<!--内容头部-->
<el-header class="ms-tr ms-header">
<el-header class="ms-tr ms-header ms-header-select">
<el-select v-model="value1" placeholder="请选择" size="small">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......
src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl
View file @ 178009f4
<!--图文素材页-->
<!--图片素材页-->
<link rel="stylesheet" href="../../../static/mweixin/css/picture-list.css">
<div id="picture-list-vue" v-if="menuVue.menuActive == '图片'" class="ms-weixin-content">
<el-container class="ms-admin-picture">
<!--右侧头部-->
<el-header class="ms-header" height="50px">
<el-row>
<el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
<el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
<el-button class="ms-fr" size="small">同步微信素材</el-button>
</el-row>
</el-header>
<el-container>
<!--内容头部-->
<el-header class="ms-tr ms-header">
<el-select v-model="value1" placeholder="请选择" size="small">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择" size="small">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
</el-header>
<!--素材列表-->
<el-main class="ms-admin-picture-list">
<el-container>
<el-aside class="ms-admin-picture-item">
<div v-for="picture in pictureList">
<div class="body">
<img :src="picture.img" />
<div>
<input type="checkbox" />
<span v-text="picture.title"></span>
</div>
</div>
<div class="footer">
<i class="el-icon-edit"></i>
<em></em>
<i class="el-icon-download"></i>
<em></em>
<i class="el-icon-delete"></i>
</div>
</div>
</el-aside>
<el-main class="ms-admin-picture-show">
<span>全部图片（6）</span>
<div>
<span>小米（1）</span>
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</div>
<div>
<span>小米（1）</span>
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</div>
<p>
<i class="el-icon-plus"></i>新建分组</p>
</el-main>
</el-container>
<el-container class="ms-admin-picture">
<!--右侧头部-->
<el-header class="ms-header" height="50px">
<el-row>
<el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
<el-button size="small" icon="el-icon-refresh" class="ms-fr">刷新</el-button>
<el-button size="small" class="ms-fr">同步微信素材</el-button>
</el-row>
</el-header>
<el-container>
<!--内容头部-->
<el-header class="ms-tr ms-header ms-header-select">
<el-select v-model="value1" placeholder="请选择" size="small">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择" size="small">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
</el-header>
<!--素材列表-->
<el-main class="ms-admin-picture-list">
<el-container>
<el-aside class="ms-admin-picture-item">
<div v-for="picture in pictureList">
<div class="body">
<img :src="picture.img" />
<div>
<input type="checkbox" />
<span v-text="picture.title"></span>
</div>
</div>
<div class="footer">
<i class="el-icon-edit"></i>
<em></em>
<i class="el-icon-download"></i>
<em></em>
<i class="el-icon-delete"></i>
</div>
</div>
</el-aside>
<el-main class="ms-admin-picture-show">
<span>全部图片（6）</span>
<div>
<span>小米（1）</span>
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</div>
<div>
<span>小米（1）</span>
<i class="el-icon-edit"></i>
<i class="el-icon-delete"></i>
</div>
<p>
<i class="el-icon-plus"></i>新建分组</p>
</el-main>
</el-container>
</el-main>
</el-container>
</el-container>
</el-main>
</el-container>
</el-container>
</div>
<script>
new Vue({
el: "#picture-list-vue",
data: {
options1: [{
value: '全部图片',
label: '全部图片'
}],
options2: [{
value: '全部图片',
label: '全部图片'
}],
value1: '全部图片',
value2: '',
pictureList: [{
date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '../images/data/ms-bg_1.jpg',
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
},
{
date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '../images/data/ms-bg_1.jpg',
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
}
],
},
methods: {},
mounted: function() {}
})
new Vue({
el: "#picture-list-vue",
data: {
options1: [{
value: '全部图片',
label: '全部图片'
}],
options2: [{
value: '全部图片',
label: '全部图片'
}],
value1: '全部图片',
value2: '',
pictureList: [{
date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '../images/data/ms-bg_1.jpg',
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
},
{
date: '12月27日',
title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
img: '../images/data/ms-bg_1.jpg',
det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
}
],
},
methods: {},
mounted: function () {}
})
</script>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl
View file @ 178009f4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- <#include "/include/head-file.ftl"/> -->
<!--#include virtual="../include/head-file.ftl" -->
</head>
<body>
<!--#include virtual="menu.ftl" -->
<!--#include virtual="metarial/index.ftl" -->
<!--#include virtual="metarial/form.ftl" -->
<!--#include virtual="picture/index.ftl" -->
<!--#include virtual="keyword/index.ftl" -->
<!--#include virtual="keyword/form.ftl" -->
<!--#include virtual="menu/index.ftl" -->
<!--#include virtual="menu/new-pic-form.ftl" -->
<!--#include virtual="menu/material-bank-form.ftl" -->
<!--#include virtual="message/index.ftl" -->
</body>
</html>
<script>
// 测试使用 ==> 微信其他接口走之前需要先走这几个接口
(function(){
ms.http.get(ms.manager + "/mweixin/11/function.do")
.then((res)=>{
console.log('res',true);
}, (err) => {
console.log(err)
})
})()
</script>
\ No newline at end of file
<head>
<meta charset="UTF-8">
<title></title>
<!-- <#include "/include/head-file.ftl"/> -->
<!--#include virtual="../include/head-file.ftl" -->
</head>
<body>
<!--#include virtual="menu.ftl" -->
<!--#include virtual="metarial/index.ftl" -->
<!--#include virtual="metarial/form.ftl" -->
<!--#include virtual="picture/index.ftl" -->
<!--#include virtual="keyword/index.ftl" -->
<!--#include virtual="keyword/form.ftl" -->
<!--#include virtual="menu/index.ftl" -->
<!--#include virtual="menu/new-pic-form.ftl" -->
<!--#include virtual="menu/material-bank-form.ftl" -->
<!--#include virtual="message/index.ftl" -->
</body>
</html>
\ No newline at end of file
src/main/webapp/static/mdiy/css/model-form.css 0 → 100644
View file @ 178009f4
/*
*这里的值严格按照UI设计图标注值来进行设置
*/
/*
*颜色
*/
/*
*页面的边距
*/
/*
*字体
*/
/*
*头像
*/
/*
* 按钮
*/
/*
*对常见的多行样式进行了方法封装，方便调用，加快开发效率
*/
html,
body {
min-height: 100vh;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;
font-weight: initial !important;
font-size: 14px !important;
color: #333 !important;
}
html *,
body * {
text-decoration: none !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.ms-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ms-align-center {
display: flex;
align-items: center;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track {
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: #eee;
/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px;
background: #fff;
}
.ms-header {
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
background: #fff;
height: 50px;
}
.ms-header button {
height: 30px;
}
.ms-pagination {
padding: 20px 0;
text-align: right;
}
.ms-fr {
float: right;
}
.ms-tr {
text-align: right;
}
.ms-weixin-content {
width: calc(100% - 140px);
}
.ms-weixin-dialog .el-dialog__header {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
cursor: pointer;
}
.ms-hover:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.sortable-ghost {
opacity: 0.3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.sortable-ghost * {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.ms-mdiy-model-form {
width: 100vw;
height: 100vh;
}
.ms-mdiy-model-form .el-container {
height: 100%;
}
.ms-mdiy-model-form .ms-row button {
margin-left: 10px;
}
.ms-mdiy-model-form .ms-header-title {
margin-bottom: 15px;
}
.ms-mdiy-model-form .el-checkbox-group {
font-size: inherit !important;
}
.ms-mdiy-model-form .ms-editor-type-layout {
background: #fff;
min-width: 15%;
padding: 20px;
border-right: 1px solid #e6e6e6;
}
.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li {
width: calc(50% - 5px);
margin: 0 0 5px 0;
padding: 5px;
list-style: none;
background: #E6F7FF;
border: 1px solid #e6e6e6;
cursor: pointer;
}
.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li i {
font-weight: initial;
font-size: 1em;
color: #999;
margin: 0 5px;
}
.ms-mdiy-model-form .ms-editor-body-layout {
background: #fff;
margin: 8px;
}
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item {
padding: 6px 20px 6px 20px;
border: 1px solid transparent;
}
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input {
width: calc(100% - 41px) !important;
}
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content {
display: flex;
align-items: flex-start;
}
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content .del-but {
visibility: hidden;
padding-left: 20px;
margin-left: auto;
}
.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-radio {
line-height: inherit;
}
.ms-mdiy-model-form .ms-editor-body-layout .active {
border-color: #0099ff;
}
.ms-mdiy-model-form .ms-editor-body-layout .active .del-but {
visibility: visible !important;
}
.ms-mdiy-model-form .ms-editor-body-layout .sortable-ghost {
margin-bottom: 18px;
min-height: 40px;
}
.ms-mdiy-model-form .ms-editor-attr-layout {
background: #fff;
min-width: 20%;
display: flex;
flex-wrap: wrap;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-header-title {
border-left: 1px solid #e6e6e6;
width: 100%;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr {
width: 100%;
display: flex;
flex-direction: column;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form {
padding: 15px;
height: calc(100vh - 200px);
overflow: auto;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item__label {
line-height: 1.4em;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item {
margin-bottom: 14px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item .input-with-select .el-input-group__append {
width: 90px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item .input-with-select .el-input-group__append .el-input input {
background-color: #fff;
border-top: 1px solid #dcdfe6;
border-bottom: 1px solid #dcdfe6;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list {
margin: 0;
padding: 0;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li {
display: flex;
align-items: center;
list-style: none;
margin-bottom: 12px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i {
cursor: pointer;
font-size: 14px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-input,
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-radio,
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .icon-tuodong {
margin-right: 6px;
line-height: initial;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus {
cursor: pointer;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i {
margin-right: 6px;
}
.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .footer {
margin-top: auto;
border-top: 1px solid #e6e6e6;
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
}
src/main/webapp/static/mdiy/css/model-list.css 0 → 100644
View file @ 178009f4
/*
*这里的值严格按照UI设计图标注值来进行设置
*/
/*
*颜色
*/
/*
*页面的边距
*/
/*
*字体
*/
/*
*头像
*/
/*
* 按钮
*/
/*
*对常见的多行样式进行了方法封装，方便调用，加快开发效率
*/
html,
body {
min-height: 100vh;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;
font-weight: initial !important;
font-size: 14px !important;
color: #333 !important;
}
html *,
body * {
text-decoration: none !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.ms-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ms-align-center {
display: flex;
align-items: center;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track {
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: #eee;
/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px;
background: #fff;
}
.ms-header {
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
background: #fff;
height: 50px;
}
.ms-header button {
height: 30px;
}
.ms-pagination {
padding: 20px 0;
text-align: right;
}
.ms-fr {
float: right;
}
.ms-tr {
text-align: right;
}
.ms-weixin-content {
width: calc(100% - 140px);
}
.ms-weixin-dialog .el-dialog__header {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
cursor: pointer;
}
.ms-hover:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.ms-mdiy-model-list {
width: 100%;
}
src/main/webapp/static/mdiy/less/model-form.less 0 → 100644
View file @ 178009f4
@import "../../ms-admin/4.7.0/less/app.less";
//表单页
.ms-mdiy-model-form {
.ms-width-height(100vw, 100vh);
.el-container {
height: 100%;
}
.ms-row {
button {
margin-left: 10px;
}
}
.ms-header-title {
margin-bottom: 15px;
}
.el-checkbox-group {
font-size: inherit !important;
}
//左侧自定义表单项
.ms-editor-type-layout {
background: #fff;
min-width: 15%;
padding: 20px;
border-right: 1px solid @borderColor;
.ms-type-list {
.ms-margin-padding(0);
.ms-flex();
flex-wrap: wrap;
li {
width: ~'calc(50% - 5px)';
.ms-margin-padding(0 0 5px 0, 5px);
list-style: none;
background: #E6F7FF;
border: 1px solid @borderColor;
cursor: pointer;
i {
.ms-font(1em, #999);
margin: 0 5px;
}
}
}
}
//中间排序
.ms-editor-body-layout {
background: #fff;
margin: 8px;
.ms-form-item {
padding: 6px 20px 6px 20px;
border: 1px solid transparent;
//单位输入框
.unit-input {
width: ~'calc(100% - 41px)' !important;
}
.el-form-item__content {
display: flex;
align-items: flex-start;
.del-but {
visibility: hidden;
padding-left: 20px;
margin-left: auto;
}
}
.el-radio {
line-height: inherit;
}
}
//选中的表单元素
.active {
border-color: @themeColor;
.del-but {
visibility: visible !important;
}
}
//表单颜色默认下边距
.sortable-ghost {
margin-bottom: 18px;
min-height: 40px;
}
}
//右侧选项属性
.ms-editor-attr-layout {
background: #fff;
min-width: 20%;
display: flex;
flex-wrap: wrap;
.ms-header-title {
border-left: 1px solid @borderColor;
width: 100%;
}
.ms-editor-attr {
width: 100%;
display: flex;
flex-direction: column;
.form {
padding: 15px;
height: ~'calc(100vh - 200px)';
overflow: auto;
.el-form-item__label {
line-height: 1.4em;
}
.el-form-item {
margin-bottom: 14px;
.input-with-select {
.el-input-group__append {
width: 90px;
.el-input {
input {
background-color: #fff;
border-top: 1px solid #dcdfe6;
border-bottom: 1px solid #dcdfe6;
}
}
}
}
}
//下拉排序添加选项
.ms-down-list {
.ms-margin-padding(0);
li {
.ms-align-center;
list-style: none;
margin-bottom: 12px;
i {
cursor: pointer;
.ms-hover;
font-size: 14px;
}
.ms-input,
.ms-radio,
.icon-tuodong {
margin-right: 6px;
line-height: initial;
}
}
.ms-plus {
.ms-hover;
i {
margin-right: 6px;
}
}
}
}
.footer {
margin-top: auto;
border-top: 1px solid @borderColor;
height: 60px;
.ms-align-center;
justify-content: flex-end;
padding-right: 10px;
}
}
}
}
\ No newline at end of file
src/main/webapp/static/mdiy/less/model-list.less 0 → 100644
View file @ 178009f4
@import "../../ms-admin/4.7.0/less/app.less";
.ms-mdiy-model-list {
width: 100%;
}
\ No newline at end of file
src/main/webapp/static/ms-admin/4.7.0/css/app.css 0 → 100644
View file @ 178009f4
/*
*这里的值严格按照UI设计图标注值来进行设置
*/
/*
*颜色
*/
/*
*页面的边距
*/
/*
*字体
*/
/*
*头像
*/
/*
* 按钮
*/
/*
*对常见的多行样式进行了方法封装，方便调用，加快开发效率
*/
html,
body {
min-height: 100vh;
width: 100vw;
background-color: #eee;
margin: 0;
display: flex;
font-weight: initial !important;
font-size: 14px !important;
color: #333 !important;
}
html *,
body * {
text-decoration: none !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
.ms-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ms-align-center {
display: flex;
align-items: center;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-weight: initial;
font-size: 12px;
color: #999;
resize: none;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-track {
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: #eee;
/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
border-radius: 10px;
/*滚动条的圆角*/
background-color: #e6e6e6;
/*滚动条的背景颜色*/
}
.ms-container {
margin: 12px;
height: calc(100% - 24px);
padding: 14px;
background: #fff;
}
.ms-header {
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
background: #fff;
height: 50px;
}
.ms-header button {
height: 30px;
}
.ms-pagination {
padding: 20px 0;
text-align: right;
}
.ms-fr {
float: right;
}
.ms-tr {
text-align: right;
}
.ms-weixin-content {
width: calc(100% - 140px);
}
.ms-weixin-dialog .el-dialog__header {
height: 55px;
box-sizing: border-box;
padding: 10px 10px 25px 10px;
border-bottom: 1px solid #e6e6e6;
}
.ms-weixin-dialog .el-dialog__header .el-dialog__title {
font-weight: bold;
font-size: 14px;
color: #333;
}
.ms-weixin-dialog .el-dialog__footer {
border-top: 1px solid #e6e6e6;
padding: 15px !important;
}
.ms-hover {
cursor: pointer;
}
.ms-hover:hover {
color: #0099ff;
background: #fff;
border-color: #0099ff;
}
.ms-header-select {
font-size: 0;
}
.ms-header-select > .el-select:nth-of-type(2) {
margin: 0 10px;
}
.el-submenu .el-menu-item.is-active {
border-radius: 4px;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.sortable-ghost {
opacity: 0.3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
.sortable-ghost * {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
src/main/webapp/static/ms-admin/4.7.0/less/app.less
View file @ 178009f4
......@@ -93,8 +93,9 @@ textarea::-webkit-input-placeholder {
text-align: right;
}
// 按钮组之间的间距
.el-button+.el-button {
// margin-left: 0
// margin-left: 5px;
}
.ms-weixin-content{
......@@ -127,3 +128,36 @@ textarea::-webkit-input-placeholder {
border-color: @themeColor;
}
}
// 头部下拉选择区域间距
.ms-header-select{
font-size: 0;
>.el-select:nth-of-type(2){
margin: 0 10px;
}
}
.el-submenu{
// margin: 0 12px;
// 菜单选中样式
.el-menu-item.is-active{
border-radius: 4px;
}
}
// 卡片样式
.el-card, .el-message{
border-radius:0 !important;
}
//拖拽样式
.sortable-ghost {
opacity: .3;
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
* {
background: #ccc !important;
border-color: transparent !important;
color: transparent !important;
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment