oa-system/src/components/Resource/CarDataEdit.vue

<template>
    <div class="car-edit" v-loading="loading" element-loading-text="跳转中...">
        <div class="communal-title">
            <div>修改车公司资料</div>
        </div>
        <template>
            <el-form :model="upData" :rules="rules" ref="upData" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="服务评分" prop="Score">
                            <el-select v-model="upData.Score" placeholder="服务评分">
                                <el-option key="1" label="1分" value="1"></el-option>
                                <el-option key="2" label="2分" value="2"></el-option>
                                <el-option key="3" label="3分" value="3"></el-option>
                                <el-option key="4" label="4分" value="4"></el-option>
                                <el-option key="5" label="5分" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位地区" prop="UnitArea">
                            <el-autocomplete class="inline-input" v-model="upData.UnitArea" :fetch-suggestions="querySearch"
                                placeholder="请输入单位地区" @select="handleSelect" style="width: 290px;"></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位名称" prop="UnitName">
                            <el-input placeholder="单位名称" v-model="upData.UnitName">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="单位地址" prop="Address">
                            <el-input placeholder="单位地址" v-model="upData.Address">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="联系人" prop="Contact">
                            <el-input placeholder="联系人" v-model="upData.Contact">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系方式" prop="ContactTel">
                            <el-input placeholder="联系方式" v-model="upData.ContactTel">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="电子邮箱" prop="ContactEmail">
                            <el-input placeholder="电子邮箱" v-model="upData.ContactEmail">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="传 真" prop="ContactFax">
                            <el-input placeholder="传 真" v-model="upData.ContactFax">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="其他信息" prop="OtherInfo">
                    <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="upData.OtherInfo"></el-input>
                </el-form-item>
                <div class="appraise-box">
                    <el-form-item label="有相关的车辆资质" prop="QualificationScore" label-width="224px">
                        <template>
                            <el-radio v-model="upData.QualificationScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.QualificationScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.QualificationScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="车辆2-4年新，VIP及以上需要2年新" prop="CarAgeScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.CarAgeScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.CarAgeScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.CarAgeScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="车身干净，无文字图片等" prop="CleanImgScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.CleanImgScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.CleanImgScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.CleanImgScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="车内整洁、无异味" prop="SmellScore" label-width="224px">
                        <template>
                            <el-radio v-model="upData.SmellScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.SmellScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.SmellScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="提前备水，纸巾等" prop="WaterPaperScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.WaterPaperScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.WaterPaperScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.WaterPaperScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="车辆配置高（皮座椅等）" prop="HardwareScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.HardwareScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.HardwareScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.HardwareScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="时间概念强" prop="TimeScore" label-width="224px">
                        <template>
                            <el-radio v-model="upData.TimeScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.TimeScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.TimeScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="安全意识高" prop="SafetyScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.SafetyScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.SafetyScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.SafetyScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="司机驾龄时间长，提前熟悉路线" prop="DrivingAgeScore" label-width="260px">
                        <template>
                            <el-radio v-model="upData.DrivingAgeScore" label="A" style="margin-right: 10px">A</el-radio>
                            <el-radio v-model="upData.DrivingAgeScore" label="B" style="margin-right: 10px">B</el-radio>
                            <el-radio v-model="upData.DrivingAgeScore" label="C" style="margin-right: 10px">C</el-radio>
                        </template>
                    </el-form-item>
                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="editBtn">保 存</el-button>
                        <router-link to='/home/CarData'>
                            <el-button>取 消</el-button>
                        </router-link>
                    </div>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>
<script>
export default {
    data() {
        // var isnumber = (rule, value, callback) => {
        //     
        //     var reg = /^1[3456789]\d{9}$/;//小数点左边最高16位，小数点右边最多4位
        //     if (reg.test(value)) {
        //         callback();
        //     } else
        //         callback(new Error("请输入正确的手机号"));
        // };
        return {
            clientWidth: document.body.clientWidth,
            rules: {
                UnitArea: [
                    { required: true, message: '请输入单位地区', trigger: 'blur' },
                    { required: true, message: '请输入单位地区', trigger: 'change' },
                ],
                UnitName: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                ],
                Contact: [
                    { required: true, message: '请输入单位联系人', trigger: 'blur' },
                ],
                ContactTel: [
                    { required: true, message: '请输入单位联系人电话', trigger: 'blur' },
                ],
            },
            loading: false,
            CarDataEdit: {},
            currentPage: 1, // 当前页码
            pageSize: 15,// 每页的数据条数
            input: '',
            token: '',
            userId: 0,
            upData: {
                Id: 0,
                UnitArea: '',
                UnitName: '',
                Address: '',
                Contact: '',
                ContactTel: '',
                ContactEmail: '',
                ContactFax: '',
                CarDes: '',
                CarPicPaths: '',
                OtherInfo: '',
                Score: '5',
                QualificationScore: 'A',
                CarAgeScore: 'A',
                CleanImgScore: 'A',
                SmellScore: 'A',
                WaterPaperScore: 'A',
                HardwareScore: 'A',
                TimeScore: 'A',
                SafetyScore: 'A',
                DrivingAgeScore: 'A',
                Remark: ''
            },
            unitAreas: [],
            restaurants: [],

        }
    },
    watch: {
        clientWidth(newVal, oldVal) {
            console.log(newVal);//浏览器窗口变化时，打印宽度。
        }
    },
    methods: {

        carData() {

            var url = "/api/Resource/QueryCarData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: 0,
                    pageSize: 0,
                    unitName: "",
                    unitArea: "",
                    contact: "",
                    contactTel: ""
                }
            }).then(function (res) {
                console.log(res)

                if (res.data.code == 200) {

                    that.tableData = res.data.data;
                    that.tableData.forEach(function (item, index) {
                        that.unitAreas.push({
                            value: item.unitArea,
                        });
                    });
                }
            })
        },
        handleSelect(item) {
            console.log(item);
        },
        editBtn() {
            const that = this;

            this.upData.CreateUserId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
            this.upData.Remark = this.upData.OtherInfo
            that.$refs.upData.validate((valid) => {
                if (valid) {
                    var url = "/api/Resource/UpCarData"

                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: that.upData
                    }).then(function (res) {
                        console.log(res)

                        if (res.data.code == 200) {
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            that.loading = true;
                            setTimeout(() => {
                                that.$router.push('/home/CarData')
                            }, 3000);
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    }).catch(function (error) {
                        that.$message.error("网络错误，请稍后重试");
                    });
                } else {
                    this.$message.error('请完善信息在保存！');
                    return false;
                }
            })
        },
        querySearch(queryString, cb) {
            var arr = this.unitAreas;
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i].value == arr[j].value) {
                        arr.splice(j, 1);
                        //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
                        j--;
                    }
                }
            }
            var restaurants = arr;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        editData() {
            this.upData.Id = this.CarDataEdit.id;
            this.upData.UnitArea = this.CarDataEdit.unitArea;
            this.upData.UnitName = this.CarDataEdit.unitName;
            this.upData.Address = this.CarDataEdit.address;
            this.upData.Contact = this.CarDataEdit.contact;
            this.upData.ContactTel = this.CarDataEdit.contactTel;
            this.upData.ContactEmail = this.CarDataEdit.contactEmail;
            this.upData.ContactFax = this.CarDataEdit.contactFax;
            this.upData.CarDes = this.CarDataEdit.carDes;
            this.upData.CarPicPaths = this.CarDataEdit.carPicPaths;
            this.upData.OtherInfo = this.CarDataEdit.otherInfo;
            this.upData.Score = this.CarDataEdit.score;
            this.upData.QualificationScore = this.CarDataEdit.qualificationScore;
            this.upData.CarAgeScore = this.CarDataEdit.carAgeScore;
            this.upData.CleanImgScore = this.CarDataEdit.cleanImgScore;
            this.upData.SmellScore = this.CarDataEdit.smellScore;
            this.upData.WaterPaperScore = this.CarDataEdit.waterPaperScore;
            this.upData.HardwareScore = this.CarDataEdit.hardwareScore;
            this.upData.TimeScore = this.CarDataEdit.timeScore;
            this.upData.SafetyScore = this.CarDataEdit.safetyScore;
            this.upData.DrivingAgeScore = this.CarDataEdit.drivingAgeScore;
            this.upData.Remark = this.CarDataEdit.otherInfo;
        },
    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId

        this.CarDataEdit = JSON.parse(localStorage.getItem('CarDataEdit'));
        this.carData();
        this.editData();
        // let that = this;
        // window.onresize =() =>{
        //     return (()=>{
        //         window.clientWidth = document.body.clientWidth;
        //         that.clientWidth = window.clientWidth;
        //     })()
        // }
    }
}
</script>
<style>
.car-edit {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car-edit .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>