|
|
|
|
@ -2,386 +2,622 @@
|
|
|
|
|
<div class="detail-container">
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<span class="font-title-medium">退货商品</span>
|
|
|
|
|
<el-table
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
使用el-table组件来展示表格数据。
|
|
|
|
|
border属性用于给表格添加边框，使其样式上更清晰的显示表格结构。
|
|
|
|
|
class="standard-margin" 用于给这个表格元素添加一个自定义的类名，通过这个类名可以在CSS中定义相应的外边距等样式规则，以控制表格在页面中的布局显示效果。
|
|
|
|
|
ref="productTable" 是给这个表格元素添加一个引用标识，方便在Vue实例的JavaScript代码中通过this.$refs.productTable来获取这个表格组件的实例，进而可以调用它的一些方法或者访问它的属性等。
|
|
|
|
|
:data="productList" 是使用Vue的指令将名为productList的数据绑定到表格组件上，这个productList应该是在Vue实例的数据对象中定义好的数组类型的数据，表格组件会基于这个数据来渲染每一行的内容。
|
|
|
|
|
-->
|
|
|
|
|
<el-table
|
|
|
|
|
border
|
|
|
|
|
class="standard-margin"
|
|
|
|
|
ref="productTable"
|
|
|
|
|
:data="productList">
|
|
|
|
|
<el-table-column label="商品图片" width="160" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<img style="height:80px" :src="scope.row.productPic">
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="商品名称" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span class="font-small">{{scope.row.productName}}</span><br>
|
|
|
|
|
<span class="font-small">品牌：{{scope.row.productBrand}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="价格/货号" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
|
|
|
|
|
<span class="font-small">货号：NO.{{scope.row.productId}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="属性" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.productAttr}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="数量" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.productCount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="小计" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">￥{{totalAmount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="float:right;margin-top:15px;margin-bottom:15px">
|
|
|
|
|
<!-- 这里可以添加<el-table-column>等子组件来定义表格的具体列信息，比如列标题、列对应的数据字段等 -->
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
el-table-column组件用于定义el-table中的列信息。
|
|
|
|
|
label="商品图片" 属性指定了该列在表格头部显示的标题名称为“商品图片”，这样用户就能直观知晓这一列所代表的数据含义。
|
|
|
|
|
width="160" 属性设置了该列的宽度为160像素，通过设置合适的宽度可以让表格各列布局更加合理、美观，避免内容显示过于拥挤或稀疏。
|
|
|
|
|
align="center" 属性将该列中的内容在水平方向上进行居中对齐，使展示效果更加整齐、规范，符合常见的页面布局审美要求。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="商品图片" width="160" align="center">
|
|
|
|
|
<!--
|
|
|
|
|
template标签结合slot-scope="scope" 是一种在表格列中自定义内容渲染的方式。
|
|
|
|
|
slot-scope="scope" 这里的scope是一个包含了当前行数据等相关信息的对象，通过它可以访问到当前行对应的数据。
|
|
|
|
|
-->
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!--
|
|
|
|
|
img标签用于在表格单元格中展示图片。
|
|
|
|
|
style="height:80px" 是内联样式，用于设置图片的高度为80像素，以此来统一该列中图片展示的高度，达到整齐美观的视觉效果。
|
|
|
|
|
:src="scope.row.productPic" 是使用Vue的绑定语法，将src属性绑定到scope.row.productPic上，也就是从scope对象中获取当前行（row）对应的商品图片的路径（productPic）信息，从而正确地显示对应的商品图片。
|
|
|
|
|
-->
|
|
|
|
|
<img style="height:80px" :src="scope.row.productPic">
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
el-table-column 组件用于在 el-table 中定义具体的列信息。
|
|
|
|
|
label="商品名称" 属性设定了此列在表格头部所显示的标题文字为“商品名称”，方便用户明确该列所展示的数据内容大致范围。
|
|
|
|
|
align="center" 属性将该列单元格内的内容在水平方向进行居中对齐，让表格内的数据呈现更加规整、美观，符合常规的页面排版视觉效果要求。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="商品名称" align="center">
|
|
|
|
|
<!--
|
|
|
|
|
template 标签结合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格内容展示方式的常用手段。
|
|
|
|
|
slot-scope="scope" 这里定义的 scope 是一个包含了当前行诸多相关信息的对象，借助它可以访问到当前行（对应表格中的一行数据）的具体数据情况。
|
|
|
|
|
-->
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!--
|
|
|
|
|
span 标签在这里用于包裹文本内容，使其可以灵活地设置样式以及在 HTML 结构中进行布局。
|
|
|
|
|
class="font-small" 给 span 标签添加了一个名为“font-small”的类名，通常是在项目的 CSS 文件（或者是内联样式所在的样式作用域内）中定义了对应的字体大小等样式规则，以此来让文本以较小的字体呈现，可能是为了在表格单元格内更合理地展示信息，避免文字过大而影响整体布局美观性。
|
|
|
|
|
{{scope.row.productName}} 这是 Vue 中的插值表达式，它会将 scope 对象中 row 属性下的 productName 字段对应的值渲染显示出来，也就是展示当前行对应的商品名称信息。
|
|
|
|
|
-->
|
|
|
|
|
<span class="font-small">{{scope.row.productName}}</span><br>
|
|
|
|
|
<!--
|
|
|
|
|
这里同样使用 span 标签结合类名“font-small”来包裹文本内容，用于控制文本的样式呈现。
|
|
|
|
|
“品牌：{{scope.row.productBrand}}”中的插值表达式 {{scope.row.productBrand}} 用于获取并显示当前行对应的商品品牌信息，前面添加“品牌：”这样的固定文字，是为了更清晰地告知用户后面跟着的是商品的品牌内容，整体在表格单元格内更直观地展示商品相关的关键信息。
|
|
|
|
|
-->
|
|
|
|
|
<span class="font-small">品牌：{{scope.row.productBrand}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
el-table-column 组件用于在 el-table 中定义特定的列信息，以此来控制表格每列的展示内容、样式等相关属性。
|
|
|
|
|
label="价格/货号" 属性用于指定该列在表格头部显示的标题内容为“价格/货号”，使用这样的标题可以简洁地告知用户这一列将会呈现商品的价格以及货号相关信息。
|
|
|
|
|
width="180" 属性设置了此列的宽度为 180 像素，通过合理设置列宽，能够让表格整体的布局更加协调、美观，避免不同列的内容显示出现过宽或过窄等影响阅读体验的情况。
|
|
|
|
|
align="center" 属性使得该列单元格内的所有内容在水平方向上进行居中对齐，确保数据展示整齐、规范，符合常规页面设计中对于表格数据排版的美观要求。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="价格/货号" width="180" align="center">
|
|
|
|
|
<!--
|
|
|
|
|
template 标签配合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格具体内容呈现方式的常见做法。
|
|
|
|
|
slot-scope="scope" 这里定义的 scope 是一个包含了当前行各项相关信息的对象，借助它可以访问到当前行（也就是对应表格中的某一行完整数据）的各个数据字段情况。
|
|
|
|
|
-->
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!--
|
|
|
|
|
span 标签用于包裹具体的文本内容，通过添加类名等操作，可以方便地为其设置样式，同时在 HTML 结构里实现灵活的布局效果。
|
|
|
|
|
class="font-small" 给 span 标签添加了一个名为“font-small”的类名，一般情况下，在项目的 CSS 样式文件或者所在的样式作用域内，会针对这个类名预先定义相应的样式规则，例如设置较小的字体大小等，目的是为了让文本以更合适的尺寸在表格单元格内进行展示，避免字体过大占据过多空间而影响整体的布局美观程度。
|
|
|
|
|
“价格：￥{{scope.row.productRealPrice}}”中的插值表达式 {{scope.row.productRealPrice}} 会从 scope 对象中 row 属性下对应的 productRealPrice 字段获取值，并将其渲染显示出来，在前面添加“价格：￥”这样的固定文本描述，能更清晰地向用户表明后面跟着的是商品的具体价格信息，整体呈现出商品价格的展示形式。
|
|
|
|
|
-->
|
|
|
|
|
<span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
|
|
|
|
|
<!--
|
|
|
|
|
同样使用 span 标签并添加“font-small”类名来控制文本样式，保持和前面价格展示文本在样式上的一致性。
|
|
|
|
|
“货号：NO.{{scope.row.productId}}”里的插值表达式 {{scope.row.productId}} 用于获取并展示当前行对应的商品货号信息，在前面添加“货号：NO.”的固定文本，是为了更直观地告知用户后面显示的是商品的货号，让用户可以更清晰地分辨出不同的数据内容，符合良好的信息展示规范。
|
|
|
|
|
-->
|
|
|
|
|
<span class="font-small">货号：NO.{{scope.row.productId}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
以下是一系列用于定义 el-table 中不同列信息的 el-table-column 组件。
|
|
|
|
|
|
|
|
|
|
第一个 el-table-column 组件，用于定义展示“属性”信息的列。
|
|
|
|
|
label="属性" 属性指定了该列在表格头部显示的标题为“属性”，方便用户知晓此列所呈现的数据范畴。
|
|
|
|
|
width="180" 属性将该列的宽度设置为 180 像素，通过合理设定宽度，使表格布局更显协调美观，避免列宽不合适影响整体展示效果。
|
|
|
|
|
align="center" 属性让该列单元格内的内容在水平方向上居中对齐，确保数据排列整齐规范，符合常规的页面设计审美要求。
|
|
|
|
|
其内部 template 标签结合 slot-scope="scope" 来获取当前行数据，并展示相应内容。具体来说，{{scope.row.productAttr}} 这个插值表达式会从 scope 对象中 row 属性下的 productAttr 字段获取值，并渲染显示出来，也就是在单元格中展示当前行对应的商品属性信息。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="属性" width="180" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.productAttr}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!--
|
|
|
|
|
第二个 el-table-column 组件，用于定义展示“数量”信息的列。
|
|
|
|
|
label="数量" 属性设定该列在表格头部的标题为“数量”，清晰表明此列所展示的数据内容。
|
|
|
|
|
width="100" 属性将列宽设定为 100 像素，同样是为了优化表格整体的布局效果，让各列宽度适配展示内容的多少。
|
|
|
|
|
align="center" 属性使得该列内容在水平方向居中对齐，增强表格数据展示的规整性。
|
|
|
|
|
内部 template 标签中通过 {{scope.row.productCount}} 插值表达式，从 scope 对象的 row 属性下的 productCount 字段获取对应的值，并将其展示在单元格中，实现当前行商品数量信息的呈现。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="数量" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.productCount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!--
|
|
|
|
|
第三个 el-table-column 组件，用于定义展示“小计”信息的列。
|
|
|
|
|
label="小计" 属性指定了该列在表格头部显示的标题是“小计”，让用户明白此处展示的是经过一定计算后的金额小计数据。
|
|
|
|
|
width="100" 属性将该列宽度设为 100 像素，以适配表格布局，使各列看起来疏密得当。
|
|
|
|
|
align="center" 属性保证该列内容在水平方向上居中对齐，提升整体展示的美观度。
|
|
|
|
|
内部 template 标签里的 {{totalAmount}} 插值表达式，这里推测 totalAmount 应该是在 Vue 实例的 data 或者 computed 等相关属性中定义好的一个变量（可能是基于商品的单价、数量等计算得出的小计金额），会将其对应的值渲染显示出来，用于展示每一行对应的金额小计情况。
|
|
|
|
|
-->
|
|
|
|
|
<el-table-column label="小计" width="100" align="center">
|
|
|
|
|
<template slot-scope="scope">￥{{totalAmount}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="float:right;margin-top:15px;margin-bottom:15px">
|
|
|
|
|
<span class="font-title-medium">合计：</span>
|
|
|
|
|
<span class="font-title-medium color-danger">￥{{totalAmount}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card shadow="never" class="standard-margin">
|
|
|
|
|
<span class="font-title-medium">服务单信息</span>
|
|
|
|
|
<div class="form-container-border">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
使用 el-card 组件来创建一个卡片式的布局容器，shadow="never" 属性表示该卡片不显示阴影效果，class="standard-margin" 用于给卡片添加一个自定义的类名，通过这个类名可以在 CSS 中定义相应的外边距等样式规则，以控制卡片在页面中的布局显示效果，此卡片用于展示服务单相关信息。
|
|
|
|
|
-->
|
|
|
|
|
<el-card shadow="never" class="standard-margin">
|
|
|
|
|
<!--
|
|
|
|
|
使用 span 标签展示一个标题文本，class="font-title-medium" 给 span 标签添加了一个类名，用于设置该标题的字体样式（推测是中等大小的字体，具体样式由项目中对应的 CSS 规则定义），文本内容为“服务单信息”，用于明确下方展示内容的主题。
|
|
|
|
|
-->
|
|
|
|
|
<span class="font-title-medium">服务单信息</span>
|
|
|
|
|
<!--
|
|
|
|
|
div 标签作为一个容器，添加了 class="form-container-border" 类名（推测用于设置边框等样式来区分不同的信息块），内部包含多个 el-row 和 el-col 组件用于布局服务单的各项具体信息。
|
|
|
|
|
-->
|
|
|
|
|
<div class="form-container-border">
|
|
|
|
|
<!--
|
|
|
|
|
el-row 组件用于创建行布局，在 Element UI 的栅格系统中，多个 el-col 组件放置在 el-row 内来划分列，实现灵活的页面布局。
|
|
|
|
|
以下是第一组 el-row 和 el-col 组件，用于展示“服务单号”信息。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
|
|
|
|
|
<!--
|
|
|
|
|
el-col 组件用于定义列，:span="6" 表示该列占 6 份（在默认 24 份的栅格系统中），class="form-border form-left-bg font-small" 给该列添加了类名，用于设置边框、背景（可能是左边栏的背景色用于区分左右内容）以及字体大小（较小字体，同样具体样式由对应 CSS 规则定义），文本内容为“服务单号”，作为该信息项的标题显示在左边栏。
|
|
|
|
|
-->
|
|
|
|
|
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
|
|
|
|
|
<!--
|
|
|
|
|
此 el-col 组件占 18 份，用于展示服务单号的具体值，通过插值表达式 {{orderReturnApply.id}} 从 orderReturnApply 对象的 id 属性获取对应的值并渲染显示，class="form-border font-small" 用于设置边框和较小字体样式。
|
|
|
|
|
-->
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第二组 el-row 和 el-col 组件，用于展示“申请状态”信息，结构和功能与展示“服务单号”类似，不同之处在于展示的值通过管道符（|）使用了 formatStatus 过滤器（推测是在 Vue 实例中定义好的，用于对状态值进行格式化处理，比如转换为更友好的文字描述等）。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第三组 el-row 和 el-col 组件，用于展示“订单编号”信息，除了通过插值表达式 {{orderReturnApply.orderSn}} 展示订单编号具体值外，还添加了一个 el-button 组件。
|
|
|
|
|
el-button 组件的 type="text" 表示是文本样式按钮（外观上更简洁，类似普通文本链接效果），size="small" 表示小尺寸按钮，@click="handleViewOrder" 绑定了点击事件，点击该按钮会调用 Vue 实例中定义的 handleViewOrder 方法，用于实现查看订单的相关操作。
|
|
|
|
|
对应列设置了 height 和 line-height 样式来控制高度和行高，使布局更美观。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18" style="height:50px">
|
|
|
|
|
{{orderReturnApply.orderSn}}
|
|
|
|
|
<el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18" style="height:50px">
|
|
|
|
|
{{orderReturnApply.orderSn}}
|
|
|
|
|
<el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第四组 el-row 和 el-col 组件，用于展示“申请时间”信息，通过插值表达式 {{orderReturnApply.createTime | formatTime}} 展示申请时间具体值，使用了 formatTime 过滤器（推测用于将时间格式进行格式化，比如转换为指定的日期时间格式等）。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第五组 el-row 和 el-col 组件，用于展示“用户账号”信息，通过插值表达式 {{orderReturnApply.memberUsername}} 展示用户账号具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第六组 el-row 和 el-col 组件，用于展示“联系人”信息，通过插值表达式 {{orderReturnApply.returnName}} 展示联系人具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第七组 el-row 和 el-col 组件，用于展示“联系电话”信息，通过插值表达式 {{orderReturnApply.returnPhone}} 展示联系电话具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第八组 el-row 和 el-col 组件，用于展示“退货原因”信息，通过插值表达式 {{orderReturnApply.reason}} 展示退货原因具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第九组 el-row 和 el-col 组件，用于展示“问题描述”信息，通过插值表达式 {{orderReturnApply.description}} 展示问题描述具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第十组 el-row 和 el-col 组件，用于展示“凭证图片”信息，el-col 列设置了 height 样式控制高度，内部使用 v-for 指令对 proofPics 数组进行循环遍历（推测 proofPics 是一个包含图片路径等信息的数组），对于每个元素 item，通过 :src="item" 将其作为图片的 src 属性值，展示对应的图片，图片设置了 width 和 height 样式控制大小为 80px×80px。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18" style="height:100px">
|
|
|
|
|
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18" style="height:100px">
|
|
|
|
|
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-container-border">
|
|
|
|
|
</div>
|
|
|
|
|
<!--
|
|
|
|
|
以下又是一个添加了 class="form-container-border" 类名的 div 容器，用于展示另一部分服务单相关信息，内部同样由多个 el-row 和 el-col 组件构成。
|
|
|
|
|
-->
|
|
|
|
|
<div class="form-container-border">
|
|
|
|
|
<!--
|
|
|
|
|
以下是第一组 el-row 和 el-col 组件，用于展示“订单金额”信息，通过插值表达式 ￥{{totalAmount}} 展示订单金额具体值（前面添加“￥”符号表示人民币金额）。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第二组 el-row 和 el-col 组件，用于展示“确认退款金额”信息，除了展示固定的“￥”符号外，还使用了 el-input 组件。
|
|
|
|
|
el-input 组件的 size="small" 表示小尺寸输入框，v-model="updateStatusParam.returnAmount" 使用双向数据绑定，将输入框的值与 Vue 实例中 updateStatusParam 对象的 returnAmount 属性进行绑定，方便数据的获取和更新，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定输入框是否可用（如果状态不是 0 则不可用），并设置了 width 样式控制宽度以及 margin-left 样式控制左边距。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" style="height:52px" :span="18">
|
|
|
|
|
￥
|
|
|
|
|
<el-input size="small" v-model="updateStatusParam.returnAmount"
|
|
|
|
|
:disabled="orderReturnApply.status!==0"
|
|
|
|
|
style="width:200px;margin-left: 10px"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" style="height:52px" :span="18">
|
|
|
|
|
￥
|
|
|
|
|
<el-input size="small" v-model="updateStatusParam.returnAmount"
|
|
|
|
|
:disabled="orderReturnApply.status!==0"
|
|
|
|
|
style="width:200px;margin-left: 10px"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下 v-show="orderReturnApply.status!==3" 指令根据服务单申请状态是否不等于 3 来决定是否显示内部包含的元素，用于在特定状态下展示相关信息，内部是一组与选择收货相关的 el-row 和 el-col 组件。
|
|
|
|
|
-->
|
|
|
|
|
<div v-show="orderReturnApply.status!==3">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" style="height:52px" :span="18">
|
|
|
|
|
<el-select size="small"
|
|
|
|
|
style="width:200px"
|
|
|
|
|
:disabled="orderReturnApply.status!==0"
|
|
|
|
|
v-model="updateStatusParam.companyAddressId">
|
|
|
|
|
<el-option v-for="address in companyAddressList"
|
|
|
|
|
:key="address.id"
|
|
|
|
|
:value="address.id"
|
|
|
|
|
:label="address.addressName">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第一组用于展示“选择收货点”信息的 el-row 和 el-col 组件，el-col 中使用 el-select 组件来创建一个下拉选择框。
|
|
|
|
|
el-select 组件的 size="small" 表示小尺寸下拉框，style="width:200px" 设置宽度，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定下拉框是否可用，v-model="updateStatusParam.companyAddressId" 通过双向数据绑定将选择的值与 Vue 实例中 updateStatusParam 对象的 companyAddressId 属性进行绑定，内部通过 v-for 指令循环遍历 companyAddressList 数组（推测是包含收货点地址信息的数组），为每个元素 address 创建一个 el-option 选项，通过 :key、:value 和 :label 属性分别设置选项的唯一标识、对应的值以及显示的文本内容。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border font-small" style="height:52px" :span="18">
|
|
|
|
|
<el-select size="small"
|
|
|
|
|
style="width:200px"
|
|
|
|
|
:disabled="orderReturnApply.status!==0"
|
|
|
|
|
v-model="updateStatusParam.companyAddressId">
|
|
|
|
|
<el-option v-for="address in companyAddressList"
|
|
|
|
|
:key="address.id"
|
|
|
|
|
:value="address.id"
|
|
|
|
|
:label="address.addressName">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第二组用于展示“收货人姓名”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.name}} 展示收货人姓名具体值（推测 currentAddress 是当前选择或关联的收货地址对象）。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第三组用于展示“所在区域”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress | formatRegion}} 展示所在区域具体值，使用了 formatRegion 过滤器（推测用于对地址区域信息进行格式化处理，使其显示更规范等）。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第四组用于展示“详细地址”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.detailAddress}} 展示详细地址具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<!--
|
|
|
|
|
以下是第五组用于展示“联系电话”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.phone}} 展示联系电话具体值。
|
|
|
|
|
-->
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status!==0">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<!--
|
|
|
|
|
以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status!==0" 根据服务单申请状态是否不等于 0 来决定是否显示的 div 容器，内部包含用于展示“处理人员”“处理时间”“处理备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
|
|
|
|
|
-->
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status!==0">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status===2">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<!--
|
|
|
|
|
以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status===2" 根据服务单申请状态是否等于 2 来决定是否显示的 div 容器，内部包含用于展示“收货人员”“收货时间”“收货备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
|
|
|
|
|
-->
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status===2">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status===0">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">
|
|
|
|
|
<el-input size="small" v-model="updateStatusParam.handleNote" style="width:200px;margin-left: 10px"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-container-border" v-show="orderReturnApply.status===1">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">
|
|
|
|
|
<el-input size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
|
|
|
|
|
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===0">
|
|
|
|
|
<el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
|
|
|
|
|
<el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===1">
|
|
|
|
|
<el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {getApplyDetail,updateApplyStatus} from '@/api/returnApply';
|
|
|
|
|
import {fetchList} from '@/api/companyAddress';
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
|
|
|
|
|
const defaultUpdateStatusParam = {
|
|
|
|
|
companyAddressId: null,
|
|
|
|
|
handleMan: 'admin',
|
|
|
|
|
handleNote: null,
|
|
|
|
|
receiveMan: 'admin',
|
|
|
|
|
receiveNote: null,
|
|
|
|
|
returnAmount: 0,
|
|
|
|
|
status: 0
|
|
|
|
|
};
|
|
|
|
|
const defaultOrderReturnApply = {
|
|
|
|
|
id: null,
|
|
|
|
|
orderId: null,
|
|
|
|
|
companyAddressId: null,
|
|
|
|
|
productId: null,
|
|
|
|
|
orderSn: null,
|
|
|
|
|
createTime: null,
|
|
|
|
|
memberUsername: null,
|
|
|
|
|
returnAmount: null,
|
|
|
|
|
returnName: null,
|
|
|
|
|
returnPhone: null,
|
|
|
|
|
status: null,
|
|
|
|
|
handleTime: null,
|
|
|
|
|
productPic: null,
|
|
|
|
|
productName: null,
|
|
|
|
|
productBrand: null,
|
|
|
|
|
productAttr: null,
|
|
|
|
|
productCount: null,
|
|
|
|
|
productPrice: null,
|
|
|
|
|
productRealPrice: null,
|
|
|
|
|
reason: null,
|
|
|
|
|
description: null,
|
|
|
|
|
proofPics: null,
|
|
|
|
|
handleNote: null,
|
|
|
|
|
handleMan: null,
|
|
|
|
|
receiveMan: null,
|
|
|
|
|
receiveTime: null,
|
|
|
|
|
receiveNote: null
|
|
|
|
|
};
|
|
|
|
|
export default {
|
|
|
|
|
name: 'returnApplyDetail',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 从 @/api/returnApply 文件中导入 getApplyDetail 和 updateApplyStatus 函数，推测这两个函数用于获取服务申请详情以及更新申请状态，可能是与后端 API 进行交互的接口调用函数
|
|
|
|
|
import {getApplyDetail, updateApplyStatus} from '@/api/returnApply';
|
|
|
|
|
// 从 @/api/companyAddress 文件中导入 fetchList 函数，可能用于获取公司地址列表相关数据，同样是和后端 API 交互的函数
|
|
|
|
|
import {fetchList} from '@/api/companyAddress';
|
|
|
|
|
// 从 @/utils/date 文件中导入 formatDate 函数，推测用于对日期格式进行格式化处理
|
|
|
|
|
import {formatDate} from '@/utils/date';
|
|
|
|
|
|
|
|
|
|
// 定义一个名为 defaultUpdateStatusParam 的常量对象，用于设置更新申请状态时的默认参数值
|
|
|
|
|
const defaultUpdateStatusParam = {
|
|
|
|
|
companyAddressId: null,
|
|
|
|
|
handleMan: 'admin',
|
|
|
|
|
handleNote: null,
|
|
|
|
|
receiveMan: 'admin',
|
|
|
|
|
receiveNote: null,
|
|
|
|
|
returnAmount: 0,
|
|
|
|
|
status: 0
|
|
|
|
|
};
|
|
|
|
|
// 定义一个名为 defaultOrderReturnApply 的常量对象，用于设置服务单申请相关信息的默认值，包含了各种可能的字段，如订单编号、创建时间、用户账号等，初始都设为 null 或默认值
|
|
|
|
|
const defaultOrderReturnApply = {
|
|
|
|
|
id: null,
|
|
|
|
|
orderReturnApply: Object.assign({},defaultOrderReturnApply),
|
|
|
|
|
productList: null,
|
|
|
|
|
orderId: null,
|
|
|
|
|
companyAddressId: null,
|
|
|
|
|
productId: null,
|
|
|
|
|
orderSn: null,
|
|
|
|
|
createTime: null,
|
|
|
|
|
memberUsername: null,
|
|
|
|
|
returnAmount: null,
|
|
|
|
|
returnName: null,
|
|
|
|
|
returnPhone: null,
|
|
|
|
|
status: null,
|
|
|
|
|
handleTime: null,
|
|
|
|
|
productPic: null,
|
|
|
|
|
productName: null,
|
|
|
|
|
productBrand: null,
|
|
|
|
|
productAttr: null,
|
|
|
|
|
productCount: null,
|
|
|
|
|
productPrice: null,
|
|
|
|
|
productRealPrice: null,
|
|
|
|
|
reason: null,
|
|
|
|
|
description: null,
|
|
|
|
|
proofPics: null,
|
|
|
|
|
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
|
|
|
|
|
companyAddressList: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.id = this.$route.query.id;
|
|
|
|
|
this.getDetail();
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
totalAmount() {
|
|
|
|
|
if (this.orderReturnApply != null) {
|
|
|
|
|
return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
|
|
|
|
|
} else {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
currentAddress() {
|
|
|
|
|
console.log("currentAddress()");
|
|
|
|
|
let id = this.updateStatusParam.companyAddressId;
|
|
|
|
|
if(this.companyAddressList==null)return {};
|
|
|
|
|
for (let i = 0; i < this.companyAddressList.length; i++) {
|
|
|
|
|
let address = this.companyAddressList[i];
|
|
|
|
|
if (address.id === id) {
|
|
|
|
|
return address;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
filters: {
|
|
|
|
|
formatStatus(status) {
|
|
|
|
|
if (status === 0) {
|
|
|
|
|
return "待处理";
|
|
|
|
|
} else if (status === 1) {
|
|
|
|
|
return "退货中";
|
|
|
|
|
} else if (status === 2) {
|
|
|
|
|
return "已完成";
|
|
|
|
|
} else {
|
|
|
|
|
return "已拒绝";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formatTime(time) {
|
|
|
|
|
if (time == null || time === '') {
|
|
|
|
|
return 'N/A';
|
|
|
|
|
}
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
formatRegion(address) {
|
|
|
|
|
let str = address.province;
|
|
|
|
|
if (address.city != null) {
|
|
|
|
|
str += " " + address.city;
|
|
|
|
|
}
|
|
|
|
|
str += " " + address.region;
|
|
|
|
|
return str;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleViewOrder(){
|
|
|
|
|
this.$router.push({path:'/oms/orderDetail',query:{id:this.orderReturnApply.orderId}});
|
|
|
|
|
},
|
|
|
|
|
getDetail() {
|
|
|
|
|
getApplyDetail(this.id).then(response => {
|
|
|
|
|
console.log("getDetail")
|
|
|
|
|
this.orderReturnApply = response.data;
|
|
|
|
|
this.productList = [];
|
|
|
|
|
this.productList.push(this.orderReturnApply);
|
|
|
|
|
if (this.orderReturnApply.proofPics != null) {
|
|
|
|
|
this.proofPics = this.orderReturnApply.proofPics.split(",")
|
|
|
|
|
}
|
|
|
|
|
//退货中和完成
|
|
|
|
|
if(this.orderReturnApply.status===1||this.orderReturnApply.status===2){
|
|
|
|
|
this.updateStatusParam.returnAmount=this.orderReturnApply.returnAmount;
|
|
|
|
|
this.updateStatusParam.companyAddressId=this.orderReturnApply.companyAddressId;
|
|
|
|
|
}
|
|
|
|
|
this.getCompanyAddressList();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getCompanyAddressList() {
|
|
|
|
|
fetchList().then(response => {
|
|
|
|
|
console.log("getCompanyAddressList()")
|
|
|
|
|
this.companyAddressList = response.data;
|
|
|
|
|
for (let i = 0; i < this.companyAddressList.length; i++) {
|
|
|
|
|
if (this.companyAddressList[i].receiveStatus === 1&&this.orderReturnApply.status===0) {
|
|
|
|
|
this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
|
|
|
|
|
handleNote: null,
|
|
|
|
|
handleMan: null,
|
|
|
|
|
receiveMan: null,
|
|
|
|
|
receiveTime: null,
|
|
|
|
|
receiveNote: null
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 定义并导出一个 Vue 组件，组件名为 returnApplyDetail
|
|
|
|
|
export default {
|
|
|
|
|
name: 'returnApplyDetail',
|
|
|
|
|
// Vue 组件的 data 函数，用于返回组件的初始数据对象
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 用于存储服务单的唯一标识，初始设为 null，可能后续从路由参数等地方获取具体值
|
|
|
|
|
id: null,
|
|
|
|
|
// 通过 Object.assign 创建一个 orderReturnApply 对象的副本，初始值基于 defaultOrderReturnApply 的默认设置，用于存储服务单申请的详细信息
|
|
|
|
|
orderReturnApply: Object.assign({}, defaultOrderReturnApply),
|
|
|
|
|
// 用于存储商品列表相关数据，初始设为 null
|
|
|
|
|
productList: null,
|
|
|
|
|
// 用于存储凭证图片相关数据（可能是图片路径数组等形式），初始设为 null
|
|
|
|
|
proofPics: null,
|
|
|
|
|
// 通过 Object.assign 创建一个 updateStatusParam 对象的副本，初始值基于 defaultUpdateStatusParam 的默认设置，用于存储更新服务单状态时的相关参数
|
|
|
|
|
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
|
|
|
|
|
// 用于存储公司地址列表数据，初始设为 null
|
|
|
|
|
companyAddressList: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// created 生命周期钩子函数，在组件实例创建完成后立即调用
|
|
|
|
|
created() {
|
|
|
|
|
// 从当前路由的查询参数中获取名为 id 的参数值，并赋值给组件的 id 属性，用于后续获取对应服务单详情等操作
|
|
|
|
|
this.id = this.$route.query.id;
|
|
|
|
|
// 调用 getDetail 方法，用于获取服务单的详细信息
|
|
|
|
|
this.getDetail();
|
|
|
|
|
},
|
|
|
|
|
// computed 属性，用于定义计算属性，其值会根据依赖的数据自动计算更新
|
|
|
|
|
computed: {
|
|
|
|
|
// 定义名为 totalAmount 的计算属性，用于计算订单的总金额
|
|
|
|
|
totalAmount() {
|
|
|
|
|
// 先判断 orderReturnApply 对象是否不为 null，避免空指针等问题
|
|
|
|
|
if (this.orderReturnApply!= null) {
|
|
|
|
|
// 根据服务单申请中的商品实际单价（productRealPrice）和商品数量（productCount）相乘来计算总金额
|
|
|
|
|
return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
|
|
|
|
|
} else {
|
|
|
|
|
// 如果 orderReturnApply 为 null，则返回 0 作为默认的总金额值
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 定义名为 currentAddress 的计算属性，用于获取当前选择的公司地址信息
|
|
|
|
|
currentAddress() {
|
|
|
|
|
console.log("currentAddress()");
|
|
|
|
|
// 获取 updateStatusParam 中存储的公司地址 ID
|
|
|
|
|
let id = this.updateStatusParam.companyAddressId;
|
|
|
|
|
// 如果公司地址列表为 null，直接返回一个空对象，避免后续操作出现问题
|
|
|
|
|
if (this.companyAddressList == null) return {};
|
|
|
|
|
// 遍历公司地址列表
|
|
|
|
|
for (let i = 0; i < this.companyAddressList.length; i++) {
|
|
|
|
|
let address = this.companyAddressList[i];
|
|
|
|
|
// 查找与当前存储的地址 ID 匹配的地址对象
|
|
|
|
|
if (address.id === id) {
|
|
|
|
|
return address;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 如果未找到匹配的地址，返回 null
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// filters 属性，用于定义过滤器函数，可在模板中对数据进行格式化处理
|
|
|
|
|
filters: {
|
|
|
|
|
// 定义名为 formatStatus 的过滤器函数，用于将服务单申请状态的数字值转换为对应的文字描述
|
|
|
|
|
formatStatus(status) {
|
|
|
|
|
if (status === 0) {
|
|
|
|
|
return "待处理";
|
|
|
|
|
} else if (status === 1) {
|
|
|
|
|
return "退货中";
|
|
|
|
|
} else if (status === 2) {
|
|
|
|
|
return "已完成";
|
|
|
|
|
} else {
|
|
|
|
|
return "已拒绝";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 定义名为 formatTime 的过滤器函数，用于将时间数据（可能是时间戳等格式）格式化为指定的日期时间字符串格式
|
|
|
|
|
formatTime(time) {
|
|
|
|
|
if (time == null || time === '') {
|
|
|
|
|
return 'N/A';
|
|
|
|
|
}
|
|
|
|
|
let date = new Date(time);
|
|
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
|
|
|
|
},
|
|
|
|
|
// 定义名为 formatRegion 的过滤器函数，用于将地址对象中的省份、城市、区域等信息拼接成一个完整的区域描述字符串
|
|
|
|
|
formatRegion(address) {
|
|
|
|
|
let str = address.province;
|
|
|
|
|
if (address.city!= null) {
|
|
|
|
|
str += " " + address.city;
|
|
|
|
|
}
|
|
|
|
|
str += " " + address.region;
|
|
|
|
|
return str;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// methods 属性，用于定义组件的各种方法，这些方法可以在组件的模板中通过事件绑定等方式调用
|
|
|
|
|
methods: {
|
|
|
|
|
// 定义 handleViewOrder 方法，用于处理查看订单的操作
|
|
|
|
|
handleViewOrder() {
|
|
|
|
|
// 使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到 /oms/orderDetail 路径，并传递当前服务单对应的订单 ID 作为查询参数，以便在订单详情页面展示对应的订单信息
|
|
|
|
|
this.$router.push({path: '/oms/orderDetail', query: {id: this.orderReturnApply.orderId}});
|
|
|
|
|
},
|
|
|
|
|
// 定义 getDetail 方法，用于获取服务单的详细信息
|
|
|
|
|
getDetail() {
|
|
|
|
|
console.log("getDetail")
|
|
|
|
|
// 调用 getApplyDetail 函数（从 API 导入的函数），传入当前服务单的 ID，获取服务单详情数据
|
|
|
|
|
getApplyDetail(this.id).then(response => {
|
|
|
|
|
// 将获取到的服务单详情数据赋值给 orderReturnApply 属性，用于在组件中展示相关信息
|
|
|
|
|
this.orderReturnApply = response.data;
|
|
|
|
|
// 初始化商品列表为空数组
|
|
|
|
|
this.productList = [];
|
|
|
|
|
// 将服务单详情数据作为唯一元素添加到商品列表中，可能后续会有对商品列表进一步处理的逻辑（虽然此处看起来有点奇怪，可能需要根据实际业务需求确认是否合理）
|
|
|
|
|
this.productList.push(this.orderReturnApply);
|
|
|
|
|
// 如果服务单详情中的凭证图片数据（proofPics）不为 null，将其以逗号分隔的字符串形式转换为数组，赋值给 proofPics 属性，方便后续在模板中展示图片等操作
|
|
|
|
|
if (this.orderReturnApply.proofPics!= null) {
|
|
|
|
|
this.proofPics = this.orderReturnApply.proofPics.split(",")
|
|
|
|
|
}
|
|
|
|
|
// 如果服务单申请状态为 1（退货中）或 2（已完成），将服务单详情中的退款金额和公司地址 ID 赋值给更新状态的参数对象，可能用于在对应状态下展示或后续操作中使用这些数据
|
|
|
|
|
if (this.orderReturnApply.status === 1 || this.orderReturnApply.status === 2) {
|
|
|
|
|
this.updateStatusParam.returnAmount = this.orderReturnApply.returnAmount;
|
|
|
|
|
this.updateStatusParam.companyAddressId = this.orderReturnApply.companyAddressId;
|
|
|
|
|
}
|
|
|
|
|
// 调用 getCompanyAddressList 方法，用于获取公司地址列表数据
|
|
|
|
|
this.getCompanyAddressList();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 定义 getCompanyAddressList 方法，用于获取公司地址列表数据
|
|
|
|
|
getCompanyAddressList() {
|
|
|
|
|
console.log("getCompanyAddressList()")
|
|
|
|
|
// 调用 fetchList 函数（从 API 导入的函数）获取公司地址列表数据
|
|
|
|
|
fetchList().then(response => {
|
|
|
|
|
// 将获取到的公司地址列表数据赋值给 companyAddressList 属性，用于在组件中展示相关选项或进行其他关联操作
|
|
|
|
|
this.companyAddressList = response.data;
|
|
|
|
|
// 遍历公司地址列表
|
|
|
|
|
for (let i = 0; i < this.companyAddressList.length; i++) {
|
|
|
|
|
// 如果当前地址的接收状态为 1（具体含义需根据业务定义）且服务单申请状态为 0（待处理），将当前地址的 ID 赋值给更新状态参数对象中的公司地址 ID，可能用于默认选择某个合适的收货地址等操作
|
|
|
|
|
if (this.companyAddressList[i].receiveStatus === 1 && this.orderReturnApply.status === 0) {
|
|
|
|
|
this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 定义 handleUpdateStatus 方法，用于处理更新服务单状态的操作
|
|
|
|
|
handleUpdateStatus(status) {
|
|
|
|
|
// 将传入的状态值赋值给更新状态参数对象的 status 属性，用于后续提交更新请求时使用
|
|
|
|
|
this.updateStatusParam.status = status;
|
|
|
|
|
// 使用 $confirm 组件（可能是 Element UI 等提供的确认框组件）弹出确认提示框，询问用户是否要进行此操作，设置确认按钮文本、取消按钮文本以及提示框类型等属性
|
|
|
|
|
this.$confirm('是否要进行此操作?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
// 如果用户点击确认按钮，调用 updateApplyStatus 函数（从 API 导入的函数），传入服务单 ID 和更新状态参数对象，向后端发送更新服务单状态的请求
|
|
|
|
|
updateApplyStatus(this.id, this.updateStatusParam).then(response => {
|
|
|
|
|
// 使用 $message 组件（可能是 Element UI 等提供的消息提示组件）显示操作成功的提示信息，设置提示信息类型、具体内容以及显示时长等属性
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '操作成功!',
|
|
|
|
|
duration: 1000
|
|
|
|
|
});
|
|
|
|
|
// 使用 $router.back() 方法进行路由回退，回到上一个页面，可能是在操作完成后返回相关列表页面等
|
|
|
|
|
this.$router.back();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleUpdateStatus(status){
|
|
|
|
|
this.updateStatusParam.status=status;
|
|
|
|
|
this.$confirm('是否要进行此操作?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '操作成功!',
|
|
|
|
|
duration:1000
|
|
|
|
|
});
|
|
|
|
|
this.$router.back();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.detail-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 1080px;
|
|
|
|
|
padding: 35px 35px 15px 35px;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.standard-margin {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
.form-border {
|
|
|
|
|
border-right: 1px solid #DCDFE6;
|
|
|
|
|
border-bottom: 1px solid #DCDFE6;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-container-border {
|
|
|
|
|
border-left: 1px solid #DCDFE6;
|
|
|
|
|
border-top: 1px solid #DCDFE6;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-left-bg {
|
|
|
|
|
background: #F2F6FC;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
/* 定义名为 detail-container 的类选择器样式，设置其定位为绝对定位，水平方向铺满整个父容器（left: 0; right: 0;），宽度为 1080 像素，设置内边距以及外边距，用于布局和样式展示，可能是整个服务单详情页面的主要容器样式 */
|
|
|
|
|
.detail-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 1080px;
|
|
|
|
|
padding: 35px 35px 15px 35px;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 定义名为 standard-margin 的类选择器样式，设置顶部外边距为 15 像素，用于给某些元素添加统一的间距，使页面布局更美观 */
|
|
|
|
|
.standard-margin {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 定义名为 form-border 的类选择器样式，设置右边框和下边框为 1 像素的实线，颜色为 #DCDFE6，同时设置内边距，用于给表单相关的元素添加边框和合适的内边距，使其展示更清晰、美观 */
|
|
|
|
|
.form-border {
|
|
|
|
|
border-right: 1px solid #DCDFE6;
|
|
|
|
|
border-bottom: 1px solid #DCDFE6;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 定义名为 form-container-border 的类选择器样式，设置左边框和上边框为 1 像素的实线，颜色为 #DCDFE6，同时设置顶部外边距，用于给包含表单元素的容器添加边框，区分不同的信息块 */
|
|
|
|
|
.form-container-border {
|
|
|
|
|
border-left: 1px solid #DCDFE6;
|
|
|
|
|
border-top: 1px solid #DCDFE6;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 定义名为 form-left-bg 的类选择器样式，设置背景颜色为 #F2F6FC，可能用于给表单左边栏等特定区域设置背景色，起到区分和美化的作用 */
|
|
|
|
|
.form-left-bg {
|
|
|
|
|
background: #F2F6FC;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
