ship-expert/app/admin/view/teaching_knowledge/form.html

{extend name="../../admin/view/main"}
{block name='content'}
<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="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>
        </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>
</div>
<script>
    let editorContent;
    let vo={:json_encode($vo?:null,256)};
    require(['ckeditor'], function () {
        editorContent=window.createEditor('[name=content]', {height: 350})
        if(vo){
            editorContent.setData(vo.content)
        }
    });
    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,
                video:[],
                imgs:[],
                file:[],
            },
            saving:false,
        }),
        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
                        }
                    })
                })
            }
        }
    })
</script>
{/block}