You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
18 KiB
400 lines
18 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>公司简介</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="/public/layui/css/layuinew.css" media="all">
|
|
<link rel="stylesheet" href="/public/style/edit.css" media="all">
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
|
|
</head>
|
|
<body>
|
|
<style>
|
|
#editor—wrapper {
|
|
border: 1px solid #ccc;
|
|
z-index: 100; /* 按需定义 */
|
|
}
|
|
#toolbar-container { border-bottom: 1px solid #ccc; }
|
|
#editor-container { height: 400px; }
|
|
.layui-input-group {
|
|
position: relative;
|
|
display: table;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">小鼠列表</li>
|
|
</ul>
|
|
<div class="layui-tab-content" style="height: 100px;">
|
|
<div class="layui-tab-item layui-show"><table class="layui-hide" id="classClass" style="padding:25px;" lay-filter="classClass"></table></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/public/layui/layui.js" charset="utf-8"></script>
|
|
<script src="/public/style/edit.js" charset="utf-8"></script>
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
|
|
<script type="text/html" id="isde">
|
|
{{# if(d.is_delete==0){}}
|
|
<span class="layui-badge layui-bg-gray">正常</span>
|
|
{{# }else{}}
|
|
<span class="layui-badge">已删除</span>
|
|
{{# }}}
|
|
</script>
|
|
<script type="text/html" id="tool">
|
|
<!-- 这里的 checked 的状态只是演示 -->
|
|
<a class="layui-btn layui-btn-default layui-btn-xs" lay-event="edit">编辑</a>
|
|
{{# if(d.is_delete==0){}}
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
{{# }else{}}
|
|
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="huifu">恢复</a>
|
|
{{# }}}
|
|
</script>
|
|
<script>
|
|
const { createEditor, createToolbar } = window.wangEditor
|
|
|
|
const editorConfig = {
|
|
placeholder: '请编辑公司介绍',
|
|
onChange(editor) {
|
|
const html = editor.getHtml()
|
|
console.log('editor content', html)
|
|
// 也可以同步到 <textarea>
|
|
}
|
|
}
|
|
|
|
|
|
const toolbarConfig = {}
|
|
|
|
|
|
layui.use(['layedit','table','upload','element','form','layer'], function(){
|
|
var layedit = layui.layedit
|
|
,table = layui.table
|
|
,form = layui.form
|
|
,layer = layui.layer
|
|
,upload = layui.upload
|
|
,element = layui.element
|
|
,$ = layui.jquery;
|
|
|
|
table.render({
|
|
elem: '#classClass'
|
|
,url: '/admin_squirrel/getlist'
|
|
,toolbar: '#toolbarDemo'
|
|
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
|
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
|
title: '提示'
|
|
,layEvent: 'LAYTABLE_TIPS'
|
|
,icon: 'layui-icon-tips'
|
|
}]
|
|
,page: true
|
|
,cols: [[
|
|
{field:'id', width:80, title: '序号'}
|
|
,{field:'number',width:180, title: '小鼠编号'}
|
|
,{field:'sex', title: '性别'}
|
|
,{field:'c_user_id', title: '添加人'}
|
|
,{field:'birthday', title: '生日'}
|
|
,{field:'hair_color', title: '毛色'}
|
|
,{field:'father', title: '父亲'}
|
|
,{field:'mother', title: '母亲'}
|
|
,{field:'weaning_time', title: '断奶时间'}
|
|
,{field:'nursing_time', title: '护理时间'}
|
|
,{field:'created',width:180, title: '添加时间'}
|
|
,{toolbar: '#isde',width:180, title: '是否删除'}
|
|
,{toolbar: '#tool',width:200, title: '操作'}
|
|
]]
|
|
});
|
|
table.on('tool(classClass)', function(obj){
|
|
console.log(obj)
|
|
var data = obj.data;
|
|
if(obj.event === 'del'){
|
|
layer.confirm('确定要删除数据嘛', function(index){
|
|
$.post('/admin_squirrel/edit',{field:'is_delete',id:data.id,status:1},function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">删除成功</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if(obj.event === 'huifu'){
|
|
layer.confirm('确定要恢复数据嘛', function(index){
|
|
$.post('/admin_squirrel/edit',{field:'is_delete',id:data.id,status:0},function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">数据已恢复</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
if(obj.event === 'edit'){
|
|
// iframe 层
|
|
layer.open({
|
|
type: 1,
|
|
area: '450px',
|
|
resize: false,
|
|
shadeClose: true,
|
|
title: '编辑小鼠',
|
|
content: `
|
|
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
|
|
<div class="demo-login-container">
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<input type="hidden" name="id" value="`+data.id+`">
|
|
<input type="hidden" name="uid" value="`+data.c_user_id+`">
|
|
|
|
<div class="layui-input-split layui-input-prefix">
|
|
编号
|
|
</div>
|
|
<input type="text" name="number" value="`+data.number+`" lay-verify="required" disabled placeholder="编 号" lay-reqtext="请填写编号" autocomplete="off" class="layui-input" >
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
性别
|
|
</div>
|
|
<select name="sex">
|
|
<option value="">请选择</option>
|
|
<option value="1" `+(data.sex=="公"?"selected":"")+`>公</option>
|
|
<option value="2" `+(data.sex=="母"?"selected":"")+`>母</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
生日
|
|
</div>
|
|
<input type="text" name="birthday" class="layui-input" value="`+data.birthday+`" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
毛色
|
|
</div>
|
|
<input type="text" name="hair_color" value="`+data.hair_color+`" lay-verify="required" lay-reqtext="请填写毛色" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
父亲
|
|
</div>
|
|
<input type="text" name="father" value="`+data.father+`" lay-verify="required" lay-reqtext="请填写父亲" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
母亲
|
|
</div>
|
|
<input type="text" name="mother" value="`+data.mother+`" lay-verify="required" lay-reqtext="请填写母亲" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
品系
|
|
</div>
|
|
<input type="text" name="strains_id" value="`+data.strains_id+`" lay-verify="required" lay-reqtext="请填写品系" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
基因
|
|
</div>
|
|
<input type="text" name="gene" value="`+data.gene+`" lay-verify="required" lay-reqtext="请填写基因" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-group">
|
|
<div class="layui-input-split layui-input-prefix">
|
|
备注
|
|
</div>
|
|
<input type="text" name="remark" value="`+data.remark+`" lay-verify="required" lay-reqtext="请填写备注" autocomplete="off" class="layui-input" lay-affix="eye">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">确认</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
success: function(){
|
|
var laydate = layui.laydate;
|
|
// 渲染
|
|
laydate.render({
|
|
elem: '#ID-laydate-demo'
|
|
});
|
|
// 对弹层中的表单进行初始化渲染
|
|
form.render();
|
|
// 表单提交事件
|
|
form.on('submit(demo-login)', function(data){
|
|
var field = data.field; // 获取表单字段值
|
|
$.post('/admin_squirrel/editinfo',field,function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">修改成功</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return false; // 阻止默认 form 跳转
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.site-demo-layedit').on('click', function(){
|
|
var type = $(this).data('type');
|
|
active[type] ? active[type].call(this) : '';
|
|
});
|
|
//监听提交
|
|
form.on('submit(subdata)', function(data){
|
|
var datas = data.field
|
|
datas.content = editor.getHtml()
|
|
$.post('/admin_index/companysave',datas,function(obj){
|
|
if(obj.status != 1){
|
|
return layer.msg(obj.msg);
|
|
}else{
|
|
//示范一个公告层
|
|
layer.open({
|
|
type: 1
|
|
,title: false //不显示标题栏
|
|
,closeBtn: false
|
|
,area: '300px;'
|
|
,shade: 0.8
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
,btn: '返回列表'
|
|
,btnAlign: 'c'
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">添加成功</div>'
|
|
,yes: function(){
|
|
history.go(0)
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
//常规使用 - 普通图片上传
|
|
var uploadInst = upload.render({
|
|
elem: '#test1'
|
|
,url: '/admin_index/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
|
|
,before: function(obj){
|
|
//预读本地文件示例，不支持ie8
|
|
obj.preview(function(index, file, result){
|
|
$('#demo1').attr('src', result); //图片链接（base64）
|
|
});
|
|
|
|
element.progress('demo', '0%'); //进度条复位
|
|
layer.msg('上传中', {icon: 16, time: 0});
|
|
}
|
|
,done: function(res){
|
|
//如果上传失败
|
|
if(res.status != 1){
|
|
return layer.msg('上传失败');
|
|
}
|
|
$('#img').val(res.data); //置空上传失败的状态
|
|
//上传成功的一些操作
|
|
//……
|
|
$('#demoText').html(''); //置空上传失败的状态
|
|
}
|
|
,error: function(){
|
|
//演示失败状态，并实现重传
|
|
var demoText = $('#demoText');
|
|
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
|
demoText.find('.demo-reload').on('click', function(){
|
|
uploadInst.upload();
|
|
});
|
|
}
|
|
//进度条
|
|
,progress: function(n, elem, e){
|
|
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
|
|
if(n == 100){
|
|
layer.msg('上传完毕', {icon: 1});
|
|
}
|
|
}
|
|
});
|
|
// function deletet(tablename,id){
|
|
// $.post('/admin_index/delete',{tablename:tablename,id:id},function(obj){
|
|
// if(obj.status != 1){
|
|
// return layer.msg(obj.msg);
|
|
// }else{
|
|
// //示范一个公告层
|
|
// layer.open({
|
|
// type: 1
|
|
// ,title: false //不显示标题栏
|
|
// ,closeBtn: false
|
|
// ,area: '300px;'
|
|
// ,shade: 0.8
|
|
// ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
// ,btn: '返回列表'
|
|
// ,btnAlign: 'c'
|
|
// ,moveType: 1 //拖拽模式，0或者1
|
|
// ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">添加成功</div>'
|
|
// ,yes: function(){
|
|
// history.go(0)
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |