项目笔记 可能写的有点乱七八糟 参考意义不大
实现效果:点击查看按钮 查看里的信息内容都是当前被点击表格里的信息
大致思路
点击查看按钮 打印row(行) 看是否能够获取到该行的数据 如果可以获取到 就赋值给需要返显得表单
因为要把数据显示到查看上 所以把数据给了lookForm
注意:lookForm要在return里定义 lookform:{ }
<template>
<div class="refundManagement">
<!-- 老人姓名和处理状态选择 -->
<el-form :inline="true" :model="filters" class="demo-form-inline">
<el-form-item label="老人">
<el-input
v-model="filters.oldName"
placeholder="请输入老人姓名"
></el-input>
</el-form-item>
<el-form-item label="处理状态">
<el-select
v-model="filters.processingState"
placeholder="请选择处理状态"
>
<!-- <el-option label="已处理" value="yes"></el-option>
<el-option label="未处理" value="no"></el-option> -->
<el-option
v-for="item in processingStateList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" icon="el-icon-search" plain
>查询</el-button
>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table
:data="refundForm"
style="width: 100%"
:row-class-name="doubleStyle"
:header-cell-style="headStyle"
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }"
>
<!-- 表头 -->
<el-table-column label="工单编号" prop="oddNumbers" align="center">
</el-table-column>
<el-table-column label="老人姓名" prop="olderName" align="center">
</el-table-column>
<el-table-column label="处理状态" prop="processingState" align="center">
</el-table-column>
<el-table-column label="商品名称" prop="goodsName" align="center">
</el-table-column>
<el-table-column label="服务人员" prop="servicePersonnel" align="center">
</el-table-column>
<el-table-column label="退款金额" prop="refundMoney" align="center">
</el-table-column>
<el-table-column label="完成时间" prop="endTime" align="center">
</el-table-column>
<el-table-column label="退款原因" prop="refundReason" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
type="warning"
size="mini"
@click="auditHandle(scope.row)"
plain
v-if="auditShow"
>审核</el-button
>
<el-button
type="warning"
size="mini"
@click="auditEndHandle(scope.row)"
plain
v-else
>已审核</el-button
>
<el-button
type="primary"
size="mini"
@click="lookHandle(scope.row)"
plain
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹出审核框 -->
<el-dialog
title="审核"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
center
>
<el-form
ref="auditForm"
:label-position="labelPosition"
label-width="130px"
:model="auditForm"
>
<el-form-item label="退款审核是否通过:">
<el-radio
v-model="auditForm.auditRadio"
label="1"
@change="changeRadio($event)"
>是</el-radio
>
<el-radio
v-model="auditForm.auditRadio"
label="2"
@change="changeRadio($event)"
>否</el-radio
>
</el-form-item>
<el-form-item label="不通过原因:">
<el-input
v-model="auditForm.reasonFailure"
placeholder="请描述原因"
class="auditIpt"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" style="margin-right: 10px">
<el-button type="primary" plain @click="handleClose">取 消</el-button>
</span>
<span slot="footer" class="dialog-footer" style="margin-left: 10px">
<el-button type="primary" @click="auditSubmit">确 定</el-button>
</span>
</el-dialog>
<!-- 弹出查看框 -->
<el-dialog
title="查看"
:visible.sync="lookDialogVisible"
width="30%"
:before-close="handleClose"
center
>
<el-form
ref="lookForm"
:label-position="labelPosition"
label-width="130px"
:model="lookForm"
>
<el-form-item label="工单编号:" v-model="lookForm.oddNumbers">
{
{lookForm.oddNumbers}}
</el-form-item>
<el-form-item label="老人姓名:" v-model="lookForm.olderName">
{
{lookForm.olderName}}
</el-form-item>
<el-form-item label="商品名称:" v-model="lookForm.goodsName">
{
{lookForm.goodsName}}
</el-form-item>
<el-form-item label="服务人员:" v-model="lookForm.servicePersonnel">
{
{lookForm.servicePersonnel}}
</el-form-item>
<el-form-item label="退款金额:" v-model="lookForm.refundMoney">
{
{lookForm.refundMoney}}
</el-form-item>
<el-form-item label="完成时间:" v-model="lookForm.endTime">
{
{lookForm.endTime}}
</el-form-item>
<el-form-item label="处理状态:" v-model="lookForm.processingState">
{
{lookForm.processingState}}
</el-form-item>
<el-form-item label="退款原因:" v-model="lookForm.refundReason">
{
{lookForm.refundReason}}
</el-form-item>
<el-form-item label="是否审核通过:" v-model="lookForm.auditRadio">
{
{lookForm.auditRadio}}
</el-form-item>
<el-form-item label="不通过原因:" v-model="lookForm.reasonFailure">
{
{lookForm.reasonFailure}}
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" style="margin-right: 10px">
<el-button type="primary" plain @click="handleClose">取 消</el-button>
</span>
<span slot="footer" class="dialog-footer" style="margin-left: 10px">
<el-button type="primary" @click="lookSubmit">确 定</el-button>
</span>
</el-dialog>
<el-row>
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
layout="total, prev, pager, next"
:total="this.refundForm.length * 1"
:page-size="pageSize"
align="center"
class="fenye"
></el-pagination>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
filters: {
olderName: "", //投诉平台
processingState: "", //会员姓名
},
//处理状态列表
processingStateList: [
{ label: "待处理", value: 1 },
{ label: "已处理", value: 2 },
],
//操作-处理弹框
auditForm: {},
//用户信息
refundForm: [
{
oddNumbers: "13255488",
olderName: "刘大爷",
processingState: "待处理",
goodsName: "吃早餐",
servicePersonnel: "李xx",
refundMoney: 100.0,
endTime: "2022-02-28",
refundReason: "早餐不丰富",
handle: "",
},
],
//审核
auditForm:{
processingState:"2",
reasonFailure:"消息不准确"
},
data:{},
lookDialogVisible: false,
auditShow: "false",
labelPosition: "right",
dialogVisible: false,
currentPage: 1, //初始页
pageNum: 1, //页码
pageSize: 10, //每页显示的条数
total: 0, //数据的总数,
};
},
methods: {
//查询 按钮
onSubmit() {
console.log("submit!");
},
//表格隔行变色
doubleStyle({ row, rowIndex }) {
if ((row, rowIndex % 2 === 0)) {
return "";
} else {
return "blue";
}
},
headStyle() {
return "background-color: rgb(212, 245, 250);";
},
//关闭dialog按钮
handleClose(done) {
this.dialogVisible = false;
this.lookDialogVisible = false;
},
//审核
auditHandle(row) {
this.dialogVisible = true;
},
//审核弹框里的确定按钮
auditSubmit(val) {
this.dialogVisible = false;
this.auditShow = false;
console.log(val);
this.data = Object.assign({},this.auditForm)
console.log(this.data);
},
//已审核
auditEndHandle() {
this.dialogVisible = false;
this.auditShow = true;
},
//查看工单
lookHandle(row) {
this.lookDialogVisible = true;
console.log(row,'查看');
this.lookForm = row;
this.lookForm = Object.assign({},this.data);
},
//查看里的确定
lookSubmit() {
this.lookDialogVisible = false;
},
/*初始页currentPage、初始每页数据数pagesize和数据data*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
//改变每页显示的条数
this.PageSize = val;
this.queryList(); //刷新列表的数据
},
/* 当前页变化 */
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.queryList(); //刷新列表的数据
},
},
};
</script>
<style lang="scss" scoped>
.el-table thead {
color: #2d2d2d;
font-weight: 400;
font-size: 16px;
}
.el-form-item {
margin-bottom: 15px;
}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 33%;
}
.el-form-item__content {
display: inline-block;
}
.el-table .blue {
background: #e6f3f8;
}
.el-form--inline .el-form-item__label {
width: 81px;
height: 40px;
line-height: 40px;
}
.el-form--label-left .el-form-item__label {
line-height: 41px;
}
.el-dialog__body .el-dialog__footer {
text-align: center !important;
}
.el-textarea__inner {
width: 80%;
}
.el-form-item__content {
height: 30px;
line-height: 20px;
}
.el-dialog__footer {
padding: 50px 20px 20px;
}
.el-form-item__content {
display: inline-block;
}
.el-dialog__body .el-form-item__label {
text-align: right;
width: 100px;
}
.el-table__cell .demo-table-expand .el-form-item__label {
width: 114px;
}
.complaints {
padding-top: 15px;
background-color: #fff;
}
.manageRadio {
text-align: center;
margin-top: 20px;
}
.refundManagement {
background-color: #fff;
}
.refundManagement /deep/ .el-form--inline {
padding: 10px 10px 2px;
}
.refundManagement .auditIpt {
width: 80%;
}
.refundManagement /deep/ .el-form-item__content {
line-height: 40px!important;
}
</style>