搜索封装+crud+重点细节优化

新建GSearchQuery.vue

<template>
<el-row :span="24>
	<el-input type="text" v-model="query"></el-input>
	<slot></slot>
</el-row>
</template>

data() {
	return{
		query:''
}}

index.vue 引入组件

<GSearchQuery></GSearchQuery>

组件全局声明
plugin下

继续封装组件
GSearchQuery.vue下

watch: {
	query() {
		this.debounceQuery();
}
}

name: 'GSearchQuery'
data() {
	return {
		query:' '
}}

methods: {
	debounceQuery: debounce(() => {
		// this.loadLoanByPage(1);
		console.log('准备查询')
},1000)
}}

el-input 加

placeholder = "请输入名称"

<style scoped>
.el-row {
	margin-bottom:10px
}
</style>

index 下

<GSearchQuery>
	<template v-slot = "{q}">
	<el-button @click="doQuery(prop)">搜索</el-button>
	</template>
</GSearchQuery>

<slot :q="query"></slot>

doQuery(query){
	console.log()
}

:span = "$scopedSlots.default?22:24"

使用混入优化分页代码量
该名称

input-manager下的
index.vue

import {pager} from '@/mixins'

mixins:[paper]

创建mixins文件
pager.js

index

//* 是一个模块， {default,具名导出}
export {default as pager } from './pager'

pager下

参数改动如下：

pageSizes:[10,20,30,40],
pageSize:10,
query:'',
total:0,

setTotal(total) {
	this.total = total;
}

computed: {
	frontPageOptions(){
		return {
			currentPage:this.currentPage,
			pageSize:this.pageSize,
			pageSizes: this.pageSize,
			query:this.query
			total:this.total
	}
}

input-manager 下index

:pageOptions = "frontPageOptions"

// 后端访问数据参数
getApiPager() {
	return {
		pageNo:this.currentPage,
		pageSize:this.page,
		name:this.query
}}

let params = {
	pageNo:this.currentPage,
		pageSize:this.page,
}
if(this.query && this.query.trim() != " "){
	params.name = this.query;
}
return params;

crud.js

export deault {
	methods: {
		init(){
		// 数据初始化
}}}

细节优化
1、每次查询时候的小问题

拦截器request下

if(response?.data?.code === 20000) {
	if(typeof response?.data?.data === 'string'); // 新增
	Message.success(response?.data?.data);
	return response;	
}

2 表格很丑
==GTable.vue ==

// gOptions 下的height 删掉 

loanListConf.js

// option下的height 删掉

this指向问题

pageOptions、options下的箭头函数换成普通函数

input-manager下

按钮编辑下添加@click = “showEdit()”

数据怎么传输进来的呢？

<template v-slot = "{ row }">
<el-button @click="showEdit(row)" type="primary">编辑</el-button>
</template>

方法下新建方法showEdit()

showEdit(row) {
	console.log('当前行L',row)
}

添加弹窗
element下
Dialog

<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<span>这是一段信息</span>
<span slot = "footer">
	<el-button @click = "dialogVisible = false">取消</el-button>
	<el-button type="primary" @click="dialogVisible = false">确定</el-button> 
</span>

在data中声明dialogBisible，默认值是false
在showEdit函数下，添加

this.dialogBisible = true;

<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<GFormCreator :conf="editConf" @submit = "save"></GFormCreator>
<span slot = "footer">
	<el-button @click = "dialogVisible = false">取消</el-button>
	<el-button type="primary" @click="dialogVisible = false">确定</el-button> 
</span>

添加save方法

save(data) {
	console.log('保存数据',data)
}

data下声明editConf: {}

showEdit() 下

this.editCof = {
	items:[
		[{ label:'姓名',value:row.name}],
		[{label:'性别',value:row.sex,options:[
				{label:'男' :value:'1'},
				{label:'女' :value:'2'},
				
]}]]}

conf下 加了export

在inputPageConf.js下引入

import {sexOptions,companyOptions, marriageOptions, educationOptions } from '@/conf';

在input-manager的index下

import { sexOptions } from '@/conf'

showEdit() 下

this.editConf = {
	items: [
		[{type:'input',key:'name' ,label:'姓名',value: row.name}],
		[{ type:'select',key:'sex',label:' 姓名 ', value： row.sex,
		options: sexOptions }]
]
}

表单没有写验证
接着写

rules:[
	name:[{required:true,message:'必须填写用户名'}],
	sex:[{required:true,message:'必须填写性别'}]
]

删除这个页面下的提交和重置，重复了

colspan:20

GFormCreator.vue 下的样式添加

.el-select,.el-input {
	width:100%;
}

不管哪一行都弹出下图

不会销毁组件，淡入淡出？
methods下
save方法下

save(data) {
this.dialogVisible = false;
		this.$notify.success({
			title:'Info',
			message:'保存成功',
			showClose:false
});}

<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<GFormCreator v-if="exist" :conf="editConf" @submit = "save"></GFormCreator>
</el-dialog>

data声明

销毁子组件，控制组件的生命周期

@open="exist=true"  
@closed="exist=false"

:key="Math.random()"

key永远不相同