Vue+Element-UI客户管理页面查询功能实现
Vue+Element-UI客户管理页面查询功能实现
目录
一、客户资料查询页效果
二、VSCode Vue项目
Customer.vue
HTML 全选
<template>
<div>
<el-tabs v-model="activeName"
type="border-card"
@tab-click="handleClick">
<el-tab-pane label="客户资料查询"
name="customerList">
<el-container>
<el-header style="background: rgb(245 245 245);;padding:5px;padding-top:10px;border:solid 1px #dadada;">
<el-row :gutter="20">
<el-col :span="16">
<el-form ref="form"
:model="queryForm"
label-width="80px">
<el-form-item label="登记时间">
<el-col :span="4">
<el-date-picker type="date"
placeholder="选择日期"
v-model="queryForm.d1"
style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line"
:span="2">-</el-col>
<el-col :span="4">
<el-date-picker placeholder="选择时间"
v-model="queryForm.d2"
style="width: 100%;"></el-date-picker>
</el-col>
<el-col :span="6">
<el-form-item label="姓名">
<el-input v-model="queryForm.name"></el-input>
</el-form-item>
</el-col>
</el-form-item>
</el-form>
</el-col>
<el-col :span="4">
<el-button type="primary"
@click="doQuery()"
icon="el-icon-search">查询</el-button>
<el-button type="warning"
@click="doClear()"
icon="el-icon-search">清空</el-button>
</el-col>
</el-row>
</el-header>
<el-table :data="tableData"
show-summary
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column type=index></el-table-column>
<el-table-column prop="id"
label="编号"
width="180"
sortable>
</el-table-column>
<el-table-column prop="date"
label="登记日期"
width="180">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column prop="address"
label="联系地址">
</el-table-column>
<el-table-column prop="amount"
label="保证金">
</el-table-column>
</el-table>
<el-footer style="margin-top:20px;">
<el-row>
<el-button type="success"
icon="el-icon-document-add"
@click="doAdd">新增</el-button>
<el-button type="danger"
icon="el-icon-delete"
@click="doDelete">删除</el-button>
<el-button type="primary"
icon="el-icon-edit"
@click="doEdit">修改</el-button>
</el-row>
</el-footer>
</el-container>
</el-tab-pane>
<el-tab-pane label="客户详情"
name="customerDetail">客户详情</el-tab-pane>
</el-tabs>
</div>
</template>使用的 element-UI 组件
- el-tabs / el-tab-pane
- el-container / el-header / el-footer
- el-row / el-col
- el-button
- el-table / el-table-column
Customer.vue 引入其他 js库
JavaScript 全选
// 引入js库 - 查询客户资料
import { getCustomerList } from '@/DataDicts/lib'
data 函数实现
Java 全选
data () {
return {
activeName: 'customerList', //当前页的名称,查询页面
currentRow: null, // 表格选择的行对象
// 查询条件模型
queryForm: {
name: '喜鹊',
d1: '2022-01-01',
d2: '2022-05-01'
},
// tableData: [] // 初始化无数据
tableData: getCustomerList() // 初始化数据
}
}
methods 属性实现
Java 全选
methods: {
handleClick (tab, event) {
// console.log(tab, event)
},
// 查询按钮事件
doQuery () {
this.tableData = getCustomerList(this.queryForm) // 调用其他库的方法
},
// 清空查询条件
doClear () {
this.queryForm.name = ''
this.queryForm.d1 = ''
this.queryForm.d2 = ''
this.tableData = []
},
// 新增
doAdd () {
var m = {
id: 'new',
date: '2022-03-02',
name: 'new喜鹊软件',
address: 'new东莞市东城万达中心写字楼',
amount: 1020
}
this.tableData.push(m) // 数组添加元素
},
// 删除选中的行
doDelete () {
if (this.currentRow == null) {
this.$alert('请选择要删除的记录！', '系统提示', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${action}`
})
}
})
} else {
const h = this.$createElement
this.$msgbox({
title: '消息',
message: h('p', null, [
h('span', null, '确定要删除吗？'),
h('i', { style: 'color: teal' }, '客户名称：' + this.currentRow.name)
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
instance.confirmButtonText = '执行中...'
// 等待1s窗体...
setTimeout(() => {
done()
setTimeout(() => {
instance.confirmButtonLoading = false
}, 100)
}, 1000)
} else {
done()
}
}
}).then(action => {
// 数组中删除记录
this.tableData.splice(this.tableData.indexOf(this.currentRow), 1)
this.$message({
type: 'info',
// message: 'action: ' + action
message: '删除成功！'
})
})
}
},
// 修改按钮事件
doEdit () {
},
// @current-change="handleCurrentChange"
// 选择一条记录进行操作
handleCurrentChange (row) {
this.currentRow = row
}
}普通消息提示窗体
对话框窗体
普通消息提示窗体
三、lib.js
JavaScript 全选
import Axios from 'axios'
const urlBase = 'http://192.168.0.1:20199/'
// 调用Api接口（未实现）
export function getCustomerListByApi () {
const url = urlBase + 'queryCustomer'
var list = null
Axios.post(url).then((response) => {
this.list = response.data.result
return this.list
}).catch((error) => {
console.log(error)
return list
})
}
// 输出独立函数, data：查询条件
export function getCustomerList (data) {
// data.name
var list =
[{
id: 'C001',
date: '2022-03-02',
name: '喜鹊软件',
address: '东莞市东城万达中心写字楼',
amount: 1020
}, {
id: 'C002',
date: '2022-03-04',
name: 'C/S框架网',
address: '东莞市东城万达中心写字楼',
amount: 1200
}, {
id: 'C003',
date: '2022-03-01',
name: 'CSCODE.NET',
address: '东莞市东城万达中心写字楼',
amount: 1040
}, {
id: 'C004',
date: '2022-03-03',
name: '刘大大',
address: '东莞市东城万达中心写字楼',
amount: 1050
}, {
id: 'C005',
date: '2022-03-03',
name: '习大大',
address: '东莞市东城万达中心写字楼',
amount: 1050
}]
return list
}
四、main.js
Java 全选
import Vue from 'vue'
import axios from 'axios'
import VueRouter from 'vue-router'
import Customer from './DataDicts/Customer'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import Routers from './router'
Vue.use(Element)
Vue.use(VueRouter)
Vue.config.productionTip = false
Vue.prototype.axios = axios
// VUE 2.0 / ES6写法
new Vue(
{
render: h => h(Customer)
}
).$mount('#app')
版权声明：本文为开发框架文库发布内容,转载请附上原文出处连接
YESWEB C/S框架网
