<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="listQuery.name" placeholder="请输入姓名" style="width: 200px;" class="filter-item"
@input="query()"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="query()" >
搜索
</el-button>
</div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="50">
</el-table-column>
<el-table-column
fixed
prop="name"
label="姓名"
width="100"
column-key="name"
>
</el-table-column>
<el-table-column
prop="birthday"
label="出生日期"
width="120"
sortable>
<template slot-scope="scope">
<span>{{ scope.row.birthday }}</span>
</template>
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="80">
<template slot-scope="scope">
<span>{{ scope.row.sex | getSex}}</span>
</template>
</el-table-column>
<el-table-column
prop="education"
label="教育程度"
width="100"
>
<template slot-scope="scope">
<span>{{ scope.row.education}}</span>
</template>
</el-table-column>
<el-table-column
prop="address1"
label="居住地址"
width="200">
</el-table-column>
<el-table-column
prop="mobile_phone"
label="手机号"
width="120">
</el-table-column>
<el-table-column
prop="status"
label="申请状态"
width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.status |getStatusStyle">{{ scope.row.status |getStatus}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="{row}">
<el-button
size="mini" type="primary" @click="handleUpdate(row)" :disabled="row.status!=0&&row.status!=3&&row.status!=6"
>编辑</el-button>
<el-button
size="mini"
type="danger" @click="handleDel(row)" :disabled="row.status!=0&&row.status!=3&&row.status!=6"
>删除</el-button>
<el-button
size="mini" type="success" @click="handleSubmit(row)" :disabled="row.status!=0&&row.status!=3&&row.status!=6"
>提交审核</el-button>
</template>
</el-table-column>
</el-table>
<!-- 编辑弹层功能 -->
<el-dialog title="申请管理-编辑" :visible.sync="dialogFormVisible">
<el-form ref="updateForm" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="ID" prop="id" v-show="false">
<el-input v-model="temp.id" />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="temp.name" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker type="datetime" v-model="temp.birthday" />
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="temp.sex" class="filter-item" placeholder="Please select">
<el-option v-for="item in sexOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item label="教育程度" prop="education">
<el-select v-model="temp.education" class="filter-item" placeholder="Please select">
<el-option v-for="item in educationOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item label="居住地址" prop="address1">
<el-input v-model="temp.address1" />
</el-form-item>
<el-form-item label="手机号" prop="mobile_phone">
<el-input v-model.number="temp.mobile_phone" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
取消
</el-button>
<el-button type="primary" @click="updateData()">
编辑
</el-button>
</div>
</el-dialog>
<!-- 删除弹层功能 -->
<el-dialog title="申请管理-删除" :visible.sync="dialogDelVisible">
<p>确定删除?</p>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogDelVisible = false">
取消
</el-button>
<el-button type="danger" @click="delData()">
删除
</el-button>
</div>
</el-dialog>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.pageNo"
:page-sizes="[10, 20, 30, 40]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="rows">
</el-pagination>
</div>
</template>
<script>
import {loanList,submitToApprove,loanDelete,loanUpdate} from '@/api/article'
import {sexOptions,educationOptions} from '@/utils/selectData'
export default {
name: 'ComplexTable',
data() {
return {
tableData: [], //表格展示的数据
pages:1, //总页数
rows:1, //总条数
listQuery:{
pageNo:1, //当前页面
pageSize:10, //条数
name:'' //查询条件
},
dialogDelVisible:false, //删除弹层显示与隐藏
dialogFormVisible:false, //编辑弹层显示与隐藏
sexOptions,
educationOptions,
temp:{
id:'',
name:'',
birthday:'',
}
}
},
filters:{
getStatusStyle(data){
switch (data) {
case 0:
return 'success';
case 1:
return 'info';
case 2:
return 'success';
case 3:
return 'warning';
case 4:
return 'info';
case 5:
return 'success';
case 6:
return 'warning';
case 7:
return 'danger';
default:
return data;
}
},
getStatus(data){
// status
// - 0-默认值进件状态
// - 1-提交初审状态
// - 2-初审通过状态
// - 3-初审拒绝状态
// - 4-提交终审状态
// - 5-终审通过状态
// - 6-终审拒绝状态
// - 7-生成合同状态
switch (data) {
case 0:
return '进件';
case 1:
return '提交初审';
case 2:
return '初审通过';
case 3:
return '初审拒绝';
case 4:
return '提交终审';
case 5:
return '终审通过';
case 6:
return '终审拒绝';
case 7:
return '生成合同';
default:
return data;
}
}
},
created() {
this.getList();
},
methods: {
getList(){ //获取数据
loanList(this.listQuery).then(res=>{
let {code} = res.data;
if(code=='20000'){
let {data,rows,pages} = res.data.data.data;
this.tableData = data; //列表展示
this.rows = rows; //总条数
this.pages = pages; //总页数
}
})
},
query(){ //按名称查询
this.getList();
},
//提交审核
handleSubmit(row){
submitToApprove({id:row.id}).then(res=>{
let {code} = res.data;
if(code=='20000'){
this.getList();
this.$notify({ //通知框
title: '提交审核',
message: '提交成功',
type:'success',
duration: 2000
});
}
})
},
//当前条数变化
handleSizeChange(val=this.listQuery.pageSize ){
this.listQuery.pageSize = val;
this.getList();
},
//当前页变化
handleCurrentChange(val=this.listQuery.pageNo){
this.listQuery.pageNo = val;
this.getList();
},
//删除弹层
handleDel(row){
this.temp = {...row};
this.dialogDelVisible = true; //弹层显示
},
//删除提交
delData(){
loanDelete({id:this.temp.id}).then(res=>{
let {code} = res.data;
if(code=='20000'){
this.getList();
this.dialogDelVisible = false; //弹层隐藏
this.$notify({ //通知框
title: '删除',
message: '删除成功',
type:'success',
duration: 2000
});
}
})
},
//编辑弹层
handleUpdate(row){
this.temp = {...row};
this.dialogFormVisible = true; //弹层显示
},
//编辑提交
updateData(){
loanUpdate(this.temp).then(res=>{
let {code} = res.data;
if(code=='20000'){
this.getList();
this.dialogFormVisible = false; //弹层隐藏
this.$notify({ //通知框
title: '编辑',
message: '编辑成功',
type:'success',
duration: 2000
});
}
})
}
}
}
</script>
关于独立组件 弹框 带分页
最新推荐文章于 2021-08-09 10:58:12 发布