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

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0;' />
        <div>
            <el-form :model="OpInvitationOfficialActivityData" ref="OpInvitationOfficialActivityData"
                :rules="OpInvitationOfficialActivityDataRules" label-width="100px" class="demo-ruleForm">
                <div style="display:flex ;">
                    <div style="width: 25%;">
                        <el-form-item label="国家:" prop="country" label-width="160px">
                            <el-input clearable placeholder="国家" v-model="OpInvitationOfficialActivityData.country">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="城市:" prop="city" label-width="160px">
                            <el-input clearable placeholder="城市" v-model="OpInvitationOfficialActivityData.city">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="邀请方名称:" prop="unitName" label-width="160px">
                            <el-input clearable placeholder="邀请方名称" v-model="OpInvitationOfficialActivityData.unitName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="邀请方官网:" prop="unitWeb" label-width="160px">
                            <el-input clearable placeholder="邀请方官网" v-model="OpInvitationOfficialActivityData.unitWeb">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display:flex ;">
                    <div style="width: 25%;">
                        <el-form-item label="涉及领域:" prop="field" label-width="160px">
                            <el-input clearable placeholder="涉及领域" v-model="OpInvitationOfficialActivityData.field">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="邀请方地址:" prop="address" label-width="160px">
                            <el-input clearable placeholder="邀请方地址" v-model="OpInvitationOfficialActivityData.address">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="邀请方信息:" prop="unitInfo" label-width="160px">
                            <el-input clearable placeholder="邀请方信息" v-model="OpInvitationOfficialActivityData.unitInfo">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系人:" prop="contact" label-width="160px">
                            <el-input clearable placeholder="联系人" v-model="OpInvitationOfficialActivityData.contact">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display:flex ;">
                    <div style="width: 25%;">
                        <el-form-item label="联系人职务:" prop="job" label-width="160px">
                            <el-input clearable placeholder="联系人职务" v-model="OpInvitationOfficialActivityData.job">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系电话:" prop="tel" label-width="160px">
                            <el-input clearable placeholder="联系电话" v-model="OpInvitationOfficialActivityData.tel">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="电子邮箱:" prop="email" label-width="160px">
                            <el-input clearable placeholder="电子邮箱" v-model="OpInvitationOfficialActivityData.email">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="微信:" prop="weChat" label-width="160px">
                            <el-input clearable placeholder="微信" v-model="OpInvitationOfficialActivityData.weChat">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display:flex ;">
                    <div style="width: 25%;">
                        <el-form-item label="FaceBook:" prop="faceBook" label-width="160px">
                            <el-input clearable placeholder="faceBook" v-model="OpInvitationOfficialActivityData.faceBook">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="Ins:" prop="ins" label-width="160px">
                            <el-input clearable placeholder="ins" v-model="OpInvitationOfficialActivityData.ins">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="传真号码:" prop="fax" label-width="160px">
                            <el-input clearable placeholder="传真号码" v-model="OpInvitationOfficialActivityData.fax">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select style="width: 100%;" v-model="OpInvitationOfficialActivityData.delegation" clearable filterable multiple
                                placeholder="团组名称">
                                <el-option v-for="item in DelegationList" :key="item.id" :label="item.groupName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div style="display:flex ;">
                    <div style="width: 50%;">
                        <el-form-item label="邀请函文件(修改版):" prop="fileUrl" label-width="160px">
                            <el-upload
                                class="pop-upload"
                                ref="upload"
                                action=""
                                :file-list="fileList"
                                :auto-upload="false"
                                :multiple="true"
                                :on-change="handleChange"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                name="files">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            </el-upload>
                            <!-- <el-upload :file-list="uploadFiles" ref="upload" :on-success="upLoadSuccess"
                                :on-error="upLoadError" :before-remove="beforeRemove" 
                                :action="uploadURL" :headers="headers" :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                
                            </el-upload> -->
                        </el-form-item>
                    </div>
                    <div style="width: 50%;">
                        <el-form-item label="其他信息:" prop="remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="其他信息"
                                v-model="OpInvitationOfficialActivityData.remark"></el-input>
                        </el-form-item>
                    </div>

                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <router-link to='/home/InvitationOfficialActivityData'>
                            <el-button>取消</el-button>
                        </router-link>
                    </div>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: "新增商邀资料",
            token: '',
            userId: 0,
            OpInvitationByIdData: {},
            OpInvitationOfficialActivityData: {
                status: 0,
                id: 0,
                country: '',
                files:[],
                city: '',
                unitName: '',
                unitWeb: '',
                field: '',
                address: '',
                unitInfo: '',
                contact: '',
                job: '',
                tel: '',
                email: '',
                weChat: '',
                faceBook: '',
                ins: '',
                delegation: [],
                filePath: '',
                sndFilePath: '',
                fax: '',
                createUserId: 0,
                remark: ''
            },
            OpInvitationOfficialActivityDataRules: {
                country: [
                    { required: true, message: '请输入国家', trigger: 'blur' },
                    { required: true, message: '请输入国家', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请输入城市', trigger: 'blur' },
                    { required: true, message: '请输入城市', trigger: 'change' }
                ],
                unitName: [
                    { required: true, message: '请输入邀请方名称', trigger: 'blur' },
                    { required: true, message: '请输入邀请方名称', trigger: 'change' }
                ],
                field: [
                    { 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' }
                ],
                tel: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { required: true, message: '请输入联系方式', trigger: 'change' }
                ],
                delegation: [
                    { type: "array", required: true, message: '请选择关联团组', trigger: ['blur', 'change'] },

                ],
            },
            DelegationList: [],
            uploadFiles: [],//上传的文件列表
            uploadURL: "http://132.232.92.186:8888/api/Groups/UploadProject",
            headers: {
                Authorization: JSON.parse(localStorage.getItem('userinif')).token,
                TypeName: "B"
            },
            OldFile: '',
            NewFile: '',
            fileList:[]
        }
    },

    methods: {
        //团组数据
        GetGroupNameList() {
            var url = "/api/Business/GetGroupNameList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    PortType: 1
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.DelegationList = res.data.data;
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        QueryInvitationOfficialActivityById() {
            this.fileList=[];
            var url = "/api/Resource/QueryInvitationOfficialActivityById/"+this.OpInvitationOfficialActivityData.id
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.OpInvitationOfficialActivityData.id = res.data.data.id;
                    that.OpInvitationOfficialActivityData.country = res.data.data.country;
                    that.OpInvitationOfficialActivityData.city = res.data.data.city;
                    that.OpInvitationOfficialActivityData.unitName = res.data.data.unitName;
                    that.OpInvitationOfficialActivityData.unitWeb = res.data.data.unitWeb;
                    that.OpInvitationOfficialActivityData.field = res.data.data.field;
                    that.OpInvitationOfficialActivityData.address = res.data.data.address;
                    that.OpInvitationOfficialActivityData.unitInfo = res.data.data.unitInfo;
                    that.OpInvitationOfficialActivityData.contact = res.data.data.contact;
                    that.OpInvitationOfficialActivityData.job = res.data.data.job;
                    that.OpInvitationOfficialActivityData.tel = res.data.data.tel;
                    that.OpInvitationOfficialActivityData.email = res.data.data.email;
                    that.OpInvitationOfficialActivityData.weChat = res.data.data.weChat;
                    that.OpInvitationOfficialActivityData.faceBook = res.data.data.faceBook;
                    that.OpInvitationOfficialActivityData.ins = res.data.data.ins;
                    var delList = res.data.data.delegation.split(',')
                    var delegaLOist = [];
                    if (res.data.data.delegation) {
                        delList.forEach(function (item, index) {
                            delegaLOist.push(
                                parseInt(item)
                            )
                        });
                    }else{
                        delegaLOist='';
                    }
                    that.OpInvitationOfficialActivityData.delegation = delegaLOist;
                    that.OpInvitationOfficialActivityData.filePath = res.data.data.filePath;
                    that.OpInvitationOfficialActivityData.sndFilePath = res.data.data.sndFilePath;
                    that.OpInvitationOfficialActivityData.fax = res.data.data.fax;
                    that.OpInvitationOfficialActivityData.createUserId = res.data.data.createUserId;
                    that.OpInvitationOfficialActivityData.remark = res.data.data.remark;
                    console.log(JSON.parse(res.data.data.sndFileName));
                    var sndFileNamejson=JSON.parse(res.data.data.sndFileName)
                    for (let h = 0; h < res.data.data.sndFilePathItem.length; h++) {
                        that.fileList.push({url:res.data.data.sndFilePathItem[h],name:sndFileNamejson[h]})
                    }
                    if (that.OpInvitationOfficialActivityData.filePath != null && that.OpInvitationOfficialActivityData.filePath != undefined && that.OpInvitationOfficialActivityData.filePath != "") {
                        that.uploadFiles.push({
                            name: that.OpInvitationOfficialActivityData.sndFilePath,
                            url: 'http://132.232.92.186:24/Office/GrpFile/团组增减款项相关文件/',
                        })
                    }

                }

            })
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        //点击文件列表中已上传的文件
        handlePreview(file){;
            window.open(file.url);
        },
        // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
        handleRemove(file, fileList) {
            this.fileList = fileList
            if (file && file.status=="success") {
                var that = this;
                var url = "/api/Resource/InvitationOfficialActivityDelFile/"+that.OpInvitationOfficialActivityData.id+"?fileName="+file.name
                this.$axios({
                    method: 'delete',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            }
            
        },
        //删除文件
        beforeRemove(file,fileList){
            if(file && file.status=="success"){
                return this.$confirm('此文件已上传至服务器此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });     
                    reject(false)     
                });
            }
        },
        //点击保存事件
        addBtn() {
            this.OpInvitationOfficialActivityData.files=this.fileList;
            const that = this;
            that.OpInvitationOfficialActivityData.createUserId = that.userId
            that.$refs.OpInvitationOfficialActivityData.validate((valid) => {
                if (valid) {
                    var delegationStr = '';
                    if(that.OpInvitationOfficialActivityData.delegation){
                        that.OpInvitationOfficialActivityData.delegation.forEach(function (item, index) {
                            delegationStr += item + ','
                        });
                        that.OpInvitationOfficialActivityData.delegation = delegationStr.substring(0, delegationStr.length - 1)
                    }
                    var FormData = require('form-data');
                    var datas=new FormData();
                    for(let r=0;r<that.OpInvitationOfficialActivityData.files.length;r++){
                        datas.append('Files',that.OpInvitationOfficialActivityData.files[r].raw);
                    }
                    datas.append('Status',that.OpInvitationOfficialActivityData.status);
                    datas.append('Id',that.OpInvitationOfficialActivityData.id);
                    datas.append('Country',that.OpInvitationOfficialActivityData.country);
                    datas.append('City',that.OpInvitationOfficialActivityData.city);
                    datas.append('UnitName',that.OpInvitationOfficialActivityData.unitName);
                    datas.append('UnitWeb',that.OpInvitationOfficialActivityData.unitWeb);
                    datas.append('Field',that.OpInvitationOfficialActivityData.field);
                    datas.append('Address',that.OpInvitationOfficialActivityData.address);
                    datas.append('UnitInfo',that.OpInvitationOfficialActivityData.unitInfo);
                    datas.append('Contact',that.OpInvitationOfficialActivityData.contact);
                    datas.append('Job',that.OpInvitationOfficialActivityData.job);
                    datas.append('Tel',that.OpInvitationOfficialActivityData.tel);
                    datas.append('Email',that.OpInvitationOfficialActivityData.email);
                    datas.append('WeChat',that.OpInvitationOfficialActivityData.weChat);
                    datas.append('FaceBook',that.OpInvitationOfficialActivityData.faceBook);
                    datas.append('Ins',that.OpInvitationOfficialActivityData.ins);
                    datas.append('Delegation',that.OpInvitationOfficialActivityData.delegation);
                    datas.append('FilePath',that.OpInvitationOfficialActivityData.filePath);
                    datas.append('SndFilePath',that.OpInvitationOfficialActivityData.sndFilePath);
                    datas.append('Fax',that.OpInvitationOfficialActivityData.fax);
                    datas.append('CreateUserId',that.OpInvitationOfficialActivityData.createUserId);
                    datas.append('Remark',that.OpInvitationOfficialActivityData.remark);
                    var url = "/api/Resource/OpInvitationOfficialActivity"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer '
                        },
                        data: datas
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            var delList = that.OpInvitationOfficialActivityData.delegation.split(',')
                            var delegaLOist = [];
                            if(delList){
                                delList.forEach(function (item, index) {
                                    delegaLOist.push(
                                        parseInt(item)
                                    )
                                });
                                that.OpInvitationOfficialActivityData.delegation = delegaLOist
                            }
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(() => {
                                that.$router.push('/home/InvitationOfficialActivityData')
                            }, 3000);
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                } else {
                    var delList = this.OpInvitationOfficialActivityData.delegation.split(',')
                    var delegaLOist = [];
                    delList.forEach(function (item, index) { 
                        delegaLOist.push(
                            parseInt(item)
                        )
                    });
                    this.OpInvitationOfficialActivityData.delegation = delegaLOist
                    this.$message.error('请完善信息在保存！');
                    return false;
                }
            })
        },
    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.GetGroupNameList();
        this.id = this.$route.query.id
        if (this.id != null && this.id != undefined && this.id != 0) {
            this.title = "修改邀请资料";
            this.OpInvitationOfficialActivityData.status = 2
            this.OpInvitationOfficialActivityData.id = this.id
            this.QueryInvitationOfficialActivityById();
        } else {
            this.OpInvitationOfficialActivityData.status = 1
            this.title = "新增邀请资料"
        }
    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}

.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: 820px;
}

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

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