陶杰
2025-01-09 111392f8ae1f27c4cde93bd7974a5f16c8188188
pages/order/after-sale/index.vue
@@ -1,9 +1,29 @@
<template>
  <el-bus-crud ref="crud" v-bind="tableConfig"></el-bus-crud>
  <el-bus-crud ref="crud" v-bind="tableConfig">
    <template #table="{ list }">
      <template v-if="list && list.length > 0">
        <after-sale-table :list="list" @detail="onDetail" @handle="onHandle" />
      </template>
      <el-bus-empty v-else />
    </template>
  </el-bus-crud>
</template>
<script>
import AfterSaleTable from '@/components/order/after-sale-table'
const feeKeys = [
  'feeSupplier',
  'feePlatform',
  'feePartner',
  'feePlatformPack',
  'feePlatformCheck',
  'feePlatformTransport',
  'feePackingTransport',
]
export default {
  components: {
    AfterSaleTable,
  },
  data() {
    return {
      tableConfig: {
@@ -11,48 +31,27 @@
        hasNew: false,
        hasEdit: false,
        hasDelete: false,
        onResetView: (row) => {
          this.$router.push(`${this.$route.path}/view/${row.id}`)
        },
        operationAttrs: {
          width: 120,
          fixed: 'right',
        },
        extraButtons: [
          {
            text: '售后处理',
            show: (row) => row.status === 'PENDING',
            atClick: (row) => {
              this.$router.push(`${this.$route.path}/handle/${row.id}`)
            },
          },
        ],
        columns: [
          { label: '订单号', prop: 'orderNo', minWidth: 150, fixed: 'left' },
          { label: '售后单号', prop: 'salesNo', minWidth: 150 },
          { label: '收货人', prop: 'customer', minWidth: 120 },
          { label: '收货人电话', prop: 'customerTel', minWidth: 120 },
          {
            label: '收货地址',
            formatter: (row) =>
              `${row.customerProvince || ''}${row.customerCity || ''}${
                row.customerRegion || ''
              }${row.customerAddress || ''}`,
            minWidth: 250,
          },
          { label: '订单金额', prop: 'totalOrderAmount', minWidth: 150 },
          { label: '售后理由', prop: 'reason', minWidth: 200 },
          { label: '售后状态', prop: 'statusStr', minWidth: 120 },
          { label: '审核状态', prop: 'auditStatusStr', minWidth: 120 },
          { label: '申请时间', prop: 'createTime', minWidth: 180 },
          { label: '处理时间', prop: 'auditTime', minWidth: 180 },
        ],
        hasExport: true,
        exportUrl: 'flower/api/sales/list/export',
        exportText: '售后导出',
        searchFormAttrs: {
          labelWidth: 'auto',
        },
        beforeRequest: (params) => {
          const searchForm = this.$refs.crud?.$refs?.searchForm
          if (searchForm) {
            const statusComp = searchForm.getComponentById('status')
            if (statusComp) {
              // 组件内部不会修改这个prop直接修改可忽略警告
              statusComp.extraQuery = { ...params, status: '' }
              statusComp.getOtherOptions()
            }
          }
        },
        searchForm: [
          {
            type: 'row',
            id: 'row',
            items: [
              {
                label: '售后状态:',
@@ -60,29 +59,254 @@
                type: 'bus-radio',
                el: {
                  hasAll: true,
                  otherInterfaceUri: 'flower/api/sales/status/count',
                  childType: 'el-radio-button',
                  code: 'SALES_STATUS',
                  filterOptions: (list) => {
                    return list.map((item) => {
                      return {
                        ...item,
                        label: `${item.label}(${item.orderCount})`,
                      }
                    })
                  },
                  // code: 'ORDER_SALES_STATUS',
                },
                default: '',
                default: this.$route.query.status || '',
                span: 24,
                searchImmediately: true,
              },
              {
                label: '审核状态:',
                id: 'auditStatus',
                type: 'bus-radio',
                el: {
                  hasAll: true,
                  childType: 'el-radio-button',
                  code: 'SALES_AUDIT_STATUS',
                on: {
                  optionsChange: (e, updateForm, { currentComp }) => {
                    if (Array.isArray(e[0]) && e[0].length > 0) {
                      const totalCount = e[0].reduce((total, current) => {
                        return (total += current.orderCount)
                      }, 0)
                      // 组件内部不会修改这个prop直接修改可忽略警告
                      currentComp.props = {
                        allLabel: `不限(${totalCount})`,
                      }
                    }
                  },
                },
                default: '',
                span: 24,
                searchImmediately: true,
              },
              { label: '商品名称:', id: 'flowerName', type: 'input' },
              { label: '订单号:', id: 'orderNo', type: 'input' },
              { label: '售后单号:', id: 'salesNo', type: 'input' },
              { label: '收货人姓名:', id: 'customer', type: 'input' },
              { label: '收货人电话:', id: 'customerTel', type: 'input' },
              { label: '供应商:', id: 'supplierName', type: 'input' },
              {
                label: '下单时间:',
                id: 'orderStartDateStr',
                component: 'el-bus-date-range',
                commonFormat: true,
                commonFormatProps: ['orderStartDateStr', 'orderEndDateStr'],
                customClass: 'in-bus-form',
              },
              {
                label: '售后时间:',
                id: 'salesStartDateStr',
                component: 'el-bus-date-range',
                commonFormat: true,
                commonFormatProps: ['salesStartDateStr', 'salesEndDateStr'],
                customClass: 'in-bus-form',
              },
              {
                label: '售后类别',
                id: 'salesType',
                type: 'bus-select-dict',
                el: {
                  code: 'after_sale_type',
                  clearable: true,
                  style: 'width:100%',
                },
              },
            ],
          },
        ],
        form: [
          {
            type: 'row',
            items: [
              { label: '商品名称:', id: 'flowerName', type: 'input' },
              { label: '合伙人加价(元):', id: 'markupPartner', type: 'input' },
              { label: '原价(元):', id: 'price', type: 'input' },
              { label: '券后单价(元):', id: 'realPrice', type: 'input' },
              { label: '券后总金额(元):', id: 'realTotal', type: 'input' },
              { label: '供应商价格(元):', id: 'supplierPrice', type: 'input' },
              { label: '商品数量:', id: 'flowerNum', type: 'input' },
              { label: '申请售后数量:', id: 'num', type: 'input' },
            ],
          },
          {
            type: 'row',
            items: [
              {
                label: '质检总扣款(元):',
                id: 'checkTotalAmount',
                type: 'input',
                span: 24,
                customClass: 'to-red to-bold',
              },
              {
                label: '降级数量:',
                id: 'reduceNum',
                type: 'input',
              },
              {
                label: '降级总金额(元):',
                id: 'reduceAmount',
                type: 'input',
              },
              {
                label: '缺货数量:',
                id: 'lackNum',
                type: 'input',
                span: 24,
              },
              {
                label: '已退总金额(元):',
                id: 'refundTotalAmount',
                type: 'input',
                span: 24,
                customClass: 'to-red to-bold',
              },
            ],
          },
        ],
        extraDialogs: [
          {
            title: '售后处理',
            readonly: true,
            confirmText: '通过',
            cancelText: '不通过',
            confirmButtonAttrs: {
              type: 'success',
            },
            cancelButtonAttrs: {
              type: 'danger',
            },
            dialogAttrs: {
              width: '70%',
            },
            form: [
              {
                type: 'row',
                items: [
                  {
                    label: '供应商(元):',
                    id: 'feeSupplier',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '平台(元):',
                    id: 'feePlatform',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '合伙人(元):',
                    id: 'feePartner',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '打包(元):',
                    id: 'feePlatformPack',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '质检(元):',
                    id: 'feePlatformCheck',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '物流(元):',
                    id: 'feePlatformTransport',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '打包运费(元)(散户):',
                    id: 'feePackingTransport',
                    type: 'input-number',
                    el: { min: 0, precision: 2, controls: false },
                  },
                  {
                    label: '实际总扣款(元):',
                    id: 'tempTotal',
                    component: 'simple-text',
                    readonly: true,
                    forceDisabled: true,
                    el: (row) => ({
                      text: feeKeys
                        .reduce((total, current) => {
                          total += row[current] ?? 0
                          return total
                        }, 0)
                        .toFixed(2),
                    }),
                    span: 24,
                    customClass: 'to-bold-label',
                  },
                  {
                    label: '申请理由:',
                    id: 'reason',
                    type: 'input',
                    el: {
                      type: 'textarea',
                    },
                    readonly: true,
                    span: 24,
                  },
                  {
                    label: '平台回复:',
                    id: 'remarks',
                    type: 'input',
                    el: {
                      type: 'textarea',
                      rows: 6,
                    },
                    rules: {
                      required: true,
                      message: '请输入平台回复',
                      trigger: 'blur',
                    },
                    span: 24,
                  },
                ],
              },
            ],
            atConfirm: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/sales/audit/agree',
                { method: 'post', data: val }
              )
              if (code === 0) {
                this.$message.success('操作成功')
              } else {
                return false
              }
            },
            atCancel: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/sales/audit/reject',
                {
                  method: 'post',
                  data: {
                    id: val.id,
                    remarks: val.remarks,
                  },
                }
              )
              if (code === 0) {
                this.$message.success('操作成功')
              } else {
                return false
              }
            },
          },
        ],
      },
@@ -93,7 +317,48 @@
      title: '售后理赔',
    }
  },
  methods: {
    onDetail(item) {
      this.$router.push(`${this.$route.path}/view/${item.id}`)
    },
    async onHandle(item) {
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/sales/list/view',
        { params: { id: item.id } }
      )
      if (code === 0) {
        feeKeys.forEach((key) => {
          data[key] = data[key] ?? undefined
        })
        this.$refs.crud.$refs.extraDialog[0].show(data)
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    &.to-bold {
      .el-form-item__label,
      .simple-text,
      .el-bus-form-item__normal {
        font-weight: bold;
      }
    }
    &.to-red {
      .el-form-item__label,
      .simple-text,
      .el-bus-form-item__normal {
        color: $danger-color;
      }
    }
    &.to-bold-label {
      .el-form-item__label {
        font-weight: bold;
      }
    }
  }
}
</style>