vue + element 列表 新增 查询 封装

一、【主列表】list.vue

<template>
	<!-- 外部用户 -->
	<div class="externalUsers">
		
		<el-form :inline="true" :model="queryParam" ref="queryParam" label-width="90px" class="demo-form-inline">
			<el-form-item label="订单号：" prop="position">
				<el-input v-model="queryParam.order_num" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="下单人：" prop="position">
				<el-input v-model="queryParam.create_name" placeholder="请输入"></el-input>
			</el-form-item>
			<el-button type="primary" size="small" @click="conditionQuery">查询</el-button>
			<el-button size="small" @click="resetQuery()">重置</el-button>
		</el-form>
		
		<el-button type="primary" size='small' @click="handleAdd('【动态传参】')" style="margin-left: 20px;">新增</el-button>
		
		
		<!-- 内容区 -->
		<el-row>
			<el-container class="mian">

				<!-- table表格 -->
				<el-main>
					<div class="table">
						<el-table 
							ref="table"
							:stripe="true" 
							:data="tableData" 
							:row-key="getRowKeys"
							size="small" 
							:header-cell-style="{
							  'text-align': 'center',
							  background: '#fafafa'
							}" 
							height="63vh"
							@selection-change="handleSelectionChange">
							
							<el-table-column type="selection" align="center" :reserve-selection="true" width="60">
							</el-table-column>
							<el-table-column prop="order_num" label="订单号" sortable align="center">
							</el-table-column>
							<el-table-column prop="create_name" label="下单人" sortable align="center" width="200">
							</el-table-column>
							<el-table-column prop="create_phone" label="手机号" sortable align="center">
							</el-table-column>
							<el-table-column prop="client_name" label="客户名称" sortable align="center">
							</el-table-column>
							<el-table-column prop="annualCount" label="年费件数" sortable align="center">
							</el-table-column>
							<el-table-column prop="all_official_fee" label="官费金额" sortable align="center">
							</el-table-column>
							<el-table-column prop="all_agency_fee" label="代理费金额" sortable align="center">
							</el-table-column>
							<el-table-column prop="order_status" label="订单状态" sortable align="center">
							</el-table-column>
							<el-table-column prop="create_date" label="下单时间" sortable align="center" width="150">
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="220">
								<template slot-scope="scope">
									<el-button type="text" size="small" v-if="scope.row.order_status_code =='F' || scope.row.order_status_code =='A' || scope.row.order_status_code =='C' || scope.row.order_status_code =='D'"  @click="changeStatus('D',scope.row.order_num)">删除</el-button>
								</template>
							</el-table-column>
							<!-- 空数据 -->
							<div slot="empty" style="height: 63vh;display: flex;justify-content: center;align-items: center;">
								<div>
									<img src="../../../static/img/Group 6.png" />
									<p>暂无数据</p>
								</div>
							</div>
						</el-table>
						
						<!-- 分页 -->
						<div style="height: 50px;display: flex;justify-content: flex-end;align-items: center;margin-right: 10px;" class="myTranslationContent_page">
							<!-- 当前页数，支持 .sync 修饰符 1  -->
							<el-pagination 
								@size-change="handleSizeChange" 
								@current-change="handleCurrentChange"
								:current-page.sync="params.currPage" 
								:page-sizes="params.pageSizeArr"
								:page-size="params.pageSize" 
								:layout="params.layout"
								:total="params.totalCount">
							</el-pagination>
							
						</div>
					</div>
				</el-main>
			</el-container>
		</el-row>
		
		<!-- 新增 -->
		<com-modal ref="modalForm" @ok="modalFormOk"></com-modal>
		
	</div>
</template>
<script>
	import comModal from './modules/comModal'
	import { CommonJs } from '../../api/common.js'	//引入公共js
	export default {
		mixins:[CommonJs],
		components: {
		  comModal
		},
		data() {
			return {
				url:{
					list:"/api/AnnualFeeOrder/GetAnnualFeeOrderList",
				},
				
			};
		},
		computed: {

		},
		mounted() {

		},
		methods: {

		},
		created() {

		},
	};
</script>

<style scoped>

</style>

二、【新增】modal.vue

<template>
	<div>
		<el-dialog
		  :title="title"
		  :visible.sync="dialogVisible"
		  width="30%"
		  >
		  
		  <com-form ref="realForm" @ok="submitCallback"></com-form>
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="handleOk">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import comForm from './comForm'
	export default{
		components: {
		  comForm
		},
		data(){
			return{
				title:'',
				dialogVisible:false,
				
			}
		},
		methods:{
			add () {
			  this.dialogVisible = true
			},
			// 确定
			handleOk(){
				this.$refs.realForm.submitForm();
			},
			
			// form 触发此方法
			submitCallback(){
			  this.$emit('ok',this.$refs.realForm.model);	//触发list页面ok的方法
			  this.dialogVisible = false;
			},
		}
		
	}
</script>

三、【新增】form.vue

<template>
	<div>
		<el-form ref="form" :model="model" label-width="80px">
			<el-form-item label="活动名称">
				<el-input v-model="model.name" placeholder="请输入活动名称"></el-input>
			</el-form-item>
			<el-form-item label="活动区域">
				<el-select v-model="model.region" placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				model:{}
			}
		},
		created() {
			this.modelDefault = JSON.parse(JSON.stringify(this.model));
		},
		methods:{
			submitForm(){
				//console.log(this.model);
				this.$emit('ok',this.model);	//触发父页面的submitCallback方法
			},
		}
	}
</script>

四、【公共js】common.js

import Vue from 'vue'

export const CommonJs = {
  data(){
    return {
		
		queryParam: {},		// 列表主页面查询条件

		tableData: [], 		// 表格数据
		
		// 分页参数
		params: {
			currPage: 1, 	//初始页面
			pageSize: 5, 	// 每页的数据
			totalCount: 0,  //总共多少条数据
			pageSizeArr:[2, 5, 10, 50,100,300],	//条数切换
			layout:'total,sizes, prev, pager, next, jumper',
			condition:{}
		},
		
		checkData: [], 	 // table 选中数据
		checkDataID: [], // table选中数据ID
		
		
		
    }
  },
  created() {
    this.loadData();
  },
  methods:{
// ********************一、【新增】 弹框出现到保存成功，重新回调列表方法******************************************************************
	// 新增
    handleAdd(m) {
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = "新建" + m;
      this.$refs.modalForm.disableSubmit = false;
    },
	// 新增弹框 保存方法（获取form值；调用保存接口；清空列表勾选）
	modalFormOk(params){
		console.log(params)	//$emit传参
		// 新增/修改 成功时，重载列表
		this.loadData();	
		//清空列表选中
		this.$refs.table.clearSelection()	
		this.onClearSelected()
	},
	// 新增弹窗 保存方法清空列表选中的值
	onClearSelected(){
	  this.checkData = [];	 // table 选中数据
	  this.checkDataID = []; // table选中数据ID
	},
	
	
	
	  
// ********************二、【列表】*********************************
	// 初始化获取列表数据
	loadData(){
		var _this = this;
		this.$http
			.post(this.url.list, this.params)
			.then(function(res) {
				if (res.data.resultcode == 200) {
					_this.tableData = res.data.result;
					_this.params.totalCount = Number(res.data.total)
				}
			})
			.catch((error) => {});
	},
	// 查询
	conditionQuery() {
		// 对象拼接
		// this.params = Object.assign(this.params,this.queryParam);
		
		this.params.condition = this.queryParam;
		this.loadData();
	},
	
	// 重置
	resetQuery() {
		
		this.queryParam = {};
		
		this.params.condition = {}
		this.params.currPage = 1 
		this.params.pageIndex = 1;
		this.loadData();
		
	},
	
	// 列表复选框选中赋值
	handleSelectionChange(val) {
		this.checkData = val;
	},
	/*
	    分页的记忆功能，分页保存选中的数据
	    :row-key="getRowKeys"
	    :reserve-selection="true"
	*/
	getRowKeys(row) {
		return row.order_num; // n_ID为列表数据的唯一标识
	},
	// 分页每页展示条数更改
	handleSizeChange(val) {
		this.params.currPage = 1;
		this.params.pageSize = val;
		this.loadData();
	},
	//分页切换
	handleCurrentChange(val) {
		this.params.pageIndex = val;
		this.loadData();
	},
	
	// ********************************************************
  }
}