adslunk
/
office_automation


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!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">
    <title>故障维修</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css">
    <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        body,html{
            background:#F4F8FB;
        }
        .container{
            width:100%;
            height:100%;
            background:#F4F8FB;
            background:url('/images/custom/bg.png') no-repeat top;
            background-size:100%;
            position:absolute;
            top:0;
            padding:15px;
            box-sizing: border-box;
        }
        .content{
            background:white;
            width:100%;
            border-radius: 20px;
            margin-top:180px;
            box-sizing: border-box;
            padding:20px;
            padding-bottom:10px;
        }
        .submit{
            background:#3F6FFF;
            border-radius: 30px;
            width:100%;
            color:white;
            border:none;
            margin:20px 0;
            padding:10px;
        }
        .item{
            padding-bottom:10px;
            border-bottom: 1px solid #F0F0F0;
            background:white;
            margin-bottom:20px;
        }
        .border_none{
            border:none;
            margin-bottom:0;
        }
        .title{
            display:flex;
            align-items: center;
            background:white;
        }
        span{
            margin-top:0;
            color:red;
            background:white;
            width:7px;
        }
        p{
            font-size:13px;
            background:white;
        }
        input{
            font-size:14px;
            margin-top:0px;
            padding:5px 7px;
            width:100%;
            border:none;
            background:white;
        }
        .file{
            margin-top:5px;
            margin-left:7px;
        }
        .van-toast{
            background:black;
        }
        .nav {
            text-align: center;
            margin: 8px auto;
            color: #fff;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="container">
        <div class="nav">故障记录</div>
        <div class="content">
            <div class="item">
                <div class="title">
                    <span>*</span>
                    <p>故障地点及状态描述</p>
                </div>
                <input type="text" placeholder="请填写响应内容" v-model="describe">
            </div>
            <div class="item">
                <div class="title">
                    <span>*</span>
                    <p>申诉人</p>
                </div>
                <input type="text" placeholder="请填写申诉人姓名" v-model="people">
            </div>
            <div class="item">
                <div class="title">
                    <span>*</span>
                    <p>申诉电话</p>
                </div>
                <input type="text" placeholder="请填写相关电话" v-model="phone">
            </div>
            <div class="item">
                <div class="title">
                    <span></span>
                    <p>其他事项</p>
                </div>
                <input type="text" placeholder="请填写其他事项" v-model="other">
            </div>
            <div class="item border_none">
                <div class="title">
                    <span>*</span>
                    <p>现场照片</p>
                </div>
                <van-uploader v-model="picture" :after-read="uploadImage" :deletable="false" multiple :max-count="9" class="file">
            </div>
        </div>
        <button class="submit" @click="submit">提交</button>
    </div>

    <script>
        // import { showToast } from 'vant';


        new Vue({
            el:'#app',
            data(){
                return {
                    describe:'',
                    people:'',
                    phone:'',
                    other:'',
                    picture:[],
                    id_list:[]
                }
            },
            methods:{
                submit(){
                    if(this.describe == ''){
                        vant.Toast('故障地点及状态描述不能为空');
                        return;
                    }
                    if(this.people == ''){
                        vant.Toast('申诉人不能为空');
                        return;
                    }
                    if(this.phone == ''){
                        vant.Toast('申诉电话不能为空');
                        return;
                    }
                    let reg = /^1[3456789][0-9]{9}$/
                    if (!reg.test(this.phone)) {
                        vant.Toast('手机号码格式不正确');
                        return
                    }
                    if(this.picture.length == 0){
                        vant.Toast('请上传现场照片');
                        return
                    }

                    const data = {
                        site:this.describe,
                        reporter:this.people,
                        mobile:this.phone,
                        other_info:this.other,
                        pic:this.id_list
                    }
                    console.log(data)

                    // 	const formData = new FormData();
                    //                 formData.append('site', this.describe);
                    //                 formData.append('reporter', this.people);
                    //                 formData.append('mobile', this.phone);
                    //                 formData.append('other_info', this.other);
                    //                 formData.append('pic', this.id_list);

                    // 	axios.post('http://oa.test/api.php?m=openRepairFault&a=add&openkey=d9302364e2a2d9fdcab2707a46fbab5a',data)

                    axios({
                        method: 'post',
                        url: 'http://zq.oa.nxjiewei.com:8011/api.php?m=openRepairFault&a=add&openkey=d9302364e2a2d9fdcab2707a46fbab5a',
                        data: JSON.stringify(data),
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                        .then(function (res) {
                            console.log(res)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                uploadImage(file) {
                    const files = file.file;
                    const formData = new FormData();
                    formData.append('file', files);

                    axios({
                        method: 'post',
                        url: 'http://zq.oa.nxjiewei.com:8011/api.php?m=openupfile&a=upfile&openkey=d9302364e2a2d9fdcab2707a46fbab5a',
                        data: formData,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                        .then(response => {
                            console.log('上传成功:', response);
                            this.id_list.push(response.data.id)
                        })
                        .catch(error => {
                            console.error('上传失败:', error);
                        });
                }
            }
        });


    </script>
</body>

</html>