|
|
@@ -0,0 +1,238 @@
|
|
|
+<!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>
|
123
