admin_home/src/views/news/surveyList.vue

<template>
    <!-- 广告位管理 -->
    <div>
        <!-- 头部搜索框部分 -->
        <div class="title">
            <el-row>
                <el-col :span="8" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">投票名称</div>
                        <el-input v-model="tabbarName" class="input" placeholder="请输入投票名称" :maxlength="10"></el-input>
                    </div>
                </el-col>
                <el-col :span="8" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">投票类型</div>
                        <el-select v-model="typeid" placeholder="请选择投票类型...">
                            <el-option label="单选" value="0"></el-option>
                            <el-option label="多选" value="1"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="8" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">是否开启</div>
                        <el-select v-model="status" placeholder="请选择是否开启...">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </div>
                </el-col>
                
            </el-row>
            <el-row>
                <el-col :span="8" class="right">
                    <div class="btnList">
                        <button class="search" @click="goSearch">搜索</button>
                        <button class="reset" @click="goReset">重置</button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <el-row>
                <template>
                    <el-table class="my-table" :data="tableData" style="width: 100%">
                        <el-table-column type="index" :index="indexMethod" label="编号" width="90">
                        </el-table-column>
                        <el-table-column prop="survey_name" label="投票名称" width="500">
                        </el-table-column>
                        <el-table-column prop="survey_type" label="投票类型" width="100" >
                            <template slot-scope="scope">
                                <span v-if="scope.row.survey_type==1">
                                    多选
                                </span>
                                <span v-if="scope.row.survey_type==0">
                                    单选
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="is_survey" label="是否开启" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.is_survey==1">
                                    是
                                </span>
                                <span v-if="scope.row.is_survey==0">
                                    否
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" label="添加时间" width="">
                        </el-table-column>
                        <el-table-column prop="updated_at" label="修改时间" width="">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="">
                            <template slot-scope="scope">
                                <div class="listBtnBox">
                                    <div class="listLookBtn" @click="goLook(scope.row.survey_id)">
                                      <i class="el-icon-view"></i>
                                      查看
                                  </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
        </div>
        <!--分页 start------------------------------------------------------------>
        <div class="alignBox">
            <el-row>
                <el-col :span="24">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--分页 end------------------------------------------------------------>
        <!--表格内容 end------------------------------------------------------------>

        <!-- 弹出框 编辑 start----------------------------------------------------------->
        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <p style="font-size: 16px;"><b>投票名称：{{sur_name}}</b></p>
            <el-table :data="choose" style="width: 100%" height="250" row-key="id" border lazy :load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="index" :index="indexMethod"></el-table-column>
                <el-table-column prop="choice_name" label="选项名称"></el-table-column>
                <el-table-column prop="results" label="投票结果" width="180"></el-table-column>
            
            </el-table>
            <p style="font-size: 16px;text-align: right;margin-right: 80px;">总计：{{ total_num }}</p>
              <div class="dialogBtn">
                  <el-button type="primary" @click="cancelForm">确定</el-button>
              </div>
          </el-form>
      </el-dialog>
        <!-- 弹出框 编辑 end----------------------------------------------------------->
    </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle.vue';
//引入公用样式
import '@/styles/global.less';
// import { getSurveyList,getSurveyInfo } from '@/api/news'
export default {
    components: {
        tableTitle,//表格标题-
    },
    data() {
        return {
            typeid: "",
            status: "",
            tableDataInfo: [],
            tableData1: [],
            tableDivTitle: "投票列表",  //列表标题
            dialogTableVisible: false,      //编辑弹框
            dialogName: '编辑', //编辑弹窗名称
            disabled: false, //禁用
            tableData: [],//表格数据
            tableDataInfo: [],//弹框数据
            choose: [], //选择的数据
            choose_other: [], //其他数据
            // choose_others: [], //其他选择的数据
            activeid: "",  //活动id 
            // 分页相关
            total_num: 0,  //投票总数
            sur_name: "", //投票名称
            // survey_type: "", //投票类型
            // is_survey: "", //是否开启
            page: 1,
            pageSize: 10,
            total: 0,
            tabbarName: '', //底部导航名称
            ruleForm: {
                tabbarName: '', //底部导航名称
            },
            rules: {
                tabbarName: [{ required: true, message:"课题分类名称不能为空"}],
            }
        }
    },
    methods: {         
        //1.1 开始请求列表信息方法
        getData(){
            let formData = {
                page: this.page,
                pageSize: this.pageSize,
                survey_name:this.tabbarName,
                survey_type:this.typeid,
                is_survey:this.status
            }
            this.$store.dispatch('news/getSurveyList', formData).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.rows;
                    this.total = res.data.count;  
                }else{
                    this.$message({


                        type: 'error',
                        message: '获取失败！'
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '暂无记录！'
                });
            })
        },
         //1.2 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.page = val;
            this.getData();
        },
        //1.3 点击分页
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        // 1.6 搜索按钮
        goSearch() {
            this.getData()
        },
        //1.7 重置按钮
        goReset() {
            this.page = 1
            this.tabbarName = ""
            this.typeid = ""
            this.status = ""
            this.getData()
        },
       //取消添加或编辑
        cancelForm() {
            this.dialogTableVisible = false
        },
       
        //列表和分页相关 end ------------------------------------------------------------>
        // //1.9 查看
        goLook(id, val) { 
            this.dialogName = '查看'

            this.activeid = id
            this.dialogTableVisible = true
            this.disabled=true
            //数据回显\
            this.getSurveyInfo(id);
            // this.ruleForm.tabbarName = val.survey_name //课题分类名称

        },

        //1.7 添加
        addTopicClass() {
            this.dialogTableVisible = true
            this.dialogName = "添加"
            this.disabled=false
            //添加时清空回显回来的数据
            this.ruleForm.tabbarName = '' //课题分类名称
        },

        getSurveyInfo(sur_id) {
          if (sur_id !== '') {
              let data = { sur_id: sur_id }
              this.$store.dispatch('news/getSurveyInfo', data).then(res => {
                 if(res.code==200){
                    this.sur_name = res.data.choose[0].survey_name
                    this.total_num = res.data.total
                    if(res.data.choose.length>0){
                        this.choose = res.data.choose
                    }
                    // console.log(res.data.other.id);
                 }
                }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '网络错误，请重试！'
                  });
               })
          } 
        },
        indexMethod(index) {
            return index +1;
        },
        load(tree, treeNode, resolve) {
            setTimeout(() => {
                // 初始化一个空数组来存储所有的 children 数据
                let allChildren = [];
                // 遍历 choose 数组
                this.choose.forEach(item => {
                    if (item.children && item.children.length > 0) {
                        // 如果 item 有 children 属性且不为空，则将其合并到 allChildren 数组中
                        allChildren = allChildren.concat(item.children);
                    }
                });
                // 将 allChildren 数组传递给 resolve 函数
                resolve(allChildren);
            }, 1000);
        }
      
    },
    mounted() {
        this.getData()
    },
}
</script>

<style scoped lang="less">
input[aria-hidden=true] {
    display: none !important;
}

// 提示信息
.tips {
    margin: 30px;
    background-color: #e9ecf9;
    border-radius: 11px;

    .tipsIcon {
        margin: 10px 15px;
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/advertise/Info Circle.png") no-repeat;
        vertical-align: middle;
    }

    .tipsText {
        font-size: 14px;
        color: #666666;
    }
}

// 头部
.title {
    margin: 30px 30px 20px 30px;
    padding: 30px 30px 40px 30px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid #E9EDF7;

    .left {
        float: left;
    }

    .right {
        float: right;
    }


    .searchBox {
        ::v-deep .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 80%;
        }

        .searchTitle {
            padding-bottom: 10px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 16px;
        }

        .el-select {
            width: 100%;
            display: inline-block;
            position: relative;
        }
    }


    .btnList {
        float: right;
        padding-top: 28px;

        button {
            height: 38px;
            border: none;
            border-radius: 8px;
            padding: 0 30px;
        }

        .search {
            background-color: #5570f1;
            color: #fff;
            margin-right: 20px;
        }

        .reset {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            background: #F5F7FB;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid rgba(85, 112, 241, 0.11);
        }
    }
}
.layerBox {
    padding: 30px 20px;
    position: relative;

    .btn {
        margin-bottom: 20px;
        position: absolute;
        top: 30px;
        right: 20px;
        height: 38px;
        color: #fff;
        background-color: #5570f1;
        border: none;
        border-radius: 8px;
        padding: 8px 28px 9px;
        box-sizing: border-box;
    }

    .listBtnBox {
        justify-content: left;
    }


    .listDeleteBtn,
    .listEditBtn,
    .listLookBtn {
        margin-left: 0px;
        padding-left: 0px;
        margin-right: 20px;
        width: 76px;
        height: 36px;
        line-height: 36px;
    }


    .listLookBtn {
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        color: #55b5f1;
        background-color: rgba(85, 181, 241, 0.16);

        >i {
            padding-right: 8px;
        }
    }

    ::v-deep .el-form-item {
        margin-bottom: 50px;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep .el-input--medium,
    ::v-deep .el-form-item__label {
        line-height: 36px;
        font-size: 16px;
    }
}

// 弹出层内容
.dialogText {
    margin: 0 7px 0 3px;
    padding-bottom: 1px;
    padding: 30px 60px 1px 20px;
    background-color: #f5f7fb;

    .adImage {
        width: 140px;
        height: 140px;
        line-height: 210px;
        border-radius: 12px;
        border: 1px solid rgba(85, 112, 241, 0.11);

        img {
            width: 140px;
            height: 80px;
        }
    }



    ::v-deep .avatar {
        width: 140px;
        height: auto;
    }

    .price {
        ::v-deep .el-input {
            width: 29%;
        }
    }

    .example {
        font-family: Microsoft YaHei;
        color: #5570F1;
    }

    .el_btnList {
        margin-right: 15px;
        margin-top: 20px;
    }

    //日期时间选择器的宽
    ::v-deep .el-date-editor.el-input {
        width: 48%;
    }

    ::v-deep .el-button+.el-button {
        margin-left: 0px;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep .el-form-item {
        margin-bottom: 50px;
    }
}

// 弹出层按钮
.dialogBtn {
    text-align: center;
    margin: 50px auto 20px;

    button {
        width: 184px;
        padding: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        border: none;
        border-radius: 12px 12px 12px 12px;
    }

    // 取消
    .cancel {
        color: #333333;
        background-color: #f5f7fb;
        border: 2px solid rgba(85, 112, 241, 0.11);
    }

    // 提交
    .submit {
        color: #fff;
        background-color: #5570F1;
        margin-left: 40px;
    }
}

//审核弹出框
.radioGroup {
    ::v-deep .el-form-item {
        margin-top: 40px;
        margin-bottom: 0;
    }
}

.graph {
    background-color: #f5f7fb;
    padding: 60px 100px;
    overflow: hidden;

    li {
        float: left;
    }

    >li:first-child {
        margin-right: 100px;
    }
}

.dialog-footer {
    margin: 0 auto;
}
</style>