Las notas del proyecto pueden estar un poco desordenadas y la referencia no es significativa.
Efecto de logro: haga clic en el botón Ver para ver el contenido de la información en la tabla en la que se hace clic actualmente
Idea general
Haga clic en el botón Ver para imprimir la fila (fila) para ver si se pueden obtener los datos de la fila, si se puede obtener, asígnelo al formulario que se debe devolver.
Debido a que los datos se mostrarán en la vista, los datos se entregan a lookForm
Nota: lookForm debe definirse en el retorno de 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>