ship-expert/app/admin/view/bidding/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="type_id" :rules="{message:'请选择',required:true}">
            <el-select v-model="form.type_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="b_type" :rules="{message:'请选择',required:true}">
            <el-select v-model="form.b_type">
                <el-option v-for="item in [{id:0,name:'预披露'},{id:1,name:'正式披露'}]" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="amount" :rules="{message:'此项必须',required:true}">
            <el-input-number :controls="false" v-model="form.amount" :min="0" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item label="披露开始时间" prop="pl_time_start" :rules="{message:'此项必须',required:true}">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.pl_time_start"></el-date-picker>
        </el-form-item>
        <el-form-item label="披露截止时间" prop="pl_time_end" :rules="{message:'此项必须',required:true}">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.pl_time_end"></el-date-picker>
        </el-form-item>
        <el-form-item label="城市" prop="city" :rules="{message:'此项必须',required:true}">
            <el-cascader :options="city" v-model="form.city"></el-cascader>
        </el-form-item>
        <el-form-item label="招标文件" prop="files">
            <el-button @click="addFile">增加</el-button>
            <div v-for="(item,idx) in form.files" :key="idx" style="width: 300px;">
                <el-tag @close="form.files.splice(idx,1)" closable>{{item.filename}}</el-tag>
            </div>
        </el-form-item>
        <el-form-item label="招标方公司名称" prop="com_name" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.com_name"></el-input>
        </el-form-item>
        <el-form-item label="招标方联系人" prop="com_username" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.com_username"></el-input>
        </el-form-item>
        <el-form-item label="招标方联系人手机号" prop="com_mobile" :rules="{message:'此项必须',required:true}">
            <el-input v-model="form.com_mobile"></el-input>
        </el-form-item>
        <el-form-item label="简述" prop="summary" :rules="{message:'请选择',required:true}">
            <textarea name="summary" 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;">
        <button data-type="zip" data-file id="fileUpload">仅上传ZIP文件</button>
    </div>
</div>
<script>
    let editorContent;
    let vo={:json_encode($vo?:null,256)};
    require(['ckeditor'], function () {
        editorContent=window.createEditor('[name=summary]', {height: 350})
        if(vo){
            editorContent.setData(vo.summary)
        }
    });
    let category={:json_encode($category,256)};
    let city={:json_encode($city,256)};
    let cityTree=[];
    city.forEach(item=>{
        if(item.level===1){
            let province={
                label:item.name,
                value:item.id,
                children:[],
            }
            city.forEach(c=>{
                if(c.level===2 && c.pid===item.id){
                    province.children.push({
                        label:c.name,
                        value:c.id,
                    })
                }
            })
            cityTree.push(province)
        }
    })
    new Vue({
        el:'#newForm',
        data:()=>({
            form:vo||{
                type_id:null,
                b_type:null,
                title:null,
                summary:null,
                amount:null,
                pub_time:null,
                pl_time:null,
                com_name:null,
                com_username:null,
                com_mobile:null,
                city:[],
                files:[],
            },
            category:category,
            city:cityTree,
            saving:false,
        }),
        methods:{
            addFile(){
                $('#fileUpload').unbind('upload.done')
                $('#fileUpload').on('upload.done',  (e,obj) => {
                    this.form.files.push({
                        filename:obj.file.name,
                        fileurl:obj.data.url
                    })
                });
                $('#fileUpload').trigger('click')
            },
            save(){
                let _this=this,
                    form=this.form
                form.summary=editorContent.getData()
                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}