operation_pc-v2.git

<template>
  <div v-loading="loading" class="base-page-wrapper order-detail">
    <el-bus-title title="订单信息" size="small"></el-bus-title>
    <el-bus-form
      ref="form"
      label-width="auto"
      :content="formContent"
      readonly
    ></el-bus-form>
    <el-bus-title title="商品信息" size="small">
      <template #right>
        <el-button
          v-if="detail.couldCheckRefund"
          type="primary"
          @click="checkRefund"
          >质检退款</el-button
        >
      </template>
    </el-bus-title>
    <el-table :data="goodsList">
      <el-table-column
        label="商品名称"
        prop="flowerName"
        min-width="150"
        fixed="left"
      ></el-table-column>
      <el-table-column
        label="商品分类"
        prop="flowerCategory"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="级别"
        prop="flowerLevelStr"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="颜色"
        prop="flowerColor"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="规格"
        prop="flowerUnit"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="数量"
        prop="num"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="单价(元)"
        prop="price"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="供应商"
        prop="supplierName"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="供应商电话"
        prop="supplierTel"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="集货站"
        prop="stationName"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="花材底价(元)"
        prop="supplierPrice"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="区间加价(元)"
        prop="markupOne"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="平台加价(元)"
        prop="markupTwo"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="合伙人加价(元)"
        prop="markupPartner"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="质检扣款(元)"
        prop="deductAmount"
        min-width="120"
      ></el-table-column>
      <el-table-column label="质检审核" width="220" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="buttonShow(row.replaceNum, row.replaceStatus) === 1"
            type="text"
            @click="checkItem('replace', row, false)"
            >补货</el-button
          >
          <el-button
            v-if="buttonShow(row.replaceNum, row.replaceStatus) === 2"
            type="text"
            @click="checkItem('replace', row, true)"
            >补货详情</el-button
          >
          <el-button
            v-if="buttonShow(row.reduceNum, row.reduceStatus) === 1"
            type="text"
            @click="checkItem('reduce', row, false)"
            >降级</el-button
          >
          <el-button
            v-if="buttonShow(row.reduceNum, row.reduceStatus) === 2"
            type="text"
            @click="checkItem('reduce', row, true)"
            >降级详情</el-button
          >
          <el-button
            v-if="buttonShow(row.lackNum, row.lackStatus) === 1"
            type="text"
            @click="checkItem('lack', row, false)"
            >缺货</el-button
          >
          <el-button
            v-if="buttonShow(row.lackNum, row.lackStatus) === 2"
            type="text"
            @click="checkItem('lack', row, true)"
            >缺货详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <template v-if="afterSaleList && afterSaleList.length > 0">
      <el-bus-title title="售后信息" size="small" class="mt-20"></el-bus-title>
      <el-table :data="afterSaleList">
        <el-table-column label="原因" prop="reason"></el-table-column>
        <el-table-column label="售后时间" prop="createTime"></el-table-column>
        <el-table-column label="处理时间" prop="auditTime"></el-table-column>
        <el-table-column label="处理状态" prop="statusStr"></el-table-column>
        <el-table-column
          label="处理结果"
          prop="auditStatusStr"
        ></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="toDetail(row.id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="text-center mt-20">
      <el-button class="min-w-100" @click="goBack">返回</el-button>
    </div>
    <extra-dialog
      ref="replaceDialog"
      title="补货信息"
      confirm-text="通过"
      cancel-text="不通过"
      :confirm-button-attrs="{ type: 'success' }"
      :cancel-button-attrs="{ type: 'danger' }"
      :form="replaceForm"
      :dialog-attrs="dialogAttrs"
      :form-attrs="formAttrs"
      :at-confirm="onCheckAgree"
      :at-cancel="onCheckReject"
    ></extra-dialog>
    <extra-dialog
      ref="reduceDialog"
      title="降级信息"
      confirm-text="通过"
      cancel-text="不通过"
      :confirm-button-attrs="{ type: 'success' }"
      :cancel-button-attrs="{ type: 'danger' }"
      :form="reduceForm"
      :dialog-attrs="dialogAttrs"
      :form-attrs="formAttrs"
      :at-confirm="onCheckAgree"
      :at-cancel="onCheckReject"
    ></extra-dialog>
    <extra-dialog
      ref="lackDialog"
      title="缺货信息"
      confirm-text="通过"
      cancel-text="不通过"
      :confirm-button-attrs="{ type: 'success' }"
      :cancel-button-attrs="{ type: 'danger' }"
      :form="lackForm"
      :dialog-attrs="dialogAttrs"
      :form-attrs="formAttrs"
      :at-confirm="onCheckAgree"
      :at-cancel="onCheckReject"
    ></extra-dialog>
    <extra-dialog
      ref="refundDialog"
      title="质检退款"
      :form="refundForm"
      :dialog-attrs="{ ...dialogAttrs, width: '70%' }"
      :form-attrs="formAttrs"
      confirm-text="确定退款"
      :at-confirm="onRefundConfirm"
    >
    </extra-dialog>
  </div>
</template>
 
<script>
import CheckAbnormalList from '@/components/order/check-abnormal-list.vue'
const DialogCommonForm = [
  {
    label: '商品名称：',
    id: 'flowerName',
    type: 'input',
    readonly: true,
  },
  {
    label: '级别：',
    id: 'flowerLevelStr',
    type: 'input',
    readonly: true,
  },
  {
    label: '供应商：',
    id: 'supplierName',
    type: 'input',
    readonly: true,
  },
  {
    label: '供应商联系人：',
    id: 'supplierContact',
    type: 'input',
    readonly: true,
  },
  {
    label: '供应商联系电话：',
    id: 'supplierTel',
    type: 'input',
    readonly: true,
  },
  {
    label: '集货站：',
    id: 'stationName',
    type: 'input',
    readonly: true,
  },
  {
    label: '质检人：',
    id: 'createName',
    type: 'input',
    readonly: true,
  },
  {
    label: '备注：',
    id: 'remarks',
    type: 'input',
    span: 24,
    readonly: true,
  },
]
const dialogAuditForm = [
  {
    label: '审核结果：',
    id: 'auditStatusStr',
    type: 'input',
    hidden: (row) => !row.auditStatusStr,
    span: 24,
    readonly: true,
  },
]
export default {
  data() {
    return {
      loading: false,
      detail: {},
      formContent: [
        {
          type: 'row',
          items: [
            { label: '订单号：', id: 'orderNo', type: 'input' },
            { label: '用户账号：', id: 'createName', type: 'input' },
            { label: '收货人：', id: 'customer', type: 'input' },
            { label: '收货人电话：', id: 'customerTel', type: 'input' },
            { label: '收货地址：', id: 'customerWholeAddress', type: 'input' },
            { label: '下单时间：', id: 'createTime', type: 'input' },
            { label: '支付时间：', id: 'paymentTime', type: 'input' },
            { label: '商品金额：', id: 'flowerAmount', type: 'input' },
            { label: '打包费：', id: 'packingFee', type: 'input' },
            { label: '运费：', id: 'transportFee', type: 'input' },
            { label: '订单金额：', id: 'totalAmount', type: 'input' },
            { label: '订单状态：', id: 'statusBackendStr', type: 'input' },
            { label: '合伙人：', id: 'partnerName', type: 'input' },
            { label: '库区：', id: 'warehouseName', type: 'input' },
            { label: '库位：', id: 'warehouseLocationCode', type: 'input' },
          ],
        },
      ],
      goodsList: [],
      afterSaleList: [],
      dialogAttrs: {
        closeOnClickModal: false,
      },
      formAttrs: {
        labelWidth: 'auto',
      },
      replaceForm: [
        {
          type: 'row',
          span: 12,
          items: [
            ...DialogCommonForm,
            {
              label: '补货数量：',
              id: 'num',
              type: 'input',
              readonly: true,
            },
            ...dialogAuditForm,
          ],
        },
      ],
      reduceForm: [
        {
          type: 'row',
          span: 12,
          items: [
            ...DialogCommonForm,
            {
              label: '降级数量：',
              id: 'num',
              type: 'input',
              readonly: true,
              span: 8,
            },
            {
              label: '降级等级：',
              id: 'targetLevelStr',
              type: 'input',
              readonly: true,
              span: 8,
            },
            {
              label: '扣款金额：',
              id: 'deductAmount',
              type: 'input',
              readonly: true,
              span: 8,
            },
            {
              label: '图片：',
              id: 'pictureList',
              type: 'bus-upload',
              el: {
                listType: 'picture-card',
              },
              readonly: true,
              forceDisabled: true,
              span: 24,
              inputFormat: (row) => {
                if ('pictureList' in row) {
                  return row.pictureList
                    ? row.pictureList.map((item) => ({
                        url: item,
                      }))
                    : []
                }
              },
            },
            ...dialogAuditForm,
          ],
        },
      ],
      lackForm: [
        {
          type: 'row',
          span: 12,
          items: [
            ...DialogCommonForm,
            {
              label: '缺货数量：',
              id: 'num',
              type: 'input',
              readonly: true,
            },
            ...dialogAuditForm,
          ],
        },
      ],
      refundForm: [
        {
          label: '退款总计(元)：',
          id: 'deductAmount',
          type: 'input',
          readonly: true,
        },
        {
          label: '异常商品明细：',
          id: 'items',
          component: CheckAbnormalList,
          readonly: true,
          forceDisabled: true,
        },
      ],
    }
  },
  head() {
    return {
      title: '订单详情',
    }
  },
  mounted() {
    this.getDetail()
    this.getGoodsList()
    this.getAfterSaleList()
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async getDetail() {
      this.loading = true
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/order/list/view',
        { params: { id: this.$route.params.id } }
      )
      if (code === 0) {
        data.customerWholeAddress = `${data.customerProvince || ''}${
          data.customerCity || ''
        }${data.customerRegion || ''}${data.customerAddress || ''}`
        this.detail = data
        this.$refs.form.updateForm(data)
      }
      this.loading = false
    },
    async getGoodsList() {
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/order/item/list',
        { params: { id: this.$route.params.id } }
      )
      if (code === 0) {
        this.goodsList = data || []
      }
    },
    async getAfterSaleList() {
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/sales/list',
        { params: { orderId: this.$route.params.id, current: 1, size: 2000 } }
      )
      if (code === 0) {
        this.afterSaleList = data.records || []
      }
    },
    toDetail(id) {
      this.$router.push(`/order/after-sale/view/${id}`)
    },
    // 根据数量以及状态判断按钮显示
    buttonShow(num, status) {
      if (!this.$elBusUtil.isEmpty(num)) {
        return status ? 2 : 1
      }
      return null
    },
    // 获取补货详情
    async replaceDetail(orderItemId) {
      return await this.$elBusHttp.request(
        'flower/api/order/list/check/info/replace',
        { params: { orderItemId } }
      )
    },
    // 获取缺货详情
    async lackDetail(orderItemId) {
      return await this.$elBusHttp.request(
        'flower/api/order/list/check/info/lack',
        { params: { orderItemId } }
      )
    },
    // 获取降级详情
    async reduceDetail(orderItemId) {
      return await this.$elBusHttp.request(
        'flower/api/order/list/check/info/reduce',
        { params: { orderItemId } }
      )
    },
    // 质检（缺货，补货，降级）审核操作
    async checkItem(type, row, readonly) {
      const { code, data } = await this[`${type}Detail`](row.id)
      if (code === 0) {
        this.$refs[`${type}Dialog`].show(
          {
            ...data,
            flowerName: row.flowerName,
            flowerLevelStr: row.flowerLevelStr,
            supplierName: row.supplierName,
            supplierContact: row.supplierContact,
            supplierTel: row.supplierTel,
            stationName: row.stationName,
          },
          readonly ? 'view' : 'edit'
        )
      }
    },
    // 质检审核通过
    async onCheckAgree(val) {
      const { code } = await this.$elBusHttp.request(
        'flower/api/order/list/check/info/agree',
        { params: { id: val.id } }
      )
      if (code === 0) {
        this.$message.success('操作成功')
        this.getDetail()
        this.getGoodsList()
      } else {
        return false
      }
    },
    // 质检审核不通过
    async onCheckReject(val) {
      const { code } = await this.$elBusHttp.request(
        'flower/api/order/list/check/info/reject',
        { params: { id: val.id } }
      )
      if (code === 0) {
        this.$message.success('操作成功')
        this.getDetail()
        this.getGoodsList()
      } else {
        return false
      }
    },
    // 质检退款确认弹窗展示明细
    async checkRefund() {
      const { code, data } = await this.$elBusHttp.request(
        'flower/api/order/list/abnormal/details',
        { params: { id: this.$route.params.id } }
      )
      if (code === 0) {
        this.$refs.refundDialog.show(data)
      }
    },
    // 发起退款
    async onRefundConfirm() {
      const { code } = await this.$elBusHttp.request(
        'flower/api/order/list/abnormal/process',
        { params: { id: this.$route.params.id } }
      )
      if (code === 0) {
        this.$message.success('操作成功')
        this.getDetail()
      } else {
        return false
      }
    },
  },
}
</script>
 
<style lang="scss" scoped>
.order-detail {
  .el-bus-title {
    margin-bottom: 10px;
  }
}
</style>