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

<template>
    <div v-loading="loading" element-loading-text="跳转中..." class="car_add">
        <div class="communal-title">
            <div>添加导游地接资料资料</div>
        </div>
        <template>
            <el-form :model="addData" :rules="rules" ref="addData" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="导游地接" prop="StaffType">
                            <el-select v-model="addData.StaffType" placeholder="导游地接">
                                <el-option :key="0" label="公司" :value="0"></el-option>
                                <el-option :key="1" label="个人" :value="1"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="服务评分" prop="Score">
                            <el-select v-model="addData.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="addData.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="addData.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="addData.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="addData.Contact">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系方式" prop="ContactTel">
                            <el-input placeholder="联系方式" v-model="addData.ContactTel">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="电子邮箱" prop="ContactEmail">
                            <el-input placeholder="电子邮箱" v-model="addData.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="addData.ContactFax">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <el-form-item label="其他信息" prop="OtherInfo">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addData.OtherInfo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="communal-title">导游评分</div>
                <div class="appraise-box">
                    <div style="float: left;">
                        <el-form-item label="着装得体" prop="SuitScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.SuitScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.SuitScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.SuitScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>

                        <el-form-item label="服务意识强度" prop="ServeScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.ServeScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.ServeScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.ServeScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>


                    </div>

                    <div style="float: left;">
                        <el-form-item label="时间概念强度" prop="TimeScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.TimeScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.TimeScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.TimeScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>

                        <el-form-item label="讲解水平专业" prop="TalkProScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.TalkProScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.TalkProScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.TalkProScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>
                    </div>
                    <div>

                        <el-form-item label="配合能力强，服从安排" prop="FitScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.FitScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.FitScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.FitScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>

                        <el-form-item label="应变能力强" prop="StrainScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.StrainScore" label="A" style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.StrainScore" label="B" style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.StrainScore" label="C" style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>
                    </div>
                    <div style="float: left;">
                        <el-form-item label="当地语言和中文表达流畅" prop="LocalAndChineseScore" label-width="210px">
                            <template>
                                <el-radio v-model="addData.LocalAndChineseScore" label="A"
                                    style="margin-right: 10px">A</el-radio>
                                <el-radio v-model="addData.LocalAndChineseScore" label="B"
                                    style="margin-right: 10px">B</el-radio>
                                <el-radio v-model="addData.LocalAndChineseScore" label="C"
                                    style="margin-right: 10px">C</el-radio>
                            </template>
                        </el-form-item>
                    </div>


                </div>
                <el-form-item>
                    <div style="margin-left: 60%;">
                        <el-button type="primary" @click="addBtn">保存</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 {
            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,
            tableData: [],
            currentPage: 1, // 当前页码
            pageSize: 15,// 每页的数据条数
            input: '',
            token: '',
            userId: 0,
            addData: {
                Status: '',
                Id: 0,
                UnitArea: '',
                UnitName: '',
                Address: '',
                Contact: '',
                ContactTel: '',
                ContactEmail: '',
                ContactFax: '',
                OtherInfo: '',
                Score: '5',
                SuitScore: 'A',
                ServeScore: 'A',
                TalkProScore: 'A',
                TimeScore: 'A',
                FitScore: 'A',
                StrainScore: 'A',
                LocalAndChineseScore: 'A',
                CreateUserId: '',
                Remark: '',
                StaffType: ''
            },
            unitAreas: [],
            restaurants: [],
            LocalGuideData: {}

        }
    },
    methods: {
        LocalGuide() {
            var url = "/api/Resource/QueryLocalGuide"
            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) {
                if (res.data.code == 200) {
                    debugger
                    that.tableData = res.data.data;
                    that.tableData.forEach(function (item, index) {
                        that.unitAreas.push({
                            value: item.unitArea,
                        });
                    });
                    that.addData.Id = that.$route.query.id;
                    if (that.addData.Id == undefined || that.addData.Id == null) {
                        //添加
                        that.addData.Status = 1
                    } else {
                        //编辑
                        that.upData();
                    }
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },

        handleSelect(item) {
            console.log(item);
        },
        addBtn() {
            const that = this;

            that.addData.CreateUserId = that.userId
            that.addData.Remark = that.addData.OtherInfo

            that.$refs.addData.validate((valid) => {
                if (valid) {

                    console.log(that.addData)
                    var url = "/api/Resource/OperationLocalGuide"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: that.addData
                    }).then(function (res) {
                        console.log(res)

                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            that.loading = true;
                            setTimeout(() => {
                                that.$router.push('/home/LocalGuide')
                            }, 3000);
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                } 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);
            };
        },
        upData() {

            for (var i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].id == parseInt(this.addData.Id)) {

                    this.LocalGuideData = this.tableData[i];
                    break;
                }
            }
            debugger
            this.addData.Status = 2;
            this.addData.Id = this.LocalGuideData.id;
            this.addData.UnitArea = this.LocalGuideData.unitArea;
            this.addData.UnitName = this.LocalGuideData.unitName;
            this.addData.Address = this.LocalGuideData.address;
            this.addData.Contact = this.LocalGuideData.contact;
            this.addData.ContactTel = this.LocalGuideData.contactTel;
            this.addData.ContactEmail = this.LocalGuideData.contactEmail;
            this.addData.ContactFax = this.LocalGuideData.contactFax;
            this.addData.OtherInfo = this.LocalGuideData.otherInfo;
            this.addData.Score = this.LocalGuideData.score;
            this.addData.SuitScore = this.LocalGuideData.suitScore;
            this.addData.ServeScore = this.LocalGuideData.serveScore;
            this.addData.TalkProScore = this.LocalGuideData.talkProScore;
            this.addData.TimeScore = this.LocalGuideData.timeScore;
            this.addData.FitScore = this.LocalGuideData.fitScore;
            this.addData.StrainScore = this.LocalGuideData.strainScore;
            this.addData.LocalAndChineseScore = this.LocalGuideData.localAndChineseScore;
            this.addData.CreateUserId = this.LocalGuideData.createUserId;
            this.addData.Remark = this.LocalGuideData.remark;
            this.addData.StaffType = parseInt(this.LocalGuideData.staffType)
        },
    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.LocalGuide();
        console.log(this.tableData)

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

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

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

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

.communal-box {
    display: flex;
}

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

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

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

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