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>
标签：function,Vue,PT,getList,params,var,query,data,页面 来源： https://www.cnblogs.com/zhuiqiuzhuoyueyouminxing/p/15214109.html