|
|
@@ -1,151 +1,140 @@
|
|
|
{extend name="../../admin/view/main"}
|
|
|
-
|
|
|
{block name='content'}
|
|
|
-<form action="" class="layui-card layui-form" data-auto="true" method="post">
|
|
|
- <div class="layui-card-body">
|
|
|
-
|
|
|
-
|
|
|
- <label class="layui-form-item relative block">
|
|
|
- <span class="help-label"><b>标题</b>Title</span>
|
|
|
- <input class="layui-input" name="title" placeholder="请输入新闻标题" required value='{$vo.title|default=""}'>
|
|
|
- </label>
|
|
|
- <label class="layui-form-item relative block">
|
|
|
- <span class="help-label"><b>分类</b>Category</span>
|
|
|
- <select name="class_id">
|
|
|
- {foreach $category as $a}
|
|
|
- <option value="{$a.id}" {:isset($vo['class_id']) && $vo['class_id']==$a['id']?'selected':''}>{$a.name}</option>
|
|
|
- {/foreach}
|
|
|
- </select>
|
|
|
- </label>
|
|
|
-
|
|
|
- <div class="layui-form-item label-required-prev">
|
|
|
- <span class="help-label"><b>图片</b>Imgs</span>
|
|
|
- <table class="layui-table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="text-left padding-0">
|
|
|
-
|
|
|
- <div class="help-images">
|
|
|
-
|
|
|
- <input name="imgs" data-max-width="2048" data-max-height="1024" type="hidden" value="{$vo.imgs|default=''}">
|
|
|
- <script>$('[name="imgs"]').uploadMultipleImage();</script>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div class="layui-form-item label-required-prev">
|
|
|
- <span class="help-label"><b>内容</b>Content</span>
|
|
|
- <div class="relative block">
|
|
|
- <textarea class="layui-hide" name="content" placeholder="请输入内容">{$vo.content|default=''}</textarea>
|
|
|
+<style>
|
|
|
+ .layui-card-body{
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+ #newForm{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<div id="newForm">
|
|
|
+ <el-form :model="form" label-width="140px" ref="form">
|
|
|
+ <el-form-item label="标题" prop="title" :rules="{message:'此项必须',required:true}">
|
|
|
+ <el-input v-model="form.title"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类" prop="class_id" :rules="{message:'此项必须',required:true}">
|
|
|
+ <el-select v-model="form.class_id">
|
|
|
+ <el-option v-for="item in category" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="imgs">
|
|
|
+ <el-button @click="addFile('image',form.imgs)">增加</el-button>
|
|
|
+ <div>
|
|
|
+ <span v-for="(item,idx) in form.imgs" :key="idx" style="width: 300px;">
|
|
|
+ <img :src="item" style="max-width: 100px;height: 100px"/>
|
|
|
+ <el-button type="text" @click="form.imgs.splice(idx,1)">删除</el-button>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="hr-line-dashed"></div>
|
|
|
- {notempty name='vo.id'}<input name='id' type='hidden' value='{$vo.id}'>{/notempty}
|
|
|
-
|
|
|
- <div class="layui-form-item text-center">
|
|
|
- <button class="layui-btn" type="submit">保存数据</button>
|
|
|
- <button class="layui-btn layui-btn-danger" data-history-back data-confirm="确定要取消编辑吗？" type='button'>取消编辑</button>
|
|
|
- </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="视频" prop="video">
|
|
|
+ <el-button @click="addFile('video',form.video)">增加</el-button>
|
|
|
+ <div>
|
|
|
+ <span v-for="(item,idx) in form.video" :key="idx" style="width: 300px;">
|
|
|
+ <video controls :src="item" style="max-width: 300px;height: 300px"/>
|
|
|
+ <el-button type="text" @click="form.video.splice(idx,1)">删除</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文件" prop="file">
|
|
|
+ <el-button @click="addFile(null,form.file)">增加</el-button>
|
|
|
+ <div>
|
|
|
+ <span v-for="(item,idx) in form.file" :key="idx">
|
|
|
+ <el-tag type="text" @close="form.file.splice(idx,1)" closable>文件{{idx+1}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容" prop="content" :rules="{message:'此项必须',required:true}">
|
|
|
+ <textarea name="content" class="content"></textarea>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="save" :loading="saving">保存</el-button>
|
|
|
+ <el-button @click="history.back()">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="display: none;">
|
|
|
+ <a data-file id="fileUpload"></a>
|
|
|
</div>
|
|
|
-
|
|
|
-</form>
|
|
|
-
|
|
|
+</div>
|
|
|
<script>
|
|
|
- $('input[name="images"]').uploadMultipleImage();
|
|
|
+ let editorContent;
|
|
|
+ let vo={:json_encode($vo?:null,256)};
|
|
|
+ let category={:json_encode($category?:null,256)};
|
|
|
require(['ckeditor'], function () {
|
|
|
- window.createEditor('[name=content]', {height: 350})
|
|
|
+ editorContent=window.createEditor('[name=content]', {height: 350})
|
|
|
+ if(vo){
|
|
|
+ editorContent.setData(vo.content)
|
|
|
+ }
|
|
|
});
|
|
|
- layui.use(['upload', 'element', 'layer'], function() {
|
|
|
- var $ = layui.jquery
|
|
|
- , upload = layui.upload
|
|
|
- , element = layui.element
|
|
|
- , layer = layui.layer;
|
|
|
-
|
|
|
- upload.render({
|
|
|
- elem: '#test5'
|
|
|
- ,url: '' //此处配置你自己的上传接口即可
|
|
|
- ,accept: 'video' //视频
|
|
|
- ,done: function(res){
|
|
|
- layer.msg('上传成功');
|
|
|
- console.log(res)
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- //演示多文件列表
|
|
|
- var uploadListIns = upload.render({
|
|
|
- elem: '#testList'
|
|
|
- ,elemList: $('#demoList') //列表元素对象
|
|
|
- ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
|
|
|
- ,accept: 'file'
|
|
|
- ,multiple: true
|
|
|
- ,number: 3
|
|
|
- ,auto: false
|
|
|
- ,bindAction: '#testListAction'
|
|
|
- ,choose: function(obj){
|
|
|
- var that = this;
|
|
|
- var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
|
|
- //读取本地文件
|
|
|
- obj.preview(function(index, file, result){
|
|
|
- var tr = $(['<tr id="upload-'+ index +'">'
|
|
|
- ,'<td>'+ file.name +'</td>'
|
|
|
- ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
|
|
|
- ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
|
|
|
- ,'<td>'
|
|
|
- ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
|
|
|
- ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
|
|
|
- ,'</td>'
|
|
|
- ,'</tr>'].join(''));
|
|
|
-
|
|
|
- //单个重传
|
|
|
- tr.find('.demo-reload').on('click', function(){
|
|
|
- obj.upload(index, file);
|
|
|
- });
|
|
|
-
|
|
|
- //删除
|
|
|
- tr.find('.demo-delete').on('click', function(){
|
|
|
- delete files[index]; //删除对应的文件
|
|
|
- tr.remove();
|
|
|
- uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
|
|
- });
|
|
|
-
|
|
|
- that.elemList.append(tr);
|
|
|
- element.render('progress'); //渲染新加的进度条组件
|
|
|
+ if(vo){
|
|
|
+ vo.imgs=vo.imgs?vo.imgs.split(',').filter(a=>{
|
|
|
+ return a
|
|
|
+ }):[]
|
|
|
+ //vo.file=vo.file?vo.file.split(',').filter():[]
|
|
|
+ vo.video=vo.video?vo.video.split(',').filter(a=>{
|
|
|
+ return a
|
|
|
+ }):[]
|
|
|
+ }
|
|
|
+ new Vue({
|
|
|
+ el:'#newForm',
|
|
|
+ data:()=>({
|
|
|
+ form:vo||{
|
|
|
+ title:null,
|
|
|
+ content:null,
|
|
|
+ class_id:null,
|
|
|
+ video:[],
|
|
|
+ imgs:[],
|
|
|
+ file:[],
|
|
|
+ },
|
|
|
+ saving:false,
|
|
|
+ category,
|
|
|
+ }),
|
|
|
+ methods:{
|
|
|
+ addFile(ext,form){
|
|
|
+ $('#fileUpload').unbind('upload.done')
|
|
|
+ $('#fileUpload').on('upload.done', (e,obj) => {
|
|
|
+ if(ext && obj.file.type.indexOf(ext)===-1){
|
|
|
+ this.$message.error('请上传正确的格式')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ form.push(obj.data.url)
|
|
|
});
|
|
|
+ $('#fileUpload').trigger('click')
|
|
|
+ },
|
|
|
+ save(){
|
|
|
+ this.form.content=editorContent.getData()
|
|
|
+ let _this=this,
|
|
|
+ form=JSON.parse(JSON.stringify(this.form))
|
|
|
+ form.imgs=form.imgs.join(',')
|
|
|
+ form.video=form.video.join(',')
|
|
|
+ form.file=form.file.join(',')
|
|
|
+ delete form.create_at
|
|
|
+ delete form.update_at
|
|
|
+ this.$refs.form.validate(v=>{
|
|
|
+ if(!v){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ $.ajax('{:sysuri()}',{
|
|
|
+ data:form,
|
|
|
+ type:'post',
|
|
|
+ beforeSend(){
|
|
|
+ _this.saving=true
|
|
|
+ },
|
|
|
+ success({code,info}){
|
|
|
+ if(code===1){
|
|
|
+ _this.$message.success('保存成功')
|
|
|
+ window.history.back()
|
|
|
+ }else{
|
|
|
+ _this.$message.error(info)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ complete(){
|
|
|
+ _this.saving=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
- ,done: function(res, index, upload){ //成功的回调
|
|
|
- var that = this;
|
|
|
- //if(res.code == 0){ //上传成功
|
|
|
- var tr = that.elemList.find('tr#upload-'+ index)
|
|
|
- ,tds = tr.children();
|
|
|
- tds.eq(3).html(''); //清空操作
|
|
|
- delete this.files[index]; //删除文件队列已经上传成功的文件
|
|
|
- return;
|
|
|
- //}
|
|
|
- this.error(index, upload);
|
|
|
- }
|
|
|
- ,allDone: function(obj){ //多文件上传完毕后的状态回调
|
|
|
- console.log(obj)
|
|
|
- }
|
|
|
- ,error: function(index, upload){ //错误回调
|
|
|
- var that = this;
|
|
|
- var tr = that.elemList.find('tr#upload-'+ index)
|
|
|
- ,tds = tr.children();
|
|
|
- tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
|
|
- }
|
|
|
- ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
|
|
|
- element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
+ }
|
|
|
+ })
|
|
|
</script>
|
|
|
{/block}
|
