优化打印 优化退单

src/views/order/components/refundDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-model="isShow" direction="rtl" size="70%">
+    <el-drawer v-model="isShow" direction="rtl" size="80%">
         <template #header>
             <h4>订单号：{{ item.orderNo }}</h4>
         </template>
@@ -21,11 +21,11 @@
                     <el-radio-group v-model="refundType" @change="refundTypeChange">
                         <el-radio-button label="整单退" :value="1" />
                         <el-radio-button label="部分退" :value="2" />
-                        <!-- <el-radio-button label="自定义" :value="3" /> -->
+                        <el-radio-button label="自定义" :value="3" />
                     </el-radio-group>
                     <div class="amount">
-                        <el-input v-model="refundAmount" style="width: 370px;height: 42px;" placeholder="请输入退款金额"
-                            @input="inputChange">
+                        <el-input v-model="refundAmount" style="width: 400px;height: 42px;" :readonly="refundType != 3"
+                            placeholder="请输入退款金额" @input="inputChange">
                             <template #prepend>￥</template>
                             <template #append>最多可退￥{{ formatDecimal(item.payAmount - item.refundAmount, 2) }}</template>
                         </el-input>
@@ -58,7 +58,7 @@
                     </el-table-column>
                     <el-table-column label="退款数量" width="170">
                         <template v-slot="scope">
-                            <el-input-number v-model="scope.row.refund_number" :disabled="refundType == 1" :min="0"
+                            <el-input-number v-model="scope.row.refund_number" :disabled="refundType != 2" :min="0"
                                 :max="formatDecimal(scope.row.num - scope.row.refundNum - scope.row.returnNum, 2, true)"
                                 style="width: 130px;" @change="numberChange">
                             </el-input-number>
@@ -105,13 +105,20 @@
                     <div class="item" v-for="(item, index) in remarkTagList" :key="index" @click="addRmarkHandle(item)">
                         {{ item }}
                     </div>
+                    <div class="item" @click="remark = ''">
+                        <el-icon>
+                            <CircleClose />
+                        </el-icon>
+                        清空
+                    </div>
                 </div>
             </div>
         </template>
         <template #footer>
             <div class="drawer_footer">
                 <div class="btn">
-                    <el-button style="width: 100%;" :loading="loading" @click="handleRefund">手动退款</el-button>
+                    <el-button type="danger" style="width: 100%;" :loading="loading"
+                        @click="handleRefund">手动退款</el-button>
                 </div>
                 <div class="btn">
                     <el-button type="primary" style="width: 100%;" :loading="loading"
@@ -128,7 +135,7 @@ import { ref } from 'vue'
 import { useGlobal } from '@/store/global.js'
 import { formatDecimal, inputFilterFloat } from "@/utils/index.js";
 import { refundOrder, orderPrint } from '@/api/order.js'
-import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import { usePrint } from "@/store/print.js";
 import { useUser } from '@/store/user.js'
 import dayjs from 'dayjs'
@@ -150,7 +157,8 @@ const remarkTagList = ref([
     '等待时间长',
     '支付错误',
     '商品不满意',
-    '服务态度不满意'
+    '服务态度不满意',
+    '打包费'
 ])
 const loading = ref(false)
 
@@ -169,30 +177,18 @@ async function refundHandle(cash = false) {
         let rows = tableRef.value.getSelectionRows()
         if (refundType.value == 2) {
             if (!rows.length) {
-                ElNotification({
-                    title: '错误',
-                    message: '请选择退款商品',
-                    type: 'error',
-                })
+                ElMessage.error('请选择退款商品')
                 return
             }
         }
 
         if (!refundAmount.value) {
-            ElNotification({
-                title: '错误',
-                message: '请请输入退款金额',
-                type: 'error',
-            })
+            ElMessage.error('请请输入退款金额')
             return
         }
 
         if (!remark.value) {
-            ElNotification({
-                title: '错误',
-                message: '请请输入退款原因',
-                type: 'error',
-            })
+            ElMessage.error('请请输入退款原因')
             return
         }
 
@@ -208,11 +204,7 @@ async function refundHandle(cash = false) {
         }
 
         if (refundAmount.value <= 0) {
-            ElNotification({
-                title: '错误',
-                message: '无可退金额',
-                type: 'error',
-            })
+            ElMessage.error('无可退金额')
             return
         }
 
@@ -227,11 +219,7 @@ async function refundHandle(cash = false) {
 
         loading.value = true
         await refundOrder(data)
-        ElNotification({
-            title: '提示',
-            message: '退款成功',
-            type: 'success',
-        })
+        ElMessage.success('退款成功')
         await printRefund(rows)
         isShow.value = false
         emits('success')
@@ -251,7 +239,7 @@ async function printRefund(rows) {
                 loginAccount: store.userInfo.name,
                 carts: [],
                 amount: formatDecimal(+refundAmount.value),
-                remark: item.value.remark,
+                remark: remark.value,
                 orderInfo: item.value,
                 outNumber: item.value.id,
                 createdAt: item.value.createTime,
@@ -274,11 +262,7 @@ async function printRefund(rows) {
         } else {
             // 云打印
             await orderPrint({ id: item.value.id, type: 2 })
-            ElNotification({
-                title: '提示',
-                message: '云打印退款单成功',
-                type: 'success',
-            })
+            ElMessage.success('云打印退款单成功')
         }
     } catch (error) {
         console.log(error);
@@ -307,7 +291,7 @@ const tabSelectChange = _.debounce(function (val) {
 
 // 禁用所有行的选择
 const selectable = (row, index) => {
-    return refundType.value != 1;
+    return refundType.value == 2;
 };
 
 // 初始化抽屉
@@ -385,6 +369,8 @@ function refundTypeChange(val) {
             }
             break;
         case 3:
+            tableRef.value.clearSelection()
+            refundAmount.value = ''
             modify.value = true
             break;
         default:
@@ -466,11 +452,19 @@ defineExpose({
         gap: 10px;
 
         .item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
             padding: 6px 12px;
             border: 1px solid #ddd;
             background-color: #fff;
             border-radius: 4px;
             color: #555;
+
+            &:active {
+                background-color: #ddd;
+            }
         }
     }
 }