ReconciliationDetails.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button">
        <a-button @click="toReturn">返回</a-button>
      </div>
    </div>

    <j-form-container :disabled="true">
      <a-form-model ref="form" :model="model" slot="detail">
        <a-card title="基本信息">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.orderNum" placeholder="订单编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="model.balanceNum">
              <a-form-model-item label="结算单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.balanceNum" placeholder="结算单号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.createTime" placeholder="提交时间"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="买家名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.buyerName" placeholder="买家名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="分利金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.shareMoney" placeholder="分利金额" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.totalMoney" placeholder="订单金额" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.payWayName" placeholder="支付方式" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.orderSourceName" placeholder="订单来源" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.reconciliationStatusName" placeholder="订单状态" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属平台" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.propertyName" placeholder="所属平台" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.communityName" placeholder="所属小区" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商铺名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.shopName" placeholder="商铺名称" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="合作伙伴名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="model.partnersName" placeholder="合作伙伴名称" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>
    <a-card title="操作信息" v-if="recordList.length > 0">
      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
        :dataSource="recordList" :pagination="false" :loading="loading" class="j-table-force-nowrap">
        <span slot="payStatus" slot-scope="text, record">
          <template v-if="record"></template>已付款
        </span>
        <span slot="reconciliationStatus" slot-scope="text, record">
          <a-tag v-if="record.reconciliationStatus === 1">未对账</a-tag>
          <a-tag v-else-if="record.reconciliationStatus === 2">对账待审核</a-tag>
          <a-tag v-else-if="record.reconciliationStatus === 3">已对账</a-tag>
          <a-tag v-else-if="record.reconciliationStatus === 4">对账驳回</a-tag>
        </span>
      </a-table>
    </a-card>
  </a-spin>
</template>

<script>
import { shareBenefitShopByDepId } from '@/api/api'

export default {
  name: 'ReconciliationDetails',
  inject: ['closeCurrent'],
  data() {
    return {
      title: '详情',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      url: {
        queryById: '/property-central/property/propertySettled/queryById',
      },
      loading: false,
      recordList: [],
      columns: [
        {
          title: '操作人',
          dataIndex: 'createBy',
          key: 'createBy',
          align: 'center',
        },
        {
          title: '操作时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
        },
        {
          title: '订单状态',
          dataIndex: 'reconciliationStatus',
          scopedSlots: { customRender: 'reconciliationStatus' },
          key: 'reconciliationStatus',
          align: 'center',
        },
        {
          title: '付款状态',
          dataIndex: 'payStatus',
          scopedSlots: { customRender: 'payStatus' },
          key: 'payStatus',
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          key: 'remarks',
          align: 'center',
        },
      ],
    }
  },
  methods: {
    async getPageDetail() {
      let { result } = await shareBenefitShopByDepId({ id: this.$route.query.id })
      this.recordList = result.list
      this.model = result.shareBenefit
      if (this.model.orderSource == 'miniapp') {
        this.model.orderSourceName = '小程序'
      }
      if (this.model.reconciliationStatus == 1) {
        this.model.reconciliationStatusName = '未对账'
      } else if (this.model.reconciliationStatus == 2) {
        this.model.reconciliationStatusName = '对账待审核'
      } else if (this.model.reconciliationStatus == 3) {
        this.model.reconciliationStatusName = '已对账'
      } else if (this.model.reconciliationStatus == 4) {
        this.model.reconciliationStatusName = '对账驳回'
      }
      if (this.model.payWay == 'payPropertyFee') {
        this.model.payWayName = '抵扣物业费'
      } else if (this.model.payWay == 'refundOrder') {
        this.model.payWayName = '申请退款'
      } else if (this.model.payWay == 'scanQrCodePay') {
        this.model.payWayName = '扫码支付'
      } 
    },
    toReturn() {
      this.closeCurrent()
      this.$router.go(-1)
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.getPageDetail()
    }
  },
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>
<style>
.area-select {
  width: 100% !important;
}
</style>