boilerTaiZhang
/
boiler-mobile


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <link rel="stylesheet" href="./style/index.css">
    <link rel="icon" href="./favicon.ico">
    <title>锅炉检测</title>
</head>

<body>
    <div id="app">
        <section class="top-head">
            <img src="./images/logo.png" alt="">
            <h2 class="mt10">请您准确填写如下信息</h2>
        </section>
        <section class="section">
            <van-form ref="form">

                <h2 class="section-title">委托方信息(公司信息)</h2>

                <van-field :show-error="false" required name="companyName" v-model="form.companyName" label="委托单位名称" placeholder="委托单位名称" :rules="[{ required: true, message: '请输入委托单位名称',trigger:'onSubmit' }]"></van-field>

                <van-field name="companyAddress" v-model="form.companyAddress" label="委托单位地址" placeholder="委托单位地址"></van-field>

                <van-field :show-error="false" required name="companyName1" v-model="form.companyName1" label="付款单位名称" placeholder="付款单位名称" :rules="[{ required: true, message: '请输入付款单位名称',trigger:'onSubmit' }]"></van-field>

                <van-field :show-error="false" readonly required name="invoice" clickable label="开票种类" :rules="[{ required: true, message: '请选择开票种类' }]" :value="form.invoice" placeholder="选择开票种类" @click="typeShowPicker = true"></van-field>
                <van-popup v-model="typeShowPicker" round position="bottom">
                    <van-picker show-toolbar :default-index="0" :columns="typeOptions" @cancel="typeShowPicker = false" @confirm="ontypeConfirm" />
                </van-popup>

                <van-field name="contacts" required v-model="form.contacts" label="联系人" placeholder="联系人" :rules="[{ required: true, message: '请输入联系人' }]"></van-field>

                <van-field name="tel" required v-model="form.tel" :rules="[{ validator, message: '请输入正确手机号码' }]" label="手机号码" placeholder="手机号码"></van-field>

                <h2 class="section-title" style="margin-top:20px;">
                    受测单位信息
                    <van-button type="info" size="small" style="vertical-align: middle;margin-left:10px;height: 28px;float:right;" @click="handleAdd()"> + 添加</van-button>
                </h2>

                <van-collapse v-model="activeNames">
                    <van-collapse-item v-for="(item,index) in form.itemsArr" :name="index">
                        <template #title>
                            <div>受测单位信息 - {{index+1}}  <van-icon name="cross" @click.stop="handleClose(item,index)" size="14" color="#999" style="margin: 5px 10px 0 0;float:right;"/></div>
                        </template>
                        <van-field :show-error="false" required name="testingName" v-model="item.testingName" label="受测单位名称" placeholder="受测单位名称" :rules="[{ required: true, message: '请输入受测单位名称' }]"></van-field>
                        <van-field name="testingAddress" v-model="item.testingAddress" label="受测单位地址" placeholder="受测单位地址"></van-field>

                        <van-field name="registerName" required v-model="item.registerName" label="联系人" placeholder="联系人" :rules="[{ required: true, message: '请输入联系人' }]"></van-field>
                        <van-field :show-error="false" name="registerPhone" required v-model="item.registerPhone" :rules="[{ validator, message: '请输入正确手机号码' }]" label="手机号码" placeholder="手机号码"></van-field>

                        <van-field :show-error="false" name="boilerNum" required v-model="item.boilerNum" :rules="[{ required: true, message: '请输入锅炉数量' }]" label="锅炉数量" placeholder="1"></van-field>
                        <van-field readonly :show-error="false" name="runMode" required v-model="item.runMode" clickable :rules="[{ required: true, message: '请输入运行方式' }]" label="运行方式" placeholder="选择运行方式" @click="runModePicker = true"></van-field>
                        <van-popup v-model="runModePicker" round position="bottom">
                            <van-picker ref="runModePicker" show-toolbar :columns="runModeOptions" :default-index="0" @cancel="runModeShowPicker = false" @confirm="onRunModeConfirm(index,item)" />
                        </van-popup>

                        <van-field readonly :show-error="false" required name="flueType" :rules="[{ required: true, message: '请选择烟道类型' }]" clickable label="烟道类型" :value="item.flueType" placeholder="选择烟道类型" @click="flueShowPicker = true"></van-field>

                        <van-popup v-model="flueShowPicker" round position="bottom">
                            <van-picker ref="flueTypePicker" show-toolbar :columns="flueTypeOptions" :default-index="0" @cancel="flueShowPicker = false" @confirm="onflueTypeConfirm(index,item)" />
                        </van-popup>

                        <van-field name="wasteWater" required v-model="item.wasteWater" :rules="[{ required: true, message: '请输入废水检测' }]" label="废水检测" placeholder="3项/8项/其他"></van-field>
                        <van-field name="wasteWaterNum" required v-model="item.wasteWaterNum" :rules="[{ required: true,  message: '请输入废水排放口数' }]" label="废水排放口" placeholder="(1)个"></van-field>

                        <van-field name="isTaskNoice" required label="是否检测噪声">
                            <template #input>
                              <van-radio-group v-model="item.isTaskNoice" direction="horizontal">
                                <van-radio name="是">是</van-radio>
                                <van-radio name="否">否</van-radio>
                              </van-radio-group>
                            </template>
                        </van-field>
                    </van-collapse-item>
                </van-collapse>

                <div style="margin:20px 16px;">
                    <van-button round block type="info" @click="handleSubmit()">提交</van-button>
                </div>
            </van-form>
        </section>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                companyName: '',
                companyName1: '',
                companyAddress: '',
                invoice: '',
                contacts: '',
                tel: '',
                itemsArr: [{
                    testingName: '',
                    testingAddress: '',
                    registerName: '',
                    registerPhone: '',
                    boilerNum: 0,
                    flueType: '',
                    runMode: '',
                    wasteWater: '3项',
                    wasteWaterNum: 0,
                    isTaskNoice: '是',
                }]
            },
            activeNames: [0],
            activeIndex: 0,
            typeOptions: ['普通发票', '专用发票'], //开票种类
            typeShowPicker: false,
            runModeOptions: ['供暖季运行', '全年运行'],
            runModePicker: false,
            flueTypeOptions: ['联合', '独立'],
            flueShowPicker: false,

        },
        computed: {

        },
        mounted() {
            var s = 'http://guo-lu-jian-ce.oss-cn-beijing.aliyuncs.com/任务单/BHT-TR20210721-001/报告/委托单.doc';

            var name = s.substring(s.lastIndexOf("/") + 1);
            let dotIndex = name.lastIndexOf('.')
            var name = name.substring(0, dotIndex);
            console.log(name1, 'name'); //sdf
        },
        methods: {
            /*验证电话*/
            validator(val) {
                return /^1[0-9]{10}$/.test(val);
            },
            ontypeConfirm(value) {
                this.form.invoice = value;
                this.typeShowPicker = false;
            },
            onRunModeConfirm(index, item) {
                const runModeValue = this.$refs.runModePicker[0].getValues()
                item['runMode'] = runModeValue[0]
                this.runModePicker = false
            },
            // runModeChange(picker, value, index) {
            //     this.runModeValue = value
            // },
            onflueTypeConfirm(index, item) {
                const flueTypeValue = this.$refs.flueTypePicker[0].getValues()
                item['flueType'] = flueTypeValue
                this.flueShowPicker = false
            },
            handleAdd() {
                this.activeIndex++;
                this.activeNames = [this.activeIndex];
                const obj = {
                    testingName: '',
                    testingAddress: '',
                    registerName: '',
                    registerPhone: '',
                    boilerNum: 0,
                    flueType: '',
                    runMode: '',
                    wasteWater: '3项',
                    wasteWaterNum: 0,
                    isTaskNoice: '是'
                }
                this.form.itemsArr.push(obj)
            },
            /*删除*/
            handleClose(row, index) {
                this.$dialog.confirm({
                        title: '标题',
                        message: `确定要删除单位受测信息-${index + 1} 吗`,
                    })
                    .then(() => {
                        this.activeIndex--;
                        this.form.itemsArr.splice(index, 1)
                    })
                    .catch(() => {
                        // on cancel
                    });

            },

            handleSubmit() {
                this.$refs.form.validate().then(() => {
                    const toast = this.$toast.loading({
                        duration: 0, // 持续展示 toast
                        forbidClick: true,
                        message: "加载中..."
                    });

                    let param = {
                        jsonStr: JSON.stringify(this.form)
                    }
                    axios({
                        method: 'post',
                        url: 'http://test.kingforeyf.top:8899/ignore/customerInformation/addCustomerInformation',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: Qs.stringify(param)
                    }).then(res => {
                        toast.clear()
                        if (res.data.success) {
                            this.$toast.success({
                                message: '提交成功',
                            })
                            setTimeout(() => {
                                window.location.href = 'success.html';
                            }, 1000)

                        } else {
                            this.$toast.fail('提交失败')
                        }

                    }).catch(() => {
                        toast.clear()
                        this.$toast.fail('提交失败')
                    })

                })
            },
        }
    })

    app.$mount('#app');
</script>