fj-dc-ui/.svn/pristine/7f/7fa058eac9a6cf6a000736d43dfffd2ba6db5910.svn-base

<!--  -->
<template>
    <div style="width:100%;">
        <el-row style="text-align:center;">
            <el-col :span="1">
                 <el-button type="text" icon="el-icon-back" @click="goBack">后退.</el-button>
            </el-col>
            <el-col :span="22">
            </el-col>
            <el-col :span="1">
            </el-col>
        </el-row>
        <el-row :gutter="10" style="padding:0 15px;">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>问卷</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="showAddQuesDialog">添加问卷试题</el-button>
                    </div>
                    <div class="text item">
                        <el-table
                            :data="tableData"
                            :height="tableHight"
                            stripe
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="label"
                                label="填报项名称"
                                show-overflow-tooltip
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="isrequired"
                                label="是否必填"
                                :formatter="notNullFormatter"
                                show-overflow-tooltip
                                >
                            </el-table-column>
                            <el-table-column
                                prop="type"
                                label="填报项类型"
                                show-overflow-tooltip>
                            </el-table-column>
                            <!-- <el-table-column
                                prop="note"
                                label="备注"
                                show-overflow-tooltip>
                            </el-table-column> -->
                            <el-table-column
                                width="150"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        style="color:#409eff"
                                        size="mini"
                                        type="text"
                                        icon="el-icon-edit"
                                        @click.stop="editData(scope.$index, scope.row)">编辑</el-button>
                                    <el-button
                                        style="color:#e6a23c"
                                        size="mini"
                                        type="text"
                                        icon="el-icon-delete"
                                        @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            style="text-align:center;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                 <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>问卷预览</span>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showFormEvent">预览</el-button> -->
                    </div>
                    <div class="text item" :style="{'height':tableHight + 29 + 'px'}">
                       <simpleDataForm 
                            v-if="showForm"
                            :tableViewConfig="config" 
                            :labelWidth='`300px`'
                            >
                        </simpleDataForm>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <addQuestion
            v-if="addQues"
            :meetingInfoRow="meetingInfoRow" 
            :editFormData="editFormDataQus" 
            @cancelHandler="cancelHandlerQus"
            @addSuccessStatus="addSuccessStatusEventQues"
        ></addQuestion>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import simpleDataForm from '@widget/simpleDataForm.vue'
import addQuestion from './addQuestion'
import { quillEditor } from 'vue-quill-editor'
import { addMeetingBase,getQusLists,deleteQues } from "../../api/meetingAPI.js";
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        quillEditor,
        addQuestion,
        simpleDataForm
    },
    props:['meetingInfoRow'],
    data() {
    //这里存放数据
        return {
            fields:[],
            config:{
                "type": "list",
                "title": "问卷",
                "columnCount": 1,
                // "fields": [
                //     // {
                //     //     "prop": "1",
                //     //     "label": "培训人员",
                //     //     "type": "text",
                //     //     "isrequired": true, 
                //     //     "refObjValue": null,
                //     // },
                //     // {
                //     //     "prop": "22",
                //     //     "label": "您对于本次会议的日程安排",
                //     //     "type": "select",
                //     //     "isrequired": false,
                //     //     "refObjValue": "isNot",
                //     // },
                //     // {
                //     //     "prop": "11",
                //     //     "label": "对本次会议提出意见",
                //     //     "type": "textarea",
                //     //     "isrequired": false,
                //     //     "refObjValue": null,
                //     // },
                //     // {
                //     //     "prop": "123",
                //     //     "label": "测试",
                //     //     "type": "select",
                //     //     "isrequired": false,
                //     //     "refObjValue": null,
                //     // }
                // ],
            },
            editFormDataQus:{},
            addQues:false,
            showForm:false,
            pageNum:1,
            pageSize:10,
            total:0,
            tableData:[],
            tableDataForm:[],
        };
    },
    //监听属性 类似于data概念
    computed: {
        tableHight(){
            if(window.innerWidth <= 1366){
                return window.innerHeight - 360;
            }else{
                return window.innerHeight - 260;
            }
        }
    },
    //监控data中的数据变化
    watch: {
        showForm(n,o){
            this.showForm = n;
        }
    },
    //方法集合
    methods: {
        editData(index,row){
            this.editFormDataQus = row;
            this.addQues = true;
        },
        notNullFormatter:function(row, column){
            return row.isrequired == "1" ? '是':'否'
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        
        goBack(){
            this.$emit('geBack',true)
        },
        cancelHandlerQus(){
            this.addQues = false;
            this.getQusTableData();
        },
        showAddQuesDialog(){
            this.showForm = false;
            this.editFormDataQus = {};
            this.addQues = true;
        },
        //添加人员后冒上来的事件
        addSuccessStatusEventQues(item){
            if(item.success = true){
                this.cancelHandlerQus();
                this.$message.success('操作成功！');
            }else{
                this.$message.error(res.message);
            }
        },
        getQusTableData(){
            var _self = this;
            
            let obj = {
                "pageNum":_self.pageNumSgin,
                "pageSize":_self.pageSizeSgin,
                "meetId":_self.meetingInfoRow.id,
            }
            getQusLists(obj).then(response => {
                _self.tableData = response.data.list;
                _self.tableDataForm = response.data.list;
                _self.total = response.data.total;
                _self.tableDataForm.forEach((ele,index) => {
                    //  delete ele.id;
                    delete ele.meetId;
                    delete ele.position;
                    delete ele.note;
                    ele['prop'] = index;
                    if(ele.type == 'select'){
                        ele['refObjValue'] = 'isNot';
                    }else{
                        ele['refObjValue'] = null;
                    }
                 });
                // _self.tableData.map((value,index,arry)=>{
                //     if(value.type == 'select'){
                //         _self.fields.push({ 
                //             'prop':index,
                //             'label': value.label, 
                //             'type': value.type,
                //             'isrequired': value.isrequired,
                //             'refObjValue':'isNot',
                //         })
                //     }else{
                //         _self.fields.push({ 
                //             'prop':index,
                //             'label': value.label, 
                //             'type': value.type,
                //             'isrequired': value.isrequired,
                //             'refObjValue':null,
                //         })
                //     }
                   
                // })
                _self.config['fields'] = _self.tableDataForm;
                _self.showForm = true;
                // _self.showForm = true;
                console.log(_self.config);
            });
        },
        showFormEvent(){
            this.showForm = true;
        },
        handleDelete(index,row) {
            var _self = this;
            _self.showForm = false;
            this.$confirm('此操作将删除该填报项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteQues(row.id).then(response => {
                    if(response.success == true){
                        _self.$message.success('删除成功！');
                        _self.getQusTableData();
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getQusTableData();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>