Vue PT程序页面

本文主要是介绍Vue PT程序页面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>
     <div>
               <!-- <p>开团表</p> -->
          <!-- 1 开团记录表  -->
       <el-breadcrumb>
           <el-breadcrumb-item>
               <router-link to="/">首页</router-link>
           </el-breadcrumb-item>

           <el-breadcrumb-item>开团记录表</el-breadcrumb-item>
       </el-breadcrumb>
            
            <!-- 搜索 -->
           <div class="content">
                 <el-form
                  inline
                  :model="query"
                  label-position="right"
                  label-width="60px"
                  size="small"
                  class="query-form"
                  @submit.native.prevent="getList()"
                  >
                  <el-form-item label="搜索">
                      <el-input v-model="query.key" placeholder="请输入关键词"> </el-input>
                   </el-form-item>
                       <!-- 查询按钮 -->
                         <el-form-item>
                              <el-button type="primary" @click="selClick()">查询 </el-button>
                               </el-form-item>
                               </el-form>
                              
              <!-- 主体  拼团状态程序   清除浮动  stateList  table have this State字段.-->
              <el-card class="box-card table">
                  <div class="clearfix" slot="header">
                      <span>开团记录列表</span>
                  </div>
                  <!-- 状态字段 state  name id? -->
                  <el-tabs v-model="query.State" @tab-click="getList()">
                      <el-tab-pane
                      v-for="item in stateList"
                      :label="item.name" 
                      :key="item.id"
                      :name="item.id.toString()"
                     > </el-tab-pane>
                  </el-tabs>

                
              </el-card>

              <!-- 列表 -->
    <el-table
    v-loading="loading"
    :data="tableData"
    ref="tableData"
    border
    stripe
    style="width:100%"
    @sort-change="sortChange"
    @filter-change="filterTag"
  >

  <el-table-column prop="ProTitle" label="商品标题"></el-table-column>
  <el-table-column prop="HeadName" label="会员名字"></el-table-column>
  <el-table-column prop="HeadPhoto" label="会员头像"></el-table-column>
  <el-table-column prop="GroupCount" label="几人团"></el-table-column>
  <el-table-column prop="PartCount" label="已参与人"></el-table-column>
  <el-table-column prop="CreateTime" label="开团时间"></el-table-column>
  <el-table-column prop="EndTime" label="结束时间"></el-table-column>

<!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button-group>
                <el-tooltip content="答题详情" placement="top">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="editClick(scope.row)"
                  ></el-button>
                </el-tooltip>

                <!-- 删除按钮顶部 -->
                <el-tooltip content="删除" placement="top">
                  <el-button
                    type="warning"
                    size="small"
                    icon="el-icon-delete"
                    @click="delClick(scope.row)"
                  ></el-button>
                </el-tooltip>
               <!-- 删除按钮底部 -->
                
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 50, 100]"
            layout="total,prev,sizes,pager,next,jumper"
            :total="total"
          ></el-pagination>
        </div>
      <!-- </el-card> -->
    </div>

    <!-- 弹框 -->
    <el-dialog
      :title="form.id > 0 ? '答题详情' : '添加考试'"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="form"
        ref="form"
        label-width="100px"
        :status-icon="true"
        @submit.native.prevent="submitForm(form)"
      >
        <el-table
          :data="questionData"
          ref="tableData"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="title" label="题目名称"></el-table-column>
          <el-table-column prop="selectA" label="选项A"></el-table-column>
          <el-table-column prop="selectB" label="选项B"></el-table-column>
          <el-table-column prop="selectC" label="选项C"></el-table-column>
          <el-table-column prop="selectD" label="选项D"></el-table-column>
          <el-table-column
            prop="customerKey"
            label="选择答案"
          ></el-table-column>
          <el-table-column prop="correctKey" label="正确答案"></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>

    </div>
</template>


<script>
// 1 引入URL控制器文件
import url from "@/plugins/urlHelper.js"
//2 data数据
export default {
    data(){
        return {
         domain:url.getDomain(),
         form:{},// form表单
         dialogVisible:false, // 对话框可见设置
         submiting:false,// 分包
         loading:false, // 加载
         tableData:[],// 表格数据
          total:0,// 全部的
          currentPage4:1,// 当前页面 4
          pageSize:10,// 每页显示多少条 
          query:{ state:"1"},// query 定义 
          stateList:[], // 状态数组

          
        };
  },
// 安装 函数方法
  mounted() {
    this.query.infoid = this.$route.query.id;
    //列表
    this.getList();
    this.initData();

  },
// 方法  获取枚举类接口C#中
  methods: {
      initData: function(){
      var _this =this;
      var link = url.getShop("GetListState");// 枚举类接口方法访问
      $.get(link, {},(res) => {
          _this.stateList = res; // 枚举类 状态数据

      });
      },
     handleSizechange: function(val) {
       this.pagesize = val;
       this.currentPage41;
       this.getList();
     },
// 排序
 sortChange: function (sortColumn) {
       this.query.sort = sortColumn.sort;
       this.query.order = sortColumn.order;
       this.getList();

 },
 //筛选
 filterTag:function (filter) {
     var val = filter["isEnable"][0];
     this.getList();
 },
 // 列表 
 getList:function() {

     var _this =this;
     _this.loading = true;
     var params = this.query;
     params.pageSize = _this.pageSize;
     params.pageIndex = _this.currentPage4;
     var link = url.getShop("GetList_ShopGroup");
     $.get(link,params,(data) => {
 _this.loading = false;
 _this.tableData = data.list;
 _this.total = data.total;

     });
 },
 // 查询
  selclick: function() {
      this.currentPage4 =1;
      this.getList();
  },




      
  },




    
}
</script>


<style>
/* 样式 */
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}


    
</style>

这篇关于Vue PT程序页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！