specialDialog.vue

<!--特殊议程-->
<template>
    <div class="code">
        <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="initForm">
            <el-checkbox class="margin-bottom-20" @change="changeCheck" v-model="checked">特殊议程</el-checkbox>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="议程主题" prop="title" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="汇报处室" prop="reportDep" :label-width="formLabelWidth">
                    <el-input :disabled="disabled" v-model="form.reportDep" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="列席人员" :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="attendPerson" autocomplete="off">
                        <el-button v-if="!disabled" @click="selectPerson" slot="append">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="相关附件" :label-width="formLabelWidth">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action=""
                            :on-change="handleUpload"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer text-center">
                <el-button size="small" @click="initForm">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
        <attend-list ref="attendList" @select="getPerson"></attend-list>
       <select-special-agenda ref="selectSpecialAgenda" @update="getInfo"></select-special-agenda>
    </div>
</template>

<script>
    import {addAgendaByMeet, updateAgendaByMeet,getSpecialAgendaById,uploadFile} from "../api/api"
    import AttendList from "./attendList";
    import SelectSpecialAgenda from "./selectSpecialAgenda";

    export default {
        components: {
            SelectSpecialAgenda,
            AttendList},
        name: "special-dialog",
        data() {
            return {
                checked:"",  //是否选择特殊议程
                fileList:[],  //文件列表
                title: "",   //弹窗标题
                id:"",
                disabled:false,
                attendPerson:"",
                linkSpecial:"",  //选择特殊议程
                form: {
                    title: "",
                    reportDep: "",
                    linkAttends: [],
                    remark:"",
                    accessories:[]
                },
                rules:{
                    title:[{required:true,message:"请输入议程名称",trigger:'blur'},{min:1,max:20,message:'长度在1到20个字符之间',trigger:'blur'}]
                },
                dialogFormVisible: false,
                formLabelWidth: "100px"
            }
        },
        methods: {
            showAddDialog(title) {
                this.title = title
                this.dialogFormVisible = true
            },
            showEditDialog(title, item) {
                this.title = title
                this.id = item.id
                this.attendPerson = item.attendPerson
                this.dialogFormVisible = true
                getSpecialAgendaById({id:item.id}).then(
                    (res)=>{
                        this.form.title = res.data.title;
                        this.form.url = res.data.url;
                        this.form.reportDep = res.data.reportDep;
                        this.form.linkAttends = res.data.linkAttends;
                        this.form.ips = res.data.ips;
                    }
                )
            },
            initForm() {
                this.disabled = false
                this.linkSpecial = null
                this.checked = false
                this.fileList = []
                this.$refs['form'].resetFields();
                this.form = {
                    title: "",
                    reportDep: "",
                    linkAttends: null,
                    remark:"",
                    accessories:[]
                }
                this.attendPerson = ""
                this.dialogFormVisible = false
            },
            //选择列席人员弹窗
            selectPerson(){
                this.$refs.attendList.showDialog()
            },
            handleUpload(file,fileList){
                const formData = new FormData()
                formData.append('file',file.raw)
                uploadFile(formData).then(
                    (res)=>{
                        const d = {
                            name: res.data.name,
                            saveName: res.data.saveName,
                        }
                        this.form.accessories.push(d)
                    }
                )
            },
            //选择特殊议程
            changeCheck(){
                console.log('chenge')
                if(this.checked){
                    this.$refs.selectSpecialAgenda.showDialog()
                }else{
                    this.form.title = ""
                    this.form.remark = ""
                    this.form.linkAttends = ""
                }
            },
            //获取特殊议程数据
            getInfo(data){
                this.disabled = data === null ? false: true
                this.form.title = data.title
                this.form.remark = data.remark
                this.form.linkAttends = data.linkAttends
                this.linkSpecial = data.id
            },
            //选择列席人员
            getPerson(data){
                this.attendPerson = ""
                this.form.linkAttends = data.map(e=>{
                    this.attendPerson += e.name +","
                    const d = {
                        attendId:e.id
                    }
                    return d
                });
                this.attendPerson = this.attendPerson.substr(0,this.attendPerson.length -1)
            },
            //提交
            submitForm() {
                let data;
                this.form.accessories.forEach((e,index)=>{
                    e.sortNum = index +1
                })
                if(this.checked){  //特殊议程
                    data = {
                        remark : this.form.remark,
                        accessories:this.form.accessories,
                        linkSpecial:this.linkSpecial
                    }
                }else{
                    data = {
                        title:this.form.title,
                        reportDep:this.form.reportDep,
                        remark:this.form.remark,
                        linkAttends:this.form.linkAttends,
                        accessories:this.form.accessories,
                    }
                }
                if(this.title == '添加议程'){
                    this.create(data);
                }else{
                    this.update(data)
                }
            },
            create(data){
                addAgendaByMeet(data).then(
                    (res)=>{
                        this.$message.success("新增议程成功")
                        this.dialogFormVisible = false
                        this.$emit('update',res.data)
                        this.initForm()
                    }
                )
            },
            update(data){
                updateAgendaByMeet(data).then(
                    (res)=>{
                        this.$message.success("修改议程成功")
                        this.dialogFormVisible = false
                        this.initForm()
                    }
                )
            }
        }
    }
</script>

<style scoped>

</style>