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

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <template v-if="payData.length">
        <zj-form-container :formAttributes="{ 'label-position': 'top' }">
          <template v-for="(item, index) in payData.length">
            <zj-form-module :title="'支付费用' + (index + 1)" :form-data="payData[index]" :form-items="formItems" />
          </template>
        </zj-form-container>
      </template>
      <el-empty v-else description="暂时没有支付信息"></el-empty>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { listPageV2 } from "@/api/workOrder/appraise";
import { tableDataParsing } from "@/utils/common.js"
import { changeOrderGetOrderList } from "@/api/workOrderPool.js";
export default {
  props: {
    id: {
      type: [String, Number],
      default: null,
    }
  },
  data() {
    return {
      payData: []
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        if (this.id) {
          changeOrderGetOrderList({
            id: this.id
          }).then(res => {
            this.payData = res.data
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    formItems() {
      return [{
        md: 24,
        name: 'slot-component',
        formItemAttributes: {
          label: '维修费用信息',
        },
        render: (h, { props, onInput }) => {
          var { formData } = props
          return (
            <el-descriptions border title="" column={3} colon={false} labelStyle={{ width: '10%' }} contentStyle={{ width: '23.3%' }}>
              <el-descriptions-item label="网点名称">
                {formData.websitName}
              </el-descriptions-item>
              <el-descriptions-item label="工单号">
                {formData.workerOrderId}
              </el-descriptions-item>
              <el-descriptions-item label="流水号">
                {formData.wechatOrder}
              </el-descriptions-item>
              <el-descriptions-item label="工程师名称">
                {formData.workerName}
              </el-descriptions-item>
              <el-descriptions-item label="工程师联系电话">
                {formData.workerMobile}
              </el-descriptions-item>
              <el-descriptions-item label="支付方式">
                微信
              </el-descriptions-item>
              <el-descriptions-item label="客户名称">
                {formData.userName}
              </el-descriptions-item>
              <el-descriptions-item label="电话号码">
                {formData.userMobile}
              </el-descriptions-item>
              <el-descriptions-item label="支付状态">
                {formData.payStatus}
              </el-descriptions-item>
              <el-descriptions-item label="支付总金额">
                {formData.totalAmount}
              </el-descriptions-item>
              <el-descriptions-item label="总手续费">
                {formData.commissionAmount}
              </el-descriptions-item>
              <el-descriptions-item label="支付时间">
                {formData.payTime}
              </el-descriptions-item>
            </el-descriptions>
          )
        }
      }, {
        md: 24,
        name: 'slot-component',
        formItemAttributes: {
          label: '支付明细',
        },
        render: (h, { props, onInput }) => {
          var { formData } = props
          return (
            <zj-table
              columns={[{
                columnAttributes: {
                  label: '费用名称',
                  prop: 'goodsName',
                }
              }, {
                columnAttributes: {
                  label: '单价',
                  prop: 'goodsAmount',
                }
              }, {
                columnAttributes: {
                  label: '数量',
                  prop: 'num',
                }
              }, {
                columnAttributes: {
                  label: '费用金额',
                  prop: 'totalAmount',
                }
              }, {
                columnAttributes: {
                  label: '师傅分账金额',
                  prop: 'workerAmount',
                }
              }, {
                columnAttributes: {
                  label: '师傅手续费',
                  prop: 'workerProceAmount',
                }
              }, {
                columnAttributes: {
                  label: '网点分账金额',
                  prop: 'websitAmount',
                }
              }, {
                columnAttributes: {
                  label: '网点手续费',
                  prop: 'websitProceAmount',
                }
              }]}
              table-data={formData.workerOrderItems}
            />
          )
        }
      }, {
        name: 'el-input',
        md: 24,
        attributes: { disabled: true, type: "textarea", placeholder: '' },
        formItemAttributes: { label: '备注', prop: 'remark' },
      }, {
        md: 24,
        name: 'slot-component',
        formItemAttributes: {
          label: '交易记录',
        },
        render: (h, { props, onInput }) => {
          var { formData } = props
          return (
            <zj-table
              columns={[{
                columnAttributes: {
                  label: 'id',
                  prop: 'orderId',
                }
              }, {
                columnAttributes: {
                  label: '交易类型',
                  prop: 'goodsType',
                }
              }, {
                columnAttributes: {
                  label: '交易金额',
                  prop: 'totalAmount',
                }
              }, {
                columnAttributes: {
                  label: '交易状态',
                  prop: 'payStatus',
                }
              }, {
                columnAttributes: {
                  label: '交易时间',
                  prop: 'payTime',
                }
              }, {
                columnAttributes: {
                  label: '创建时间',
                  prop: 'createTime',
                }
              }]}
              table-data={[formData]}
            />
          )
        }
      }]
    }
  },
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep &>.zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>