投票列表

src/api/news.js

@@ -123,4 +123,23 @@ export function getWebsiteNavPoolSite(data) {
     data
   })
 }
+//2.投票列表 start  fr ------------------------------------->
 
+//2.1 获取投票列表
+export function getSurveyList(params) {
+  return request({
+    url: '/news/getSurveyList',
+    method: 'post',
+    params
+  })
+}
+
+//2.2 获取投票详情
+export function getSurveyInfo(data) {
+  return request({
+    url: '/news/getSurveyInfo',
+    method: 'post',
+    data
+  })
+}
+// 2.投票列表 end  fr ------------------------------------->

src/router/index.js

@@ -380,6 +380,23 @@ export const constantRoutes = [
         }
       ]
     },
+    {
+      path: '/surveyList',
+      component: Layout,
+      children: [
+        {
+          name: '',
+          path: '',
+          component: () => import('@/views/news/surveyList'),
+          meta: {
+            title: '投票列表',
+            hidden: true,
+            breadcrumb: true
+          }
+        }
+      ]
+    },
+  
   // -----------fr---------
   // ----------liuj------------
     {

src/store/modules/news.js

@@ -1,5 +1,7 @@
 import { getArticleList, addArticle, delArticle, getArticleInfo, updateArticle, upArticleStatus, getGoodList, addGood, delGood, 
-  getGoodInfo, updateGood, websiteList, getWebsiteNavList, getWebsiteNavPool, getWebsiteNavPoolSite } from '@/api/news'
+  getGoodInfo, updateGood, websiteList, getWebsiteNavList, getWebsiteNavPool, getWebsiteNavPoolSite,
+  getSurveyList,getSurveyInfo,
+} from '@/api/news'
 
 const state = {
 
@@ -157,7 +159,29 @@ const actions = {
       })
     })
   },
+//1.投票列表 start   fr---------------------------------------->
+  //1.1获取投票列表
+  getSurveyList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getSurveyList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //1.2获取投票详情
+  getSurveyInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getSurveyInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 
+  //1投票列表 end ---------------------------------------->
 
 }
 

src/views/news/surveyList.vue

@@ -0,0 +1,567 @@
+<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>