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

<template>
    <div class="car_add visit-box">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="DiId" clearable filterable placeholder="团组选择" @change="DiIdChang"
                                :disabled="isShow">
                                <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>

            </el-form>
            <el-form :model="OpOfficialActivitiesDto" ref="OpOfficialActivitiesDto" :rules="OpOfficialActivitiesRules"
                label-width="100px" class="demo-ruleForm">
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="公务单位:" prop="client" label-width="160px">
                            <el-input clearable placeholder="公务单位" v-model="OpOfficialActivitiesDto.client">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="公务日期:" prop="date" label-width="160px">
                            <el-date-picker v-model="OpOfficialActivitiesDto.date" type="date" placeholder="选择公务日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="公务时刻:" prop="time" label-width="160px">
                            <el-time-picker v-model="OpOfficialActivitiesDto.time" format='HH:mm' value-format="HH:mm"
                                placeholder="公务时刻">
                            </el-time-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="邀请方:" prop="type" label-width="160px">
                            <el-radio-group v-model="OpOfficialActivitiesDto.type">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;">

                    <div style="width: 385px;">
                        <el-form-item label="公务方联系人职务:" prop="job" label-width="160px">
                            <el-input clearable placeholder="公务方联系人职务" v-model="OpOfficialActivitiesDto.job">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="公务方联系人:" prop="contact" label-width="160px">
                            <el-input clearable placeholder="公务方联系人" v-model="OpOfficialActivitiesDto.contact">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="联系方式:" prop="tel" label-width="160px">
                            <el-input clearable placeholder="联系方式" v-model="OpOfficialActivitiesDto.tel">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="公务形式:" prop="officialForm" label-width="160px">
                            <el-select v-model="OpOfficialActivitiesDto.officialForm" clearable filterable placeholder="公务形式">
                                <el-option v-for="item in OfficialFormList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <div style="width: 385px;">
                        <el-form-item label="着装要求:" prop="dresscode" label-width="160px">
                            <el-input clearable placeholder="着装要求" v-model="OpOfficialActivitiesDto.dresscode">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="需要翻译:" prop="isNeedTrans" label-width="160px">
                            <el-radio-group v-model="OpOfficialActivitiesDto.isNeedTrans">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="翻译人员:" prop="translators" label-width="160px">
                            <el-input clearable placeholder="翻译人员" v-model="OpOfficialActivitiesDto.translators">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="翻译语种:" prop="language" label-width="160px">
                            <el-input clearable placeholder="翻译语种" v-model="OpOfficialActivitiesDto.language">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="是否付费:" prop="type" label-width="160px">
                            <el-radio-group v-model="OpOfficialActivitiesDto.isPay">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 385px;">
                        <el-form-item label="是否报批:" prop="type" label-width="160px">
                            <el-radio-group v-model="OpOfficialActivitiesDto.isSubmitApproval">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 50%;">
                        <el-form-item label="公务方背景:" prop="setting" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="公务方背景"
                                v-model="OpOfficialActivitiesDto.setting"></el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 50%;">
                        <el-form-item label="公务地址:" prop="address" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="公务地址"
                                v-model="OpOfficialActivitiesDto.address"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 50%;">
                        <el-form-item label="暂定议程:" prop="trip" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="暂定议程"
                                v-model="OpOfficialActivitiesDto.trip"></el-input>
                        </el-form-item>
                    </div>

                    <div style="width: 50%;">
                        <el-form-item label="参会人员:" prop="attendees" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="参会人员"
                                v-model="OpOfficialActivitiesDto.attendees"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <!-- <div>
                    <div>
                        <div class="communal-title">
                            <div>公务文件</div>
                        </div>
                    </div>
                    <span style="color: red;">上传、删除文件时请谨慎！！！</span>
                    <hr style='background-color:#5555; height:1px; border:none;' />
                    <div style="display: flex;">
                        <div style="width: 33%;">
                            公务方简介:
                            <el-upload :file-list="uploadFiles1" ref="upload1" :on-success="upLoadSuccess1" :on-error="upLoadError1"
                                :before-remove="beforeRemove1" :on-change="onChange1" :limit="1" :on-exceed="exceed1"
                                :action="uploadURL" :headers="headers1" :auto-upload="false" :on-preview="onPreview1">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success"
                                    @click="submitUpload1">上传</el-button>
                            </el-upload>
                        </div>
                        <div style="width: 33%;">
                            公务活动图片:
                            <el-upload :file-list="uploadFiles2" ref="upload2" :on-success="upLoadSuccess2" :on-error="upLoadError2"
                                :before-remove="beforeRemove2" :on-change="onChange2" :limit="1" :on-exceed="exceed2"
                                :action="uploadURL" :headers="headers2" :auto-upload="false" :on-preview="onPreview2">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        
                                <el-button style="margin-left: 10px;" size="small" type="success"
                                    @click="submitUpload2">上传</el-button>
                            </el-upload>
                        </div>
                        <div style="width: 33%;">
                            发票:
                            <el-upload :file-list="uploadFiles3" ref="upload3" :on-success="upLoadSuccess3" :on-error="upLoadError3"
                                :before-remove="beforeRemove3" :on-change="onChange3" :limit="1" :on-exceed="exceed3"
                                :action="uploadURL" :headers="headers3" :auto-upload="false" :on-preview="onPreview3">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success"
                                    @click="submitUpload3">上传</el-button>
                            </el-upload>
                        </div>
                    </div>
                </div> -->
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <el-button @click="returnbtn">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
            
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: "新增公务出访客户资料",
            token: '',
            userId: 0,
            id: '',
            DiId: '',
            isShow: false,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            OfficialFormList: [],//公务形式下拉框
            deleFile: [],//文件数据
            headers: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                TypeName: "A"
            },
            OpOfficialActivitiesDto: {
                status: 0,
                id: 0,
                diId: "",
                type: 0,
                client: "",
                date: "",
                time: "",
                address: "",
                contact: "",
                job: "",
                tel: "",
                officialForm: "",
                setting: "",
                dresscode: "",
                attendees: "",
                isNeedTrans: 0,
                translators: "",
                language: "",
                trip: "",
                createUserId: 0,
                isPay:0,
                isSubmitApproval:0,
                remark: ""
            },
            OpOfficialActivitiesRules: {
                officialForm: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                inviteCosts: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                client: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                date: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                time: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                address: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                contact: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                job: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                tel: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],
                dresscode: [
                    { required: true, message: '该信息为必填信息', trigger: 'blur' },
                    { required: true, message: '该信息为必填信息', trigger: 'change' },
                ],

            },
            uploadURL: "http://localhost:5256/api/Resource/UploadOfficialActivities",
            uploadFiles1: [],
            uploadFiles2: [],
            uploadFiles3: [],
            headers1: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                Type: "1",
                DiId: 0,
                CreateUserId: 0,
            },
            headers2: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                Type: "2",
                DiId: 0,
                CreateUserId: 0,
            },
            headers3: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                Type: "3",
                DiId: 0,
                CreateUserId: 0,
            },
        }
    },

    methods: {
        //团组下拉框
        GetGroupAllList() {
            var url = "/api/Resource/GetGroupAllList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    diid: that.DiId
                }
            }).then(function (res) {
                if (res.data.code == 200) {

                    that.deleFile = res.data.data.deleFile;
                    that.deleFile.forEach(function (item) {
                        if (item.kind == 1) {
                            that.uploadFiles1.push({
                                name: item.fileName,
                                url: 'http://localhost:5256/Office/GrpFile/商邀相关文件/',
                                id: item.id
                            });
                        } else if (item.kind == 2) {
                            that.uploadFiles2.push({
                                name: item.fileName,
                                url: 'http://localhost:5256/Office/GrpFile/商邀相关文件/',
                                id: item.id
                            });
                        }
                        else if (item.kind == 3) {
                            that.uploadFiles3.push({
                                name: item.fileName,
                                url: 'http://localhost:5256/Office/GrpFile/商邀相关文件/',
                                id: item.id
                            });
                        }
                    });

                    console.log(that.uploadFiles1)
                    console.log(that.uploadFiles2)
                    console.log(that.uploadFiles3)

                    that.delegationInfoList = res.data.data.delegation;
                    that.OfficialFormList = res.data.data.setData;
                    if (that.OfficialFormList.length != 0) {
                        if(that.id!=that.id){
                            that.OpOfficialActivitiesDto.officialForm = that.OfficialFormList[0].id
                        }
                    }
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        if (that.delegationInfoList[index].id == parseInt(that.DiId)) {

                            that.delegationInfo = that.delegationInfoList[index];
                            break;
                        }
                    }
                }
            }).catch(function (error) {
                // that.$message.error("网络错误，请稍后重试");
            });
        },

        DiIdChang() {

            for (let index = 0; index < this.delegationInfoList.length; index++) {
                if (this.delegationInfoList[index].id == parseInt(this.DiId)) {
                    this.delegationInfo = this.delegationInfoList[index];
                    break;
                }
            }
        },
        QueryOfficialActivitiesById() {
            var url = "/api/Resource/QueryOfficialActivitiesById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    Id: that.id,
                    DiId: that.DiId,
                }
            }).then(function (res) {

                if (res.data.code == 200) {
                    var dataList = res.data.data
                    that.OpOfficialActivitiesDto.id = dataList.id
                    that.OpOfficialActivitiesDto.diId = dataList.diId
                    that.OpOfficialActivitiesDto.type = dataList.type
                    that.OpOfficialActivitiesDto.client = dataList.client
                    that.OpOfficialActivitiesDto.date = dataList.date
                    that.OpOfficialActivitiesDto.time = dataList.time
                    that.OpOfficialActivitiesDto.address = dataList.address
                    that.OpOfficialActivitiesDto.contact = dataList.contact
                    that.OpOfficialActivitiesDto.job = dataList.job
                    that.OpOfficialActivitiesDto.tel = dataList.tel
                    that.OpOfficialActivitiesDto.officialForm = dataList.officialForm
                    that.OpOfficialActivitiesDto.setting = dataList.setting
                    that.OpOfficialActivitiesDto.dresscode = dataList.dresscode
                    that.OpOfficialActivitiesDto.attendees = dataList.attendees
                    that.OpOfficialActivitiesDto.isNeedTrans = dataList.isNeedTrans
                    that.OpOfficialActivitiesDto.translators = dataList.translators
                    that.OpOfficialActivitiesDto.language = dataList.language
                    that.OpOfficialActivitiesDto.trip = dataList.trip
                    that.OpOfficialActivitiesDto.createUserId = dataList.createUserId
                    that.OpOfficialActivitiesDto.remark = dataList.remark
                    that.OpOfficialActivitiesDto.isSubmitApproval = dataList.isSubmitApproval
                    that.OpOfficialActivitiesDto.isPay = dataList.isPay
                }

            })
        },
        addBtn() {
            if (this.DiId == null && this.DiId == undefined && this.DiId == "") {
                this.$message.error("请选择团组名称");
                return;
            }
            const that = this;
            that.OpOfficialActivitiesDto.createUserId = that.userId
            that.OpOfficialActivitiesDto.diId = that.DiId
            that.$refs.OpOfficialActivitiesDto.validate((valid) => {
                if (valid) {
                    var url = "/api/Resource/OpOfficialActivities"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: that.OpOfficialActivitiesDto
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            that.returnbtn();
                            that.loading = true;
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                } else {
                    this.$message.error('请完善信息在保存！');
                    return false;
                }
            })
        },
        //上传1
        //上传到服务器
        submitUpload1() {
            this.$refs.upload1.submit();
        },
        // 文件超出限制
        exceed1(files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件,请取消要替换的文件`
            );
        },
        //文件上传成功时的钩子
        upLoadSuccess1(response, file, fileList) {
            this.$message({
                message: response.msg,
                type: 'success'
            });
        },
        //文件上传失败时的钩子
        upLoadError1(response, file, fileList) {
            console.log("项目添加失败");
        },
        //取消文件时的钩子
        beforeRemove1(file, fileList) {
            const that = this;
            var url = "/api/Resource/DelloadOfficialActivities"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    Id: file.id,
                    DeleteUserId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //文件状态改变时的钩子
        onChange1(file, fileList) {

        },
        //点击文件的钩子
        onPreview1(file) {
            window.location.href = "http://132.232.92.186:24/Office/GrpFile/商邀相关文件/" + file.name
        },
        //上传2
        //上传到服务器
        submitUpload2() {
            this.$refs.upload2.submit();
        },
        // 文件超出限制
        exceed2(files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件,请取消要替换的文件`
            );
        },
        //文件上传成功时的钩子
        upLoadSuccess2(response, file, fileList) {
            this.$message({
                message: response.msg,
                type: 'success'
            });
        },
        //文件上传失败时的钩子
        upLoadError2(response, file, fileList) {
            console.log("项目添加失败");
        },
        //删除文件时出发的事件
        beforeRemove2(file, fileList) {
            const that = this;
            var url = "/api/Resource/DelloadOfficialActivities"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    Id: file.id,
                    DeleteUserId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //文件状态改变时的钩子
        onChange2(file, fileList) {

        },
        //点击文件的钩子
        onPreview2(file) {
            window.location.href = "http://132.232.92.186:24/Office/GrpFile/商邀相关文件/" + file.name
        },
        //上传3
        //上传到服务器
        submitUpload3() {
            this.$refs.upload3.submit();
        },
        // 文件超出限制
        exceed3(files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件,请取消要替换的文件`
            );
        },
        //文件上传成功时的钩子
        upLoadSuccess3(response, file, fileList) {
            this.$message({
                message: response.msg,
                type: 'success'
            });
        },
        //文件上传失败时的钩子
        upLoadError3(response, file, fileList) {
            console.log("项目添加失败");
        },
        //删除文件时出发的事件
        beforeRemove3(file, fileList) {
            const that = this;
            var url = "/api/Resource/DelloadOfficialActivities"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    Id: file.id,
                    DeleteUserId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    setTimeout(() => {
                        that.$router.push('/home/OfficialActivities')
                    }, 3000);
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //文件状态改变时的钩子
        onChange3(file, fileList) {

        },
        //点击文件的钩子
        onPreview3(file) {
            let href = "http://132.232.92.186:24/Office/GrpFile/商邀相关文件/" + file.name
            var a = document.createElement("a");
            a.href = href;
            a.download = file.name;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            a.remove();
            //window.location.href = "http://132.232.92.186:24/Office/GrpFile/商邀相关文件/" + file.name
        },
        //返回
        returnbtn(){
            this.$router.push({
                path: "/home/OfficialActivities",
                query: {
                    DiId: this.DiId,
                }
            })
        }
    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.id = this.$route.query.id
        this.DiId = parseInt(this.$route.query.DiId)
        this.headers1.DiId = this.DiId
        this.headers1.CreateUserId = this.userId

        this.headers2.DiId = this.DiId
        this.headers2.CreateUserId = this.userId

        this.headers3.DiId = this.DiId
        this.headers3.CreateUserId = this.userId

        this.GetGroupAllList();

        if (this.DiId == null && this.DiId == undefined && this.DiId == 0) {
            this.DiId = '';
        }
        if (this.id != null && this.id != undefined && this.id != 0) {
            this.QueryOfficialActivitiesById();
            this.title = "修改公务出访客户资料";
            this.OpOfficialActivitiesDto.status = 2
            this.isShow = true
        } else {
            this.OpOfficialActivitiesDto.status = 1
            this.title = "新增公务出访客户资料"
            this.isShow = false
        }

    }
}
</script>
<style>
.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;
    min-height: 810px;
}
.visit-box .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100%;
}
.visit-box .el-select{
    width: 100%;
}
@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

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