zfire-newmall-admin/src/views/workOrder/workOrderPool/detailModule/Payment/index.vue

<template>
  <zj-form-container>
    <!-- 支付费用-安装 -->
    <zj-form-module v-if="~[1, 2, 3, 4].indexOf(this.orderType)" title="支付费用">
      <zj-table
        
        :is-drop="true"
        :columns="paymentColumns"
        :table-data="paymentData"
        :table-attributes="{
          border: true
        }"
      />
      <el-dialog
        :modal="true"
        title="服务支付工单（商品详情）"
        :visible.sync="installDialog"
        width="60%"
        :show-close="true"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
      >
        <zj-table
          
          :is-drop="true"
          :columns="installColumns"
          :table-data="installTableData"
          :table-attributes="{
            border: true
          }"
        />
      </el-dialog>
    </zj-form-module>
    <!-- 支付费用-维修/移机 -->
    <zj-form-module v-else title="支付费用">
      <div class="ZF_header">维修费用信息</div>
      <el-descriptions class="margin-top" :column="3" :border="true" :label-style="{ width: '140px' }">
        <el-descriptions-item>
          <template slot="label"> 流水号 </template>
          {{ info.orderPayStreamWaterId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 操作者名称 </template>
          {{ info.updateBy }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 操作者编号 </template>
          {{ info.insureName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付方式 </template>
          微信支付
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户名称 </template>
          {{ info.customerName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电话号码 </template>
          {{ info.customerMobile }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付状态 </template>
          {{ info.isPay === 'YES' ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付总金额 </template>
          {{ info.payValue }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 总手续费 </template>
          {{ (info.chargeValue || 0) * (info.qty || 0) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付时间 </template>
          {{ info.payTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="~[6].indexOf(this.orderType)">
          <template slot="label"> 移机类型 </template>
          {{ info.insureName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-if="~[6].indexOf(this.orderType)" slot="label"> 匹数 </template>
          {{ info.insureName }}
        </el-descriptions-item>
      </el-descriptions>
      <br>
      <div class="ZF_header">支付明细</div>
      <zj-table
        
        :is-drop="true"
        :columns="repairPaymentColumns"
        :table-data="repairPaymentData"
        :table-attributes="{
          border: true
        }"
      />
      <br>
      <el-descriptions class="margin-top" :column="1" :border="false" :label-style="{ width: '140px' }">
        <el-descriptions-item>
          <template slot="label"> 收费单据 </template>
          <div v-if="info.fileUrl.length > 0">
            <el-image
              v-for="v in info.fileUrl"
              :key="v.fileUrl"
              style="width: 210px; height: 130px; margin-right: 10px"
              :src="$imageUrl + v.fileUrl"
              :preview-src-list="[$imageUrl + v.fileUrl]"
            >
              <div slot="error" style="height: 100%; display: flex; justify-content: center; align-items: center">
                <i>暂无图片</i>
              </div>
            </el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 备注 </template>
          <el-input v-model="info.remark" type="textarea" disabled />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="~[6].indexOf(this.orderType)"
        class="margin-top"
        :column="2"
        :border="false"
        :label-style="{ width: '140px' }"
      >
        <el-descriptions-item>
          <template slot="label"> 支付状态 </template>
          {{ info.isPay === 'YES'? '是':'否'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付时间 </template>
          {{ info.payTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 商户交易号 </template>
          {{ info.outTradeNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 第三方交易号 </template>
          {{ info.transactionId }}
        </el-descriptions-item>
      </el-descriptions>
      <br>
      <div class="ZF_header">交易记录</div>
      <zj-table
        
        :is-drop="true"
        :columns="repairBusinessColumns"
        :table-data="repairBusinessData"
        :table-attributes="{
          border: true
        }"
      />
    </zj-form-module>
  </zj-form-container>
</template>

<script>
export default {
  data() {
    return {
      installDialog: false,
      installTableData: [],
      info: {
        websitName: '',
        orderBaseId: '',
        updateBy: '',
        updateByNumber: '',
        customerName: '',
        customerMobile: '',
        payValue: '',
        chargeValue: '',
        remark: '',
        payTime: '',
        fileUrl: [],
        qty: ''
      },
      paymentData: [],
      repairPaymentData: [],
      repairBusinessData: [],
      washPaymentData: [],
      orderType: ''
    }
  },
  computed: {
    paymentColumns() {
      return [
        {
          columnAttributes: {
            label: '辅材单号',
            prop: 'outTradeNo',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '支付商户单号',
            prop: 'outTradeNo',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '操作网点',
            prop: 'websitName'
          }
        },
        {
          columnAttributes: {
            label: '操作人',
            prop: 'createBy'
          }
        },
        {
          columnAttributes: {
            label: '支付状态',
            prop: 'isPay'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style='padding-left:6px'>{row.isPay == 'YES' ? '已支付' : row.isPay == 'NO' ? '未支付' : ''}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '支付时间',
            prop: 'payTime'
          }
        },
        {
          columnAttributes: {
            label: '金额',
            prop: 'payValue'
          }
        },
        {
          columnAttributes: {
            label: '商品详情',
            prop: 'brandName'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style=''>
                {' '}
                <el-button
                  size='mini'
                  type='text'
                  onClick={async() => {
                    this.installDialog = true
                    this.getOrderPayOutlayDetail(row.orderBaseId, row.orderPayRecordId, 'INSTALL')
                  }}
                >
                  查看详情
                </el-button>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'remark'
          }
        }
      ]
    },
    installColumns() {
      return [
        {
          columnAttributes: {
            label: '商品ID',
            prop: 'orderBaseId',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '商品名称',
            prop: 'goodsName'
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'qty'
          }
        },
        {
          columnAttributes: {
            label: '单价',
            prop: 'price'
          }
        },
        {
          columnAttributes: {
            label: '小计',
            prop: 'totalAmount'
          }
        }
      ]
    },
    repairPaymentColumns() {
      return [
        {
          columnAttributes: {
            label: '费用项目',
            prop: 'goodsName'
          }
        },
        {
          columnAttributes: {
            label: '收取费用',
            prop: 'totalAmount'
          }
        },
        {
          columnAttributes: {
            label: '手续费',
            prop: 'chargeValue'
          }
        },
        {
          columnAttributes: {
            label: '单价',
            prop: 'price'
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'qty'
          }
        },
        {
          columnAttributes: {
            label: '总手续费',
            prop: ''
          },
          render: (h, { row, column, $index }) => {
            return (
              <div>{+row.chargeValue * +row.qty}</div>
            )
          }
        },
      ]
    },
    repairBusinessColumns() {
      return [
        // {
        //   columnAttributes: {
        //     label: 'ID',
        //     prop: 'orderBaseId'
        //   }
        // },
        {
          columnAttributes: {
            label: '交易类型',
            prop: 'tradeType'
          }
        },
        {
          columnAttributes: {
            label: '交易金额',
            prop: 'payValue'
          }
        },
        {
          columnAttributes: {
            label: '原工单流水',
            prop: 'payValue'
          }
        },
        {
          columnAttributes: {
            label: '商户交易号',
            prop: 'outTradeNo'
          }
        },
        {
          columnAttributes: {
            label: '第三方交易号',
            prop: 'transactionId'
          }
        },
        {
          columnAttributes: {
            label: '交易状态',
            prop: 'isPay'
          },
          render: (h, { row, column, $index }) => {
            return (
              <div style='padding-left:6px'>{row.isPay == 'YES' ? '已支付' : row.isPay == 'NO' ? '未支付' : ''}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '交易时间',
            prop: 'payTime'
          }
        },
        {
          columnAttributes: {
            label: '创建时间',
            prop: 'createTime'
          }
        }
        // {
        //   columnAttributes: {
        //     label: '操作',
        //     prop: 'brandName'
        //   },
        //   render: (h, { row, column, $index }) => {
        //     return (
        //       <div style="">
        //         <el-button
        //           size="mini"
        //           type="text"
        //           onClick={async () => {
        //             this.installDialog = true
        //             this.getOrderPayOutlayDetail(row.orderBaseId, row.outTradeNo, 'REPAIR')
        //             this.getOrderPayOutlayFileList(row.orderBaseId, row.outTradeNo)
        //           }}
        //         >
        //           查看详情
        //         </el-button>
        //       </div>
        //     )
        //   }
        // }
      ]
    },
    washPaymentColumns() {
      return [
        {
          columnAttributes: {
            label: '清洗费用名称',
            prop: 'goodsName'
          }
        },
        {
          columnAttributes: {
            label: '单价',
            prop: 'price'
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'qty'
          }
        },
        // {
        //   columnAttributes: {
        //     label: '单位',
        //     prop: 'brandName'
        //   }
        // },
        {
          columnAttributes: {
            label: '收取总费用',
            prop: 'totalAmount'
          }
        },
        {
          columnAttributes: {
            label: '清洗手续费',
            prop: 'chargeValue'
          }
        }
      ]
    }
  },

  methods: {
    init(id, params, orderType) {
      this.orderType = orderType
      this.getOrderPayOutlayList(id)
    },
    getOrderPayOutlayList(id, type) {
      getOrderPayOutlayList({ orderBaseId: id }).then(res => {
        if (~[1, 2, 3, 4].indexOf(this.orderType)) {
          this.paymentData = res.data.filter(k => k.isPay === 'YES')
        } else {
          this.repairBusinessData = res.data.filter(k => k.isPay === 'YES')
          if (this.repairBusinessData && this.repairBusinessData.length) {
            this.info.websitName = this.repairBusinessData[0].websitName
            this.info.orderBaseId = this.repairBusinessData[0].orderBaseId
            this.info.updateBy = this.repairBusinessData[0].updateBy
            this.info.updateByNumber = this.repairBusinessData[0].updateByNumber
            this.info.customerName = this.repairBusinessData[0].customerName
            this.info.customerMobile = this.repairBusinessData[0].customerMobile
            this.info.payValue = this.repairBusinessData[0].payValue
            this.info.payTime = this.repairBusinessData[0].payTime
            this.info.chargeValue = this.repairBusinessData[0].chargeValue
            this.info.qty = this.repairBusinessData[0].qty

            this.info.remark = this.repairBusinessData[0].remark
            this.info.isPay = this.repairBusinessData[0].isPay
            this.info.outTradeNo = this.repairBusinessData[0].outTradeNo
            this.info.transactionId = this.repairBusinessData[0].transactionId

            this.getOrderPayOutlayDetail(id, this.repairBusinessData[0].orderPayRecordId)
            this.getOrderPayOutlayFileList(id, this.repairBusinessData[0].outTradeNo)
          }
        }
      })
    },
    getOrderPayOutlayFileList(orderBaseId, outTradeNo) {
      getOrderPayOutlayFileList({ orderBaseId, outTradeNo }).then(res => {
        if (~[6].indexOf(this.orderType)) {
          this.info.fileUrl = res.data ? res.data : []
        } else {
          this.info.fileUrl = res.data ? [res.data[0].fileUrl] : ''
        }
      })
    },
    getOrderPayOutlayDetail(orderBaseId, orderPayRecordId, type) {
      // {/* INSTALL=安装单 REPAIR=维修单*/}
      getOrderPayOutlayDetail({ orderPayRecordId }).then(res => {
        if (~[1, 2, 3, 4].indexOf(this.orderType)) {
          this.installTableData = res.data
        } else {
          this.repairPaymentData = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ZF_header {
  font-size: 14px;
  margin: 0px 0 8px;
}
</style>
.