master

分支 (1)

管理

管理

master

cust_form
/
create_form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单名称</title>
    <style type="text/css">
        .fileinput-button {overflow: hidden; width:50px; height: 30px; float: right;}
        .fileinput-button input {top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px !important; direction: ltr;}
    </style>
    <link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css" type="text/css">

</head>
<body>

<div id="main" class="form-details">

    <div id="form_lists">
        <header>
            <button class="btn back-btn" type="button">
                <i class="iconfont icon-zuojiantou"></i>
            </button>
            <div class="title">表单名称</div>
            <button class="btn action-btn" v-on:click="jumpEdit()" type="button">编辑模板</button>
        </header>

        <div class="weui-cells__title">{{form_name}}</div>

        <div class="weui-cells weui-cells_form mb-15">

            <div v-for="(item,index) in custom_fields">

                <div class="weui-cells weui-cells_form" v-if="item.t=='text'">
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">{{item.n}}</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="formValues[index]" v-bind:placeholder="'请填写文字'+(item.r==0?'（选填）':'（必填）')"/>
                        </div>
                    </div>
                </div>
                <div class="weui-cell" v-if="item.t=='number'">
                    <div class="weui-cell__hd"><label for="" class="weui-label">{{item.n}}</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" value="" v-model="formValues[index]" v-bind:placeholder="'请填写数字'+(item.r==0?'（选填）':'（必填）')"/>
                    </div>
                </div>

                <div class="weui-media-box weui-media-box_text" style="border-top: none; border-bottom:1px solid #f1f1f1" v-if="item.t=='textarea'">
                    <h4 class="weui-media-box__title">{{item.n}}</h4>
                    <div class="weui-media-box__desc">
                        <textarea class="weui-textarea" v-model="formValues[index]" v-bind:placeholder="'请填写文字'+(item.r==0?'（选填）':'（必填）')" rows="3"></textarea>
                    </div>
                </div>

                <div class="weui-cells border-none" v-if="item.t=='datetime'">
                    <a class="weui-cell weui-cell_access border-none" href="javascript:;" v-if="item.d[0].type=='datetime'">
                        <div class="weui-cell__bd weui-cell_primary">
                            <p>{{item.n}}</p>
                        </div>
                        <span class="color-98 show-date-panel"><input v-bind:data-index="index" class="datetime-choose" readonly v-bind:placeholder="item.r==0?'选填':'必填'" /></span>
                        <span class="weui-cell__ft"></span>
                    </a>
                    <a class="weui-cell weui-cell_access border-none" href="javascript:;" v-if="item.d[0].type=='date'">
                        <div class="weui-cell__bd weui-cell_primary">
                            <p>{{item.n}}</p>
                        </div>
                        <span class="color-98 show-date-panel"><input v-bind:data-index="index" class="date-choose" readonly v-bind:placeholder="item.r==0?'选填':'必填'" /></span>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
                <a class="weui-cell weui-cell_access bd-board" @click="singleSelect(index,item.d)" href="javascript:;" v-if="item.t=='radio'">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>{{item.n}}</p>
                    </div>
                    <span class="color-98">{{item.r==0?'选填':'必填'}}</span>
                    <span class="weui-cell__ft"></span>
                </a>
                <a class="weui-cell weui-cell_access bd-board" @click="multipleSelect(index,item.d)" href="javascript:;" v-if="item.t=='checkbox'">
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>{{item.n}}</p>
                    </div>
                    <span class="color-98">{{item.r==0?'选填':'必填'}}</span>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>

        <!--图片-->
        <div v-if="fixed_fields.length>0" v-for="item in fixed_fields">
            <div class="weui-panel weui-panel_access" v-for="item.t=='remark' || item.t=='image'">

                <div class="weui-cell" v-if="item.t=='remark'">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="备注" v-model="remark" rows="3"></textarea>
                    </div>
                </div>

                <div class="weui-panel__bd upload-img" v-if="item.t=='image'">
                    <div class="weui-media-box weui-media-box_text">

                        <!--上传图片-->
                        <div class="fileinput-button">
                            <i class="iconfont icon-tupian"></i>
                            <input id="uploadImg" type="file" name="">
                        </div>

                        <h4 class="weui-media-box__title">图片</h4>
                        <div class="img-parent">
                            <div class="img-group">
                                <div class="inner">
                                    <span v-for="(item,index) in img_lists"><i class="iconfont icon-icon" v-on:click="delImg(index)"></i><img v-bind:src="'img/e/'+item.src" alt=""></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="weui-panel weui-panel_access attachment mb-15" v-if="item.t=='attachment'">
                <div class="weui-panel__bd">
                    <div class="weui-media-box weui-media-box_text">

                        <!--上传附件-->
                        <div class="fileinput-button">
                            <i class="iconfont icon-paperclip"></i>
                            <input id="uploadAttachment" type="file" name="">
                        </div>

                        <h4 class="weui-media-box__title">附件</h4>
                        <a href="javascript:void(0);" v-for="(item,index) in attachment" class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" style="width: auto;" v-bind:src="'img/type/'+item.icon" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">{{item.name}}</h4>
                                <p class="weui-media-box__desc">{{item.size}}</p>
                            </div>
                            <i class="iconfont icon-icon" v-on:click="delAttachment(index)"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-tab footer-bar">
            <div class="weui-tabbar">
                <button type="button" @click="subForm()" class="sub-btn">提交</button>
            </div>
        </div>

        <div class="weui-uploader weui-panel weui-panel_access input-uploader">
            <div class="weui-uploader__hd">
                <p class="weui-uploader__title">发给谁 <small>（点击头像可删除）</small></p>
            </div>
            <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles">
                    <li class="weui-uploader__file" v-for="(item,index) in sendUsers" @click="deleteSendUser(index)" v-bind:style="'background-image:url('+item.image_url+')'"><span>{{item.nickname}}</span></li>
                </ul>
                <div class="weui-uploader__input-box">
                    <input id="uploaderInput" @click="addMember()" class="weui-uploader__input" type="button" />
                    <span>添加人员</span>
                </div>
            </div>
        </div>

    </div>

    <div id="single_select">
        <header>
            <button class="btn back-btn" @click="emptyAction()" type="button">
                <i class="iconfont icon-zuojiantou"></i>
            </button>
            <div class="title">单选型</div>
            <button class="btn action-btn" type="button" @click="completeBtn()">完成</button>
        </header>

        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label"  v-for="(item,index) in selectOptions" @click="choseSingle(index)">
                <div class="weui-cell__hd">
                    <i class="iconfont" v-bind:class="{'icon-danxuan':!item.checked,'icon-xuanzhong4':item.checked}"></i>
                </div>
                <div class="weui-cell__bd color-28">
                    <p>{{item.name}}</p>
                </div>
            </label>
        </div>
    </div>

    <div id="multiple_select">
        <header>
            <button class="btn back-btn" @click="emptyAction()" type="button">
                <i class="iconfont icon-zuojiantou"></i>
            </button>
            <div class="title">多选型</div>
            <button class="btn action-btn" type="button" @click="completeBtn()">完成</button>
        </header>

        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" v-for="(item,index) in selectOptions" @click="choseMultiple(index)">
                <div class="weui-cell__hd">
                    <i class="iconfont" v-bind:class="{'icon-danxuan':!item.checked,'icon-xuanzhong4':item.checked}"></i>
                </div>
                <div class="weui-cell__bd color-28">
                    <p>{{item.name}}</p>
                </div>
            </label>
        </div>
    </div>

</div>

<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
    </div>
</div>
<div class="footer-box"></div>
<footer>

</footer>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/common.js"></script>
<script src="js/vue.min.js"></script>
<script src="fileupload/js/jquery.ui.widget.js"></script>
<script src="fileupload/js/jquery.iframe-transport.js"></script>
<script src="fileupload/js/jquery.fileupload.js"></script>
<script src="js/mobiscroll.custom-3.0.0-beta6.js"></script>

<script src="js/create_form.js"></script>
</body>
</html>