ReconciliationDetails.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{title}}</h3>
      <div class="button">
        <a-button @click="onCancel">返回</a-button>
        <a-button type="danger" @click="onExamine('4')" v-if="pageType == '2'">审核驳回</a-button>
        <a-button type="primary" @click="onExamine('3')" v-if="pageType == '2'">审核通过</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" prop="id">
                <a-input v-model="model.id" placeholder="请输入订单编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <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" prop="buyerName">
                <a-input v-model="model.buyerName" placeholder="请输入账户"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="提交人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">
                <a-input v-model="model.createBy" placeholder="请输入提交人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalMoney">
                <a-input-number v-model="model.totalMoney" :min="1" placeholder="请输入订单金额" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payWay">
                <a-input v-model="model.payWay" placeholder="请输入支付方式"></a-input>
              </a-form-model-item>
            </a-col>
            
            <a-col :span="12">
              <a-form-model-item label="订单来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orderSourceName">
                <a-input v-model="model.orderSourceName" placeholder="请输入订单来源"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="订单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reconciliationStatusName">
                <a-input v-model="model.reconciliationStatusName" placeholder="请输入订单状态"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属平台" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
                <a-input v-model="model.propertyName" placeholder="请输入所属平台"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属小区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityName">
                <a-input v-model="model.communityName" placeholder="请输入所属小区"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商铺" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopName">
                <a-input v-model="model.shopName" placeholder="请输入商铺"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="合作伙伴" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partnersName">
                <a-input v-model="model.partnersName" placeholder="请输入所属小区"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }" :wrapperCol="wrapperCol" prop="remarks">
                <a-input v-model="model.remarks" placeholder="请输入备注"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="操作信息">
          <a-row>
            <div>
              <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="false" class="j-table-force-nowrap">
                <span slot="balanceStatus">已付款</span>
              </a-table>
            </div>
          </a-row>
        </a-card>
      </a-form-model>
    </j-form-container>

    <a-modal v-model="remarksVisible" :title="`${remarksModel.reconciliationStatus === '3' ? '通过' : '驳回'}说明`" @ok="submitHandleOk">
      <a-form-model ref="form" :model="remarksModel">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="{ xs: { span: 24 },sm: { span: 3 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 20 } }" prop="remarks">
              <a-textarea placeholder="请输入备注" v-model="remarksModel.remarks" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </a-spin>
</template>

<script>
import { getshareBenefitApi, auditshareBenefitApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { filterDictTextByStatic, FENLICENTRAL_AUDIT_STATUS } from '@/assets/static.js'

const columns = [
  {
    title: '操作者',
    dataIndex: 'createBy',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '订单状态',
    dataIndex: 'reconciliationStatus',
    key: 'reconciliationStatus',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(FENLICENTRAL_AUDIT_STATUS, text)
    }
  },
  {
    title: '付款状态',
    dataIndex: 'balanceStatus',
    key: 'balanceStatus',
    align: 'center',
    scopedSlots: { customRender: 'balanceStatus' }
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
    align: 'center',
  }
]
export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],
  data() {
    return {
      title: '',
      pageType: '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      columns: columns,
      dataSource: [],

      remarksVisible: false,
      remarksModel: {
        remarks: '',
        reconciliationStatus: ''
      }
    }
  },
  methods: {
    async getPageDetail() {
      let { result } = await getshareBenefitApi({ id: this.$route.query.id })
      result.shareBenefit['orderSourceName'] = result.shareBenefit.orderSource === 'miniapp' ? '小程序' : 'pc'
      result.shareBenefit['reconciliationStatusName'] = filterDictTextByStatic(FENLICENTRAL_AUDIT_STATUS, result.shareBenefit.reconciliationStatus)
      this.model = {...result.shareBenefit}
      this.dataSource = [...result.list]
    },
    onCancel() {
      this.closeCurrent()
    },
    onExamine(status) {
      this.remarksModel.reconciliationStatus = status
      this.remarksVisible = true
    },
    submitHandleOk() {
      auditshareBenefitApi({
        id: this.$route.query.id,
        ...this.remarksModel
      }).then((res) => {
        this.$message.success(`${this.remarksModel.reconciliationStatus === '3' ? '审核通过' : '审核驳回'}成功`)
        this.closeCurrent()
      })
    }
  },
  mounted() {
    this.pageType = this.$route.query.type
    if (this.$route.query.type == '1') {
      this.title = '详情'
    } else {
      this.title = '审核'
    }
    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>