lw_test/app/talent/view/work/add.html

{extend name="public/base"/}
{block name="css"}
<style>
    .van-row {width:100%;}
    .btn_search_item{background:#f2f6ff;display:inline-block;border-radius:5px;line-height:35px;text-align:center;position:relative;font-size:13px;width:100%;color:#666;margin-bottom:10px;}
    .btn_search_item.active{color:var(--pink);background:#fff7fa;}
    .btn_search_icon{position:absolute;bottom:-3px;right:-3px;font-size:30px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">添加记录</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-cell-group>
        <van-field
                v-model="form.should_num"
                required
                type="number"
                label="应挂钩人数"
                placeholder="请输入应挂钩人数"
                :rules="[{ required: true, message: '请输入应挂钩人数' }]"
        ></van-field>
        <van-field
                v-model="form.new_num"
                required
                type="number"
                label="本月新增人数"
                placeholder="请输入本月新增人数"
                :rules="[{ required: true, message: '请输入本月新增人数' }]"
        ></van-field>
        <van-field
                v-model="form.unfinished_num"
                required
                type="number"
                label="未完成挂钩人数"
                placeholder="请输入未完成挂钩人数"
                :rules="[{ required: true, message: '请输入未完成挂钩人数' }]"
        ></van-field>
        <van-field
                v-model="form.reason"
                rows="2"
                required
                autosize
                label="未挂钩联系原因"
                type="textarea"
                placeholder="若全部联系请填无"
                :rules="[{ required: true, message: '请输入未挂钩联系原因' }]"
        ></van-field>
        <van-field
                v-model="form.consult_num"
                required
                type="number"
                label="本月回答咨询次数"
                placeholder="请输入本月回答咨询次数"
                :rules="[{ required: true, message: '请输入本月回答咨询次数' }]"
        ></van-field>

        <!--联系方式-->
        <van-field name="form.contact" label="联系方式">
            <template #input>
                <van-row :gutter="10">
                    <van-col span="8" v-for="(item) in contact_list">
                        <div :class="{btn_search_item:true,active: in_array(item,form.contact)}"
                             @click="selectContact(item)">
                            {{item}}
                            <van-icon v-if="in_array(item,form.contact)"
                                      class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-blue"></van-icon>
                        </div>
                    </van-col>
                </van-row>
            </template>
        </van-field>

        <!--联系方式-->
        <van-field name="form.cate" label="咨询问题类别">
            <template #input>
                <van-row :gutter="10">
                    <van-col span="8" v-for="(item) in cate_list">
                        <div :class="{btn_search_item:true,active: in_array(item,form.cate)}"
                             @click="selectCate(item)">
                            {{item}}
                            <van-icon v-if="in_array(item,form.cate)"
                                      class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-blue"></van-icon>
                        </div>
                    </van-col>
                </van-row>
            </template>
        </van-field>

        <van-field
                v-model="form.description"
                rows="2"
                required
                autosize
                label="具体问题描述及解决措施描述"
                type="textarea"
                placeholder="若全部联系请填无"
                :rules="[{ required: true, message: '请输入具体问题描述及解决措施描述' }]"
        ></van-field>
        <van-field
                v-model="form.assist"
                rows="2"
                required
                autosize
                label="需协调事项说明"
                type="textarea"
                placeholder="若全部联系请填无"
                :rules="[{ required: true, message: '请输入需协调事项说明' }]"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.form = Vue.reactive({
            should_num: 0,
            new_num: 0,
            unfinished_num: 0,
            reason: '',
            consult_num: 0,
            contact: [],
            cate: [],
            description: '',
            assist: '',
        });
        base.onBack = () => {
            location.href = "{:url('index/index')}";
        };

        //公共方法
        base.in_array = (search,array) => {
            for(var i in array){
                if(array[i] == search){
                    return true;
                }
            }
            return false;
        };
        base.removeByVal = (arrylist , val) => {
            for(var i = 0; i < arrylist .length; i++) {
                if(arrylist[i] == val) {
                    arrylist .splice(i, 1);
                    break;
                }
            }
        };

        //联系方式
        base.contact_list = Vue.reactive({$contact_list});
        base.selectContact = value => {
            if (base.in_array(value,base.form.contact)) {
                base.removeByVal(base.form.contact,value);
            } else {
                base.form.contact.push(value);
            }
        };

        //咨询问题类别
        base.cate_list = Vue.reactive({$cate_list});
        base.selectCate = value => {
            if (base.in_array(value,base.form.cate)) {
                base.removeByVal(base.form.cate,value);
            } else {
                base.form.cate.push(value);
            }
        };


        //表单提交
        base.onSubmit = () => {
            postJson('/work/addPost',base.form).then(() => {
                vant.showDialog({
                    title: '提示',
                    message: '添加成功',
                }).then(() => {
                    location.href = "{:url('index/index')}";
                });
            });
        };

        return base;
    }
</script>
{/block}