ship-expert/app/admin/view/shop_production/add.html

{extend name="../../admin/view/main"}
{block name='content'}
<style>
    .layui-card-body{
        background: white;
    }
    #newForm{
        width: 80%;
    }
    .image{
        width: 100px;
        height: 100px;
    }
    .video{
        width: 200px;
        height: 200px;
    }
    .child-form{
        width: 500px;
        background: #f4f4f4;
        padding: 10px;
        display: inline-block;
    }
</style>
<div id="newForm">
    <el-form :model="form" label-width="140px" ref="form" size="medium">
        <el-form-item label="联系人" prop="real_name" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.real_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="生产技术标准" prop="standard_tech" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.standard_tech"></el-input>
        </el-form-item>
        <el-form-item label="生产验收标准" prop="standard_check" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.standard_check"></el-input>
        </el-form-item>

        <el-form-item label="商品信息：" prop="item" :rules="[{message:'此项必须',required:true},{type:'array',min:1,message:'需要商品信息'}]">
            <div><el-button @click="addItem">添加</el-button></div>
            <div v-for="(item,idx) in form.item" class="child-form">
                <el-form-item label="商品名称">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
                <el-form-item label="规格">
                    <el-input v-model="item.spec"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="item.number"></el-input>
                </el-form-item>
                <el-form-item label="质量标准">
                    <el-input v-model="item.standard"></el-input>
                </el-form-item>
                <el-form-item label="采购价">
                    <el-input v-model="item.price"></el-input>
                </el-form-item>
            </div>
        </el-form-item>

        <el-form-item label="图片视频" prop="files">
            <el-button @click="addFile('image')">增加图片/视频</el-button>
            <div>
                <div v-for="(item,idx) in form.images" :key="idx" style="display: inline-block;">
                    <el-image v-if="item.type==='image'" :src="item.src" class="video"></el-image>
                    <video controls v-else :src="item.src" class="video"></video>
                    <a @click="form.images.splice(idx,1)">删除</a>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="交货地址" :rules="{message:'此项必须',required:true}" prop="post_address">
            <el-input v-model="form.post_address"></el-input>
        </el-form-item>
        <el-form-item label="交货时间" :rules="{message:'此项必须',required:true}" prop="post_time">
            <el-date-picker type="datetime" v-model="form.post_time" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </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;">
        <button data-type="zip" data-file id="fileUpload"></button>
    </div>
</div>
<script>
    let editorContent;
    let vo={:json_encode($vo?:null,256)};

    new Vue({
        el:'#newForm',
        data:()=>({
            form:vo||{
                real_name:null,
                mobile:null,
                standard_tech:null,
                standard_check:null,
                item:[],
                images:[],
            },
            saving:false,
        }),
        methods:{
            addItem(){
                this.form.item.push({
                    name:null,
                    spec:null,
                    number:null,
                    standard:null,
                    price:null,
                })
            },
            addFile(){
                $('#fileUpload').unbind('upload.done')
                $('#fileUpload').on('upload.done',  (e,obj) => {
                    let type=obj.file.type.split('/')[0]
                    if(['image','video'].indexOf(type)===-1){
                        this.$message.error('请上传正确的格式')
                        return
                    }
                    this.form.images.push({
                        type:type,
                        src:obj.data.url
                    })
                });
                $('#fileUpload').trigger('click')
            },
            save(){
                let _this=this,
                    form=this.form
                this.$refs.form.validate(v=>{
                    if(!v){
                        return
                    }
                    $.ajax('{:sysuri()}',{
                        data:form,
                        type:'post',
                        beforeSend(){
                            _this.saving=true
                        },
                        success({code,info}){
                            if(code){
                                _this.$message.success('保存成功')
                                window.history.back()
                            }else{
                                _this.$message.error(info)
                            }
                        },
                        complete(){
                            _this.saving=false
                        }
                    })
                })
            }
        }
    })
</script>
{/block}